proctolog 0.1.0

data/public/decision-screenshots.js

@@ -0,0 +1,97 @@
+import { measured } from "./words.js";
+
+const PREFIX = "#screenshot-";
+const nameOf = (link) => {
+	const name = link.getAttribute("href").slice(PREFIX.length);
+	try {
+		return decodeURIComponent(name);
+	} catch {
+		return name;
+	}
+};
+
+export const prepareScreenshots = (box) => {
+	const links = [...box.querySelectorAll(`a[href^="${PREFIX}"]`)].filter(
+		(link) => !link.closest("[data-desk]"),
+	);
+	if (!links.length) return;
+	// A link names a picture alone, a pair, or one half of a pair.
+	const sources = [
+		...document.querySelectorAll(
+			"main.description figure.picture, main.description figure.pair > .half",
+		),
+	];
+	const references = new Map(links.map((link) => [nameOf(link), link]));
+	const panel = document.createElement("details");
+	panel.dataset.decisionScreenshots = "";
+	panel.dataset.desk = "";
+	panel.className = "decision-screenshots";
+	const summary = document.createElement("summary");
+	summary.textContent = `Referenced screenshots (${references.size}) · s`;
+	const pictures = document.createElement("div");
+	pictures.className = "decision-pictures";
+	for (const [name, link] of references) {
+		const matches = sources.filter((figure) => figure.dataset.picture === name);
+		const images =
+			matches.length === 1 ? [...matches[0].querySelectorAll("img")] : [];
+		if (!images.length) {
+			const warning = document.createElement("p");
+			warning.className = "screenshot-warning";
+			warning.textContent = `${matches.length > 1 ? "Ambiguous screenshot reference" : "Screenshot not found"}: ${name}`;
+			pictures.append(warning);
+			continue;
+		}
+		const figure = document.createElement("figure");
+		figure.dataset.picture = name;
+		// A pair is previewed whole, its halves side by side.
+		figure.classList.toggle("pair", images.length > 1);
+		const previews = images.map((image) => {
+			const preview = image.cloneNode(false);
+			preview.removeAttribute("id");
+			preview.loading = "lazy";
+			preview.addEventListener("load", () => {
+				if (panel.open && document.activeElement === box)
+					panel.scrollIntoView({ block: "nearest" });
+			});
+			return preview;
+		});
+		const caption = document.createElement("figcaption");
+		const original = (matches[0].closest("figure.pair") ?? matches[0])
+			.nextElementSibling;
+		caption.textContent = `${link.textContent} — ${name}${original?.matches("p") ? `\n${measured(original.cloneNode(true)).trim()}` : ""}`;
+		figure.append(...previews, caption);
+		pictures.append(figure);
+	}
+	panel.append(summary, pictures);
+	box.querySelector(".beneath").prepend(panel);
+	for (const link of links) {
+		link.addEventListener("click", (event) => {
+			if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
+				return;
+			event.preventDefault();
+			panel.open = true;
+			box.focus({ preventScroll: true });
+			panel.scrollIntoView({ block: "nearest" });
+		});
+	}
+};
+
+export const toggleScreenshots = (box) => {
+	const panel = box?.querySelector("[data-decision-screenshots]");
+	if (!panel) return;
+	panel.open = !panel.open;
+	(panel.open ? panel : box).scrollIntoView({ block: "nearest" });
+};
+
+// Shown with the decision as it comes into view, where the page has room for them.
+export const openScreenshots = (box) => {
+	const panel = box?.querySelector("[data-decision-screenshots]");
+	if (panel) panel.open = true;
+};
+
+export const closeScreenshots = (box) => {
+	const panel = box?.querySelector("[data-decision-screenshots]");
+	if (!panel?.open) return false;
+	panel.open = false;
+	return true;
+};