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

Fix tooltips

This commit is contained in:
Hamcha 2020-06-16 21:13:18 +02:00
parent 92d55209df
commit 6c5f1d75b3
Signed by: hamcha
GPG Key ID: 41467804B19A3315
4 changed files with 86 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/App.tsx
View File

@ -5,8 +5,8 @@ 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_chemistry" }, { page: "Guide_to_chemistry" },
{ page: "Guide_to_medicine" },
]); ]);
const [activeTab, setActiveTab] = useState(0); const [activeTab, setActiveTab] = useState(0);
return ( return (

58
lib/userscript.ts
View File

@ -263,33 +263,30 @@ export default function (root: HTMLElement, docname: string) {
function betterChemistry() { function betterChemistry() {
// 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( document
Array.from( .querySelectorAll(
root.querySelectorAll( "table.wikitable > tbody > tr:not(:first-child) > td:nth-child(2)"
"table.wikitable > tbody > tr:not(:first-child) > td:nth-child(2) p" )
) .forEach((td) => {
).map((p) => p.parentNode) const tmp = td.cloneNode();
).forEach((parent) => { // 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.
const tmp = parent.cloneNode(); // Nodes can only have one parent so append removes them from the original NodeList and shifts the following one back into the wrong index.
// 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 Array.from(td.childNodes).forEach((el) => {
// Nodes can only have one parent so append removes them from the original NodeList and shifts the following one back into the wrong index if (el.tagName === "P") {
Array.from(parent.childNodes).forEach((el: HTMLElement) => { tmp.append(...el.childNodes);
if (el.tagName === "P") { } else {
tmp.append(...el.childNodes); tmp.append(el);
} else { }
tmp.append(el); });
} td.parentNode.replaceChild(tmp, td);
}); });
parent.parentNode.replaceChild(tmp, parent);
});
// Enrich "x part" with checkboxes and parts // Enrich "x part" with checkboxes and parts
Array.from(root.querySelectorAll("td")) Array.from(document.querySelectorAll("td"))
.filter((el) => el.innerText.indexOf(" part") >= 0) .filter((el) => el.innerText.indexOf(" part") >= 0)
.map((el) => [el, el.innerHTML]) .forEach((el) => {
.forEach(([el, innerHTML]) => { el.innerHTML = el.innerHTML.replace(
el.innerHTML = innerHTML.replace( /((\d+)\s+(?:parts?|units?))(.*?(?:<\/a>|\n|$))/gi,
/((\d+)\s+(?:parts?|units?))(.*?(?:<\s*(\/\s*a|br\s*\/?)\s*>|\n|$))/gi,
(match, ...m) => (match, ...m) =>
`<label class="bgus_part ${ `<label class="bgus_part ${
m[2].includes("</a>") ? "bgus_part_tooltip" : "" m[2].includes("</a>") ? "bgus_part_tooltip" : ""
@ -303,34 +300,31 @@ export default function (root: HTMLElement, docname: string) {
)}` )}`
); );
}); });
Array.from(root.querySelectorAll(".bgus_nested_element")).forEach((el) => {
el.parentElement.classList.add("bgus_collapsable");
});
// Add event to autofill child checkboxes // Add event to autofill child checkboxes
document root
.querySelectorAll(".bgus_part_tooltip > .bgus_checkbox") .querySelectorAll(".bgus_part_tooltip > .bgus_checkbox")
.forEach((box) => { .forEach((box) => {
const tooltip = box.parentElement.nextElementSibling; const tooltip = box.parentElement.nextElementSibling;
box.addEventListener("click", function () { box.addEventListener("click", function () {
tooltip tooltip
.querySelectorAll(".bgus_checkbox") .querySelectorAll(".bgus_checkbox")
.forEach((el: HTMLInputElement) => (el.checked = this.checked)); .forEach((el) => (el.checked = this.checked));
}); });
}); });
// Add event to collapse subsections // Add event to collapse subsections
root.querySelectorAll(".bgus_nested_element").forEach((twistie) => { root.querySelectorAll(".bgus_nested_element").forEach((twistie) => {
twistie.addEventListener("click", function (evt) { twistie.addEventListener("click", function (evt) {
twistie.parentElement.classList.toggle("bgus_collapsed"); twistie.classList.toggle("bgus_collapsed");
}); });
}); });
// Wrap every recipe with extra metadata // Wrap every recipe with extra metadata
root.querySelectorAll(".bgus_part").forEach((el: HTMLElement) => { root.querySelectorAll(".bgus_part").forEach((el: HTMLElement) => {
if ("parts" in el.parentElement.dataset) { if ("parts" in el.parentElement.dataset) {
el.parentElement.dataset.parts = ( el.parentElement.dataset.parts =
parseInt(el.parentElement.dataset.parts) + parseInt(el.dataset.amount) parseInt(el.parentElement.dataset.parts) +
).toString(); parseInt(el.dataset.amount);
} else { } else {
el.parentElement.dataset.parts = el.dataset.amount; el.parentElement.dataset.parts = el.dataset.amount;
} }

122
style/bgus.scss
View File

@ -14,30 +14,29 @@
flex-direction: column; flex-direction: column;
z-index: 9999; z-index: 9999;
color: #fff; color: #fff;
input { }
font-size: 14pt; #bgus_fz_searchbox input {
padding: 5pt 8pt; font-size: 14pt;
border: 1px solid #555; padding: 5pt 8pt;
margin: 5px; border: 1px solid #555;
margin-bottom: 0; margin: 5px;
background-color: #111; margin-bottom: 0;
color: #fff; background-color: #111;
} color: #fff;
ul { }
list-style: none; #bgus_fz_searchbox ul {
margin: 5px; list-style: none;
padding: 0; margin: 5px;
li { }
padding: 5px; #bgus_fz_searchbox li {
cursor: pointer; padding: 5px;
&:hover { cursor: pointer;
background-color: rgba(100, 100, 100, 0.5); }
} #bgus_fz_searchbox li:hover {
&.selected { background-color: rgba(100, 100, 100, 0.5);
border-left: 3px solid white; }
} #bgus_fz_searchbox li.selected {
} border-left: 3px solid white;
}
} }
.bgus_twistie:after { .bgus_twistie:after {
color: red; color: red;
@ -46,62 +45,59 @@
margin-left: 0.2em; margin-left: 0.2em;
content: "⯆"; content: "⯆";
} }
.bgus_collapsed > .bgus_nested_element > .bgus_twistie:after { .bgus_collapsed > .bgus_twistie:after {
content: "⯈"; content: "⯈";
} }
:not(.bgus_collapsed) > .bgus_nested_element + .tooltiptext { div.tooltiptext {
display: none;
border: 1px solid #384e68;
background: linear-gradient(
to bottom,
darken(#384e68, 20%),
darken(#384e68, 25%)
);
}
span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext {
z-index: unset; z-index: unset;
visibility: inherit; visibility: inherit;
display: block;
opacity: 1; opacity: 1;
position: relative; position: relative;
width: auto; width: auto;
border-left-width: 3px; border-left-width: 3px;
background: transparent; margin-left: 5px;
margin: 5px; margin-top: 5px;
margin-right: 0px;
font-size: 8pt; font-size: 8pt;
padding: 5px 8px; padding: 5px 8px;
line-height: 10pt; line-height: 10pt;
} }
.bgus_collapsable:not(.bgus_collapsed) + br {
display: none;
}
table.wikitable > tbody > tr > td:nth-child(2) { table.wikitable > tbody > tr > td:nth-child(2) {
min-width: 30%; min-width: 30%;
padding: 10px; padding: 10px;
} }
.bchem .bgus_fz_selected { .bgus_fz_selected {
background-color: #525242; border: 3px solid yellow;
} }
input[type="checkbox"] + span[data-src] { body.bgus_cbox input[type="checkbox"] + span[data-src]:before {
display: inline-block;
width: 1.5em;
content: "[_]";
}
body.bgus_cbox input[type="checkbox"]:checked + span[data-src]:before {
content: "[X]";
}
body.bgus_cbox input[type="checkbox"]:checked + span[data-src] {
text-decoration: line-through;
}
body.bgus_cbox input[type="checkbox"] + span[data-src] {
cursor: pointer;
}
body.bgus_cbox input[type="checkbox"] + span[data-src]:before,
body.bgus_cbox input[type="checkbox"] + span[data-src] {
color: orange;
font-weight: bold; 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 { body.bgus_cbox input[type="checkbox"]:checked + span[data-src]:before,
input[type="checkbox"] + span[data-src]:before { body.bgus_cbox input[type="checkbox"]:checked + span[data-src] {
content: "[_]"; color: green;
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;
}
} }

3
wiki-styles.css
View File

@ -1,3 +0,0 @@
a[href] {
color: white;
}