MediaWiki:CharCount.js: Difference between revisions

Safer nicotine wiki Tobacco Harm Reduction
Jump to navigation Jump to search
(Added identifier)
No edit summary
Line 1: Line 1:
function getID(id) {
$(function () {
return document.getElementById(tpl-CharCount);
var myPlace = document.getElementById('tpl-example-placeholder');
myPlace.innerHTML = (
<!DOCTYPE HTML>
<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()'>


function addNumericOptions(id, min, max, defIndex) {
<h1>Character Count</h1>
var s = getID(id);
 
for (ii=min; ii<=max; ii++) {
<p>This form is useful for planning text and links for a text input area that has a character limit.
var option = document.createElement("option");
 
option.text = ii;
<form id='textForm' oninput='updateOutput()'>
option.value = ii;
 
s.add(option);
<table border=0>
}
<tr>
s.value = defIndex;
<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>


function getMaxChars() {
<h2>Notes</h2>
var maxChar = getID('chars');
return maxChar.value;
}


function getLinkDiscount() {
<table border=1>
checkDiscount = getID('linkAbbreviate');
if (!checkDiscount.checked) return 0;


input = getID('text');
<tr>
sub = getID('linkChars');
<th>Platform</th>
let text = "" + input.value.length;
<th>User Type</th>
text = text.replaceAll('\\n', ' ');
<th>Char Limit</th>
text = text.replaceAll('\\t', ' ');
<th>Link Chars</th>
var subLength = sub.value;
<th>Use these options</th>
var discount = 0;
</tr>
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() {
<tr>
var c = getParamValue('c');
<td>&#120143; (Twitter)</td>
lengthChoice = getID('chars');
<td>CN Unverified</td>
lengthChoice.value = c;
<td>280</td>
var l = getParamValue('l');
<td>-</td>
la = getID('linkAbbreviate');
<td>
if (l!=null) {
<a href='?c=280'>Setup</a>
linkChoice = getID('linkChars');
</td>
linkChoice.value = l;
</tr>
la.checked = true;
} else {
la.checked = false;
}
var text = getID('text');
text.rows = c/25;
}


function getParamValue(name) {
<tr>
var url = window.location.href;
<td>&#120143; (Twitter)</td>
l1 = url.length;
<td>CN Verified</td>
l2 = url.replaceAll('?','').length;
<td>580?</td>
if (l1==l2) {
<td>-</td>
return null;
<td>
}
<a href='?c=580'>Setup</a>
const params = url.split('?')[1]; // the params, hopefully
</td>
const paramValues = params.split('&');
</tr>
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() {
<tr>
ld = getLinkDiscount();
<td>&#120143; (Twitter)</td>
cc = getCharacterCount();
<td>Unverified</td>
ccd = cc-ld;
<td>280</td>
max = getMaxChars();
<td>13</td>
rmn = max-ccd;
<td>
<a href='?c=280&l=13'>Setup</a>
</td>
</tr>


var warningLevel = getID('warningLevel');
<tr>
warningLevel.style.background = "rgb(0,255,0)";
<td>&#120143; (Twitter)</td>
if (rmn<10) {
<td>Verified</td>
warningLevel.style.background = "rgb(255,255,0)";
<td>580</td>
}
<td>13</td>
if (rmn<0) {
<td>
warningLevel.style.background = "rgb(255,0,0)";
<a href='?c=580&l=13'>Setup</a>
}
</td>
var v = "This content uses " + ccd + " characters of " +
</tr>
getMaxChars() + " allowed.  " +
rmn + " characters to spare.";
var o = getID('outputCount');
o.value = v;
}


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


function setup() {
</body>
addNumericOptions('chars', 40, 1000, 280);
</html>
addNumericOptions('linkChars', 0, 100, 13);
);
updateParamValues();
}());
updateOutput();
}

Revision as of 12:27, 8 December 2023

$(function () {
var myPlace = document.getElementById('tpl-example-placeholder');
myPlace.innerHTML = (
<!DOCTYPE HTML>
<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>

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