From caecc238e70adaa0684bcb70496daf399027bd72 Mon Sep 17 00:00:00 2001 From: Hamcha Date: Tue, 16 Jun 2020 18:00:29 +0200 Subject: [PATCH] Multiple tabs! --- index.html | 1 + lib/App.tsx | 10 ++- lib/components/TabList.tsx | 18 ++++-- lib/components/WikiPage.tsx | 4 +- lib/userscript.ts | 126 +----------------------------------- style/bgus.scss | 107 ++++++++++++++++++++++++++++++ style/main.scss | 13 +++- 7 files changed, 145 insertions(+), 134 deletions(-) create mode 100644 style/bgus.scss diff --git a/index.html b/index.html index 9f45efb..6cdee54 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + /tg/ Handbook diff --git a/lib/App.tsx b/lib/App.tsx index 799bcc2..a559dde 100644 --- a/lib/App.tsx +++ b/lib/App.tsx @@ -6,15 +6,19 @@ import { useState } from "react"; export default function App() { const [tabs, setTabs] = useState([ { page: "Guide_to_medicine" }, - // { page: "Guide_to_chemistry" }, + { page: "Guide_to_chemistry" }, ]); const [activeTab, setActiveTab] = useState(0); return ( - + setActiveTab(i)} + />
{tabs.map((tab, i) => ( - + ))}
diff --git a/lib/components/TabList.tsx b/lib/components/TabList.tsx index d80a273..3b077ed 100644 --- a/lib/components/TabList.tsx +++ b/lib/components/TabList.tsx @@ -7,21 +7,31 @@ export interface TabListItem { export interface TabListProps { tabs: TabListItem[]; active: number; + tabClicked: (TabListItem, number) => void; } -function TabItem({ name, active }) { +function TabItem({ name, active, onClick }) { + const clickHandler = active ? null : onClick; return ( -
+
{name.replace(/_/gi, " ")}
); } -export default function TabList({ tabs, active }: TabListProps) { +export default function TabList({ tabs, active, tabClicked }: TabListProps) { return ( ); diff --git a/lib/components/WikiPage.tsx b/lib/components/WikiPage.tsx index f5144ff..fcc3385 100644 --- a/lib/components/WikiPage.tsx +++ b/lib/components/WikiPage.tsx @@ -92,6 +92,7 @@ export default function WikiPage({ page, visible }) { // Fetch page useEffect(() => { + console.log("fetching"); (async () => { let html = await getPageHTML(page); html = fixup(html); @@ -103,6 +104,7 @@ export default function WikiPage({ page, visible }) { useEffect(() => { if (data.loaded) { userscript(containerRef.current, page); + console.log("userscript applied"); } }, [data]); @@ -127,7 +129,7 @@ export default function WikiPage({ page, visible }) { ref={containerRef} className="page" style={{ - display: visible ? "block" : "none", + visibility: visible ? "" : "hidden", }} dangerouslySetInnerHTML={{ __html: data.html }} >
diff --git a/lib/userscript.ts b/lib/userscript.ts index a7fc8ba..04f6860 100644 --- a/lib/userscript.ts +++ b/lib/userscript.ts @@ -16,12 +16,6 @@ const DEFAULT_OPTS = { }; export default function (root: HTMLElement, docname: string) { - function GM_addStyle(css) { - const style = document.createElement("style"); - style.innerHTML = css; - root.appendChild(style); - } - // Tell user that better chemistry is loading const postbody = root; const statusMessage = document.createElement("div"); @@ -33,54 +27,9 @@ export default function (root: HTMLElement, docname: string) { `; postbody.insertBefore(statusMessage, postbody.firstChild); - GM_addStyle(` - .bgus_hidden { display: none !important; } - .bgus_nobreak { white-space: nowrap; } - `); - // TODO Refactor this mess function searchBox(el, search_candidate, options = DEFAULT_OPTS) { // Fuzzy search box - GM_addStyle( - ` - #bgus_fz_searchbox { - position: fixed; - top: 20px; - left: 30%; - right: 30%; - background: rgba(10,10,10,0.8); - display: flex; - flex-direction: column; - z-index: 9999; - color: #fff; - } - #bgus_fz_searchbox input { - font-size: 14pt; - padding: 5pt 8pt; - border: 1px solid #555; - margin: 5px; - margin-bottom: 0; - background-color: #111; - color: #fff; - } - #bgus_fz_searchbox ul { - list-style: none; - margin: 5px; - padding: 0; - } - #bgus_fz_searchbox li { - padding: 5px; - cursor: pointer; - } - #bgus_fz_searchbox li:hover { - background-color: rgba(100, 100, 100, 0.5); - } - #bgus_fz_searchbox li.selected { - border-left: 3px solid white; - } - ` - ); - const resultList = document.createElement("ul"); const searchBox = document.createElement("div"); let selected_result = null; @@ -252,78 +201,6 @@ export default function (root: HTMLElement, docname: string) { } function betterChemistry() { - // Chem styles - GM_addStyle( - ` - .bgus_twistie:after { - color: red; - display: inline-block; - font-weight: bold; - margin-left: .2em; - content: '⯆'; - } - .bgus_collapsed > .bgus_nested_element > .bgus_twistie:after{ - content: '⯈'; - } - :not(.bgus_collapsed) > .bgus_nested_element + .tooltiptext { - z-index: unset; - visibility: inherit; - opacity: 1; - position: relative; - width: auto; - border-left-width: 3px; - background: transparent; - margin: 5px; - margin-right: 0px; - font-size: 8pt; - padding: 5px 8px; - line-height: 10pt; - } - .bgus_collapsable:not(.bgus_collapsed) + br { - display: none; - } - table.wikitable > tbody > tr > td:nth-child(2) { - min-width: 30%; - padding: 10px; - } - .bgus_fz_selected { - background-color: #525242; - } - input[type="checkbox"] + span[data-src] { - font-weight: bold; - cursor: text; - } - input[type="checkbox"] + span[data-src]:before { - display: inline-block; - width: 1.5em; /* Prevent autoscroll with sudden line wraps when revealing checkboxes */ - text-align: center; - } - input[type="checkbox"] + span[data-src]:before { - content: '•'; - } - .bgus_cbox input[type="checkbox"] + span[data-src]:before { - content: '[_]'; - margin-right: 0.5em; - } - .bgus_cbox input[type="checkbox"]:checked + span[data-src]:before { - content: '[X]'; - margin-right: 0.5em; - } - .bgus_cbox input[type="checkbox"]:checked + span[data-src] { - text-decoration: line-through; - } - .bgus_cbox input[type="checkbox"] + span[data-src] { - cursor: pointer; - } - .bgus_cbox input[type="checkbox"] + span[data-src] { - color: orange; - } - .bgus_cbox input[type="checkbox"]:checked + span[data-src] { - color: green; - } - ` - ); - // Fix inconsistencies with

on random parts // Ideally I'd like a

or something on every part, wrapping it completely, but for now let's just kill 'em new Set( @@ -336,7 +213,7 @@ export default function (root: HTMLElement, docname: string) { const tmp = parent.cloneNode(); // The cast to Array is necessary because, while childNodes's NodeList technically has a forEach method, it's a live list and operations mess with its lenght in the middle of the loop // Nodes can only have one parent so append removes them from the original NodeList and shifts the following one back into the wrong index - Array.from(parent.childNodes).forEach((el) => { + Array.from(parent.childNodes).forEach((el: HTMLElement) => { if (el.tagName === "P") { tmp.append(...el.childNodes); } else { @@ -426,6 +303,7 @@ export default function (root: HTMLElement, docname: string) { }); }; + root.classList.add("bchem"); // Init fuzzy search with elements const el = Array.from( root.querySelectorAll( diff --git a/style/bgus.scss b/style/bgus.scss new file mode 100644 index 0000000..886d0bb --- /dev/null +++ b/style/bgus.scss @@ -0,0 +1,107 @@ +.bgus_hidden { + display: none !important; +} +.bgus_nobreak { + white-space: nowrap; +} +#bgus_fz_searchbox { + position: fixed; + top: 20px; + left: 30%; + right: 30%; + background: rgba(10, 10, 10, 0.8); + display: flex; + flex-direction: column; + z-index: 9999; + color: #fff; + input { + font-size: 14pt; + padding: 5pt 8pt; + border: 1px solid #555; + margin: 5px; + margin-bottom: 0; + background-color: #111; + color: #fff; + } + ul { + list-style: none; + margin: 5px; + padding: 0; + li { + padding: 5px; + cursor: pointer; + &:hover { + background-color: rgba(100, 100, 100, 0.5); + } + &.selected { + border-left: 3px solid white; + } + } + } +} +.bgus_twistie:after { + color: red; + display: inline-block; + font-weight: bold; + margin-left: 0.2em; + content: "⯆"; +} +.bgus_collapsed > .bgus_nested_element > .bgus_twistie:after { + content: "⯈"; +} +:not(.bgus_collapsed) > .bgus_nested_element + .tooltiptext { + z-index: unset; + visibility: inherit; + opacity: 1; + position: relative; + width: auto; + border-left-width: 3px; + background: transparent; + margin: 5px; + margin-right: 0px; + font-size: 8pt; + padding: 5px 8px; + line-height: 10pt; +} +.bgus_collapsable:not(.bgus_collapsed) + br { + display: none; +} +table.wikitable > tbody > tr > td:nth-child(2) { + min-width: 30%; + padding: 10px; +} +.bgchem .bgus_fz_selected { + background-color: #525242; +} +input[type="checkbox"] + span[data-src] { + font-weight: bold; + cursor: text; + &:before { + display: inline-block; + width: 1.5em; /* Prevent autoscroll with sudden line wraps when revealing checkboxes */ + text-align: center; + content: "•"; + } +} +.bgus_cbox { + input[type="checkbox"] + span[data-src]:before { + content: "[_]"; + margin-right: 0.5em; + } + input[type="checkbox"]:checked + span[data-src]:before { + content: "[X]"; + margin-right: 0.5em; + } + input[type="checkbox"]:checked + span[data-src] { + text-decoration: line-through; + } + input[type="checkbox"] + span[data-src] { + cursor: pointer; + } + input[type="checkbox"] + span[data-src] { + color: orange; + } + input[type="checkbox"]:checked + span[data-src] { + color: green; + } +} diff --git a/style/main.scss b/style/main.scss index 93ca723..0c7022d 100644 --- a/style/main.scss +++ b/style/main.scss @@ -67,10 +67,14 @@ body { #tabs { grid-row: 2; - overflow-y: scroll; z-index: 1; - padding-top: 10pt; + display: grid; + overflow: hidden; .page { + padding-top: 10pt; + overflow-y: scroll; + grid-row: 1; + grid-column: 1; &.waiting { display: flex; flex-direction: column; @@ -122,6 +126,7 @@ body { $tab-active: lighten($nanotrasen, 10%); .tab-list { + z-index: 1; grid-row: 1; display: flex; border-bottom: 2px solid $tab-active; @@ -132,9 +137,13 @@ $tab-active: lighten($nanotrasen, 10%); display: flex; align-items: center; justify-content: center; + user-select: none; &.active { background-color: $tab-active; } + &.clickable { + cursor: pointer; + } } }