MediaWiki:CharCount.js: Difference between revisions

Safer nicotine wiki Tobacco Harm Reduction
Jump to navigation Jump to search
No edit summary
(Forgot the identifier)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
$(function () {
$( function () {
var myPlace = document.getElementById('CharCount');
var myPlace = document.getElementById('CharCount');
myPlace.innerHTML = ' <!DOCTYPE HTML>
function getID(id) {
<head>
return document.getElementById(id);
<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>
function addNumericOptions(id, min, max, defIndex) {
<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 127: 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 156: 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 173: 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 193: Line 80:
return null;
return null;
}
}
);
 
$(function updateOutput() {
function updateOutput() {
ld = getLinkDiscount();
ld = getLinkDiscount();
cc = getCharacterCount();
cc = getCharacterCount();
Line 215: 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 227: 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();
}

});