proctolog 0.1.0

data/public/messages.js

@@ -0,0 +1,103 @@
+// What the desk said, kept to look back on: each sentence the toast showed,
+// and each line a page opened with after a form, with when and on which page.
+// m, or the messages button at the right of the bar, lists them newest first.
+// The list is this browser's own and keeps the last few dozen.
+
+const KEPT = "proctolog:messages";
+const KEEP = 80;
+
+const kept = () => {
+	try {
+		const messages = JSON.parse(localStorage.getItem(KEPT) ?? "[]");
+		return Array.isArray(messages) ? messages : [];
+	} catch {
+		return [];
+	}
+};
+
+export const keep = (text) => {
+	const messages = kept();
+	messages.push({
+		text,
+		at: new Date().toISOString(),
+		page: document.title,
+		path: location.pathname + location.search,
+	});
+	try {
+		localStorage.setItem(KEPT, JSON.stringify(messages.slice(-KEEP)));
+	} catch {
+		// A browser that keeps nothing still shows each message as it comes.
+	}
+	if (list.matches(":popover-open")) fill();
+};
+
+const when = (at) => {
+	const time = new Date(at);
+	const clock = time.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23",
+	});
+	return time.toDateString() === new Date().toDateString()
+		? clock
+		: `${time.toLocaleDateString([], { month: "short", day: "numeric" })}, ${clock}`;
+};
+
+const element = (tag, properties = {}) =>
+	Object.assign(document.createElement(tag), properties);
+
+const list = document.body.appendChild(
+	element("section", {
+		id: "messages",
+		className: "messages",
+		popover: "auto",
+		ariaLabel: "Messages",
+	}),
+);
+
+const fill = () => {
+	const messages = kept().toReversed();
+	list.replaceChildren(
+		element("h3", { textContent: "Messages, newest first" }),
+		messages.length
+			? element("ol")
+			: element("p", {
+					className: "none",
+					textContent:
+						"Nothing yet. What the desk says at the foot of a page is kept here.",
+				}),
+	);
+	list.querySelector("ol")?.append(
+		...messages.map(({ text, at, page, path }) => {
+			const item = element("li");
+			const where = element("p", { className: "where" });
+			where.append(
+				element("time", { dateTime: at, textContent: when(at) }),
+				" · ",
+				path === location.pathname + location.search
+					? element("span", { textContent: `${page} (this page)` })
+					: element("a", { href: path, textContent: page }),
+			);
+			item.append(where, element("p", { textContent: text }));
+			return item;
+		}),
+	);
+};
+
+list.addEventListener("beforetoggle", (event) => {
+	if (event.newState === "open") fill();
+	document
+		.querySelector("[data-show-messages]")
+		?.setAttribute("aria-expanded", event.newState === "open");
+});
+
+const button = document.querySelector("[data-show-messages]");
+button?.addEventListener("click", () => list.togglePopover());
+// A press of the pointer there leaves the owner where they are on the page.
+button?.addEventListener("mousedown", (event) => event.preventDefault());
+
+export const toggleMessages = () => list.togglePopover();
+
+// The line a page opens with after a form is kept as the toast's are.
+for (const flash of document.querySelectorAll(".flash"))
+	keep(flash.textContent.trim());