app/enhance/tools.ts

Functions

Imports

It imports app/lib/phage-tools.mjs. No module of this repo imports it.

Source

1import { resultView, runTool, TOOLS, type ViewNode } from "~/lib/phage-tools.mjs";
2
3/*
4 * The phage lab calculators, live. The server already rendered each form and its result from the
5 * query string (app/components/phage-tool.tsx), so this only recomputes on input with the same module
6 * and writes the values to the query string, so a copied URL shows the same calculation.
7 */
8
9function build(node: ViewNode | string): Node {
10  if (typeof node === "string") return document.createTextNode(node);
11  const el = document.createElement(node.tag);
12  if (node.className) el.className = node.className;
13  for (const child of node.children) el.appendChild(build(child));
14  return el;
15}
16
17for (const form of document.querySelectorAll<HTMLFormElement>("form[data-tool]")) {
18  const id = form.dataset.tool ?? "";
19  const instance = form.dataset.toolInstance ?? id;
20  /* A calculator inside a procedure step: several share a page, so none writes the address bar. */
21  const embedded = form.hasAttribute("data-tool-embedded");
22  const tool = TOOLS[id];
23  const status = document.querySelector(`[data-tool-status="${instance}"]`);
24  const detail = document.querySelector(`[data-tool-detail="${instance}"]`);
25  if (!tool || !status || !detail) {
26    throw new Error(`tools: the calculator "${id}" has no definition, status region or detail region.`);
27  }
28
29  const update = () => {
30    const data = new FormData(form);
31    const values: Record<string, string> = {};
32    for (const field of tool.fields) values[field.name] = String(data.get(field.name) ?? "");
33    const view = resultView(runTool(id, values));
34    status.replaceChildren(...view.summary.map(build));
35    detail.replaceChildren(...view.detail.map(build));
36
37    if (embedded) return;
38    const url = new URL(window.location.href);
39    for (const [name, value] of Object.entries(values)) url.searchParams.set(name, value);
40    window.history.replaceState(window.history.state, "", url);
41  };
42
43  form.addEventListener("input", update);
44  // Enter or the button recomputes in place rather than reloading the page.
45  form.addEventListener("submit", (event) => {
46    event.preventDefault();
47    update();
48  });
49}