MediaWiki:CharCount.js: Difference between revisions
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(); | |||
} | |||
); | |||
}()); | }()); |