MediaWiki:CharCount.js: Difference between revisions
Jump to navigation
Jump to search
Richardpruen (talk | contribs) No edit summary |
Richardpruen (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
$(function () { | $(function () { | ||
var myPlace = document.getElementById('CharCount'); | var myPlace = document.getElementById('CharCount'); | ||
myPlace.innerHTML =$(function getID(id) { | myPlace.innerHTML = ' <!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>𝕏 (Twitter)</td> | |||
<td>CN Unverified</td> | |||
<td>280</td> | |||
<td>-</td> | |||
<td> | |||
<a href='?c=280'>Setup</a> | |||
</td> | |||
</tr> | |||
<tr> | |||
<td>𝕏 (Twitter)</td> | |||
<td>CN Verified</td> | |||
<td>580?</td> | |||
<td>-</td> | |||
<td> | |||
<a href='?c=580'>Setup</a> | |||
</td> | |||
</tr> | |||
<tr> | |||
<td>𝕏 (Twitter)</td> | |||
<td>Unverified</td> | |||
<td>280</td> | |||
<td>13</td> | |||
<td> | |||
<a href='?c=280&l=13'>Setup</a> | |||
</td> | |||
</tr> | |||
<tr> | |||
<td>𝕏 (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); | |||
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; | 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'); | ||
$(function getParamValue(name) { | text.rows = c/25; | ||
} | |||
); | |||
$(function getParamValue(name) { | |||
var url = window.location.href; | |||
l1 = url.length; | |||
l2 = url.replaceAll('?','').length; | |||
if (l1==l2) { | |||
return null; | 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]; | |||
if ( | |||
} | } | ||
} | } | ||
); | 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(); | |||
} | |||
); | |||
}()); | }()); |
Revision as of 15:41, 8 December 2023
$(function () {
var myPlace = document.getElementById('CharCount');
myPlace.innerHTML = ' <!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>𝕏 (Twitter)</td>
<td>CN Unverified</td>
<td>280</td>
<td>-</td>
<td>
<a href='?c=280'>Setup</a>
</td>
</tr>
<tr>
<td>𝕏 (Twitter)</td>
<td>CN Verified</td>
<td>580?</td>
<td>-</td>
<td>
<a href='?c=580'>Setup</a>
</td>
</tr>
<tr>
<td>𝕏 (Twitter)</td>
<td>Unverified</td>
<td>280</td>
<td>13</td>
<td>
<a href='?c=280&l=13'>Setup</a>
</td>
</tr>
<tr>
<td>𝕏 (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);
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();
}
);
}());