forked from hamcha/tghandbook
Move fixup to userscript
This commit is contained in:
parent
dd67c40afc
commit
92d55209df
GPG key ID:
41467804B19A3315
3 changed files with 77 additions and 93 deletions
|
|
@ -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]);
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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] {
|
||||
|
|
|
|||
Loading…
Reference in a new issue