D/tghandbook
1
0
Fork 0
forked from hamcha/tghandbook
Code Issues Pull requests Releases Wiki Activity

Multiple tabs!

Browse source
This commit is contained in:
Hamcha 2020-06-16 18:00:29 +02:00
parent 33affe9b8b
commit caecc238e7
Signed by untrusted user: hamcha
GPG key ID: 41467804B19A3315
7 changed files with 145 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="assets/fonts/iosevka/iosevka-aile.css" /> <link rel="stylesheet" href="assets/fonts/iosevka/iosevka-aile.css" />
<link rel="stylesheet" href="style/main.scss" /> <link rel="stylesheet" href="style/main.scss" />
<link rel="stylesheet" href="style/bgus.scss" />
<title>/tg/ Handbook</title> <title>/tg/ Handbook</title>
</head> </head>
<body> <body>

10
lib/App.tsx
View file

@ -6,15 +6,19 @@ import { useState } from "react";
export default function App() { export default function App() {
const [tabs, setTabs] = useState<TabListItem[]>([ const [tabs, setTabs] = useState<TabListItem[]>([
{ page: "Guide_to_medicine" }, { page: "Guide_to_medicine" },
// { page: "Guide_to_chemistry" }, { page: "Guide_to_chemistry" },
]); ]);
const [activeTab, setActiveTab] = useState(0); const [activeTab, setActiveTab] = useState(0);
return ( return (
<React.Fragment> <React.Fragment>
<TabList tabs={tabs} active={activeTab} /> <TabList
tabs={tabs}
active={activeTab}
tabClicked={(_tab, i) => setActiveTab(i)}
/>
<section id="tabs"> <section id="tabs">
{tabs.map((tab, i) => ( {tabs.map((tab, i) => (
<WikiPage page={tab.page} visible={activeTab == i} /> <WikiPage key={tab.page} page={tab.page} visible={activeTab == i} />
))} ))}
</section> </section>
</React.Fragment> </React.Fragment>

18
lib/components/TabList.tsx
View file

@ -7,21 +7,31 @@ export interface TabListItem {
export interface TabListProps { export interface TabListProps {
tabs: TabListItem[]; tabs: TabListItem[];
active: number; active: number;
tabClicked: (TabListItem, number) => void;
} }
function TabItem({ name, active }) { function TabItem({ name, active, onClick }) {
const clickHandler = active ? null : onClick;
return ( return (
<div className={active ? "tab active" : "tab"}> <div
className={active ? "tab active" : "tab clickable"}
onClick={clickHandler}
>
{name.replace(/_/gi, " ")} {name.replace(/_/gi, " ")}
</div> </div>
); );
} }
export default function TabList({ tabs, active }: TabListProps) { export default function TabList({ tabs, active, tabClicked }: TabListProps) {
return ( return (
<nav className="tab-list"> <nav className="tab-list">
{tabs.map((tab, i) => ( {tabs.map((tab, i) => (
<TabItem name={tab.page} active={i == active} /> <TabItem
key={tab.page}
name={tab.page}
active={i == active}
onClick={() => tabClicked(tab, i)}
/>
))} ))}
</nav> </nav>
); );

4
lib/components/WikiPage.tsx
View file

@ -92,6 +92,7 @@ export default function WikiPage({ page, visible }) {
// Fetch page // Fetch page
useEffect(() => { useEffect(() => {
console.log("fetching");
(async () => { (async () => {
let html = await getPageHTML(page); let html = await getPageHTML(page);
html = fixup(html); html = fixup(html);
@ -103,6 +104,7 @@ export default function WikiPage({ page, visible }) {
useEffect(() => { useEffect(() => {
if (data.loaded) { if (data.loaded) {
userscript(containerRef.current, page); userscript(containerRef.current, page);
console.log("userscript applied");
} }
}, [data]); }, [data]);
@ -127,7 +129,7 @@ export default function WikiPage({ page, visible }) {
ref={containerRef} ref={containerRef}
className="page" className="page"
style={{ style={{
display: visible ? "block" : "none", visibility: visible ? "" : "hidden",
}} }}
dangerouslySetInnerHTML={{ __html: data.html }} dangerouslySetInnerHTML={{ __html: data.html }}
></div> ></div>

126
lib/userscript.ts
View file

@ -16,12 +16,6 @@ const DEFAULT_OPTS = {
}; };
export default function (root: HTMLElement, docname: string) { 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 // Tell user that better chemistry is loading
const postbody = root; const postbody = root;
const statusMessage = document.createElement("div"); const statusMessage = document.createElement("div");
@ -33,54 +27,9 @@ export default function (root: HTMLElement, docname: string) {
</table>`; </table>`;
postbody.insertBefore(statusMessage, postbody.firstChild); postbody.insertBefore(statusMessage, postbody.firstChild);
GM_addStyle(`
.bgus_hidden { display: none !important; }
.bgus_nobreak { white-space: nowrap; }
`);
// TODO Refactor this mess // TODO Refactor this mess
function searchBox(el, search_candidate, options = DEFAULT_OPTS) { function searchBox(el, search_candidate, options = DEFAULT_OPTS) {
// Fuzzy search box // 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 resultList = document.createElement("ul");
const searchBox = document.createElement("div"); const searchBox = document.createElement("div");
let selected_result = null; let selected_result = null;
@ -252,78 +201,6 @@ export default function (root: HTMLElement, docname: string) {
} }
function betterChemistry() { 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 <p> on random parts // Fix inconsistencies with <p> on random parts
// Ideally I'd like a <p> or something on every part, wrapping it completely, but for now let's just kill 'em // Ideally I'd like a <p> or something on every part, wrapping it completely, but for now let's just kill 'em
new Set( new Set(
@ -336,7 +213,7 @@ export default function (root: HTMLElement, docname: string) {
const tmp = parent.cloneNode(); 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 // 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 // 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") { if (el.tagName === "P") {
tmp.append(...el.childNodes); tmp.append(...el.childNodes);
} else { } else {
@ -426,6 +303,7 @@ export default function (root: HTMLElement, docname: string) {
}); });
}; };
root.classList.add("bchem");
// Init fuzzy search with elements // Init fuzzy search with elements
const el = Array.from( const el = Array.from(
root.querySelectorAll( root.querySelectorAll(

107
style/bgus.scss Normal file
View file

@ -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;
}
}

13
style/main.scss
View file

@ -67,10 +67,14 @@ body {
#tabs { #tabs {
grid-row: 2; grid-row: 2;
overflow-y: scroll;
z-index: 1; z-index: 1;
padding-top: 10pt; display: grid;
overflow: hidden;
.page { .page {
padding-top: 10pt;
overflow-y: scroll;
grid-row: 1;
grid-column: 1;
&.waiting { &.waiting {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -122,6 +126,7 @@ body {
$tab-active: lighten($nanotrasen, 10%); $tab-active: lighten($nanotrasen, 10%);
.tab-list { .tab-list {
z-index: 1;
grid-row: 1; grid-row: 1;
display: flex; display: flex;
border-bottom: 2px solid $tab-active; border-bottom: 2px solid $tab-active;
@ -132,9 +137,13 @@ $tab-active: lighten($nanotrasen, 10%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
user-select: none;
&.active { &.active {
background-color: $tab-active; background-color: $tab-active;
} }
&.clickable {
cursor: pointer;
}
} }
} }