diff --git a/lib/components/WikiPage.tsx b/lib/components/WikiPage.tsx index ca38312..2722122 100644 --- a/lib/components/WikiPage.tsx +++ b/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]); diff --git a/lib/userscript.ts b/lib/userscript.ts index 04f6860..aa02d64 100644 --- a/lib/userscript.ts +++ b/lib/userscript.ts @@ -1,21 +1,81 @@ -// ==UserScript== -// @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== +import { darken, ColorFmt, lighten } from "./darkmode"; 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"); diff --git a/style/bgus.scss b/style/bgus.scss index 886d0bb..3481c59 100644 --- a/style/bgus.scss +++ b/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] {