☰

Userstyles World EDIT + ADD - Textarea Counter Limit

Adds a character counter to the input field of Userstyle Name (limit of 50 characters) and Userstyle Short description (limit of 160 characters).

  1. // ==UserScript==
  2. // @name              Userstyles World EDIT + ADD - Textarea Counter Limit
  3. // @description       Adds a character counter to the input field of Userstyle Name (limit of 50 characters) and Userstyle Short description (limit of 160 characters).
  4. // @icon              https://external-content.duckduckgo.com/ip3/userstyles.world.ico
  5. // @version           1.5.0
  6. // @author            decembre
  7. // @namespace         https://greatest.deepsurf.us/fr/users/8-decembre
  8. // @match             https://userstyles.world/edit/*
  9. // @match             https://userstyles.world/add
  10. // @grant             GM_addStyle
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Add styles for counters
  17.     GM_addStyle(`
  18.         .test-class {
  19.             font-size: 12px;
  20.             color: silver;
  21.         }
  22.         .charCounter.Title {
  23.             color: gold;
  24.             background: green;
  25.         }
  26.         .charCounter.Title, .charCounter.ShortDescription {
  27.             font-size: 12px;
  28.         }
  29.         .charCounter.Title.normal, .charCounter.ShortDescription.normal {
  30.             border-radius: 5px;
  31.             color: gold;
  32.             background: green;
  33.         }
  34.         .charCounter.Title.too-large, .charCounter.ShortDescription.too-large {
  35.             border-radius: 5px;
  36.             color: glod;
  37.             background: red;
  38.         }
  39.         input#name.normal {
  40.             border: none;
  41.         }
  42.         input#name.too-large {
  43.             border: 1px solid red;
  44.         }
  45.         textarea#description.shortTextarea.normal {
  46.             border: none;
  47.         }
  48.         textarea#description.shortTextarea.too-large {
  49.             border: 1px solid red;
  50.         }
  51.     `);
  52.  
  53.     // Title counter
  54.     var titleCounterContainer = document.createElement('div');
  55.     titleCounterContainer.className = 'test-class';
  56.     var titleText = document.createTextNode('Your Title must be less to 50 characters: ');
  57.     titleCounterContainer.appendChild(titleText);
  58.     var titleCounter = document.createElement('span');
  59.     titleCounter.className = 'charCounter Title normal';
  60.     titleCounterContainer.appendChild(titleCounter);
  61.  
  62.     var titleLabel = document.querySelector('label[for="name"]');
  63.     titleLabel.parentNode.insertBefore(titleCounterContainer, titleLabel.nextSibling);
  64.  
  65.     var titleInputField = document.querySelector('input#name');
  66.     titleInputField.className = 'normal';
  67.     updateTitleCounter();
  68.     titleInputField.addEventListener('input', updateTitleCounter);
  69.  
  70.     function updateTitleCounter() {
  71.         var textLength = titleInputField.value.length;
  72.         titleCounter.textContent = textLength + '/50';
  73.         if (textLength > 50) {
  74.             titleCounter.className = 'charCounter Title too-large';
  75.             titleInputField.className = 'too-large';
  76.         } else {
  77.             titleCounter.className = 'charCounter Title normal';
  78.             titleInputField.className = 'normal';
  79.         }
  80.     }
  81.  
  82.     // Short description counter
  83.     var shortDescriptionCounterContainer = document.createElement('div');
  84.     shortDescriptionCounterContainer.className = 'test-class';
  85.     var shortDescriptionText = document.createTextNode('Your Short description must be less to 160 characters: ');
  86.     shortDescriptionCounterContainer.appendChild(shortDescriptionText);
  87.     var shortDescriptionCounter = document.createElement('span');
  88.     shortDescriptionCounter.className = 'charCounter ShortDescription normal';
  89.     shortDescriptionCounterContainer.appendChild(shortDescriptionCounter);
  90.  
  91.     var shortDescriptionLabel = document.querySelector('label[for="description"]');
  92.     shortDescriptionLabel.parentNode.insertBefore(shortDescriptionCounterContainer, shortDescriptionLabel.nextSibling);
  93.  
  94.     var shortDescriptionInputField = document.querySelector('textarea#description.shortTextarea');
  95.     shortDescriptionInputField.className = 'normal';
  96.     updateShortDescriptionCounter();
  97.     shortDescriptionInputField.addEventListener('input', updateShortDescriptionCounter);
  98.  
  99.     function updateShortDescriptionCounter() {
  100.         var textLength = shortDescriptionInputField.value.length;
  101.         shortDescriptionCounter.textContent = textLength + '/160';
  102.         if (textLength > 300) {
  103.             shortDescriptionCounter.className = 'charCounter ShortDescription too-large';
  104.             shortDescriptionInputField.className = 'too-large';
  105.         } else {
  106.             shortDescriptionCounter.className = 'charCounter ShortDescription normal';
  107.             shortDescriptionInputField.className = 'normal';
  108.         }
  109.     }
  110. })();