proctolog 0.1.0

data/public/keys.js

@@ -0,0 +1,228 @@
+// What every page with keys shares: ? opens the list of them all, and the bar
+// at the foot of the page says the few that matter where the owner is now. A
+// page's script tells the bar by calling `mode`; a page without one keeps the
+// line the server wrote.
+
+import { toggleMessages } from "./messages.js";
+import { prNumber } from "./pr-number.js";
+import { toast } from "./toast.js";
+
+const help = document.querySelector("#keys-help");
+const line = document.querySelector("[data-mode]");
+
+// What sits above the foot, a toast or the messages, stands clear of it at
+// whatever height it takes: its keys may wrap to two lines, or the list of
+// them all be docked.
+const foot = document.querySelector(".foot");
+if (foot)
+	new ResizeObserver(() =>
+		document.body.style.setProperty("--foot-height", `${foot.offsetHeight}px`),
+	).observe(foot);
+
+// The pane at the left opens on the pull request the page is about.
+const current = document.querySelector(".side .stops [aria-current]");
+if (current) {
+	const pane = current.closest(".side");
+	// Scroll the route pane alone; on a narrow page it sits above the reading.
+	if (getComputedStyle(pane).position === "sticky")
+		pane.scrollTop +=
+			current.getBoundingClientRect().top - pane.getBoundingClientRect().top -
+			(pane.clientHeight - current.offsetHeight) / 2;
+}
+
+// The desk keeps what it read of GitHub until it is asked to read again. Once
+// a page is shown, it asks whether GitHub has moved on since, and says which
+// pull requests did, in the pane and on their rows. The answer is good for a
+// few minutes in this tab, so going from page to page asks nothing.
+const GOOD_FOR = 3 * 60 * 1000;
+const read = document.querySelector("[data-freshness]");
+
+const sayMoved = ({ changed = [], closed = [] }) => {
+	const line = read.querySelector("[data-moved]");
+	const numbers = (list) => list.map((number) => `#${number}`).join(", ");
+	line.textContent = [
+		changed.length ? `Changed on GitHub since: ${numbers(changed)}` : "",
+		closed.length ? `No longer open: ${numbers(closed)}` : "",
+	]
+		.filter(Boolean)
+		.join(". ");
+	line.hidden = !line.textContent;
+	// A row says which of the two, for the words side.js shows over it.
+	for (const row of document.querySelectorAll("[data-side-pr]")) {
+		const number = prNumber(row.dataset.sidePr);
+		if (closed.includes(number)) row.dataset.moved = "closed";
+		else if (changed.includes(number)) row.dataset.moved = "changed";
+		else delete row.dataset.moved;
+	}
+};
+
+const askWhetherMoved = async () => {
+	const key = `proctolog:moved:${read.dataset.freshness}:${read.dataset.readAt}`;
+	try {
+		const kept = JSON.parse(sessionStorage.getItem(key) ?? "null");
+		if (kept && kept.asked > Date.now() - GOOD_FOR) return sayMoved(kept);
+	} catch {
+		// A tab that keeps nothing asks on every page.
+	}
+	const response = await fetch(read.dataset.freshness, {
+		headers: { Accept: "application/json" },
+	});
+	if (!response.ok) return;
+	const answer = { ...(await response.json()), asked: Date.now() };
+	try {
+		sessionStorage.setItem(key, JSON.stringify(answer));
+	} catch {
+		// Said on this page all the same.
+	}
+	sayMoved(answer);
+};
+if (read) setTimeout(() => askWhetherMoved().catch(() => {}), 400);
+
+// The key a press means, whatever the keyboard is set to. A letter is read by
+// where it sits when the layout types another script (Hebrew, Greek, Cyrillic),
+// and its case by Shift alone, so Caps Lock does not turn j into J.
+export const keyOf = (event) => {
+	const { key, code = "" } = event;
+	const letter = /^[a-z]$/i.test(key)
+		? key
+		: key.length === 1 && key > "\u007f" && /^Key[A-Z]$/.test(code)
+			? code.slice(3)
+			: undefined;
+	if (!letter) return key;
+	return event.shiftKey ? letter.toUpperCase() : letter.toLowerCase();
+};
+// The route's own script is not a module: it asks for the key, and says what
+// a key did, by these names.
+globalThis.proctologKey = keyOf;
+globalThis.proctologSay = toast;
+
+const typing = (target) =>
+	target.closest?.("input, textarea, select, [contenteditable]");
+
+// Grouse's overlay keeps its keys. A key typed in a note reaches the page as
+// pressed on <grouse-widget> itself, which no guard on the desk reads as
+// typing, so it goes no further than the overlay. The overlay's own shortcut
+// listens before this, as the key comes down.
+document
+	.querySelector("grouse-widget")
+	?.addEventListener("keydown", (event) => event.stopPropagation());
+
+// ? docks the list of every key above the bar, and puts it away again. It is
+// no dialog: the page's keys go on answering under it, and the desk remembers
+// from page to page that the owner keeps it open.
+const KEPT_OPEN = "proctolog:keys-open";
+const toggle = document.querySelector("[data-show-keys]");
+const dock = (open) => {
+	help.hidden = !open;
+	document.body.toggleAttribute("data-keys-open", open);
+	// The page leaves the docked list its room, so its last lines can still be read.
+	document.body.style.setProperty("--keys-height", `${help.offsetHeight}px`);
+	toggle.setAttribute("aria-expanded", open);
+	toggle.querySelector("[data-keys-word]").textContent = open
+		? "put the keys away"
+		: "keep the keys open";
+	try {
+		localStorage.setItem(KEPT_OPEN, open ? "1" : "");
+	} catch {
+		// A browser that keeps nothing opens the list on each page it is asked on.
+	}
+	document.dispatchEvent(new CustomEvent("keys-docked"));
+};
+const keptOpen = () => {
+	try {
+		return localStorage.getItem(KEPT_OPEN) === "1";
+	} catch {
+		return false;
+	}
+};
+if (help && keptOpen()) dock(true);
+
+document.addEventListener("keydown", (event) => {
+	if (!help || event.isComposing || event.metaKey || event.ctrlKey) return;
+	if (event.altKey || event.key !== "?" || typing(event.target)) return;
+	event.preventDefault();
+	dock(help.hidden);
+});
+
+// m lists what the desk said lately, on every page, and puts the list away.
+document.addEventListener("keydown", (event) => {
+	if (event.isComposing || event.metaKey || event.ctrlKey || event.altKey)
+		return;
+	if (keyOf(event) !== "m" || typing(event.target)) return;
+	if (document.querySelector("dialog[open]")) return;
+	event.preventDefault();
+	toggleMessages();
+});
+
+// P brings the whole burst back from a part, from every page: the pane says
+// which part is in focus and holds the way back.
+document.addEventListener("keydown", (event) => {
+	if (event.isComposing || event.metaKey || event.ctrlKey || event.altKey)
+		return;
+	if (keyOf(event) !== "P" || typing(event.target)) return;
+	if (document.querySelector("dialog[open]")) return;
+	const back = document.querySelector('.side a[data-key="P"]');
+	if (!back) return;
+	event.preventDefault();
+	location.assign(back.href);
+});
+toggle?.addEventListener("click", () => dock(help.hidden));
+// A press of the pointer there leaves the owner where they are on the page.
+toggle?.addEventListener("mousedown", (event) => event.preventDefault());
+
+// The keys of the block the owner is on lead the docked list. A page with a
+// cursor of its own says them here; `hints` are pairs like the bar's.
+export const thisBlock = (hints = []) => {
+	const group = help?.querySelector("[data-this-block]");
+	if (!group) return;
+	group.hidden = !hints.length;
+	group.querySelector("dl").replaceChildren(
+		...hints.map(([keys, what]) => {
+			const row = document.createElement("div");
+			const pressed = document.createElement("dt");
+			pressed.append(
+				...keys
+					.split(" ")
+					.map((key) =>
+						Object.assign(document.createElement("kbd"), { textContent: key }),
+					),
+			);
+			row.append(
+				pressed,
+				Object.assign(document.createElement("dd"), { textContent: what }),
+			);
+			return row;
+		}),
+	);
+};
+
+// Whether a panel has opened over the page: a page's own keys rest while one
+// has. The docked list of keys is not one.
+export const helping = () =>
+	!!document.querySelector("dialog[open], :popover-open");
+
+// `hints` are pairs of keys and what they do: [["j k", "move"], ["a", "leave as is"]].
+let shown;
+export const mode = (name, hints = []) => {
+	const said = JSON.stringify([name, hints]);
+	if (!line || said === shown) return;
+	shown = said;
+	const label = Object.assign(document.createElement("strong"), {
+		textContent: name,
+	});
+	line.replaceChildren(
+		label,
+		...hints.map(([keys, what]) => {
+			const hint = document.createElement("span");
+			hint.append(
+				...keys
+					.split(" ")
+					.map((key) =>
+						Object.assign(document.createElement("kbd"), { textContent: key }),
+					),
+				` ${what}`,
+			);
+			return hint;
+		}),
+	);
+};

data/public/mentions.js

@@ -0,0 +1,389 @@
+// A # and a number, typed into any box of the desk, may be a pull request:
+// the desk lists those it may be just under the #, from every pull request
+// of the repository, open or not. ↑ and ↓ choose, Tab or Enter puts the one
+// chosen in place of what was typed. The owner may not mean a pull request
+// at all: Esc puts the list away and leaves the # as typed, and so does
+// carrying on past it, or leaving it behind. A key the list answers is the
+// list's alone: the page under it never hears that Esc, so no form closes
+// and no screen is left with it.
+
+import { keyOf } from "./keys.js";
+
+// A box that takes a pattern of its own (a slug) takes no #.
+const takes = (field) =>
+	field?.matches?.("textarea, input[type=text], input:not([type])") &&
+	!field.pattern &&
+	!field.readOnly;
+
+// The # the caret is in, in a box's text: where it starts and ends, and its
+// digits. One that does not begin a word is none (a word#12, an ), nor
+// is one whose digits run on into a word.
+const mentionAt = (field) => {
+	const { value, selectionStart: caret, selectionEnd } = field;
+	if (caret !== selectionEnd) return;
+	const begun = value.slice(0, caret).match(/(?<![\w&#])#(\d{1,9})$/);
+	const rest = value.slice(caret).match(/^\d*(?!\w)/);
+	if (!begun || !rest) return;
+	return {
+		start: caret - begun[0].length,
+		end: caret + rest[0].length,
+		digits: begun[1] + rest[0],
+	};
+};
+
+// Where a character of a box's text stands on the screen: the text up to it
+// set again, unseen, in the box's own type and width.
+const SET_AS_IN_THE_BOX = [
+	"boxSizing",
+	"width",
+	"borderTopWidth",
+	"borderRightWidth",
+	"borderBottomWidth",
+	"borderLeftWidth",
+	"paddingTop",
+	"paddingRight",
+	"paddingBottom",
+	"paddingLeft",
+	"fontFamily",
+	"fontSize",
+	"fontWeight",
+	"letterSpacing",
+	"lineHeight",
+	"textIndent",
+	"textTransform",
+	"wordSpacing",
+	"tabSize",
+	"overflowWrap",
+	"wordBreak",
+];
+const placeOf = (field, index) => {
+	const style = getComputedStyle(field);
+	const copy = document.createElement("div");
+	for (const name of SET_AS_IN_THE_BOX) copy.style[name] = style[name];
+	Object.assign(copy.style, {
+		position: "fixed",
+		top: "0",
+		left: "0",
+		visibility: "hidden",
+		whiteSpace: field.matches("textarea") ? "pre-wrap" : "pre",
+	});
+	copy.textContent = field.value.slice(0, index);
+	const mark = copy.appendChild(document.createElement("span"));
+	mark.textContent = "#";
+	document.body.append(copy);
+	const box = field.getBoundingClientRect();
+	const place = {
+		left: box.left + mark.offsetLeft - field.scrollLeft,
+		top: box.top + mark.offsetTop - field.scrollTop,
+		bottom: box.top + mark.offsetTop + mark.offsetHeight - field.scrollTop,
+	};
+	copy.remove();
+	return place;
+};
+
+const made = (tag, properties = {}) =>
+	Object.assign(document.createElement(tag), properties);
+
+// The list, made once and moved to whichever box asks: into the box's own
+// dialog when it has one, as the rest of the page is out of reach while a
+// dialog is open.
+const panel = made("div", { className: "mentions", hidden: true });
+panel.dataset.desk = "";
+const options = made("ul", { id: "mentions", role: "listbox" });
+options.setAttribute("aria-label", "Pull requests this # may mean");
+const looking = made("p", { className: "looking" });
+const hint = made("p", { className: "hint" });
+hint.append(
+	made("kbd", { textContent: "↑" }),
+	made("kbd", { textContent: "↓" }),
+	" choose ",
+	made("kbd", { textContent: "Tab" }),
+	" put it in ",
+	made("kbd", { textContent: "Esc" }),
+	" leave the # as it is",
+);
+panel.append(looking, options, hint);
+// A press of the pointer on the list leaves the caret in the box.
+panel.addEventListener("mousedown", (event) => event.preventDefault());
+
+// The # the list is open for, and those it may mean. `picked` is the one
+// the owner chose themselves, by key or pointer. `settled` is a # the owner
+// put away or filled in: it is not offered again while it stands.
+let here;
+let found = [];
+let chosen = 0;
+let picked;
+let settled;
+
+const shown = () => !panel.hidden;
+
+const close = () => {
+	panel.hidden = true;
+	here?.field.setAttribute("aria-expanded", "false");
+	here?.field.removeAttribute("aria-activedescendant");
+	here = undefined;
+	found = [];
+	picked = undefined;
+};
+
+const leave = () => {
+	if (here) settled = { field: here.field, start: here.start };
+	close();
+};
+
+const place = () => {
+	if (!here) return;
+	const at = placeOf(here.field, here.start);
+	const below = at.bottom + 2;
+	const room = innerHeight - below;
+	const { offsetHeight: height, offsetWidth: width } = panel;
+	panel.style.top = `${room < height && at.top > height ? at.top - height - 2 : below}px`;
+	panel.style.left = `${Math.max(0, Math.min(at.left, innerWidth - width - 8))}px`;
+};
+
+const choose = (index) => {
+	chosen = (index + found.length) % found.length;
+	options.querySelectorAll("[role=option]").forEach((option, at) => {
+		option.setAttribute("aria-selected", at === chosen);
+		if (at === chosen) {
+			here.field.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		}
+	});
+};
+
+const pick = (index) => {
+	choose(index);
+	picked = found[chosen];
+};
+
+const row = (mention, index) => {
+	const option = made("li", { id: `mention-${mention.number}` });
+	option.setAttribute("role", "option");
+	option.append(
+		made("span", { className: "number", textContent: `#${mention.number}` }),
+		made("span", { className: "title", textContent: mention.title }),
+		made("span", { className: "state", textContent: mention.state }),
+	);
+	option.addEventListener("mousemove", () => {
+		if (chosen !== index) pick(index);
+	});
+	option.addEventListener("click", () => {
+		pick(index);
+		put();
+	});
+	return option;
+};
+
+const show = () => {
+	const { field } = here;
+	const home = field.closest("dialog") ?? document.body;
+	if (panel.parentElement !== home) home.append(panel);
+	panel.hidden = false;
+	field.setAttribute("aria-autocomplete", "list");
+	field.setAttribute("aria-controls", options.id);
+	field.setAttribute("aria-expanded", "true");
+	place();
+};
+
+// The desk's answer may come after the owner has picked from a list
+// narrowed by their typing: what they picked stays chosen while it is there.
+const list = (mentions) => {
+	found = mentions;
+	looking.hidden = true;
+	options.replaceChildren(...mentions.map(row));
+	options.hidden = false;
+	hint.hidden = false;
+	show();
+	const kept = mentions.findIndex(({ number }) => number === picked?.number);
+	choose(Math.max(0, kept));
+};
+
+// What the desk answered for each run of digits, for as long as the page is
+// open. A question `signal` calls off is never answered.
+const answers = new Map();
+const lookUp = async (digits, signal) => {
+	if (answers.has(digits)) return answers.get(digits);
+	const response = await fetch(
+		`/mentions?number=${encodeURIComponent(digits)}`,
+		{ headers: { Accept: "application/json" }, signal },
+	);
+	if (!response.ok) return [];
+	const mentions = await response.json();
+	answers.set(digits, mentions);
+	return mentions;
+};
+let asking;
+const lookUpTyped = (digits) => {
+	asking?.abort();
+	asking = new AbortController();
+	return lookUp(digits, asking.signal);
+};
+
+// Words a page's script sets itself, a saved answer, shown as the server
+// shows the owner's words: each # that names a pull request goes to it, its
+// title beside; one of the burst's own goes to its page on the desk.
+const WRITTEN = /((?<![\w&#])#\d+(?!\w))/;
+const mentionOf = async (written) => {
+	const digits = written.slice(1);
+	const answer = await lookUp(digits).catch(() => []);
+	const mention = answer.find(({ number }) => `${number}` === digits);
+	if (!mention) return written;
+	const shown = made("span", { className: "mention" });
+	shown.dataset.state = mention.state;
+	const onDesk = document.querySelector(`[data-side-pr="${digits}"] a[href]`);
+	shown.append(
+		made("a", { href: onDesk?.href ?? mention.url, textContent: written }),
+		" ",
+		made("span", { className: "mention-title", textContent: mention.title }),
+	);
+	if (mention.state !== "open")
+		shown.append(
+			" ",
+			made("span", {
+				className: "mention-state",
+				textContent: `· ${mention.state}`,
+			}),
+		);
+	return shown;
+};
+export const withMentions = async (element) => {
+	const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+	const texts = [];
+	while (walker.nextNode())
+		if (!walker.currentNode.parentElement.closest(".mention"))
+			texts.push(walker.currentNode);
+	for (const text of texts) {
+		const pieces = text.data.split(WRITTEN);
+		if (pieces.length === 1) continue;
+		const shown = await Promise.all(
+			pieces.map((piece) => (WRITTEN.test(piece) ? mentionOf(piece) : piece)),
+		);
+		if (text.isConnected) text.replaceWith(...shown);
+	}
+};
+
+const lookingFor = (digits) => {
+	found = [];
+	looking.textContent = `Looking for #${digits} among the pull requests…`;
+	looking.hidden = false;
+	options.hidden = true;
+	hint.hidden = true;
+	show();
+};
+
+// Another digit narrows the list at once, to those that still begin so, and
+// the desk's answer follows. The first # of a desk reads every pull request
+// GitHub has, which takes a few seconds: the list says so while it waits,
+// if the wait is long enough to be seen.
+const offer = async (field, at) => {
+	here = { field, ...at };
+	const narrowed = found.filter(({ number }) =>
+		`${number}`.startsWith(at.digits),
+	);
+	if (narrowed.length) list(narrowed);
+	else if (shown()) lookingFor(at.digits);
+	const waiting = setTimeout(() => {
+		if (here?.digits === at.digits && !found.length) lookingFor(at.digits);
+	}, 150);
+	const mentions = await lookUpTyped(at.digits).catch(() => undefined);
+	clearTimeout(waiting);
+	if (mentions === undefined) return;
+	if (here?.field !== field || here.digits !== at.digits) return;
+	if (mentions.length) list(mentions);
+	else close();
+};
+
+// The pull request chosen, in place of the # as typed. Typed in, as far as
+// the box can tell, so that undo takes it back out. A space after it when
+// it ends the text, so that the owner writes on.
+const put = () => {
+	const mention = found[chosen];
+	if (!here || !mention) return false;
+	const { field, start, end } = here;
+	const text = `#${mention.number}${end === field.value.length ? " " : ""}`;
+	settled = { field, start };
+	close();
+	field.setSelectionRange(start, end);
+	if (!document.execCommand("insertText", false, text)) {
+		field.setRangeText(text, start, end, "end");
+		field.dispatchEvent(new Event("input", { bubbles: true }));
+	}
+};
+
+document.addEventListener("input", (event) => {
+	const field = event.target;
+	if (!takes(field) || event.isComposing) return;
+	const at = mentionAt(field);
+	if (!at) {
+		settled = undefined;
+		return close();
+	}
+	if (settled?.field === field && settled.start === at.start) return close();
+	settled = undefined;
+	offer(field, at);
+});
+
+// The caret leaving the #, or the box, puts the list away.
+const stillHere = () => {
+	if (!here) return;
+	const at = mentionAt(here.field);
+	if (document.activeElement !== here.field || at?.start !== here.start)
+		close();
+};
+document.addEventListener("keyup", stillHere);
+document.addEventListener("pointerup", stillHere);
+document.addEventListener("focusout", (event) => {
+	if (event.target === here?.field) close();
+});
+addEventListener("resize", place);
+document.addEventListener("scroll", place, true);
+
+// The keys the list answers while it is shown. Enter and Tab put a pull
+// request in only when there is one to put; otherwise they are the box's.
+const KEYS = {
+	Escape: leave,
+	ArrowDown: () => pick(chosen + 1),
+	"Ctrl+n": () => pick(chosen + 1),
+	ArrowUp: () => pick(chosen - 1),
+	"Ctrl+p": () => pick(chosen - 1),
+	Enter: put,
+	Tab: put,
+};
+const pressed = (event) =>
+	[
+		event.ctrlKey && "Ctrl",
+		event.altKey && "Alt",
+		event.metaKey && "Meta",
+		event.shiftKey && "Shift",
+		keyOf(event),
+	]
+		.filter(Boolean)
+		.join("+");
+
+// Heard first of anything on the page, in the window's capture, and kept
+// from everything after. The key's release goes with it.
+let answered;
+addEventListener(
+	"keydown",
+	(event) => {
+		if (!shown() || event.isComposing || event.target !== here?.field) return;
+		const key = pressed(event);
+		const does = KEYS[key];
+		if (!does || (!found.length && key !== "Escape")) return;
+		if (does() === false) return;
+		event.preventDefault();
+		event.stopImmediatePropagation();
+		answered = event.key;
+	},
+	true,
+);
+addEventListener(
+	"keyup",
+	(event) => {
+		if (event.key !== answered) return;
+		answered = undefined;
+		event.stopImmediatePropagation();
+	},
+	true,
+);