Move fixup to userscript

lib/components/WikiPage.tsx

@@ -5,79 +5,6 @@ import { useState, useEffect, useRef } from "react";
 import userscript from "../userscript";
 import speen from "~/assets/images/speen.svg";
 
-function fixup(node: HTMLElement) {
-  node.querySelectorAll(".mw-editsection").forEach((editLink) => {
-    editLink.parentElement.removeChild(editLink);
-  });
-
-  // Darken bgcolor
-  node.querySelectorAll("*[bgcolor]").forEach((td) => {
-    let bgcolor = td.getAttribute("bgcolor");
-    // Shitty way to detect if it's hex or not
-    // Basically, none of the css colors long 6 letters only use hex letters
-    // THANK FUCKING GOD
-    if (bgcolor.length === 6 && parseInt(bgcolor, 16) !== NaN) {
-      bgcolor = "#" + bgcolor;
-    }
-    td.setAttribute("bgcolor", darken(bgcolor, ColorFmt.HEX).slice(1));
-  });
-  node.querySelectorAll("*[style]").forEach((td: HTMLElement) => {
-    if (td.style.backgroundColor != "") {
-      td.style.backgroundColor = darken(td.style.backgroundColor, ColorFmt.RGB);
-    }
-    if (td.style.background != "") {
-      td.style.backgroundColor = darken(td.style.background, ColorFmt.RGB);
-    }
-  });
-
-  // Lighten fgcolors
-  node.querySelectorAll("*[color]").forEach((td) => {
-    let color = td.getAttribute("color");
-    if (color.length === 6 && !isNaN(parseInt(color, 16))) {
-      color = "#" + color;
-    }
-    td.setAttribute("color", lighten(color, ColorFmt.HEX).slice(1));
-  });
-
-  // Remove fixed widths
-  node.querySelectorAll("table[width]").forEach((td) => {
-    td.setAttribute("width", "100%");
-  });
-  node.querySelectorAll("table[style]").forEach((td: HTMLTableElement) => {
-    if (td.style.width != "") {
-      td.style.width = "100%";
-    }
-  });
-
-  // Group headers and content so stickies don't overlap
-  node.querySelectorAll("h3,h2").forEach((h3) => {
-    const parent = h3.parentNode;
-    const div = document.createElement("div");
-    parent.insertBefore(div, h3);
-    while (h3.nextSibling && !h3.nextSibling.nodeName.startsWith("H")) {
-      const sibling = h3.nextSibling;
-      parent.removeChild(sibling);
-      div.appendChild(sibling);
-    }
-    h3.parentNode.removeChild(h3);
-    div.insertBefore(h3, div.firstChild);
-    div.className = "mw-headline-cont";
-  });
-
-  node.querySelectorAll(".mw-headline").forEach((span: HTMLElement) => {
-    // Find nearest container
-    let parent = span.parentElement;
-    while (parent !== null) {
-      if (parent.classList.contains("mw-headline-cont")) {
-        parent.id = span.id;
-        span.id += "-span";
-        parent.dataset.name = span.innerText;
-      }
-      parent = parent.parentElement;
-    }
-  });
-}
-
 export default function WikiPage({ page, visible }) {
   const [data, setData] = useState({
     loaded: false,
@@ -88,7 +15,7 @@ export default function WikiPage({ page, visible }) {
 
   // Fetch page
   useEffect(() => {
-    console.log("fetching");
+    console.log(page + ": fetching");
     (async () => {
       let html = await getPageHTML(page);
       // Convert relative links to absolute
@@ -99,20 +26,17 @@ export default function WikiPage({ page, visible }) {
 
   // Process page
   useEffect(() => {
-    console.log("processing");
+    console.log(page + ": processing");
     if (data.loaded == true && data.processed == false) {
-      fixup(containerRef.current);
-      console.log("fixup applied");
-
       userscript(containerRef.current, page);
-      console.log("userscript applied");
+      console.log(page + ": userscript applied");
     }
   }, [data]);
 
   // Page fetched, instance userscript
   useEffect(() => {
     if (data.loaded) {
-      console.log("loaded!");
+      console.log(page + ": loaded!");
     }
   }, [data]);
 

lib/userscript.ts

@@ -1,21 +1,81 @@
-// ==UserScript==
+import { darken, ColorFmt, lighten } from "./darkmode";
-// @name         Better /tg/ Guides
-// @namespace    https://faulty.equipment
-// @version      0.2.2
-// @description  Make /tg/station guides better with extra features
-// @author       Hamcha
-// @collaborator D
-// @license      ISC
-// @copyright    2020, Hamcha (https://openuserjs.org/users/Hamcha), D
-// @match        https://tgstation13.org/wiki/Guide_to_*
-// @grant        GM_addStyle
-// ==/UserScript==
 
 const DEFAULT_OPTS = {
   alignment: "center",
 };
 
 export default function (root: HTMLElement, docname: string) {
+  root.querySelectorAll(".mw-editsection").forEach((editLink) => {
+    editLink.parentElement.removeChild(editLink);
+  });
+
+  // Darken bgcolor
+  root.querySelectorAll("*[bgcolor]").forEach((td) => {
+    let bgcolor = td.getAttribute("bgcolor");
+    // Shitty way to detect if it's hex or not
+    // Basically, none of the css colors long 6 letters only use hex letters
+    // THANK FUCKING GOD
+    if (bgcolor.length === 6 && parseInt(bgcolor, 16) !== NaN) {
+      bgcolor = "#" + bgcolor;
+    }
+    td.setAttribute("bgcolor", darken(bgcolor, ColorFmt.HEX).slice(1));
+  });
+  root.querySelectorAll("*[style]").forEach((td: HTMLElement) => {
+    if (td.style.backgroundColor != "") {
+      td.style.backgroundColor = darken(td.style.backgroundColor, ColorFmt.RGB);
+    }
+    if (td.style.background != "") {
+      td.style.backgroundColor = darken(td.style.background, ColorFmt.RGB);
+    }
+  });
+
+  // Lighten fgcolors
+  root.querySelectorAll("*[color]").forEach((td) => {
+    let color = td.getAttribute("color");
+    if (color.length === 6 && !isNaN(parseInt(color, 16))) {
+      color = "#" + color;
+    }
+    td.setAttribute("color", lighten(color, ColorFmt.HEX).slice(1));
+  });
+
+  // Remove fixed widths
+  root.querySelectorAll("table[width]").forEach((td) => {
+    td.setAttribute("width", "100%");
+  });
+  root.querySelectorAll("table[style]").forEach((td: HTMLTableElement) => {
+    if (td.style.width != "") {
+      td.style.width = "100%";
+    }
+  });
+
+  // Group headers and content so stickies don't overlap
+  root.querySelectorAll("h3,h2").forEach((h3) => {
+    const parent = h3.parentNode;
+    const div = document.createElement("div");
+    parent.insertBefore(div, h3);
+    while (h3.nextSibling && !h3.nextSibling.nodeName.startsWith("H")) {
+      const sibling = h3.nextSibling;
+      parent.removeChild(sibling);
+      div.appendChild(sibling);
+    }
+    h3.parentNode.removeChild(h3);
+    div.insertBefore(h3, div.firstChild);
+    div.className = "mw-headline-cont";
+  });
+
+  root.querySelectorAll(".mw-headline").forEach((span: HTMLElement) => {
+    // Find nearest container
+    let parent = span.parentElement;
+    while (parent !== null) {
+      if (parent.classList.contains("mw-headline-cont")) {
+        parent.id = span.id;
+        span.id += "-span";
+        parent.dataset.name = span.innerText;
+      }
+      parent = parent.parentElement;
+    }
+  });
+
   // Tell user that better chemistry is loading
   const postbody = root;
   const statusMessage = document.createElement("div");

style/bgus.scss

@@ -70,7 +70,7 @@ table.wikitable > tbody > tr > td:nth-child(2) {
   min-width: 30%;
   padding: 10px;
 }
-.bgchem .bgus_fz_selected {
+.bchem .bgus_fz_selected {
   background-color: #525242;
 }
 input[type="checkbox"] + span[data-src] {