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