hamcha
/
tghandbook
Archived
1
0
Fork 1
Code Issues 7 Pull Requests Releases Wiki Activity

Don't use intermediary nodes

This commit is contained in:
Hamcha 2020-06-16 18:10:44 +02:00
parent b5db3d3328
commit dd67c40afc
Signed by: hamcha
GPG Key ID: 41467804B19A3315
1 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
lib/components/WikiPage.tsx
View File

@ -5,13 +5,7 @@ import { useState, useEffect, useRef } from "react";
import userscript from "../userscript"; import userscript from "../userscript";
import speen from "~/assets/images/speen.svg"; import speen from "~/assets/images/speen.svg";
function fixup(html: string): string { function fixup(node: HTMLElement) {
// Convert relative links to absolute
html = html.replace(/"\/wiki/gi, '"//tgstation13.org/wiki');
// Parse into node so we can do DOM majicks
const node = document.createElement("div");
node.innerHTML = html;
node.querySelectorAll(".mw-editsection").forEach((editLink) => { node.querySelectorAll(".mw-editsection").forEach((editLink) => {
editLink.parentElement.removeChild(editLink); editLink.parentElement.removeChild(editLink);
}); });
@ -82,12 +76,14 @@ function fixup(html: string): string {
parent = parent.parentElement; parent = parent.parentElement;
} }
}); });
return node.innerHTML;
} }
export default function WikiPage({ page, visible }) { export default function WikiPage({ page, visible }) {
const [data, setData] = useState({ loaded: false, html: "" }); const [data, setData] = useState({
loaded: false,
processed: false,
html: "",
});
const containerRef = useRef(null); const containerRef = useRef(null);
// Fetch page // Fetch page
@ -95,29 +91,40 @@ export default function WikiPage({ page, visible }) {
console.log("fetching"); console.log("fetching");
(async () => { (async () => {
let html = await getPageHTML(page); let html = await getPageHTML(page);
html = fixup(html); // Convert relative links to absolute
setData({ loaded: true, html }); html = html.replace(/"\/wiki/gi, '"//tgstation13.org/wiki');
setData({ loaded: true, processed: false, html });
})(); })();
}, []); }, []);
// Page fetched, instance userscript // Process page
useEffect(() => { useEffect(() => {
if (data.loaded) { console.log("processing");
if (data.loaded == true && data.processed == false) {
fixup(containerRef.current);
console.log("fixup applied");
userscript(containerRef.current, page); userscript(containerRef.current, page);
console.log("userscript applied"); console.log("userscript applied");
} }
}, [data]); }, [data]);
// Page fetched, instance userscript
useEffect(() => {
if (data.loaded) {
console.log("loaded!");
}
}, [data]);
if (!data.loaded) { if (!data.loaded) {
return ( return (
<div className="page waiting"> <div
<p className="page waiting"
style={{ style={{
display: visible ? "block" : "none", visibility: visible ? "" : "hidden",
}} }}
> >
You start skimming through the manual... <p>You start skimming through the manual...</p>
</p>
<div className="speen"> <div className="speen">
<img src={speen} /> <img src={speen} />
</div> </div>