|
|
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> |
| return document.getElementById(id);
| | <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 addNumericOptions(id, min, max, defIndex) {
| | }); |
| var s = getID(id);
| | $(function getMaxChars() { |
| for (ii=min; ii<=max; ii++) {
| | var maxChar = getID('chars'); |
| var option = document.createElement("option");
| | return maxChar.value; |
| option.text = ii;
| | } |
| option.value = ii;
| | ); |
| s.add(option);
| | $(function getLinkDiscount() { |
| }
| | checkDiscount = getID('linkAbbreviate'); |
| s.value = defIndex;
| | if (!checkDiscount.checked) return 0; |
| });
| | |
| $(function getMaxChars() {
| | input = getID('text'); |
| var maxChar = getID('chars');
| | sub = getID('linkChars'); |
| return maxChar.value;
| | let text = "" + input.value.length; |
| }
| | text = text.replaceAll('\\n', ' '); |
| );
| | text = text.replaceAll('\\t', ' '); |
| $(function getLinkDiscount() {
| | var subLength = sub.value; |
| checkDiscount = getID('linkAbbreviate');
| | var discount = 0; |
| if (!checkDiscount.checked) return 0;
| | const parts = input.value.split(" "); |
| | | for (ii=0; ii<parts.length; ii++) { |
| input = getID('text');
| | part = parts[ii]; |
| sub = getID('linkChars');
| | l1 = part.length; |
| let text = "" + input.value.length;
| | l2 = part.replaceAll('http','').length; |
| text = text.replaceAll('\\n', ' ');
| | if (l1>l2) { |
| 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; | | l1 = part.length; |
| l2 = part.replaceAll('http','').length; | | discount+= l1-subLength; |
| if (l1>l2) {
| |
| l1 = part.length;
| |
| discount+= l1-subLength;
| |
| }
| |
| } | | } |
| return discount;
| |
| } | | } |
| ); | | return discount; |
| $(function updateParamValues() {
| | } |
| var c = getParamValue('c');
| | ); |
| lengthChoice = getID('chars');
| | $(function updateParamValues() { |
| lengthChoice.value = c;
| | var c = getParamValue('c'); |
| var l = getParamValue('l');
| | lengthChoice = getID('chars'); |
| la = getID('linkAbbreviate');
| | lengthChoice.value = c; |
| if (l!=null) {
| | var l = getParamValue('l'); |
| linkChoice = getID('linkChars');
| | la = getID('linkAbbreviate'); |
| linkChoice.value = l;
| | if (l!=null) { |
| la.checked = true;
| | linkChoice = getID('linkChars'); |
| } else {
| | linkChoice.value = l; |
| la.checked = false;
| | la.checked = true; |
| }
| | } else { |
| var text = getID('text');
| | la.checked = false; |
| text.rows = c/25;
| |
| } | | } |
| ); | | var text = getID('text'); |
| $(function getParamValue(name) { | | text.rows = c/25; |
| var url = window.location.href;
| | } |
| l1 = url.length;
| | ); |
| l2 = url.replaceAll('?','').length;
| | $(function getParamValue(name) { |
| if (l1==l2) {
| | var url = window.location.href; |
| return null;
| | l1 = url.length; |
| }
| | l2 = url.replaceAll('?','').length; |
| const params = url.split('?')[1]; // the params, hopefully
| | if (l1==l2) { |
| 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; | | return null; |
| } | | } |
| ); | | const params = url.split('?')[1]; // the params, hopefully |
| $(function updateOutput() { | | const paramValues = params.split('&'); |
| ld = getLinkDiscount();
| | for (ii=0; ii<paramValues.length; ii++) { |
| cc = getCharacterCount();
| | paramValue = paramValues[ii]; |
| ccd = cc-ld; | | //alert(paramValue); |
| max = getMaxChars(); | | paramName = paramValue.split('=')[0]; |
| rmn = max-ccd; | | if (paramName==name) { |
|
| | return paramValue.split('=')[1]; |
| 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;
| |
| } | | } |
| ); | | return null; |
| $(function getCharacterCount() {
| | } |
| input = getID('text');
| | ); |
| return input.value.length; | | $(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) { |
| $(function setup() {
| | warningLevel.style.background = "rgb(255,0,0)"; |
| addNumericOptions('chars', 40, 1000, 280); | |
| addNumericOptions('linkChars', 0, 100, 13);
| |
| updateParamValues();
| |
| updateOutput();
| |
| } | | } |
| ); | | 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(); |
| | } |
| | ); |
| }()); | | }()); |