proctolog 0.1.0

data/public/notes.js

@@ -0,0 +1,731 @@
+// The page of one pull request: notes on words, on any block of the
+// description, on pictures, on the whole of it and on its scenarios.
+//
+// Words are quoted from the text of their section, never from what the layout
+// shows (words.js): the server found them in the same text, so a note finds
+// its words again wherever an edit moves them. A region of a picture is four
+// fractions of the picture as shown, so it holds at any size. A note is
+// written in a small form right under what it is about (respond.js).
+
+import { helping, keyOf } from "./keys.js";
+import { respond } from "./respond.js";
+import { toast } from "./toast.js";
+import { tryIt } from "./try.js";
+import { viewPictures } from "./viewer.js";
+import {
+	blockOf,
+	blocksIn,
+	elementOf,
+	hasWords,
+	ownWords,
+	quoteOf,
+} from "./words.js";
+
+const REGION_DRAG = 4;
+
+const selectionButton = document.querySelector("#note-selection");
+
+// Remembers which sections are unfolded, for this tab and this pull request.
+
+const sections = [...document.querySelectorAll("details.section")];
+const foldsKey = `proctolog:folds:${location.pathname}`;
+
+const remembered = () => {
+	try {
+		return JSON.parse(sessionStorage.getItem(foldsKey)) ?? {};
+	} catch {
+		return {};
+	}
+};
+
+const remember = () => {
+	const folds = Object.fromEntries(
+		sections.map((details) => [details.dataset.heading, details.open]),
+	);
+	try {
+		sessionStorage.setItem(foldsKey, JSON.stringify(folds));
+	} catch {
+		// A tab that keeps nothing simply opens as the server says.
+	}
+};
+
+const folds = remembered();
+for (const details of sections) {
+	if (details.dataset.heading in folds)
+		details.open = folds[details.dataset.heading];
+	details.addEventListener("toggle", remember);
+}
+
+// Finding things: a note scrolls to its mark, a mark lights its note.
+
+const unfold = (element) => {
+	for (let at = element.parentElement; at; at = at.parentElement)
+		if (at.localName === "details") at.open = true;
+};
+
+const light = (element) => {
+	clearTimeout(element.fadeOut);
+	element.classList.add("lit");
+	element.fadeOut = setTimeout(() => element.classList.remove("lit"), 1800);
+};
+
+const showNote = (id) => {
+	const marks = document.querySelectorAll(`[data-note="${id}"]`);
+	if (!marks.length) return;
+	unfold(marks[0]);
+	marks[0].scrollIntoView({ block: "center" });
+	for (const mark of marks) light(mark);
+};
+
+const showCard = (id) => {
+	const card = document.querySelector(`[data-card="${id}"]`);
+	if (!card) return;
+	unfold(card);
+	card.scrollIntoView({ block: "nearest" });
+	light(card);
+};
+
+document.addEventListener("click", (event) => {
+	if (event.target.closest("button, form, summary, a")) return;
+
+	const card = event.target.closest("[data-card]");
+	if (card) return showNote(card.dataset.card);
+
+	const mark = event.target.closest("[data-note]");
+	if (mark && getSelection().isCollapsed) showCard(mark.dataset.note);
+});
+
+const arrive = () => {
+	const target =
+		location.hash && document.getElementById(location.hash.slice(1));
+	if (!target) return;
+	unfold(target);
+	target.scrollIntoView({ block: "center" });
+	light(target);
+	const card = document.querySelector(`[data-card="${target.dataset.note}"]`);
+	if (card) light(card);
+};
+arrive();
+addEventListener("hashchange", arrive);
+
+// Where the form of a note opens. The desk's own elements are marked
+// data-desk, so that none of them is counted among the words of a section.
+
+const made = (tag, className) => {
+	const element = document.createElement(tag);
+	element.className = className;
+	element.setAttribute("data-desk", "");
+	return element;
+};
+
+// Right under a block, of its own kind, so that a list stays a list and a
+// table a table.
+const slotAfter = (block) => {
+	const next = block.nextElementSibling;
+	if (next?.matches(".slot")) return next.querySelector("td") ?? next;
+
+	const row = block.localName === "tr";
+	const slot = made(
+		row ? "tr" : block.localName === "li" ? "li" : "div",
+		"slot",
+	);
+	block.after(slot);
+	return row
+		? slot.appendChild(
+				Object.assign(document.createElement("td"), { colSpan: 99 }),
+			)
+		: slot;
+};
+
+const slotIn = (element) =>
+	element.querySelector(":scope > .slot") ??
+	element.appendChild(made("div", "slot"));
+
+// A picture's draft rectangle goes with the form that was written for it.
+document.addEventListener("closed", ({ target }) => {
+	(
+		target.previousElementSibling?.closest("[data-reading]") ||
+		document.querySelector("[data-note-whole]")
+	)?.focus({ preventScroll: true });
+	for (const draft of target.previousElementSibling?.querySelectorAll(
+		".draft",
+	) ?? [])
+		draft.remove();
+});
+
+// Words. A selection is noted under the block it begins in.
+
+const selectedWords = () => {
+	const selection = getSelection();
+	if (!selection.rangeCount || selection.isCollapsed) return null;
+
+	const range = selection.getRangeAt(0);
+	const quote = quoteOf(range);
+	return quote && { range, quote };
+};
+
+const noteSelection = () => {
+	const words = selectedWords();
+	if (!words) return false;
+
+	const { range, quote } = words;
+	selectionButton.hidden = true;
+	const block =
+		blockOf(range.startContainer) ??
+		blockOf(range.endContainer) ??
+		elementOf(range.commonAncestorContainer).closest("[data-quotable]");
+	respond(slotAfter(block), { on: quote.exact, quote });
+	return true;
+};
+
+// A block is noted for its own words, without selecting anything.
+
+const noteBlock = (block) => {
+	const quote = quoteOf(ownWords(block));
+	if (quote) respond(slotAfter(block), { on: quote.exact, quote });
+};
+
+// A place on a picture, as the note's form takes it.
+const placeOn = (figure, box) => ({
+	on: figure.dataset.picture,
+	picture: {
+		picture: figure.dataset.picture,
+		asset: figure.dataset.asset,
+		box: box.map(round).join(","),
+	},
+});
+
+// A note on a pair's half is written under the pair.
+const notePicture = (figure, box = [0, 0, 1, 1]) =>
+	respond(slotAfter(figure.closest("figure.picture")), placeOn(figure, box));
+
+let pending;
+document.addEventListener("selectionchange", () => {
+	clearTimeout(pending);
+	pending = setTimeout(() => {
+		const words = selectedWords();
+		selectionButton.hidden = !words;
+		if (!words) return;
+		const rect = words.range.getBoundingClientRect();
+		const left = Math.min(
+			rect.right,
+			innerWidth - selectionButton.offsetWidth - 8,
+		);
+		selectionButton.style.left = `${Math.max(8, left) + scrollX}px`;
+		selectionButton.style.top = `${rect.top + scrollY - selectionButton.offsetHeight - 6}px`;
+	}, 120);
+});
+
+// Keeps the selection alive while the button is pressed.
+selectionButton.addEventListener("mousedown", (event) =>
+	event.preventDefault(),
+);
+selectionButton.addEventListener("click", noteSelection);
+
+// A "+" in the gutter of each block that has words of its own. It shows while
+// the pointer is on the block, or the keyboard is in it, and stays on the
+// last block until another is entered, so that the pointer can cross to it.
+
+const pluses = new Map();
+
+for (const body of document.querySelectorAll("[data-quotable]")) {
+	for (const block of blocksIn(body)) {
+		if (block.matches("figure.picture") || !hasWords(block)) continue;
+
+		const plus = made("button", "plus");
+		plus.type = "button";
+		plus.textContent = "+";
+		plus.title = "Note on this block";
+		plus.setAttribute("aria-label", "Note on this block");
+		(block.localName === "tr" ? block.firstElementChild : block).prepend(plus);
+		pluses.set(block, plus);
+	}
+}
+
+let here = null;
+
+const rest = (block) => {
+	if (block === here) return;
+	pluses.get(here)?.classList.remove("here");
+	here = block;
+	pluses.get(here)?.classList.add("here");
+};
+
+const enter = ({ target }) => {
+	const block = blockOf(target);
+	if (block) rest(block);
+};
+
+document.addEventListener("pointerover", enter);
+document.addEventListener("focusin", enter);
+document
+	.querySelector("main.description")
+	?.addEventListener("pointerleave", () => rest(null));
+
+document.addEventListener("click", (event) => {
+	const plus = event.target.closest(".plus");
+	if (plus) noteBlock(blockOf(plus));
+});
+
+// Pictures: a drag draws a rectangle, a click pins a point.
+
+const round = (fraction) => Math.round(fraction * 1e4) / 1e4;
+const within = (fraction) => Math.min(Math.max(fraction, 0), 1);
+
+let drag = null;
+
+const pointOn = (event, frame) => ({
+	x: within((event.clientX - frame.left) / frame.width),
+	y: within((event.clientY - frame.top) / frame.height),
+});
+
+const boxBetween = (from, to) => [
+	Math.min(from.x, to.x),
+	Math.min(from.y, to.y),
+	Math.abs(to.x - from.x),
+	Math.abs(to.y - from.y),
+];
+
+const draw = (box) => {
+	drag.shape ??= drag.figure.appendChild(
+		Object.assign(document.createElement("span"), {
+			className: "region draft",
+		}),
+	);
+	const [left, top, width, height] = box.map(
+		(fraction) => `${fraction * 100}%`,
+	);
+	const pin = box[2] === 0 && box[3] === 0;
+	drag.shape.classList.toggle("pin", pin);
+	Object.assign(drag.shape.style, {
+		left,
+		top,
+		width: pin ? "" : width,
+		height: pin ? "" : height,
+	});
+};
+
+document.addEventListener("pointerdown", (event) => {
+	const image = event.target;
+	// A pair's half is a picture of its own to draw on.
+	const figure = image.closest("figure.pair > .half, figure.picture");
+	if (event.button !== 0 || image.localName !== "img" || !figure) return;
+
+	event.preventDefault();
+	image.setPointerCapture(event.pointerId);
+	for (const draft of figure.querySelectorAll(".draft")) draft.remove();
+	const frame = image.getBoundingClientRect();
+	drag = {
+		figure,
+		frame,
+		from: pointOn(event, frame),
+		start: event,
+		shape: null,
+	};
+});
+
+document.addEventListener("pointermove", (event) => {
+	if (!drag) return;
+	const moved = Math.hypot(
+		event.clientX - drag.start.clientX,
+		event.clientY - drag.start.clientY,
+	);
+	if (moved >= REGION_DRAG)
+		draw(boxBetween(drag.from, pointOn(event, drag.frame)));
+});
+
+document.addEventListener("pointerup", (event) => {
+	if (!drag) return;
+	const { figure, frame, from, start } = drag;
+	const dragged =
+		Math.hypot(event.clientX - start.clientX, event.clientY - start.clientY) >=
+		REGION_DRAG;
+	const box = dragged
+		? boxBetween(from, pointOn(event, frame))
+		: [from.x, from.y, 0, 0];
+	draw(box);
+	drag = null;
+	notePicture(figure, box);
+});
+
+document.addEventListener("pointercancel", () => {
+	drag?.shape?.remove();
+	drag = null;
+});
+
+// Reading has its own cursor; Tab still reaches every link and control.
+for (const element of document.querySelectorAll(
+	"h1, h2, h3, h4, summary, .conditions > li, li.scenario, [data-card]",
+)) {
+	if (element.closest("[data-desk]")) continue;
+	element.dataset.reading = "";
+	if (element.localName !== "summary") element.tabIndex = -1;
+}
+for (const body of document.querySelectorAll("[data-quotable]")) {
+	for (const block of blocksIn(body)) {
+		if (!block.matches("figure.picture") && !hasWords(block)) continue;
+		block.dataset.reading = "";
+		block.tabIndex = -1;
+	}
+}
+// How the reading moves, the same on every part of the page, returned work
+// included: ↓ and j go to the next block the page shows, ↑ and k to the one
+// before, in the order the page is read, through whatever is unfolded and
+// past nothing; a fold shut is one block, its heading. They stop at the first
+// and the last block, and leave the page for nowhere.
+const reading = () =>
+	[...document.querySelectorAll("[data-reading]")].filter(
+		(element) =>
+			element.getClientRects().length &&
+			// What a shut fold holds keeps its boxes, but is not shown.
+			!element.closest("details:not([open]) > :not(summary)") &&
+			!element.parentElement.closest("[data-decision]"),
+	);
+// What the page shows between its top and the bar at its foot.
+const inView = () => ({
+	top: 0,
+	bottom:
+		document.querySelector("footer.foot")?.getBoundingClientRect().top ??
+		innerHeight,
+});
+const focusReading = (element) => {
+	if (!element) return;
+	element.focus({ preventScroll: true });
+	const box = element.getBoundingClientRect();
+	const { bottom } = inView();
+	// A block taller than the page shows is brought in from its first line.
+	if (box.height > bottom) element.scrollIntoView({ block: "start" });
+	else element.scrollIntoView({ block: "nearest" });
+};
+// A block taller than the page shows is read a screen at a time, the way
+// the reading goes, before the reading moves on from it: nothing is passed
+// over unseen.
+const SCREEN = 0.8;
+const readOn = (block, direction) => {
+	if (!block) return false;
+	const box = block.getBoundingClientRect();
+	const { top, bottom } = inView();
+	if (box.height <= bottom - top) return false;
+	const beyond = direction > 0 ? box.bottom - bottom : top - box.top;
+	if (beyond <= 1) return false;
+	const was = scrollY;
+	scrollBy({ top: direction * Math.min(beyond, (bottom - top) * SCREEN) });
+	// At the end of the page there is nothing more to scroll to.
+	return scrollY !== was;
+};
+const moveReading = (direction) => {
+	const items = reading();
+	const current = document.activeElement.closest("[data-reading]");
+	if (readOn(current, direction)) return;
+	const at = items.indexOf(current);
+	focusReading(items[Math.min(Math.max(at + direction, 0), items.length - 1)]);
+};
+// [ and ] go from heading to heading: the description's sections, the
+// returned work and each response in it.
+const HEADING =
+	"details.section > summary, [data-round-results] > h2, [data-request] > h3";
+const moveSection = (direction) => {
+	const items = reading();
+	const at = items.indexOf(document.activeElement.closest("[data-reading]"));
+	const headings = items.filter((element) => element.matches(HEADING));
+	// The heading of the part the reading is in: the last at it or before it.
+	const current = items
+		.slice(0, at + 1)
+		.findLast((element) => element.matches(HEADING));
+	const index = headings.indexOf(current);
+	focusReading(
+		headings[Math.min(Math.max(index + direction, 0), headings.length - 1)],
+	);
+};
+const foldSection = (open) => {
+	const section = document.activeElement.closest("details");
+	if (!section) return;
+	section.open = open;
+	if (!open) focusReading(section.querySelector("summary"));
+};
+const initial = document.getElementById(location.hash.slice(1));
+(initial?.matches("[data-reading]")
+	? initial
+	: document.querySelector("main.description > details > summary")
+)?.focus({ preventScroll: true });
+
+// Keys. They are ignored while typing.
+
+// To another page by the link that names the key, once the desk has the
+// owner's last choice: the page it goes to counts them. `absent` is said when
+// this page has no such link.
+const follow = async (key, absent) => {
+	const link = document.querySelector(`a[data-key="${key}"]`);
+	if (!link) return toast(absent);
+	await globalThis.proctologSettled?.();
+	location.assign(link.href);
+};
+
+const keys = {
+	n: () => {
+		if (noteSelection()) return;
+		const block = blockOf(document.activeElement) || here;
+		if (block?.matches("figure.picture")) notePicture(block);
+		else if (block) noteBlock(block);
+		else
+			toast(
+				"Move onto a block or a picture first, then n writes a note on it.",
+			);
+	},
+	c: () =>
+		toast(
+			"n writes a note here. c suggests a change on a decision: f goes to the first one.",
+		),
+	w: () => respond(document.querySelector("#whole-slot"), {}),
+	j: () => moveReading(1),
+	ArrowDown: () => moveReading(1),
+	J: () => follow("J", "This is the last pull request of the route."),
+	k: () => moveReading(-1),
+	ArrowUp: () => moveReading(-1),
+	K: () => follow("K", "This is the first pull request of the route."),
+	N: () => follow("N", "No other pull request has decisions left to review."),
+	"[": () => moveSection(-1),
+	"]": () => moveSection(1),
+	ArrowLeft: () => foldSection(false),
+	ArrowRight: () => foldSection(true),
+	Home: () => focusReading(reading()[0]),
+	End: () => focusReading(reading().at(-1)),
+	h: () => follow("h"),
+	r: () => follow("r"),
+	d: () => document.querySelector("form[data-code]")?.requestSubmit(),
+	t: tryIt,
+	// A click, so the browser opens the pull request in a tab of its own.
+	G: () => {
+		const link = document.querySelector('.whole a[data-key="G"]');
+		if (link) link.click();
+		else toast("Nobody has opened this pull request yet: GitHub has nothing of it.");
+	},
+};
+
+// Looking closely at a picture (viewer.js): the one the reading rests on, among
+// all of the description's, or the pictures a decision links to while it is
+// the one being decided. A place marked there is noted on the picture itself,
+// in the description, which the page shows again to write the note.
+const figures = () => [
+	...document.querySelectorAll("main.description figure.picture"),
+];
+// A picture as the viewer takes it: one alone, or a pair by its halves,
+// each a picture a mark can be made on.
+const shown = (figure) => {
+	if (figure.matches(".pair"))
+		return {
+			name: figure.dataset.picture,
+			figure,
+			pair: [...figure.querySelectorAll(":scope > .half")].map(shown),
+		};
+	const image = figure.querySelector("img");
+	return {
+		src: image.currentSrc || image.src,
+		alt: image.alt,
+		name: figure.dataset.picture ?? image.alt,
+		figure,
+	};
+};
+// A picture a decision links to, as the description has it: the link may
+// name a pair, or one half of it.
+const linkedShown = (preview) => {
+	const figure = [
+		...document.querySelectorAll(
+			"main.description figure.picture, main.description figure.pair > .half",
+		),
+	].find((one) => one.dataset.picture === preview.dataset.picture);
+	return figure ? shown(figure) : shown(preview);
+};
+// A note on a place marked in the viewer is written beside it, and saved
+// without leaving it, so that the owner goes on looking where they were. A
+// note drawn there opens beside it the same way, with its words, to be
+// written over or withdrawn. The page comes back at the last of them once the
+// viewer closes. A note the desk would not take is sent as the page sends it,
+// which says why.
+let notedAt;
+const notesAddress = document
+	.querySelector("#note-form")
+	?.content.querySelector("form")
+	.getAttribute("action");
+// What the notes saved in the viewer say now, which their cards do not yet.
+const savedHere = new Map();
+const writtenNote = (id) => {
+	const card = document.querySelector(`[data-card="${id}"]`);
+	const said = savedHere.get(id) ?? card?.dataset;
+	return said && { address: `${notesAddress}/${id}`, kind: said.kind, text: said.text };
+};
+const noteInViewer = ({ figure }, box, beside, id) => {
+	if (!figure?.dataset.asset) {
+		toast("That picture is not among the description's, so it takes no note.");
+		return false;
+	}
+	const written = id && writtenNote(id);
+	if (id && !written) {
+		toast("That note is not on this page, so it cannot be opened here.");
+		return false;
+	}
+	respond(beside, { ...placeOn(figure, box), written });
+	const form = beside.querySelector("form");
+	if (form.dataset.inViewer === undefined) {
+		form.dataset.inViewer = "";
+		form.addEventListener("submit", async (event) => {
+			event.preventDefault();
+			const response = await fetch(form.action, {
+				method: "POST",
+				body: new FormData(form, event.submitter),
+				headers: { Accept: "application/json" },
+			}).catch(() => undefined);
+			if (!response?.headers.get("content-type")?.includes("json"))
+				return form.submit();
+			const saved = await response.json();
+			const withdrawn = event.submitter?.matches("[data-withdraw]") ?? false;
+			notedAt = saved.at;
+			savedHere.set(saved.id, {
+				kind: form.elements.kind.value,
+				text: form.elements.text.value.trim(),
+			});
+			beside.dispatchEvent(
+				new CustomEvent("noted", { detail: { id: saved.id, withdrawn } }),
+			);
+		});
+	}
+	return true;
+};
+const backAtNote = () => {
+	if (!notedAt) return;
+	const at = new URL(notedAt, location.href);
+	notedAt = undefined;
+	// A decision being decided keeps the page where it is: the page shows
+	// the note the next time it loads.
+	if (document.body.dataset.focus)
+		return toast(
+			"Your note is kept. The description shows it the next time the page loads.",
+		);
+	if (at.pathname !== location.pathname) return location.assign(at);
+	history.replaceState(history.state, "", at);
+	location.reload();
+};
+// The pictures Space would open here, and which of them first; nothing when
+// the owner is not at a picture, and Space is the browser's to scroll with.
+const picturesHere = () => {
+	const at = document.activeElement;
+	const figure =
+		at.closest("figure.picture") ??
+		(here?.matches("figure.picture") && !at.closest("[data-decision]")
+			? here
+			: null);
+	if (figure) {
+		const all = figures().filter((one) => one.querySelector("img"));
+		return {
+			pictures: all.map(shown),
+			first: Math.max(all.indexOf(figure), 0),
+		};
+	}
+	const linked = [
+		...(at
+			.closest("[data-decision]")
+			?.querySelectorAll(".decision-pictures figure") ?? []),
+	];
+	if (!linked.length) return;
+	return { pictures: linked.map(linkedShown), first: 0 };
+};
+const lookClosely = (found = picturesHere(), first = found?.first) => {
+	if (found)
+		viewPictures(found.pictures, first, {
+			note: noteInViewer,
+			closed: backAtNote,
+		});
+};
+keys[" "] = lookClosely;
+
+// A picture a decision links to opens at a click, on that one.
+document.addEventListener("click", (event) => {
+	const image = event.target.closest?.(".decision-pictures img");
+	if (!image) return;
+	const preview = image.closest("figure");
+	const linked = [
+		...preview.closest(".decision-pictures").querySelectorAll("figure"),
+	];
+	const found = picturesHere();
+	lookClosely(
+		found ?? { pictures: linked.map(linkedShown) },
+		linked.indexOf(preview),
+	);
+});
+
+// A picture a scenario's step names opens at a press, among the others that
+// step names, as the description has them, so a note can be made on it.
+const PICTURE_LINK = 'a[href^="#screenshot-"]';
+const pictureNamed = (link) => {
+	const name = decodeURIComponent(link.hash.slice("#screenshot-".length));
+	return [
+		...document.querySelectorAll(
+			"main.description figure.picture, main.description figure.pair > .half",
+		),
+	].find(
+		(figure) => figure.dataset.picture === name && figure.querySelector("img"),
+	);
+};
+document.addEventListener("click", (event) => {
+	const link = event.target.closest?.(`.pr-scenarios .steps ${PICTURE_LINK}`);
+	if (!link || event.metaKey || event.ctrlKey || event.shiftKey) return;
+	event.preventDefault();
+	const named = [...link.closest("li").querySelectorAll(PICTURE_LINK)].filter(
+		pictureNamed,
+	);
+	if (!named.includes(link))
+		return toast(
+			`The description shows no picture called ${link.hash.slice(1)}.`,
+		);
+	lookClosely(
+		{ pictures: named.map((one) => shown(pictureNamed(one))) },
+		named.indexOf(link),
+	);
+});
+
+document.addEventListener("keydown", (event) => {
+	// In a response that came back, c and d are its own (review-rounds.js).
+	if (
+		event.target.closest("[data-request]") &&
+		["c", "d"].includes(keyOf(event))
+	)
+		return;
+	if (event.isComposing || event.metaKey || event.ctrlKey || event.altKey)
+		return;
+	if (helping()) return;
+	// While the page shows the decisions alone, one being decided or the
+	// panel where they end, moving is the decisions' own script's to do.
+	const deciding = ["c", "j", "k", "ArrowDown", "ArrowUp", "Home", "End"];
+	const folding = ["[", "]", "ArrowLeft", "ArrowRight"];
+	if (
+		(document.body.dataset.decisionMode || document.body.dataset.focus) &&
+		[...deciding, ...folding].includes(keyOf(event))
+	)
+		return;
+	if (!Object.hasOwn(keys, keyOf(event))) return;
+	if (event.target.closest("input, textarea, select, [contenteditable]"))
+		return;
+	// Space presses a button and scrolls a page: it is a key of this page only at a picture.
+	if (
+		keyOf(event) === " " &&
+		(event.target.closest("button, a, summary") || !picturesHere())
+	)
+		return;
+	// On a decision the reading rests on, c is for the decisions' script: it opens the decision to suggest a change.
+	if (keyOf(event) === "c" && event.target.matches?.("li[data-decision]"))
+		return;
+
+	event.preventDefault();
+	keys[keyOf(event)]();
+});
+
+for (const button of document.querySelectorAll("[data-note-whole]"))
+	button.addEventListener("click", keys.w);
+
+for (const button of document.querySelectorAll("[data-note-scenario]"))
+	button.addEventListener("click", () =>
+		respond(slotIn(button.closest("li.scenario")), {
+			action: button.dataset.noteScenario,
+			on: button.dataset.name,
+		}),
+	);