proctolog 0.1.0

data/public/toast.js

@@ -0,0 +1,26 @@
+// A sentence that answers a key: what it did, or why it did nothing. It shows
+// above the key bar for a few seconds and is read out, then goes; the page is
+// not moved by it. Each is kept, for m to show again (messages.js).
+
+import { keep } from "./messages.js";
+
+let region;
+let fading;
+
+export const toast = (message) => {
+	if (!message) return;
+	keep(message);
+	region ??= document.body.appendChild(
+		Object.assign(document.createElement("p"), {
+			className: "toast",
+			role: "status",
+		}),
+	);
+	region.textContent = message;
+	region.dataset.shown = "";
+	clearTimeout(fading);
+	fading = setTimeout(
+		() => delete region.dataset.shown,
+		Math.min(9000, 2600 + message.length * 45),
+	);
+};

data/public/try.js

@@ -0,0 +1,124 @@
+// Try it, beside a pull request. The server is started and stopped while the
+// page stays where it is, and the panel is read again from the page whenever
+// the server's state moves, so its buttons come alive once the app is up. A
+// press that sets a scenario up says so while the app makes its state.
+
+import { toast } from "./toast.js";
+
+const PANEL = "[data-try]";
+const panel = () => document.querySelector(PANEL);
+
+let waiting;
+
+// The panel as the page has it now, in place of the one shown, with the
+// focus kept on the button it was on.
+const refresh = async () => {
+	const response = await fetch(location.href, {
+		headers: { Accept: "text/html" },
+	}).catch(() => undefined);
+	if (!response?.ok) return;
+	const page = new DOMParser().parseFromString(
+		await response.text(),
+		"text/html",
+	);
+	const fresh = page.querySelector(PANEL);
+	const shown = panel();
+	if (!fresh || !shown) return;
+	const buttons = [...shown.querySelectorAll("button")];
+	const focused = buttons.indexOf(document.activeElement);
+	shown.replaceWith(fresh);
+	if (focused >= 0) fresh.querySelectorAll("button")[focused]?.focus();
+	watch();
+};
+
+// While the server starts, it is asked every two seconds whether it is up.
+const watch = () => {
+	clearTimeout(waiting);
+	const shown = panel();
+	if (shown?.dataset.state !== "starting") return;
+	waiting = setTimeout(async () => {
+		const response = await fetch(shown.dataset.statusUrl, {
+			headers: { Accept: "application/json" },
+		}).catch(() => undefined);
+		const { state } = (await response?.json().catch(() => undefined)) ?? {};
+		if (state && state !== "starting") refresh();
+		else watch();
+	}, 2000);
+};
+
+document.addEventListener("submit", async (event) => {
+	const form = event.target.closest?.(`${PANEL} form[data-server]`);
+	if (!form) return;
+	event.preventDefault();
+	form.querySelector("button").disabled = true;
+	const response = await fetch(form.action, {
+		method: "POST",
+		body: new FormData(form),
+		headers: { Accept: "application/json" },
+	}).catch(() => undefined);
+	if (!response?.headers.get("content-type")?.includes("json"))
+		return form.submit();
+	const { notice, alert } = await response.json();
+	toast(alert ?? notice);
+	refresh();
+});
+
+// Making a state can take a while, the app's runner booting first: the line
+// under the scenario's button says so meanwhile. A scenario in your own
+// Chrome goes on in a tab of its own, so this page has only to say where.
+document.addEventListener("submit", (event) => {
+	const form = event.target.closest?.(`${PANEL} form[data-set-up]`);
+	if (!form) return;
+	const button = form.querySelector("button");
+	const how = form.closest("li").querySelector(".how");
+	const said = how.innerHTML;
+	const elsewhere = form.target === "_blank";
+	how.textContent = elsewhere
+		? "Setting up, in a new tab…"
+		: "Setting up: the app makes its state, then a Chrome opens…";
+	requestAnimationFrame(() => {
+		button.disabled = true;
+	});
+	if (elsewhere)
+		addEventListener(
+			"focus",
+			() => {
+				how.innerHTML = said;
+				button.disabled = false;
+			},
+			{ once: true },
+		);
+});
+
+// Words to copy go to the clipboard at a press. Where the page may not write
+// there, they are selected instead, for the owner's own Command-C.
+document.addEventListener("click", async (event) => {
+	const button = event.target.closest?.(".copyable [data-copy]");
+	if (!button) return;
+	const words = button.closest(".copyable").querySelector("pre");
+	const copied = await navigator.clipboard
+		?.writeText(words.textContent)
+		.then(() => true)
+		.catch(() => false);
+	if (!copied) {
+		getSelection().selectAllChildren(words);
+		return toast("Selected: Command-C copies it.");
+	}
+	button.textContent = "copied";
+	setTimeout(() => {
+		button.textContent = "copy";
+	}, 1600);
+});
+
+// t goes to the panel: the first of its buttons that can be pressed.
+export const tryIt = () => {
+	const button = panel()?.querySelector("button:not(:disabled)");
+	if (button) return button.focus();
+	toast(
+		panel()
+			? "Nothing in Try it can be pressed now."
+			: "This pull request has no scenarios.",
+	);
+};
+
+watch();