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

Fix tooltips

Browse source
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() {
const [tabs, setTabs] = useState<TabListItem[]>([
{ page: "Guide_to_medicine" },
{ page: "Guide_to_chemistry" },
{ page: "Guide_to_medicine" },
]);
const [activeTab, setActiveTab] = useState(0);
return (

58
lib/userscript.ts
View file

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

122
style/bgus.scss
View file

@ -14,30 +14,29 @@
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_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;
}
#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;
}
.bgus_twistie:after {
color: red;
@ -46,62 +45,59 @@
margin-left: 0.2em;
content: "⯆";
}
.bgus_collapsed > .bgus_nested_element > .bgus_twistie:after {
.bgus_collapsed > .bgus_twistie:after {
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;
visibility: inherit;
display: block;
opacity: 1;
position: relative;
width: auto;
border-left-width: 3px;
background: transparent;
margin: 5px;
margin-right: 0px;
margin-left: 5px;
margin-top: 5px;
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;
}
.bchem .bgus_fz_selected {
background-color: #525242;
.bgus_fz_selected {
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;
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;
}
body.bgus_cbox input[type="checkbox"]:checked + span[data-src]:before,
body.bgus_cbox input[type="checkbox"]:checked + span[data-src] {
color: green;
}

3
wiki-styles.css
View file

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