Handy UI for browsing the /tg/station wiki while powergaming
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

119 lines
3.8 KiB

import { findParent } from "../utils";
import { darken, ColorFmt, lighten } from "../darkmode";
function isHeader(nodeName: string) {
return nodeName === "H1" || nodeName === "H2" || nodeName === "H3";
}
export function processGlobal(root: HTMLElement, docname: string): void {
// Add header
const header = document.createElement("h1");
header.className = "pageheader";
header.appendChild(document.createTextNode(docname.replace(/_/g, " ")));
root.insertBefore(header, root.firstChild);
// Lazy load all images
root
.querySelectorAll<HTMLImageElement>("img")
.forEach((elem) => elem.setAttribute("loading", "lazy"));
// Remove edit links
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 && !Number.isNaN(parseInt(bgcolor, 16))) {
bgcolor = `#${bgcolor}`;
}
td.setAttribute("bgcolor", darken(bgcolor, ColorFmt.HEX).slice(1));
});
root.querySelectorAll<HTMLElement>("*[style]").forEach((td) => {
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 && !Number.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%";
}
});
// Fixup spacing on top quotes
root
.querySelectorAll<HTMLImageElement>("table .floatright > a > img")
.forEach((img) => {
const row = findParent(img, (el) => el instanceof HTMLTableRowElement);
const td = document.createElement("td");
row.appendChild(td);
});
// Fuck #toctitle
const toc = root.querySelector("#toc");
if (toc) {
const tocHeader = toc.querySelector("h2");
toc.parentNode.insertBefore(tocHeader, toc);
const tocTitle = toc.querySelector("#toctitle");
if (tocTitle != null) {
toc.removeChild(tocTitle);
}
}
// Group headers and content so stickies don't overlap
root.querySelectorAll("h1,h2,h3").forEach((h3) => {
const parent = h3.parentNode;
const div = document.createElement("div");
parent.insertBefore(div, h3);
while (h3.nextSibling && !isHeader(h3.nextSibling.nodeName)) {
const sibling = h3.nextSibling;
parent.removeChild(sibling);
div.appendChild(sibling);
}
h3.parentNode.removeChild(h3);
div.insertBefore(h3, div.firstChild);
div.className = "mw-headline-cont";
});
// Move id from header to container, if one is found
root.querySelectorAll<HTMLElement>(".mw-headline").forEach((span) => {
// Find nearest container
const container = findParent(span, (el) =>
el.classList.contains("mw-headline-cont")
);
if (
container &&
container.querySelectorAll<HTMLElement>(".mw-headline").length === 1
) {
container.id = span.id;
span.id += "-span";
container.dataset.name = span.textContent;
} else {
span.dataset.name = span.textContent;
span.classList.add("mw-headline-cont");
}
});
}
export default { processGlobal };