☰

AO3: [Wrangling] Mark Illegal Characters in Canonicals

Warns about any canonical tag that includes characters which should, per guidelines, be avoided. Checks on new tag, edit tag, search results, wrangle bins, and tag landing pages

  1. // ==UserScript==
  2. // @name         AO3: [Wrangling] Mark Illegal Characters in Canonicals
  3. // @namespace    https://greasyfork.org/en/users/906106-escctrl
  4. // @version      3.0
  5. // @description  Warns about any canonical tag that includes characters which should, per guidelines, be avoided. Checks on new tag, edit tag, search results, wrangle bins, and tag landing pages
  6. // @author       escctrl
  7. // @match        *://*.archiveofourown.org/tags/*
  8. // @license      MIT
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. /* eslint-disable no-multi-spaces */
  13. 'use strict';
  14.  
  15. // utility to reduce verboseness
  16. const q = (s, n=document) => n.querySelector(s);
  17. const qa = (s, n=document) => n.querySelectorAll(s);
  18. const ins = (n, l, html) => n.insertAdjacentHTML(l, html);
  19.  
  20. // stop on retry later or styled Error pages
  21. if ( (q('#main') === null) || (q('#main.system.errors') !== null) ) return;
  22.  
  23. ins(q("head"), 'beforeend', `<style tyle="text/css">
  24.     .illegalChars svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }
  25.     .illegalCharsInline { display: inline-block; padding: 0 !important; margin: 0.1em 0.1em 0.1em 0.5em !important; }
  26.     .illegalCharsInline p { padding: 0.1em 0.3em; fontWeight: normal; }
  27. </style>`);
  28.  
  29. // on every page the way to find the tags to check is slightly different
  30. let main = q('#main');
  31. if (main.classList.contains('tags-wrangle')) checkBinTags();
  32. else if (main.classList.contains('tags-edit') || main.classList.contains('tags-update')) checkEditTag(); // .tags-update after a Save failed
  33. else if (main.classList.contains('tags-show')) checkTag();
  34. else if (main.classList.contains('tags-search')) checkSearchResults();
  35. else if (main.classList.contains('tags-new')) checkAsYouType();
  36.  
  37. // *************** GENERAL FUNCTIONS ***************
  38.  
  39. // a holistic function to check what's not allowed
  40. // running as separate matches because regex alternation can't flag multiple issues on same letter
  41. function hasIllegalChars(string, is_fandom, refNode, befNode = null, inline = false) {
  42.     let testing = { // includes the regex to check (r) and the error message to log (l)
  43.         letter:     { r: /[^\p{Script=Latin}0-9 \-().&/'"|:!#_]/ }, // non-latin (including accented) characters and special chars (with a few exceptions)
  44.         multiap:    { r: /'{2,}/, l: "two ' instead of \"" },       // two apostrophes '' used instead of a quote "
  45.         slash1:     { r: / \//,   l: "space before /" },            // a slash with spaces before or after
  46.         slash2:     { r: /\/ /,   l: "space after /" },
  47.         amp1:       { r: /[^ ]&/, l: "no space before &" },         // an apersand without spaces before and after
  48.         amp2:       { r: /&[^ ]/, l: "no space after &" },
  49.         bracket1:   { r: / \)/,   l: "space before )" },            // opening parenthesis with spaces after, and closing with spaces before
  50.         bracket2:   { r: /\( /,   l: "space after (" },
  51.         multispace: { r: / {2,}/, l: "multiple spaces" },           // multiple spaces after each other
  52.         spbegin:    { r: /^ /,    l: "space at beginning" },        // space at the beginning or end of the string
  53.         spend:      { r: / $/,    l: "space at end" }
  54.     }
  55.     if (is_fandom) { //in fandoms we allow letters, numbers and tone/accent marks of ANY script (not just Latin) and more special characters
  56.         testing.letter.r = /[^\p{L}\p{M}\p{N} \-().&/'"|:!#?_]/;    // any script letters, accent marks, numbers, and more special chars
  57.         delete testing.slash1; delete testing.slash2;
  58.         delete testing.amp1; delete testing.amp2;
  59.     }
  60.  
  61.     let issues = [];
  62.     for (const [key, value] of Object.entries(testing)) {
  63.         let found = string.match(new RegExp(value.r, "gui")); // add flags, run checks
  64.         if (found === null) continue; // skip if nothing's illegal
  65.  
  66.         for (let match of found) { // build the list of readable issues
  67.             if (key === "letter") {
  68.                 if (match === "\t") match = "tab";
  69.                 issues.push(match);
  70.             }
  71.             else issues.push(value.l);
  72.         }
  73.     }
  74.     if (string.split("(").length < string.split(")").length) issues.push("missing a ("); // should have the same number of ( and )
  75.     if (string.split("(").length > string.split(")").length) issues.push("missing a )");
  76.  
  77.     if (issues.length !== 0) insertHeadsUp(issues, refNode, befNode, inline); // write out whatever issues there are
  78. }
  79.  
  80. // print a box to explain the problem
  81. function insertHeadsUp(illegalChars, refNode, befNode, inline) {
  82.  
  83.     // setting up the div to contain the heads-up to the user
  84.     const warningNode = document.createElement("div");
  85.     warningNode.classList.add("notice", "illegalChars");
  86.     if (inline) warningNode.classList.add("illegalCharsInline");
  87.  
  88.     // SVGs from Heroicons https://heroicons.com (MIT license Copyright (c) Tailwind Labs, Inc. https://github.com/tailwindlabs/heroicons/blob/master/LICENSE)
  89.     let icon = `<svg viewBox="0 0 24 24" fill="currentColor"><title>Questionable characters found, please check</title><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 0 1-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 0 1-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 0 1-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584ZM12 18a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" /></svg>`;
  90.     warningNode.innerHTML = `<p>${icon} ${illegalChars.join(", ")}</p>`;
  91.  
  92.     // if that already exists, we're gonna replace it rather than add more divs
  93.     if (refNode.querySelector(".illegalChars")) refNode.replaceChild(warningNode, refNode.querySelector(".illegalChars"));
  94.     else refNode.insertBefore(warningNode, befNode);
  95. }
  96.  
  97. // remove the explain box again
  98. function removeHeadsUp(refNode) {
  99.     if (refNode.querySelector(".illegalChars")) refNode.removeChild(refNode.querySelector(".illegalChars"));
  100. }
  101.  
  102. // *************** PAGE HANDLING FUNCTIONS ***************
  103.  
  104. // New tag page
  105. function checkAsYouType() {
  106.     // debounce, deferred helper functions: Mulan @ https://stackoverflow.com/a/68228099
  107.     function debounce (task, ms) { let t = { promise: null, cancel: _ => void 0 }; return async (...args) => { try { t.cancel(); t = deferred(ms); await t.promise; await task(...args); } catch (_) { } } }
  108.     function deferred (ms) { let cancel, promise = new Promise((resolve, reject) => { cancel = reject; setTimeout(resolve, ms) }); return { promise, cancel } }
  109.  
  110.     // actual checks for illegal characters and tag length
  111.     function checkInput() {
  112.         var checkNode = q("#tag_name");
  113.         removeHeadsUp(checkNode.parentNode); // reset
  114.         if (checkNode.value === "") return;
  115.  
  116.         // which tag type are you trying to create? fandom or anything else?
  117.         const isFandom = q('#tag_type_fandom').checked;
  118.         hasIllegalChars(checkNode.value, isFandom, checkNode.parentNode);
  119.  
  120.         // length counter
  121.         let label = q('dt label[for="tag_name"]');
  122.         label.innerText = "Name (" + checkNode.value.length +")";
  123.  
  124.         // extra special handling: tag length>150 error
  125.         const refNode = checkNode.parentNode;
  126.         if (checkNode.value.length > 150) {
  127.             const errorNode = document.createElement("div");
  128.             errorNode.id = "tooLong";
  129.             errorNode.classList.add("error");
  130.             errorNode.innerHTML = "<p>Sorry, you'll need to trim this down. You're at "+ checkNode.value.length +" characters!</p>";
  131.  
  132.             // if that already exists, we're gonna replace it rather than add more divs
  133.             if (refNode.querySelector("#tooLong")) refNode.replaceChild(errorNode, refNode.querySelector("#tooLong"));
  134.             else refNode.insertBefore(errorNode, null);
  135.         }
  136.         else if (refNode.querySelector("#tooLong")) refNode.removeChild(refNode.querySelector("#tooLong"));
  137.     }
  138.  
  139.     // add the same event listener to all checkbox elements - checkInput is executed immediately (no debounce necessary)
  140.     [ q('#tag_type_fandom'), q('#tag_type_character'), q('#tag_type_relationship'), q('#tag_type_freeform') ].forEach((el) => el.addEventListener("input", checkInput));
  141.     // debounced listener while typing
  142.     q('#tag_name').addEventListener("input", debounce(checkInput, 500));
  143.  
  144.     // on page load, trigger event once. browser remembers previous form selections/input upon page refresh and box would otherwise not appear until another change is made
  145.     q("#tag_name").dispatchEvent(new Event("input"));
  146. }
  147.  
  148. // Landing page
  149. function checkTag() {
  150.     // only if the viewed tags is canonical
  151.     var tagDescr = q(".tag>p").innerText;
  152.     if (tagDescr.indexOf("It's a canonical tag") < 0) return true;
  153.  
  154.     // first the viewed tag itself
  155.     var checkNode = q(".tag .header h2.heading");
  156.     var tagType = tagDescr.match(/This tag belongs to the (.+) Category/i);
  157.     tagType = tagType[1];
  158.     hasIllegalChars(checkNode.innerText, (tagType === "Fandom"), checkNode.parentNode.parentNode, checkNode.parentNode.parentNode.children[1]);
  159.  
  160.     // then the meta and subtags (if any)
  161.     checkNode = qa("div.meta.listbox a.tag, div.sub.listbox a.tag");
  162.     checkNode.forEach((n) => hasIllegalChars(n.innerText, (tagType === "Fandom"), n.parentNode, n.parentNode.children[1], true));
  163.     // it would be really cool if we could check Parent Tags as well, but we can't tell which of those are fandoms vs. anything else
  164. }
  165.  
  166. // Wrangle Bin Page
  167. // sadly we can't tell here at all if we're ever looking at fandoms
  168. function checkBinTags() {
  169.     // this needs a different approach to the logic:
  170.     // don't check show=mergers at all, too repetitive
  171.     var searchParams = new URLSearchParams(window.location.search);
  172.     if (searchParams.get('show') == "mergers") return true;
  173.  
  174.     // create a key -> value pair Map of the table columns, so we know which column to check
  175.     var tableIndexes = new Map();
  176.     qa("#wrangulator table thead th").forEach((th, ix) => tableIndexes.set(th.innerText, ix));
  177.  
  178.     // now we can loop through the list of tags
  179.     var checkNode;
  180.     var checkRows = qa("#wrangulator table tbody tr");
  181.     checkRows.forEach((r) => {
  182.         // if there's a column "Canonical" and the cell says "Yes" then we check the tag itself
  183.         if (tableIndexes.has("Canonical") && r.cells[tableIndexes.get("Canonical")].innerText == "Yes") {
  184.             checkNode = q("label", r.cells[0]);
  185.             hasIllegalChars(checkNode.innerText, (searchParams.get('show') === "fandoms"), checkNode.parentNode);
  186.         }
  187.  
  188.         // if there's a column "Synonym", we check the content of that cell (there'll only be one tag)
  189.         if (tableIndexes.has("Synonym") && r.cells[tableIndexes.get("Synonym")].innerText.trim() !== "") {
  190.             checkNode = q("a", r.cells[tableIndexes.get("Synonym")]);
  191.             hasIllegalChars(checkNode.innerText, (searchParams.get('show') === "fandoms"), checkNode.parentNode);
  192.         }
  193.  
  194.         // if there's a column "Characters", we check the content of that cell (there might be multiple tags)
  195.         if (tableIndexes.has("Characters") && r.cells[tableIndexes.get("Characters")].innerText.trim() !== "") {
  196.             checkNode = qa("a", r.cells[tableIndexes.get("Characters")]);
  197.             checkNode.forEach((n) => hasIllegalChars(n.innerText, false, n.parentNode));
  198.         }
  199.  
  200.         // if there's a column "Metatag", we check the content of that cell (there might be multiple tags)
  201.         if (tableIndexes.has("Metatag") && r.cells[tableIndexes.get("Metatag")].innerText.trim() !== "") {
  202.             checkNode = qa("a", r.cells[tableIndexes.get("Metatag")]);
  203.             checkNode.forEach((n) => hasIllegalChars(n.innerText, (searchParams.get('show') === "fandoms"), n.parentNode));
  204.         }
  205.     });
  206. }
  207.  
  208. // Tag Search
  209. function checkSearchResults() {
  210.     // with search results table userscript enabled
  211.     var checkNodes = qa("table#resulttable .resulttag.canonical a, table#resulttable .resultName.canonical a");
  212.     checkNodes.forEach((n) => hasIllegalChars(n.innerText, (q('.resulttype, .resultType', n.parentNode.parentNode).title.startsWith("Fandom")), n.parentNode, null, true));
  213.  
  214.     // with plain search results page
  215.     checkNodes = qa("ol.tag li span.canonical a.tag");
  216.     checkNodes.forEach((n) => hasIllegalChars(n.innerText, (n.parentNode.firstChild.textContent.trim() == "Fandom:"), n.parentNode.parentNode, null, true));
  217. }
  218.  
  219. // Edit Tag Page
  220. function checkEditTag() {
  221.     const tagCanonical = q('#tag_canonical');
  222.     const tagName = q("#tag_name");
  223.     const tagType = q('#tag_sortable_name') !== null ? "Fandom" : ""; // only fandom tags have the name-for-sorting field
  224.  
  225.     // initial check only if the tag is already canonical
  226.     if (tagCanonical.checked) hasIllegalChars(tagName.value, (tagType === "Fandom"), tagName.parentNode);
  227.  
  228.     // if the tag's canonical status is changed
  229.     tagCanonical.addEventListener("input", (event) => {
  230.         removeHeadsUp(tagName.parentNode);
  231.         if (event.target.checked) hasIllegalChars(tagName.value, (tagType === "Fandom"), tagName.parentNode);
  232.     });
  233.  
  234.     // if this is a synonym, check the canonical tag it's synned to
  235.     const synonym = q('ul.autocomplete .added.tag', tagName.parentNode.parentNode);
  236.     if (synonym !== null) hasIllegalChars(synonym.firstChild.textContent.trim(), (tagType === "Fandom"), synonym.parentNode.parentNode, synonym.parentNode.parentNode.children[1]);
  237.  
  238.     // if this is canonical, check its sub- and metatags
  239.     const metasubs = qa('#parent_MetaTag_associations_to_remove_checkboxes ul li a, #child_SubTag_associations_to_remove_checkboxes ul li a');
  240.     if (metasubs !== null) metasubs.forEach((n) => hasIllegalChars(n.innerText, (tagType === "Fandom"), n.parentNode));
  241.  
  242.     // if this is any other type of tag that's in a fandom, check the fandom tag
  243.     const fandoms = qa('#parent_Fandom_associations_to_remove_checkboxes ul li a');
  244.     if (fandoms !== null) fandoms.forEach((n) => hasIllegalChars(n.innerText, true, n.parentNode));
  245.  
  246.     // if this is a relationship, check the tagged characters
  247.     const chars = qa('#parent_Character_associations_to_remove_checkboxes ul li a');
  248.     if (chars !== null) chars.forEach((n) => hasIllegalChars(n.innerText, false, n.parentNode));
  249. }