☰

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

当前为 2023-11-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         AO3: [Wrangling] Mark Illegal Characters in Canonicals
  3. // @namespace    https://greasyfork.org/en/users/906106-escctrl
  4. // @version      1.4
  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. (function() {
  13.     'use strict';
  14.  
  15.     // we wanna check on a bunch of different pages, and everywhere the check is slightly different
  16.  
  17.     var page_url = window.location.pathname;
  18.     // just in case the URL ended with a / we get rid of that
  19.     // that usually doesn't happen from AO3 links on the site, but may be how browsers store bookmarks or history
  20.     if (page_url.endsWith("/")) { page_url = page_url.slice(0, page_url.length-1); }
  21.  
  22.     if (page_url == "/tags/new") checkAsYouType(); // New Tag page
  23.     else if (page_url == "/tags/search") checkSearchResults(); // Tag Search page
  24.     else if (page_url.match(/^\/tags\/.+\/edit$/gi)) checkEditTag(); // Edit page
  25.     else if (page_url.match(/^\/tags\/.+\/wrangle$/gi)) checkBinTags(); // Wrangle page
  26.     else if (page_url.match(/^\/tags\/[^\/]+$/gi)) checkTag(); // Tag Landing page
  27.       // that excludes anything including another slash, which would only incorrectly match on tags/new and tags/search
  28.       // but those would have already jumped into the other functions and would never get here
  29. })();
  30.  
  31. // *************** GENERAL FUNCTIONS ***************
  32.  
  33. // a holistic function to check
  34. // not allowed: non-latin (including accented) characters and special chars (with a few exceptions)
  35. //              two apostrophes '' (used instead of a quote ")
  36. //              space at the beginning or end of the string
  37. //              multiple spaces after each other
  38. // this returns the matched characters in an array
  39. function hasIllegalChars(string) {
  40.     return string.match(/[^\p{Script=Latin}0-9 \-().&/'"|:!]|'{2,}| {2,}|^ | $/gui);
  41. }
  42.  
  43. // similar to above, but in fandoms we allow letters, numbers and tone/accent marks of ANY script, not just Latin
  44. // also more special characters are allowed
  45. function hasFandomIllegalChars(string) {
  46.     return string.match(/[^\p{L}\p{M}\p{N} \-().&/'"|:!#?_]|'{2,}| {2,}|^ | $/gui);
  47. }
  48.  
  49. // print a box to explain the problem
  50. function insertHeadsUp(illegalChars, refNode, befNode = null, inline = false) {
  51.     // describe non-printable chars and other hard to identify issues
  52.     illegalChars.forEach((val, ix) => {
  53.         if (val == "''") illegalChars[ix] = "2 single quotes";
  54.         else if (val.trim() == "")
  55.             illegalChars[ix] = (val == "\t") ? "tab" :
  56.                                (val === " " && ix === 0) ? "space in front" :
  57.                                (val === " " && ix == illegalChars.length-1) ? "space at end" :
  58.                                "multiple spaces";
  59.     });
  60.     // setting up the div to contain the heads-up to the user
  61.     const warningNode = document.createElement("div");
  62.     warningNode.id = "illegalChars";
  63.     warningNode.classList.add("notice");
  64.  
  65.     warningNode.innerHTML = "<p>Questionable characters: " + illegalChars.join(", ") + "</p>";
  66.  
  67.     if (inline) {
  68.         warningNode.style.display = "inline-block";
  69.         warningNode.style.padding = "0";
  70.         warningNode.style.margin = "0.1em 0.1em 0.1em 0.5em";
  71.         warningNode.children[0].style.padding = "0.1em 0.3em";
  72.         warningNode.children[0].style.fontWeight = "normal";
  73.     }
  74.  
  75.     // if that already exists, we're gonna replace it rather than add more divs
  76.     if (refNode.querySelector("#illegalChars")) refNode.replaceChild(warningNode, refNode.querySelector("#illegalChars"));
  77.     else refNode.insertBefore(warningNode, befNode);
  78. }
  79.  
  80. // remove the explain box again
  81. function removeHeadsUp(refNode) {
  82.     if (refNode.querySelector("#illegalChars")) refNode.removeChild(refNode.querySelector("#illegalChars"));
  83. }
  84.  
  85. // *************** PAGE HANDLING FUNCTIONS ***************
  86.  
  87. // New tag page
  88. function checkAsYouType() {
  89.     // a little JS magic to quickly add the same event listener to all elements
  90.     [ document.getElementById("tag_name"),
  91.       document.getElementById('tag_type_fandom'),
  92.       document.getElementById('tag_type_character'),
  93.       document.getElementById('tag_type_relationship'),
  94.       document.getElementById('tag_type_freeform')
  95.     ].forEach((el) => {
  96.         el.addEventListener("input", () => {
  97.             var checkNode = document.getElementById("tag_name");
  98.  
  99.             // which tag type are you trying to create? fandom or anything else?
  100.             const isFandom = document.getElementById('tag_type_fandom').checked;
  101.             var issues = (isFandom) ? hasFandomIllegalChars(checkNode.value) : hasIllegalChars(checkNode.value);
  102.             if (issues !== null) insertHeadsUp(issues, checkNode.parentNode);
  103.             else removeHeadsUp(checkNode.parentNode);
  104.  
  105.             // extra special handling: tag length>100 error
  106.             const refNode = checkNode.parentNode;
  107.             if (checkNode.value.length > 100) {
  108.                 const errorNode = document.createElement("div");
  109.                 errorNode.id = "tooLong";
  110.                 errorNode.classList.add("error");
  111.                 errorNode.innerHTML = "<p>Sorry, you'll need to trim this down. You're at "+ checkNode.value.length +" characters!</p>";
  112.  
  113.                 // if that already exists, we're gonna replace it rather than add more divs
  114.                 if (refNode.querySelector("#tooLong")) refNode.replaceChild(errorNode, refNode.querySelector("#tooLong"));
  115.                 else refNode.insertBefore(errorNode, null);
  116.             }
  117.             else if (refNode.querySelector("#tooLong")) refNode.removeChild(refNode.querySelector("#tooLong"));
  118.         });
  119.     });
  120.     // 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
  121.     document.getElementById("tag_name").dispatchEvent(new Event("input"));
  122. }
  123.  
  124. // Landing page
  125. function checkTag() {
  126.     // only if the viewed tags is canonical
  127.     var tagDescr = document.querySelector(".tag>p").innerText;
  128.     if (tagDescr.indexOf("It's a common tag") < 0) return true;
  129.  
  130.     // first the viewed tag itself
  131.     var checkNode = document.querySelector(".tag .header h2.heading");
  132.     var tagType = tagDescr.match(/This tag belongs to the (.+) Category/i);
  133.     tagType = tagType[1];
  134.     var issues = (tagType == "Fandom") ? hasFandomIllegalChars(checkNode.innerText) : hasIllegalChars(checkNode.innerText);
  135.     if (issues !== null) insertHeadsUp(issues, checkNode.parentNode.parentNode, checkNode.parentNode.parentNode.children[1]);
  136.  
  137.     // then the meta and subtags (if any)
  138.     checkNode = document.querySelectorAll("div.meta.listbox a.tag, div.sub.listbox a.tag");
  139.     checkNode.forEach((n) => {
  140.         var issues = (tagType == "Fandom") ? hasFandomIllegalChars(n.innerText) : hasIllegalChars(n.innerText);
  141.         if (issues !== null) insertHeadsUp(issues, n.parentNode, n.parentNode.children[1], true);
  142.     });
  143.     // 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
  144. }
  145.  
  146. // Wrangle Bin Page
  147. // sadly we can't tell here at all if we're ever looking at fandoms
  148. function checkBinTags() {
  149.     // this needs a different approach to the logic:
  150.     // don't check show=mergers at all, too repetitive
  151.     var searchParams = new URLSearchParams(window.location.search);
  152.     if (searchParams.get('show') == "mergers") return true;
  153.  
  154.     // create a key -> value pair Map of the table columns, so we know which column to check
  155.     var tableIndexes = new Map();
  156.     document.querySelectorAll("#wrangulator table thead th").forEach((th, ix) => {
  157.         tableIndexes.set(th.innerText, ix);
  158.     });
  159.  
  160.     // now we can loop through the list of tags
  161.     var issues, checkNode;
  162.     var checkRows = document.querySelectorAll("#wrangulator table tbody tr");
  163.     checkRows.forEach((r) => {
  164.         // if there's a column "Canonical" and the cell says "Yes" then we check the tag itself
  165.         if (tableIndexes.has("Canonical") && r.cells[tableIndexes.get("Canonical")].innerText == "Yes") {
  166.             checkNode = r.cells[0].querySelector("label");
  167.             issues = hasIllegalChars(checkNode.innerText);
  168.             if (issues !== null) insertHeadsUp(issues, checkNode.parentNode);
  169.         }
  170.  
  171.         // if there's a column "Synonym", we check the content of that cell (there'll only be one tag)
  172.         if (tableIndexes.has("Synonym") && r.cells[tableIndexes.get("Synonym")].innerText.trim() !== "") {
  173.             checkNode = r.cells[tableIndexes.get("Synonym")].querySelector("a");
  174.             issues = hasIllegalChars(checkNode.innerText);
  175.             if (issues !== null) insertHeadsUp(issues, checkNode.parentNode);
  176.         }
  177.  
  178.         // if there's a column "Characters", we check the content of that cell (there might be multiple tags)
  179.         if (tableIndexes.has("Characters") && r.cells[tableIndexes.get("Characters")].innerText.trim() !== "") {
  180.             checkNode = r.cells[tableIndexes.get("Characters")].querySelectorAll("a");
  181.             checkNode.forEach((n) => {
  182.                 issues = hasIllegalChars(n.innerText);
  183.                 if (issues !== null) insertHeadsUp(issues, n.parentNode);
  184.             });
  185.         }
  186.  
  187.         // if there's a column "Metatag", we check the content of that cell (there might be multiple tags)
  188.         if (tableIndexes.has("Metatag") && r.cells[tableIndexes.get("Metatag")].innerText.trim() !== "") {
  189.             checkNode = r.cells[tableIndexes.get("Metatag")].querySelectorAll("a");
  190.             checkNode.forEach((n) => {
  191.                 issues = hasIllegalChars(n.innerText);
  192.                 if (issues !== null) insertHeadsUp(issues, n.parentNode);
  193.             });
  194.         }
  195.     });
  196. }
  197.  
  198. // Tag Search
  199. function checkSearchResults() {
  200.     // with search results table userscript enabled
  201.     var checkNodes = document.querySelectorAll("table#resulttable .resulttag.canonical a");
  202.     checkNodes.forEach((n) => {
  203.         var issues = (n.parentNode.parentNode.querySelector('td.resulttype').title == "Fandom") ? hasFandomIllegalChars(n.innerText) : hasIllegalChars(n.innerText);
  204.         if (issues !== null) insertHeadsUp(issues, n.parentNode, null, true);
  205.     });
  206.  
  207.     // with plain search results page
  208.     checkNodes = document.querySelectorAll("ol.tag li span.canonical a.tag");
  209.     checkNodes.forEach((n) => {
  210.         var issues = (n.parentNode.firstChild.textContent.trim() == "Fandom:") ? hasFandomIllegalChars(n.innerText) : hasIllegalChars(n.innerText);
  211.         if (issues !== null) insertHeadsUp(issues, n.parentNode.parentNode, null, true);
  212.     });
  213. }
  214.  
  215. // Edit Tag Page
  216. function checkEditTag() {
  217.     const tagCanonical = document.getElementById('tag_canonical');
  218.     const tagType = document.querySelector('#edit_tag fieldset:first-of-type dd strong').innerText;
  219.  
  220.     // initial check only if the tag is already canonical
  221.     if (tagCanonical.checked) {
  222.         var checkNode = document.getElementById("tag_name");
  223.         var issues = (tagType == "Fandom") ? hasFandomIllegalChars(checkNode.value) : hasIllegalChars(checkNode.value);
  224.         if (issues !== null) insertHeadsUp(issues, checkNode.parentNode);
  225.     }
  226.  
  227.     // if the tag's canonical status is changed
  228.     tagCanonical.addEventListener("input", (event) => {
  229.         var checkNode = document.getElementById("tag_name");
  230.         if (event.target.checked) {
  231.             var issues = (tagType == "Fandom") ? hasFandomIllegalChars(checkNode.value) : hasIllegalChars(checkNode.value);
  232.             if (issues !== null) insertHeadsUp(issues, checkNode.parentNode);
  233.             else removeHeadsUp(checkNode.parentNode);
  234.         }
  235.         else removeHeadsUp(checkNode.parentNode);
  236.     });
  237.  
  238.     // if this is a synonym, check the canonical tag it's synned to
  239.     const synonym = document.querySelector('#edit_tag fieldset:first-of-type dd ul.autocomplete .added.tag');
  240.     if (synonym !== null) {
  241.         issues = (tagType == "Fandom") ? hasFandomIllegalChars(synonym.firstChild.textContent.trim()) : hasIllegalChars(synonym.firstChild.textContent.trim());
  242.         if (issues !== null) insertHeadsUp(issues, synonym.parentNode.parentNode, synonym.parentNode.parentNode.children[1]);
  243.     }
  244.  
  245.     // if this is canonical, check its sub- and metatags
  246.     const metasubs = document.querySelectorAll('#parent_MetaTag_associations_to_remove_checkboxes ul li a, #child_SubTag_associations_to_remove_checkboxes ul li a');
  247.     if (metasubs !== null) {
  248.         metasubs.forEach((n) => {
  249.             var issues = (tagType == "Fandom") ? hasFandomIllegalChars(n.innerText) : hasIllegalChars(n.innerText);
  250.             if (issues !== null) insertHeadsUp(issues, n.parentNode);
  251.         });
  252.     }
  253.  
  254.     // if this is any other type of tag that's in a fandom, check the fandom tag
  255.     const fandoms = document.querySelectorAll('#parent_Fandom_associations_to_remove_checkboxes ul li a');
  256.     if (fandoms !== null) {
  257.         fandoms.forEach((n) => {
  258.             var issues = hasFandomIllegalChars(n.innerText);
  259.             if (issues !== null) insertHeadsUp(issues, n.parentNode);
  260.         });
  261.     }
  262.  
  263.     // if this is a relationship, check the tagged characters
  264.     const chars = document.querySelectorAll('#parent_Character_associations_to_remove_checkboxes ul li a');
  265.     if (chars !== null) {
  266.         chars.forEach((n) => {
  267.             var issues = hasIllegalChars(n.innerText);
  268.             if (issues !== null) insertHeadsUp(issues, n.parentNode);
  269.         });
  270.     }
  271. }