components/detail-panel/detail-panel.ts

Functions

Imports

It imports components/dialog/dialog.ts. No module of this repo imports it.

Source

1// The detail panel: a record opened from its row, in the shared dialog (components/dialog) as
2// a side sheet on the right. The shared dialog does the opening, Esc, the backdrop, focus
3// placed and handed back, and the history entry that Back takes away; this module adds the
4// Copy buttons and the status line. No framework; the React wrapper calls the same functions.
5import { closeDialog, openDialog, wireDialog } from "../dialog/dialog.ts";
6
7export interface DetailOptions {
8  // Pushes "#detail-<id>" so Back closes the panel. Default: the dialog's data-cap-history.
9  history?: boolean;
10}
11
12// The identifier used in the address: data-cap-detail-id, or the dialog's id.
13export function detailHash(dialog: HTMLDialogElement): string {
14  return `#detail-${dialog.dataset.capDetailId ?? dialog.id}`;
15}
16
17// The address-driven mode (`data-cap-detail-param="inspect"`): the panel is open while the address
18// carries `?inspect=<id>`, so a plain link to that address opens it with no script (the server
19// renders the panel `open`) and with script the same link opens it as the modal. The panel's own
20// id is data-cap-detail-id, or the dialog's id. Other parts of the address are kept.
21const paramOf = (dialog: HTMLDialogElement) => dialog.dataset.capDetailParam ?? "";
22const idOf = (dialog: HTMLDialogElement) => dialog.dataset.capDetailId ?? dialog.id;
23
24// The address with the panel's parameter set (open) or removed (closed).
25export function detailUrl(dialog: HTMLDialogElement, open: boolean, from: string = location.href): string {
26  const url = new URL(from);
27  const param = paramOf(dialog);
28  if (!param) return url.toString();
29  if (open) url.searchParams.set(param, idOf(dialog));
30  else url.searchParams.delete(param);
31  return url.toString();
32}
33
34// Whether the address names this panel.
35export function detailInUrl(dialog: HTMLDialogElement, from: string = location.href): boolean {
36  const param = paramOf(dialog);
37  return !!param && new URL(from).searchParams.get(param) === idOf(dialog);
38}
39
40// Per panel: whether this page pushed the entry (Back takes it away), and whether the close came
41// from Back or Forward (the address already moved).
42const urlState = new WeakMap<HTMLDialogElement, { pushed: boolean; fromPop: boolean }>();
43const stateOf = (dialog: HTMLDialogElement) => {
44  let s = urlState.get(dialog);
45  if (!s) urlState.set(dialog, (s = { pushed: false, fromPop: false }));
46  return s;
47};
48
49const wired = new WeakMap<HTMLDialogElement, () => void>();
50
51// Wires the shared dialog's rules (Close, the backdrop, focus back to the row, the history
52// entry) and the Copy buttons. Returns a function that unwires it. Idempotent.
53export function wireDetail(dialog: HTMLDialogElement): () => void {
54  const had = wired.get(dialog);
55  if (had) return had;
56  // The panel's address is "#detail-<id>"; the shared dialog reads its prefix from the attribute.
57  if (dialog.hasAttribute("data-cap-history") && !dialog.dataset.capHistory) dialog.dataset.capHistory = "detail";
58  const unwireBase = wireDialog(dialog);
59  const onClick = (e: MouseEvent) => {
60    const copy = (e.target as Element).closest<HTMLElement>("[data-cap-copy]");
61    if (copy && dialog.contains(copy)) void copyFrom(copy, dialog);
62  };
63  const onClose = () => {
64    const status = dialog.querySelector("[data-cap-part='status']");
65    if (status) status.textContent = "";
66    if (!paramOf(dialog)) return;
67    // Closed by any means: the address stops naming the panel. A close that came from Back or
68    // Forward has nothing to undo; one that follows our own push takes that entry back (so Back
69    // goes where it went before); one that began at the address (a load, a shared link) rewrites it.
70    const st = stateOf(dialog);
71    if (st.fromPop) {
72      st.fromPop = false;
73      st.pushed = false;
74    } else if (detailInUrl(dialog)) {
75      if (st.pushed) {
76        st.pushed = false;
77        history.back();
78      } else history.replaceState(history.state, "", detailUrl(dialog, false));
79    }
80  };
81  // Back or Forward moved the address: the panel follows it.
82  const onPop = () => {
83    if (!paramOf(dialog)) return;
84    const named = detailInUrl(dialog);
85    if (named && !dialog.open) openDetail(dialog, null);
86    else if (!named && dialog.open) {
87      stateOf(dialog).fromPop = true;
88      dialog.close();
89    }
90  };
91  dialog.addEventListener("click", onClick);
92  dialog.addEventListener("close", onClose);
93  window.addEventListener("popstate", onPop);
94  const off = () => {
95    dialog.removeEventListener("click", onClick);
96    dialog.removeEventListener("close", onClose);
97    window.removeEventListener("popstate", onPop);
98    unwireBase();
99    wired.delete(dialog);
100  };
101  wired.set(dialog, off);
102  return off;
103}
104
105// Opens a panel from the control that asked for it (the row's link). Focus goes to the first
106// control inside, or to Close when there is none.
107export function openDetail(dialog: HTMLDialogElement, opener: Element | null = document.activeElement, opts: DetailOptions = {}): void {
108  if (dialog.open) return;
109  if (opts.history && !dialog.hasAttribute("data-cap-history")) dialog.dataset.capHistory = "detail";
110  if (!wired.has(dialog)) wireDetail(dialog);
111  openDialog(dialog, opener, opts.history === undefined ? {} : { history: opts.history });
112}
113
114export function closeDetail(dialog: HTMLDialogElement): void {
115  closeDialog(dialog);
116}
117
118// Copies the text of the element a Copy button names (data-cap-copy="<id>"), and says what
119// happened in the panel's status line. Where the clipboard is refused, it selects the text
120// and says how to copy it.
121export async function copyFrom(button: HTMLElement, scope: ParentNode = document): Promise<boolean> {
122  const source = document.getElementById(button.dataset.capCopy ?? "");
123  const status = (button.closest("dialog") ?? scope).querySelector("[data-cap-part='status']");
124  const what = button.dataset.capCopyWhat ?? "Text";
125  if (!source) return false;
126  const text = source.textContent?.trim() ?? "";
127  try {
128    await navigator.clipboard.writeText(text);
129    if (status) status.textContent = `${what} copied.`;
130    return true;
131  } catch {
132    const range = document.createRange();
133    range.selectNodeContents(source);
134    const sel = window.getSelection();
135    sel?.removeAllRanges();
136    sel?.addRange(range);
137    if (status) status.textContent = `Could not reach the clipboard. ${what} is selected: copy it with Ctrl C or ⌘ C.`;
138    return false;
139  }
140}
141
142// Wires every panel under root and every trigger [data-cap-detail-open="<dialog id>"].
143// A trigger that is a link keeps its href for a new tab; a plain click opens the panel.
144export function enhance(root: ParentNode = document): () => void {
145  const undo: Array<() => void> = [];
146  for (const dialog of root.querySelectorAll<HTMLDialogElement>("dialog.cap-detail[data-cap='detail-panel']:not([data-cap-ready])")) {
147    undo.push(wireDetail(dialog));
148    // The address names this panel (a load, a shared link, a plain link followed with no script):
149    // the server may have rendered it `open` and not modal, so take that away and open it as the modal.
150    if (detailInUrl(dialog)) {
151      if (dialog.open && !dialog.matches(":modal")) dialog.removeAttribute("open");
152      openDetail(dialog, null);
153    }
154  }
155  for (const trigger of root.querySelectorAll<HTMLElement>("[data-cap-detail-open]:not([data-cap-ready])")) {
156    trigger.dataset.capReady = "";
157    if (!trigger.hasAttribute("aria-haspopup")) trigger.setAttribute("aria-haspopup", "dialog");
158    const onClick = (e: MouseEvent) => {
159      if (e.ctrlKey || e.metaKey || e.shiftKey || e.button !== 0) return;
160      const dialog = document.getElementById(trigger.dataset.capDetailOpen ?? "");
161      if (!(dialog instanceof HTMLDialogElement)) return;
162      e.preventDefault();
163      if (paramOf(dialog) && !detailInUrl(dialog)) {
164        history.pushState(history.state, "", detailUrl(dialog, true));
165        stateOf(dialog).pushed = true;
166      }
167      openDetail(dialog, trigger);
168    };
169    trigger.addEventListener("click", onClick);
170    undo.push(() => {
171      trigger.removeEventListener("click", onClick);
172      delete trigger.dataset.capReady;
173    });
174  }
175  return () => undo.forEach((f) => f());
176}