MediaWiki:CharCount.js: Difference between revisions

Safer nicotine wiki Tobacco Harm Reduction
Jump to navigation Jump to search
No edit summary
Forgot the identifier
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
$(function () {
$( function () {
$('#CharCount').html(' <!DOCTYPE HTML>
var myPlace = document.getElementById('CharCount');
<head>
function getID(id) {
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
return document.getElementById(id);
<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>
function addNumericOptions(id, min, max, defIndex) {
 
<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) {
return document.getElementById(id);
}
);
$(function addNumericOptions(id, min, max, defIndex) {
var s = getID(id);
var s = getID(id);
for (ii=min; ii<=max; ii++) {
for (ii=min; ii<=max; ii++) {
Line 125: Line 14:
}
}
s.value = defIndex;
s.value = defIndex;
});
}
$(function getMaxChars() {
function getMaxChars() {
var maxChar = getID('chars');
var maxChar = getID('chars');
return maxChar.value;
return maxChar.value;
}
}
);
 
$(function getLinkDiscount() {
function getLinkDiscount() {
checkDiscount = getID('linkAbbreviate');
checkDiscount = getID('linkAbbreviate');
if (!checkDiscount.checked) return 0;
if (!checkDiscount.checked) return 0;
Line 154: Line 43:
return discount;
return discount;
}
}
);
 
$(function updateParamValues() {
function updateParamValues() {
var c = getParamValue('c');
var c = getParamValue('c');
lengthChoice = getID('chars');
lengthChoice = getID('chars');
Line 171: Line 60:
text.rows = c/25;
text.rows = c/25;
}
}
);
 
$(function getParamValue(name) {
function getParamValue(name) {
var url = window.location.href;
var url = window.location.href;
l1 = url.length;
l1 = url.length;
Line 191: Line 80:
return null;
return null;
}
}
);
 
$(function updateOutput() {
function updateOutput() {
ld = getLinkDiscount();
ld = getLinkDiscount();
cc = getCharacterCount();
cc = getCharacterCount();
Line 213: Line 102:
o.value = v;
o.value = v;
}
}
);
 
$(function getCharacterCount() {
function getCharacterCount() {
input = getID('text');
input = getID('text');
return input.value.length;
return input.value.length;
}
}
);
 
$(function setup() {
function setup() {
addNumericOptions('chars', 40, 1000, 280);
addNumericOptions('chars', 40, 1000, 280);
addNumericOptions('linkChars', 0, 100, 13);
addNumericOptions('linkChars', 0, 100, 13);
Line 225: Line 114:
updateOutput();
updateOutput();
}
}
});

Latest revision as of 16:27, 8 December 2023

$( function ()  {
	var myPlace = document.getElementById('CharCount');
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();
}

});