fixing the site
This commit is contained in:
434
assets/scripts/script.js
Executable file
434
assets/scripts/script.js
Executable file
@@ -0,0 +1,434 @@
|
||||
/* =========================================================
|
||||
BOOTSTRAP
|
||||
========================================================= */
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initCopyButtons();
|
||||
initFootnoteSidenotes();
|
||||
initThemeToggle();
|
||||
initCountdowns();
|
||||
initTOCHighlighting();
|
||||
initStackedNavigation();
|
||||
restoreStackFromURL();
|
||||
initClearPanesButton();
|
||||
initInitialPaneControls();
|
||||
|
||||
});
|
||||
|
||||
/* =========================================================
|
||||
COPY BUTTONS (code blocks)
|
||||
========================================================= */
|
||||
|
||||
function initCopyButtons() {
|
||||
document.querySelectorAll("pre.src").forEach(codeBlock => {
|
||||
if (codeBlock.querySelector(".copy-btn")) return; // idempotent
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.className = "copy-btn";
|
||||
button.textContent = "Copy";
|
||||
codeBlock.appendChild(button);
|
||||
|
||||
button.addEventListener("click", async () => {
|
||||
const text = codeBlock.innerText.replace(button.innerText, "").trim();
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
button.textContent = "Copied!";
|
||||
setTimeout(() => (button.textContent = "Copy"), 1500);
|
||||
} catch {
|
||||
button.textContent = "Failed";
|
||||
setTimeout(() => (button.textContent = "Copy"), 1500);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
FOOTNOTES → SIDENOTES
|
||||
========================================================= */
|
||||
|
||||
function initFootnoteSidenotes() {
|
||||
document.querySelectorAll('a.footref[href^="#fn"]').forEach(ref => {
|
||||
const sup = ref.closest("sup") || ref;
|
||||
|
||||
if (sup.nextElementSibling?.classList.contains("footnote-sidenote")) return;
|
||||
|
||||
const targetId = ref.getAttribute("href").slice(1);
|
||||
const anchor = document.getElementById(targetId);
|
||||
if (!anchor) return;
|
||||
|
||||
const footdef = anchor.closest(".footdef") || anchor.parentElement;
|
||||
if (!footdef) return;
|
||||
|
||||
let paras = footdef.querySelectorAll("p.footpara");
|
||||
if (!paras.length) {
|
||||
paras = footdef.querySelectorAll(".footpara:not(:has(.footpara))");
|
||||
}
|
||||
|
||||
let parts = [];
|
||||
if (paras.length) {
|
||||
const seen = new Set();
|
||||
parts = [...paras]
|
||||
.map(p => {
|
||||
const txt = p.textContent.trim().replace(/\s+/g, " ");
|
||||
if (seen.has(txt)) return "";
|
||||
seen.add(txt);
|
||||
return p.innerHTML.trim();
|
||||
})
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
if (!parts.length) {
|
||||
const clone = footdef.cloneNode(true);
|
||||
clone
|
||||
.querySelectorAll("sup.footnum, a[role='doc-backlink']")
|
||||
.forEach(n => n.remove());
|
||||
parts = [clone.innerHTML.trim()];
|
||||
}
|
||||
|
||||
const sidenote = document.createElement("span");
|
||||
sidenote.className = "sidenote footnote-sidenote";
|
||||
sidenote.dataset.fn = ref.textContent.trim();
|
||||
sidenote.innerHTML = parts.join(" ");
|
||||
|
||||
sup.insertAdjacentElement("afterend", sidenote);
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
THEME TOGGLE
|
||||
========================================================= */
|
||||
|
||||
function initThemeToggle() {
|
||||
const root = document.documentElement;
|
||||
const key = "theme";
|
||||
const saved = localStorage.getItem(key);
|
||||
|
||||
if (saved === "dark" || saved === "light") {
|
||||
root.setAttribute("data-theme", saved);
|
||||
}
|
||||
|
||||
const btn = document.getElementById("theme-toggle");
|
||||
if (!btn) return;
|
||||
|
||||
btn.addEventListener("click", () => {
|
||||
const current = root.getAttribute("data-theme");
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
root.setAttribute("data-theme", next);
|
||||
localStorage.setItem(key, next);
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
COUNTDOWNS
|
||||
========================================================= */
|
||||
|
||||
function initCountdowns() {
|
||||
const els = document.querySelectorAll("time.countdown");
|
||||
if (!els.length) return;
|
||||
|
||||
const plural = (n, w) => `${n} ${w}${n === 1 ? "" : "s"}`;
|
||||
|
||||
const render = el => {
|
||||
const raw = el.getAttribute("datetime");
|
||||
const label = el.dataset.label || "";
|
||||
const target = new Date(raw);
|
||||
if (isNaN(target)) {
|
||||
el.textContent = "—";
|
||||
return;
|
||||
}
|
||||
|
||||
let diff = target - new Date();
|
||||
if (diff <= 0) {
|
||||
el.textContent = `${label ? label + " " : ""}today`;
|
||||
el.classList.add("expired");
|
||||
return;
|
||||
}
|
||||
|
||||
const d = Math.floor(diff / 86400000); diff %= 86400000;
|
||||
const h = Math.floor(diff / 3600000); diff %= 3600000;
|
||||
const m = Math.floor(diff / 60000); diff %= 60000;
|
||||
const s = Math.floor(diff / 1000);
|
||||
|
||||
const parts = [];
|
||||
if (d) parts.push(plural(d, "day"));
|
||||
parts.push(`${h}h ${m}m ${s}s`);
|
||||
|
||||
el.textContent = `${label ? label + " in: " : ""}${parts.join(" ")}`;
|
||||
};
|
||||
|
||||
const tick = () => els.forEach(render);
|
||||
tick();
|
||||
setInterval(tick, 1000);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
TABLE OF CONTENTS HIGHLIGHTING
|
||||
========================================================= */
|
||||
|
||||
function initTOCHighlighting() {
|
||||
const toc = document.querySelector("#text-table-of-contents");
|
||||
if (!toc) return;
|
||||
|
||||
const links = [...toc.querySelectorAll('a[href^="#"]')];
|
||||
if (!links.length) return;
|
||||
|
||||
const linkById = new Map();
|
||||
links.forEach(a => {
|
||||
const id = decodeURIComponent(a.hash.slice(1));
|
||||
const el = document.getElementById(id);
|
||||
if (el) linkById.set(id, a);
|
||||
});
|
||||
|
||||
const headings = [...document.querySelectorAll("h2[id], h3[id], h4[id]")]
|
||||
.filter(h => linkById.has(h.id));
|
||||
|
||||
const setActive = id => {
|
||||
links.forEach(a => {
|
||||
const active = a.hash === `#${id}`;
|
||||
a.classList.toggle("is-active", active);
|
||||
a.toggleAttribute("aria-current", active);
|
||||
});
|
||||
};
|
||||
|
||||
const headerOffset =
|
||||
6.5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
|
||||
const visible = new Map();
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
const id = entry.target.id;
|
||||
if (entry.isIntersecting) {
|
||||
visible.set(id, entry.target.getBoundingClientRect().top - headerOffset);
|
||||
} else {
|
||||
visible.delete(id);
|
||||
}
|
||||
});
|
||||
|
||||
if (visible.size) {
|
||||
const [id] = [...visible.entries()]
|
||||
.sort((a, b) => Math.abs(a[1]) - Math.abs(b[1]))[0];
|
||||
setActive(id);
|
||||
}
|
||||
}, {
|
||||
rootMargin: `-${headerOffset}px 0px -70% 0px`,
|
||||
threshold: [0, 0.01, 0.1]
|
||||
});
|
||||
|
||||
headings.forEach(h => observer.observe(h));
|
||||
|
||||
toc.addEventListener("click", e => {
|
||||
const a = e.target.closest('a[href^="#"]');
|
||||
if (!a) return;
|
||||
const id = decodeURIComponent(a.hash.slice(1));
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
|
||||
e.preventDefault();
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
el.setAttribute("tabindex", "-1");
|
||||
el.focus({ preventScroll: true });
|
||||
history.pushState(null, "", `#${id}`);
|
||||
});
|
||||
}
|
||||
|
||||
let fullscreenSnapshot = null;
|
||||
|
||||
|
||||
/* =========================================================
|
||||
STACKED NAVIGATION (PANES)
|
||||
========================================================= */
|
||||
|
||||
function initStackedNavigation() {
|
||||
document.addEventListener("click", e => {
|
||||
const link = e.target.closest("a");
|
||||
if (!link) return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href.startsWith("#")) return;
|
||||
|
||||
const url = new URL(href, location.href);
|
||||
if (url.origin !== location.origin) return;
|
||||
if (!url.pathname.endsWith(".html")) return;
|
||||
|
||||
e.preventDefault();
|
||||
pushPane(url.pathname + url.hash);
|
||||
});
|
||||
}
|
||||
|
||||
async function pushPane(urlWithHash) {
|
||||
const track = document.querySelector(".stack-track");
|
||||
if (!track) return;
|
||||
|
||||
const existing = [...track.children].find(p => p.dataset.url === urlWithHash);
|
||||
if (existing) {
|
||||
existing.scrollIntoView({ behavior: "smooth", inline: "end" });
|
||||
return;
|
||||
}
|
||||
|
||||
const [url, hash] = urlWithHash.split("#");
|
||||
const res = await fetch(url);
|
||||
const doc = new DOMParser().parseFromString(await res.text(), "text/html");
|
||||
|
||||
const content = doc.querySelector("#content");
|
||||
if (!content) return;
|
||||
|
||||
const pane = document.createElement("article");
|
||||
pane.className = "stack-pane";
|
||||
pane.dataset.url = urlWithHash;
|
||||
|
||||
pane.appendChild(content);
|
||||
track.appendChild(pane);
|
||||
pane.scrollIntoView({ behavior: "smooth", inline: "end" });
|
||||
|
||||
if (hash) {
|
||||
requestAnimationFrame(() => {
|
||||
pane.querySelector(`#${CSS.escape(hash)}`)
|
||||
?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
}
|
||||
|
||||
// Find the title-section and attach event listeners to the controls
|
||||
const titleSection = pane.querySelector(".title-section");
|
||||
if (titleSection) {
|
||||
const closeBtn = titleSection.querySelector(".pane-close");
|
||||
const fullscreenBtn = titleSection.querySelector(".pane-fullscreen");
|
||||
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener("click", () => {
|
||||
if (document.body.classList.contains("pane-fullscreen")) {
|
||||
exitFullscreen({ removePane: pane });
|
||||
return;
|
||||
}
|
||||
pane.remove();
|
||||
updateURL();
|
||||
});
|
||||
}
|
||||
|
||||
if (fullscreenBtn) {
|
||||
fullscreenBtn.addEventListener("click", () => {
|
||||
if (pane.classList.contains("is-fullscreen")) {
|
||||
exitFullscreen();
|
||||
} else {
|
||||
enterFullscreen(pane);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateURL();
|
||||
}
|
||||
|
||||
function initInitialPaneControls() {
|
||||
// Initialize controls for the initial pane (pane-root) that's already in the HTML
|
||||
const initialPane = document.querySelector(".pane-root");
|
||||
if (!initialPane) return;
|
||||
|
||||
const titleSection = initialPane.querySelector(".title-section");
|
||||
if (!titleSection) return;
|
||||
|
||||
const closeBtn = titleSection.querySelector(".pane-close");
|
||||
const fullscreenBtn = titleSection.querySelector(".pane-fullscreen");
|
||||
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener("click", () => {
|
||||
if (document.body.classList.contains("pane-fullscreen")) {
|
||||
exitFullscreen({ removePane: initialPane });
|
||||
return;
|
||||
}
|
||||
initialPane.remove();
|
||||
updateURL();
|
||||
});
|
||||
}
|
||||
|
||||
if (fullscreenBtn) {
|
||||
fullscreenBtn.addEventListener("click", () => {
|
||||
if (initialPane.classList.contains("is-fullscreen")) {
|
||||
exitFullscreen();
|
||||
} else {
|
||||
enterFullscreen(initialPane);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", e => {
|
||||
if (e.key === "Escape" && document.body.classList.contains("pane-fullscreen")) {
|
||||
exitFullscreen();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function enterFullscreen(pane) {
|
||||
if (!fullscreenSnapshot) {
|
||||
fullscreenSnapshot = [...document.querySelectorAll(".stack-pane")]
|
||||
.map(p => p.dataset.url);
|
||||
}
|
||||
|
||||
document.querySelectorAll(".stack-pane").forEach(p => {
|
||||
if (p !== pane) p.remove();
|
||||
});
|
||||
|
||||
document.body.classList.add("pane-fullscreen");
|
||||
pane.classList.add("is-fullscreen");
|
||||
|
||||
updateURL();
|
||||
}
|
||||
|
||||
|
||||
async function exitFullscreen({ removePane } = {}) {
|
||||
if (!fullscreenSnapshot) return;
|
||||
|
||||
const removeUrl = removePane?.dataset.url;
|
||||
|
||||
document.body.classList.remove("pane-fullscreen");
|
||||
|
||||
document
|
||||
.querySelectorAll(".stack-pane.is-fullscreen")
|
||||
.forEach(p => p.remove());
|
||||
|
||||
// Restore stack EXCEPT the removed pane
|
||||
for (const url of fullscreenSnapshot) {
|
||||
if (url === removeUrl) continue;
|
||||
await pushPane(url);
|
||||
}
|
||||
|
||||
fullscreenSnapshot = null;
|
||||
updateURL();
|
||||
}
|
||||
|
||||
|
||||
function clearAllPanes() {
|
||||
const panes = [...document.querySelectorAll(".stack-pane")];
|
||||
|
||||
panes.slice(1).forEach(pane => pane.remove());
|
||||
|
||||
updateURL();
|
||||
}
|
||||
|
||||
function updateURL() {
|
||||
const urls = [...document.querySelectorAll(".stack-pane")]
|
||||
.map(p => p.dataset.url);
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
params.set("stackedNotes", urls.join("|"));
|
||||
history.replaceState({}, "", "?" + params.toString());
|
||||
}
|
||||
|
||||
async function restoreStackFromURL() {
|
||||
const params = new URLSearchParams(location.search);
|
||||
const stack = params.get("stackedNotes");
|
||||
if (!stack) return;
|
||||
|
||||
for (const url of stack.split("|").slice(1)) {
|
||||
await pushPane(url);
|
||||
}
|
||||
}
|
||||
function initClearPanesButton() {
|
||||
const btn = document.getElementById("close-all");
|
||||
if (!btn) return;
|
||||
|
||||
btn.addEventListener("click", () => {
|
||||
clearAllPanes();
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user