MediaWiki:CharCount.js: Difference between revisions

Safer nicotine wiki Tobacco Harm Reduction
Jump to navigation Jump to search
No edit summary
(Forgot the identifier)
 
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
$(function () {
$( function () {
var myPlace = document.getElementById('tpl-example-placeholder');
var myPlace = document.getElementById('CharCount');
myPlace.innerHTML = (
function getID(id) {
<!DOCTYPE HTML>
return document.getElementById(id);
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
body {
font-family: sans-serif;
}
}
</style>
<script src='CharCount.js'></script>
</head>
<body onload='setup()'>


<h1>Character Count</h1>
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;
}


<p>This form is useful for planning text and links for a text input area that has a character limit.
function getLinkDiscount() {
checkDiscount = getID('linkAbbreviate');
if (!checkDiscount.checked) return 0;


<form id='textForm' oninput='updateOutput()'>
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;
}


<table border=0>
function updateParamValues() {
<tr>
var c = getParamValue('c');
<td colspan=2>
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;
}


Maximum Characters Allowed:
function getParamValue(name) {
<select id="chars" name='chars' size="1">
var url = window.location.href;
</select>
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;
}


<br>Abbreviates Links? <input type='checkbox' id='linkAbbreviate' value='Short Links'>
function updateOutput() {
ld = getLinkDiscount();
cc = getCharacterCount();
ccd = cc-ld;
max = getMaxChars();
rmn = max-ccd;


Characters/Link: <select id="linkChars" size="1">
var warningLevel = getID('warningLevel');
</select>
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;
}


</td>
function getCharacterCount() {
</tr>
input = getID('text');
return input.value.length;
}


<tr>
function setup() {
<td colspan=2>
addNumericOptions('chars', 40, 1000, 280);
<textarea id='text' rows=10 cols=80>
addNumericOptions('linkChars', 0, 100, 13);
</textarea>
updateParamValues();
</td>
updateOutput();
</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>
);
}());

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();
}

});