Convert reaction conditions to a prettier table
Some checks reported errors
continuous-integration/drone/push Build was killed
Some checks reported errors
continuous-integration/drone/push Build was killed
This commit is contained in:
parent
8583fc3b70
commit
5074d6180f
3 changed files with 202 additions and 135 deletions
|
@ -10,7 +10,7 @@ import { welcomeScript } from "./pages/welcome";
|
||||||
export const PAGE_VERSIONS = {
|
export const PAGE_VERSIONS = {
|
||||||
Infections: "fcebeda2fddb46d924f4538cd9c0daeb55aa4c9b",
|
Infections: "fcebeda2fddb46d924f4538cd9c0daeb55aa4c9b",
|
||||||
Guide_to_food_and_drinks: "131e010df66ed689d31df53c3ca17ad16635a827",
|
Guide_to_food_and_drinks: "131e010df66ed689d31df53c3ca17ad16635a827",
|
||||||
Guide_to_chemistry: "20971ee185888fd37128bdc1c097a740982e94b2",
|
Guide_to_chemistry: "8583fc3b707920eb5cc3a814ec934cfff88803a5",
|
||||||
$DEFAULT: "bb7abd544a19369d4b6b7e3dde3eb3cc34c023d4",
|
$DEFAULT: "bb7abd544a19369d4b6b7e3dde3eb3cc34c023d4",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -123,7 +123,7 @@ export function processChemistry(root: HTMLElement): void {
|
||||||
content += `<p>${desc.innerHTML}</p>`;
|
content += `<p>${desc.innerHTML}</p>`;
|
||||||
}
|
}
|
||||||
if (ph) {
|
if (ph) {
|
||||||
content += `<p class="ph">${ph.innerHTML}</p>`;
|
content += `<div class="ph">${ph.innerHTML}</div>`;
|
||||||
}
|
}
|
||||||
title.classList.add("reagent-ext");
|
title.classList.add("reagent-ext");
|
||||||
title.innerHTML = content;
|
title.innerHTML = content;
|
||||||
|
@ -191,12 +191,7 @@ export function chemistryScript(root: HTMLElement): void {
|
||||||
"table.wikitable > tbody > tr:not(:first-child)"
|
"table.wikitable > tbody > tr:not(:first-child)"
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
const test = el
|
|
||||||
.map((element, id) => [
|
|
||||||
element,
|
|
||||||
element.querySelector("th .reagent-header"),
|
|
||||||
])
|
|
||||||
.filter(([a, b]) => !b);
|
|
||||||
registerSearchEntries(
|
registerSearchEntries(
|
||||||
el.map((element, id) => ({
|
el.map((element, id) => ({
|
||||||
page: "Guide_to_chemistry",
|
page: "Guide_to_chemistry",
|
||||||
|
@ -251,6 +246,52 @@ export function chemistryScript(root: HTMLElement): void {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Prettify reaction conditions
|
||||||
|
const reactionPropertyRegexp = /<b>(.+):<\/b>(.+)/i;
|
||||||
|
el.forEach((element, id) => {
|
||||||
|
element.querySelectorAll<HTMLElement>(".ph").forEach((ph) => {
|
||||||
|
// Prepare table
|
||||||
|
const extras = [];
|
||||||
|
const table = document.createElement("table");
|
||||||
|
const tableHeaderRow = document.createElement("tr");
|
||||||
|
const tableValueRow = document.createElement("tr");
|
||||||
|
table.appendChild(tableHeaderRow);
|
||||||
|
table.appendChild(tableValueRow);
|
||||||
|
|
||||||
|
// Parse parameters
|
||||||
|
ph.innerHTML.split("<br>").forEach((prop) => {
|
||||||
|
if (prop.trim() === "N/A") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const matcher = reactionPropertyRegexp.exec(prop);
|
||||||
|
if (!matcher) {
|
||||||
|
extras.push(prop);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [reactionProperty, propValue] = matcher
|
||||||
|
.slice(1)
|
||||||
|
.map((s) => s.trim());
|
||||||
|
|
||||||
|
const header = document.createElement("th");
|
||||||
|
header.appendChild(document.createTextNode(reactionProperty));
|
||||||
|
tableHeaderRow.appendChild(header);
|
||||||
|
const value = document.createElement("td");
|
||||||
|
value.appendChild(document.createTextNode(propValue));
|
||||||
|
tableValueRow.append(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear and re-add prettified data
|
||||||
|
ph.innerHTML = "";
|
||||||
|
if (tableHeaderRow.children.length > 0) {
|
||||||
|
ph.appendChild(table);
|
||||||
|
}
|
||||||
|
ph.innerHTML += `<p>${extras.join("<br>")}</p>`;
|
||||||
|
ph.classList.add("ph-ext");
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export default { chemistryScript, processChemistry };
|
export default { chemistryScript, processChemistry };
|
||||||
|
|
|
@ -14,7 +14,11 @@ div[data-tab="Guide_to_chemistry"] {
|
||||||
div.tooltiptext {
|
div.tooltiptext {
|
||||||
display: none;
|
display: none;
|
||||||
border: 1px solid #384e68;
|
border: 1px solid #384e68;
|
||||||
background: linear-gradient(to bottom, darken(#384e68, 20%), darken(#384e68, 25%));
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
darken(#384e68, 20%),
|
||||||
|
darken(#384e68, 25%)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext {
|
span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext {
|
||||||
|
@ -133,4 +137,26 @@ div[data-tab="Guide_to_chemistry"] {
|
||||||
content: "Addiction at ";
|
content: "Addiction at ";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ph-ext {
|
||||||
|
p {
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
margin: 0.5rem 0.7rem;
|
||||||
|
background-color: $nanotrasen !important;
|
||||||
|
border: 0;
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
font-size: 8pt;
|
||||||
|
padding: 0.2rem 0.3rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
background-color: darken($nanotrasen, 10%) !important;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue