☰

AO3: [Wrangling] Character Counter when Creating New Tags

find out how long your tag is right as you put it in

  1. // ==UserScript==
  2. // @name           AO3: [Wrangling] Character Counter when Creating New Tags
  3. // @description    find out how long your tag is right as you put it in
  4. // @version        1.1
  5. // @author         Rhine
  6. // @namespace      https://github.com/RhineCloud
  7. // @match          https://*.archiveofourown.org/tags/new
  8. // @match          https://*.archiveofourown.org/tags/*/edit
  9. // @require        https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
  10. // @grant          none
  11. // @license        GPL-3.0 <https://www.gnu.org/licenses/gpl.html>
  12. // ==/UserScript==
  13.  
  14. (function($) {
  15.     // find out which page is open
  16.     var page_url = window.location.pathname;
  17.     // how to find the relevant elements on tag edit pages
  18.     var legend_sel = '#edit_tag [for="tag_syn_string_autocomplete"]';
  19.     var field_sel = '#edit_tag #tag_syn_string_autocomplete';
  20.     // how to find the relevant bits on the new tag page instead
  21.     if (page_url.endsWith('/tags/new')) {
  22.         legend_sel = '#new_tag [for="tag_name"]';
  23.         field_sel = '#new_tag #tag_name';
  24.     }
  25.     var tag_length = 0;
  26.     // add the neutral/default counter text
  27.     $(legend_sel).append('<span style="font-size:0.8em;">&nbsp; (tag&nbsp;length:&nbsp;' +
  28.                          '<span class="counted_length">...</span>)</span>');
  29.     // do this thing once the typing is done
  30.     $(field_sel).on('keyup', function() {
  31.         // find out what was entered
  32.         var tag_input = $(this).val();
  33.         // figure out the length of the input
  34.         if (tag_input) {tag_length = tag_input.length;}
  35.         // insert the length into the counter text
  36.         $('.counted_length').text(tag_length);
  37.         // change the appearance of the field
  38.         // depending on whether the resulting tag would be too long
  39.         if (tag_length > 150) {
  40.             $(this).css({'color':'white',
  41.                          'background-color':'darkred'});
  42.         } else {
  43.             $(this).css({'color':'#222',
  44.                          'background-color':'honeydew'});
  45.         }
  46.     });
  47. })(jQuery);