454 lines
13 KiB
JavaScript
Executable File
454 lines
13 KiB
JavaScript
Executable File
/* =========================================================
|
|
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;
|
|
|
|
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"), 1600);
|
|
} catch {
|
|
button.textContent = "failed";
|
|
setTimeout(() => (button.textContent = "copy"), 1600);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/* =========================================================
|
|
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);
|
|
|
|
// Apply saved preference, defaulting to dark
|
|
const initial = (saved === "dark" || saved === "light") ? saved : "dark";
|
|
root.setAttribute("data-theme", initial);
|
|
|
|
const btn = document.getElementById("theme-toggle");
|
|
if (!btn) return;
|
|
|
|
const updateIcon = theme => {
|
|
btn.textContent = theme === "dark" ? "☀" : "☽";
|
|
btn.setAttribute("aria-label",
|
|
theme === "dark" ? "Switch to light theme" : "Switch to dark theme");
|
|
};
|
|
|
|
updateIcon(initial);
|
|
|
|
btn.addEventListener("click", () => {
|
|
const current = root.getAttribute("data-theme");
|
|
const next = current === "dark" ? "light" : "dark";
|
|
root.setAttribute("data-theme", next);
|
|
localStorage.setItem(key, next);
|
|
updateIcon(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);
|
|
});
|
|
}
|
|
|
|
function scrollPaneIntoView(pane) {
|
|
// Scroll the horizontal stack container, not the page, to avoid
|
|
// the browser jumping the whole viewport vertically.
|
|
const root = document.getElementById("stack-root");
|
|
if (!root) return;
|
|
const paneLeft = pane.offsetLeft;
|
|
const paneRight = paneLeft + pane.offsetWidth;
|
|
const viewRight = root.scrollLeft + root.offsetWidth;
|
|
if (paneLeft < root.scrollLeft || paneRight > viewRight) {
|
|
root.scrollTo({ left: paneLeft, behavior: "smooth" });
|
|
}
|
|
}
|
|
|
|
async function pushPane(pathname, hash = "") {
|
|
const track = document.querySelector(".stack-track");
|
|
if (!track) return;
|
|
|
|
const existing = [...track.children].find(p => p.dataset.url === pathname);
|
|
if (existing) {
|
|
scrollPaneIntoView(existing);
|
|
return;
|
|
}
|
|
|
|
// If in fullscreen, exit first so the new pane is immediately visible
|
|
if (document.body.classList.contains("pane-fullscreen")) {
|
|
await exitFullscreen();
|
|
}
|
|
|
|
const res = await fetch(pathname);
|
|
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 = pathname;
|
|
|
|
pane.appendChild(content);
|
|
track.appendChild(pane);
|
|
scrollPaneIntoView(pane);
|
|
|
|
if (hash) {
|
|
requestAnimationFrame(() => {
|
|
const target = pane.querySelector(`#${CSS.escape(hash)}`);
|
|
if (target) {
|
|
pane.scrollTop = target.offsetTop;
|
|
}
|
|
});
|
|
}
|
|
|
|
attachPaneControls(pane);
|
|
updateURL();
|
|
}
|
|
|
|
function attachPaneControls(pane) {
|
|
const titleSection = pane.querySelector(".title-section");
|
|
if (!titleSection) return;
|
|
|
|
// Remove edit button if present
|
|
titleSection.querySelectorAll(".pane-edit").forEach(btn => btn.remove());
|
|
|
|
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.style.animation = "pane-out var(--dur-mid) var(--ease-in) forwards";
|
|
setTimeout(() => {
|
|
pane.remove();
|
|
updateURL();
|
|
}, 200);
|
|
});
|
|
}
|
|
|
|
if (fullscreenBtn) {
|
|
fullscreenBtn.addEventListener("click", () => {
|
|
if (pane.classList.contains("is-fullscreen")) {
|
|
exitFullscreen();
|
|
} else {
|
|
enterFullscreen(pane);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function initInitialPaneControls() {
|
|
const initialPane = document.querySelector(".pane-root");
|
|
if (!initialPane) return;
|
|
|
|
// Remove edit button
|
|
initialPane.querySelectorAll(".pane-edit").forEach(btn => btn.remove());
|
|
|
|
attachPaneControls(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());
|
|
|
|
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();
|
|
});
|
|
}
|
|
|
|
/* =========================================================
|
|
PANE EXIT ANIMATION (keyframe injected at runtime)
|
|
========================================================= */
|
|
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
@keyframes pane-out {
|
|
from { opacity: 1; transform: translateX(0); }
|
|
to { opacity: 0; transform: translateX(16px); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|