proctolog 0.1.0

data/public/respond.js

@@ -0,0 +1,95 @@
+// A note is written where it stands: a small form opens in the flow of the
+// page, right under what the note is about, from the template the page
+// carries. The page's script says where and about what. Nothing is a dialog,
+// and the page is not left until the note is saved.
+//
+// This also answers the buttons under a box of "Decisions for the owner",
+// which both pages show.
+
+const template = document.querySelector("#note-form");
+
+const fill = (form, name, values) => {
+	for (const [part, value] of Object.entries(values))
+		form.elements[`${name}[${part}]`].value = value;
+	form.querySelector(`fieldset[name="${name}"]`).disabled = false;
+};
+
+// Opens the form in `slot`, or turns the one already there to this note,
+// keeping what was typed. `quote` and `picture` are the parts of a place;
+// `back` is the address to come back to once the note is saved, when the page
+// is not the pull request's own. `written`, a note already there by its
+// `address`, `kind` and `text`, opens it again to be written over or withdrawn.
+export const respond = (
+	slot,
+	{ kind = "change", action, on, quote, picture, back, written },
+) => {
+	if (!slot.querySelector(".respond"))
+		slot.append(document.importNode(template.content, true));
+	const form = slot.querySelector(".respond form");
+
+	if (action) form.action = action;
+	form.elements.kind.value = written?.kind ?? kind;
+	if (written) {
+		form.action = written.address;
+		// What it said is what it is measured against, to know it was changed.
+		form.elements.text.defaultValue = written.text;
+		form.elements.text.value = written.text;
+	}
+	form.elements._method.disabled = !written;
+	form.querySelector("[data-withdraw]").hidden = !written;
+
+	const about = form.querySelector("[data-on]");
+	about.textContent = on ?? "";
+	about.hidden = !on;
+
+	for (const fieldset of form.querySelectorAll("fieldset[name]"))
+		fieldset.disabled = true;
+	if (quote) fill(form, "quote", quote);
+	if (picture) fill(form, "picture", picture);
+
+	form.elements.return.disabled = !back;
+	form.elements.return.value = back ?? "";
+
+	form.elements.text.focus();
+	// Written again from where it ends.
+	const end = form.elements.text.value.length;
+	if (written) form.elements.text.setSelectionRange(end, end);
+};
+
+const close = (holder) => {
+	const slot = holder.parentElement;
+	holder.remove();
+	slot.dispatchEvent(new CustomEvent("closed", { bubbles: true }));
+};
+
+document.addEventListener("click", (event) => {
+	const cancel = event.target.closest("[data-cancel]");
+	if (cancel) return close(cancel.closest(".respond"));
+
+	const action = event.target.closest("[data-respond]");
+	if (!action) return;
+	const beneath = action.closest(".beneath");
+	const {
+		notes,
+		exact,
+		before = "",
+		after = "",
+		section,
+		back,
+	} = beneath.dataset;
+	respond(beneath.querySelector(".slot"), {
+		kind: action.dataset.respond,
+		action: notes,
+		quote: { exact, before, after, section },
+		back,
+	});
+});
+
+document.addEventListener("keydown", (event) => {
+	const holder = event.target.closest(".respond");
+	if (!holder) return;
+
+	if (event.key === "Enter" && (event.metaKey || event.ctrlKey))
+		holder.querySelector("form").requestSubmit();
+	if (event.key === "Escape" && !event.target.value) close(holder);
+});