MediaWiki:CharCount.js: Difference between revisions

Safer nicotine wiki Tobacco Harm Reduction
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
$(function () {
$('#CharCount').html(' <!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Char Count</title>
<style>
body {
font-family: sans-serif;
}
</style>
<script src='CharCount.js'></script>
</head>
<body onload='setup()'>
<h1>Character Count</h1>
<p>This form is useful for planning text and links for a text input area that has a character limit.
<form id='textForm' oninput='updateOutput()'>
<table border=0>
<tr>
<td colspan=2>
Maximum Characters Allowed:
<select id="chars" name='chars' size="1">
</select>
<br>Abbreviates Links? <input type='checkbox' id='linkAbbreviate' value='Short Links'>
Characters/Link: <select id="linkChars" size="1">
</select>
</td>
</tr>
<tr>
<td colspan=2>
<textarea id='text' rows=10 cols=80>
</textarea>
</td>
</tr>
<tr>
<td id='warningLevel' style='border: solid 1px black; color: green; width: 20px; height: 20px'>
</td>
<td>
<output id="outputCount" value='0 of ?'>0 of ?</output>
</td>
</tr>
</table>
</form>
<h2>Notes</h2>
<table border=1>
<tr>
<th>Platform</th>
<th>User Type</th>
<th>Char Limit</th>
<th>Link Chars</th>
<th>Use these options</th>
</tr>
<tr>
<td>&#120143; (Twitter)</td>
<td>CN Unverified</td>
<td>280</td>
<td>-</td>
<td>
<a href='?c=280'>Setup</a>
</td>
</tr>
<tr>
<td>&#120143; (Twitter)</td>
<td>CN Verified</td>
<td>580?</td>
<td>-</td>
<td>
<a href='?c=580'>Setup</a>
</td>
</tr>
<tr>
<td>&#120143; (Twitter)</td>
<td>Unverified</td>
<td>280</td>
<td>13</td>
<td>
<a href='?c=280&l=13'>Setup</a>
</td>
</tr>
<tr>
<td>&#120143; (Twitter)</td>
<td>Verified</td>
<td>580</td>
<td>13</td>
<td>
<a href='?c=580&l=13'>Setup</a>
</td>
</tr>
</table>
</body>
</html> ';
$(function getID(id) {
$(function getID(id) {
return document.getElementById(id);
return document.getElementById(id);
Line 225: Line 112:
updateOutput();
updateOutput();
}
}
);
$(function () {
$('#CharCount').html(
'<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Char Count</title>
<style>
body {
font-family: sans-serif;
}
</style>
<script src='CharCount.js'></script>
</head>
<body onload='setup()'>
<h1>Character Count</h1>
<p>This form is useful for planning text and links for a text input area that has a character limit.
<form id='textForm' oninput='updateOutput()'>
<table border=0>
<tr>
<td colspan=2>
Maximum Characters Allowed:
<select id="chars" name='chars' size="1">
</select>
<br>Abbreviates Links? <input type='checkbox' id='linkAbbreviate' value='Short Links'>
Characters/Link: <select id="linkChars" size="1">
</select>
</td>
</tr>
<tr>
<td colspan=2>
<textarea id='text' rows=10 cols=80>
</textarea>
</td>
</tr>
<tr>
<td id='warningLevel' style='border: solid 1px black; color: green; width: 20px; height: 20px'>
</td>
<td>
<output id="outputCount" value='0 of ?'>0 of ?</output>
</td>
</tr>
</table>
</form>
<h2>Notes</h2>
<table border=1>
<tr>
<th>Platform</th>
<th>User Type</th>
<th>Char Limit</th>
<th>Link Chars</th>
<th>Use these options</th>
</tr>
<tr>
<td>&#120143; (Twitter)</td>
<td>CN Unverified</td>
<td>280</td>
<td>-</td>
<td>
<a href='?c=280'>Setup</a>
</td>
</tr>
<tr>
<td>&#120143; (Twitter)</td>
<td>CN Verified</td>
<td>580?</td>
<td>-</td>
<td>
<a href='?c=580'>Setup</a>
</td>
</tr>
<tr>
<td>&#120143; (Twitter)</td>
<td>Unverified</td>
<td>280</td>
<td>13</td>
<td>
<a href='?c=280&l=13'>Setup</a>
</td>
</tr>
<tr>
<td>&#120143; (Twitter)</td>
<td>Verified</td>
<td>580</td>
<td>13</td>
<td>
<a href='?c=580&l=13'>Setup</a>
</td>
</tr>
</table>
</body>
</html>');

Revision as of 15:55, 8 December 2023

$(function getID(id) {
	return document.getElementById(id);
}
);
$(function addNumericOptions(id, min, max, defIndex) {
	var s = getID(id);
	for (ii=min; ii<=max; ii++) {
		var option =  document.createElement("option");
		option.text = ii;
		option.value = ii;
		s.add(option);
	}
s.value = defIndex;
});
$(function getMaxChars() {
	var maxChar = getID('chars');
	return maxChar.value;
}
);
$(function getLinkDiscount() {
	checkDiscount = getID('linkAbbreviate');
	if (!checkDiscount.checked) return 0;

	input = getID('text');
	sub = getID('linkChars');
	let text = "" + input.value.length;
	text = text.replaceAll('\\n', ' ');
	text = text.replaceAll('\\t', ' ');
	var subLength = sub.value;
	var discount = 0;
	const parts = input.value.split(" ");
	for (ii=0; ii<parts.length; ii++) {
		part = parts[ii];
		l1 = part.length;
		l2 = part.replaceAll('http','').length;
		if (l1>l2) {
			l1 = part.length;
			discount+= l1-subLength;
		}
	}
	return discount;
}
);
$(function updateParamValues() {
	var c = getParamValue('c');
	lengthChoice = getID('chars');
	lengthChoice.value = c;
	var l = getParamValue('l');
	la = getID('linkAbbreviate');
	if (l!=null) {
		linkChoice = getID('linkChars');
		linkChoice.value = l;
		la.checked = true;
	} else {
		la.checked = false;
	}
	var text = getID('text');
	text.rows = c/25;
}
);
$(function getParamValue(name) {
	var url = window.location.href;
	l1 = url.length;
	l2 = url.replaceAll('?','').length;
	if (l1==l2) {
		return null;
	}
	const params = url.split('?')[1]; // the params, hopefully
	const paramValues = params.split('&');
	for (ii=0; ii<paramValues.length; ii++) {
		paramValue = paramValues[ii];
		//alert(paramValue);
		paramName = paramValue.split('=')[0];
		if (paramName==name) {
			return paramValue.split('=')[1];
		}
	}
	return null;
}
);
$(function updateOutput() {
	ld = getLinkDiscount();
	cc = getCharacterCount();
	ccd = cc-ld;
	max = getMaxChars();
	rmn = max-ccd;

	var warningLevel = getID('warningLevel');
	warningLevel.style.background = "rgb(0,255,0)";
	if (rmn<10) {
		warningLevel.style.background = "rgb(255,255,0)";
	}
	if (rmn<0) {
		warningLevel.style.background = "rgb(255,0,0)";
	}
	var v = "This content uses " + ccd + " characters of " +
		getMaxChars() +	" allowed.  " +
		rmn + " characters to spare.";
	var o = getID('outputCount');
	o.value = v;
}
);
$(function getCharacterCount() {
	input = getID('text');
	return input.value.length;
}
);
$(function setup() {
	addNumericOptions('chars', 40, 1000, 280);
	addNumericOptions('linkChars', 0, 100, 13);
	updateParamValues();
	updateOutput();
}
);

$(function () {
	$('#CharCount').html(
	'<!DOCTYPE HTML>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Char Count</title>
	<style>
	body {
		font-family: sans-serif;
	}
	</style>
	<script src='CharCount.js'></script>
	</head>
	<body onload='setup()'>
	
	<h1>Character Count</h1>
	
	<p>This form is useful for planning text and links for a text input area that has a character limit.
	
	<form id='textForm' oninput='updateOutput()'>
	
	<table border=0>
	<tr>
	<td colspan=2>
	
	Maximum Characters Allowed:
	<select id="chars" name='chars' size="1">
	</select>
	
	<br>Abbreviates Links? <input type='checkbox' id='linkAbbreviate' value='Short Links'>
	
	Characters/Link: <select id="linkChars" size="1">
	</select>
	
	</td>
	</tr>
	
	<tr>
	<td colspan=2>
	<textarea id='text' rows=10 cols=80>
	</textarea>
	</td>
	</tr>
	
	<tr>
	
	<td id='warningLevel' style='border: solid 1px black; color: green; width: 20px; height: 20px'>
	</td>
	
	<td>
	<output id="outputCount" value='0 of ?'>0 of ?</output>
	</td>
	</tr>
	
	</table>
	
	</form>
	
	<h2>Notes</h2>
	
	<table border=1>
	
	<tr>
	<th>Platform</th>
	<th>User Type</th>
	<th>Char Limit</th>
	<th>Link Chars</th>
	<th>Use these options</th>
	</tr>
	
	<tr>
	<td>&#120143; (Twitter)</td>
	<td>CN Unverified</td>
	<td>280</td>
	<td>-</td>
	<td>
	<a href='?c=280'>Setup</a>
	</td>
	</tr>
	
	<tr>
	<td>&#120143; (Twitter)</td>
	<td>CN Verified</td>
	<td>580?</td>
	<td>-</td>
	<td>
	<a href='?c=580'>Setup</a>
	</td>
	</tr>
	
	<tr>
	<td>&#120143; (Twitter)</td>
	<td>Unverified</td>
	<td>280</td>
	<td>13</td>
	<td>
	<a href='?c=280&l=13'>Setup</a>
	</td>
	</tr>
	
	<tr>
	<td>&#120143; (Twitter)</td>
	<td>Verified</td>
	<td>580</td>
	<td>13</td>
	<td>
	<a href='?c=580&l=13'>Setup</a>
	</td>
	</tr>
	
	</table>
	
	</body>
	</html>');