components/history-list/history-list-rows.ts

Functions

Imports

It imports components/avatar/avatar.ts, components/history-list/history-list-model.ts, components/message/message.ts, components/time/time.ts. Imported by components/history-list/history-list.ts.

Source

1// The history list's rows, built as the server would render them (history-list.ts).
2
3import { initials } from "../avatar/avatar.ts";
4import { GLYPHS, glyphSvg } from "../message/message.ts";
5import { parse, relative } from "../time/time.ts";
6import { type Destination, type HistoryEntry, type Run, type Sign, deltaSign, deltaText, destinationWord, rangeText, runTitle, stamp } from "./history-list-model.ts";
7
8// ---------------------------------------------------------------------------------------
9// DOM.
10
11type Attrs = Record<string, string | boolean | undefined>;
12
13export function h<K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Attrs = {}, ...kids: Array<Node | string | null>): HTMLElementTagNameMap[K] {
14  const el = document.createElement(tag);
15  for (const [k, v] of Object.entries(attrs)) {
16    if (v === undefined || v === false) continue;
17    el.setAttribute(k, v === true ? "" : v);
18  }
19  el.append(...kids.filter((k): k is Node | string => k !== null));
20  return el;
21}
22
23const QUEUED_GLYPH = '<circle cx="8" cy="8" r="6.2" fill="none" stroke="currentColor" stroke-width="1.6"/>';
24
25export const SIGN_GLYPH: Record<Sign, string> = {
26  plus: '<path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M8 3v10M3 8h10"/>',
27  minus: '<path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M3 8h10"/>',
28  zero: '<path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M3 6h10M3 10h10"/>',
29};
30
31export function destinationGlyph(s: Destination["status"]): string {
32  return s === "live" ? GLYPHS.ok : s === "failed" ? GLYPHS.failure : QUEUED_GLYPH;
33}
34export function destinationTone(s: Destination["status"]): string {
35  return s === "live" ? "ok" : s === "failed" ? "crit" : "nodata";
36}
37
38export function statusEl(tone: string, glyph: string, word: string): HTMLElement {
39  return h("span", { class: "cap-status", "data-tone": tone }, glyphSvg(glyph), word);
40}
41
42function avatarEl(name: string, ai?: boolean): HTMLElement {
43  // The name is text beside the avatar, so the avatar is hidden from screen readers.
44  return h("span", { class: "cap-avatar", "data-size": "sm", "data-kind": ai ? "ai" : undefined, "aria-hidden": "true" }, h("span", { class: "cap-avatar-fallback" }, ai ? "AI" : initials(name)));
45}
46
47function whoEl(id: string, names: string[], ai?: boolean): HTMLElement {
48  const first = names[0] ?? "";
49  const label = names.length > 1 ? `${first} and ${names.length - 1} more` : first;
50  return h("span", { class: "cap-hist-who", id }, avatarEl(first, ai), h("span", { class: "cap-hist-name" }, label));
51}
52
53function deltaEl(id: string, n: number | undefined): HTMLElement {
54  // No word count: an empty cell keeps the columns in place and says nothing.
55  if (n === undefined) return h("span", { class: "cap-hist-delta", "data-sign": "none", "aria-hidden": "true" });
56  const sign = deltaSign(n);
57  return h("span", { class: "cap-hist-delta", id, "data-sign": sign }, glyphSvg(SIGN_GLYPH[sign], 12), h("span", {}, deltaText(n)));
58}
59
60function whenEl(id: string, iso: string, now: number, chevron = false): HTMLElement {
61  const meta = h("span", { class: "cap-row-meta", id });
62  meta.append(h("span", { class: "cap-hist-when" }, h("time", { class: "cap-time", "data-cap": "time", datetime: iso }, relative(parse(iso), now)), h("time", { class: "cap-hist-exact", datetime: iso }, stamp(iso, now))));
63  if (chevron) meta.append(h("span", { class: "cap-row-chevron", "aria-hidden": "true" }));
64  return meta;
65}
66
67export interface BuildOptions {
68  // Prefix for the ids the line makes, so two lists on a page do not collide.
69  prefix: string;
70  current?: boolean;
71  now?: number;
72  // The address a line's title opens (the version's own page); "?version=" by default.
73  versionHref?: string;
74  // Load-into-editor mode: the action on an earlier line is a link to this address plus the
75  // version's id (`?load=` is the usual tail), in place of Restore.
76  loadHref?: string;
77  // A read-only history: an earlier line has no action at all, neither Restore nor Load.
78  readOnly?: boolean;
79}
80
81function detailFor(e: HistoryEntry, id: string, now: number): HTMLElement | null {
82  const p = h("p", { class: "cap-row-detail", id });
83  if (e.kind === "named") {
84    p.append("Named version: ", h("b", {}, e.name ?? ""));
85  } else if (e.kind === "publish") {
86    p.append("Published to ");
87    (e.destinations ?? []).forEach((d, i) => {
88      if (i > 0) p.append(" ");
89      p.append(h("span", { class: "cap-hist-dest" }, statusEl(destinationTone(d.status), destinationGlyph(d.status), destinationWord(d.status)), " ", d.name));
90    });
91  } else if (e.kind === "restore" && e.restoredFrom) {
92    p.append(`Restored from ${stamp(e.restoredFrom.at, now)}`);
93  } else if (e.kind === "autosave") {
94    p.append("Autosave");
95  } else {
96    return null;
97  }
98  return p;
99}
100
101function pickEl(e: HistoryEntry, now: number): HTMLElement {
102  const input = h("input", { type: "checkbox", name: "compare", value: e.id, "data-cap-part": "pick" });
103  return h("span", { class: "cap-hist-pick" }, h("label", { class: "cap-check" }, input, h("span", { class: "cap-sr-only" }, `Compare this version, ${stamp(e.at, now)}, by ${e.who}`)));
104}
105
106function restoreButton(e: HistoryEntry, now: number): HTMLElement {
107  return h("button", { type: "button", class: "cap-btn", "data-variant": "quiet", "data-size": "sm", "data-cap-part": "restore", "data-version": e.id }, "Restore", h("span", { class: "cap-sr-only" }, ` the version from ${stamp(e.at, now)} by ${e.who}`));
108}
109
110// Load into editor: a link, so the page works as delivered. Nothing is added to the history;
111// the text goes to the editor and a save is what makes the version.
112function loadLink(e: HistoryEntry, href: string, now: number): HTMLElement {
113  return h("a", { class: "cap-btn", "data-variant": "quiet", "data-size": "sm", "data-cap-part": "load", "data-version": e.id, href: `${href}${encodeURIComponent(e.id)}` }, "Load into editor", h("span", { class: "cap-sr-only" }, ` the version from ${stamp(e.at, now)} by ${e.who}`));
114}
115
116export function actionFor(e: HistoryEntry, now: number, o: BuildOptions): HTMLElement | null {
117  if (o.readOnly) return null;
118  return o.loadHref ? loadLink(e, o.loadHref, now) : restoreButton(e, now);
119}
120
121// One line, exactly the markup the doc page shows (and the page is delivered with).
122export function buildRow(e: HistoryEntry, delta: number | undefined, o: BuildOptions): HTMLLIElement {
123  const now = o.now ?? Date.now();
124  const p = `${o.prefix}-${e.id}`;
125  const detail = detailFor(e, `${p}-d`, now);
126  const described = [detail ? `${p}-d` : "", delta === undefined ? "" : `${p}-w`, `${p}-t`].filter(Boolean).join(" ");
127  const li = h("li", { class: "cap-row cap-hist-row", "data-kind": e.kind, "data-id": e.id, "data-at": e.at, "data-words": e.words === undefined ? undefined : String(e.words), "data-who": e.who, "data-current": o.current ? "" : undefined });
128  const title = h("div", { class: "cap-row-title" }, h("a", { href: `${o.versionHref ?? "?version="}${encodeURIComponent(e.id)}`, "aria-describedby": described, title: e.summary }, e.summary));
129  const actions = h("div", { class: "cap-row-actions" }, o.current ? statusEl("ok", GLYPHS.ok, "Current") : actionFor(e, now, o));
130  li.append(pickEl(e, now), whoEl(`${p}-who`, [e.who], e.ai), title);
131  if (detail) li.append(detail);
132  li.append(deltaEl(`${p}-w`, delta), whenEl(`${p}-t`, e.at, now), actions);
133  return li;
134}
135
136// The group line of a run of autosaves, and the region that holds its lines.
137export function buildRun(run: Run, deltas: (number | undefined)[], o: BuildOptions): HTMLLIElement[] {
138  const now = o.now ?? Date.now();
139  const first = run.entries[0] as HistoryEntry;
140  const p = `${o.prefix}-run-${first.id}`;
141  const li = h("li", { class: "cap-row cap-hist-row", "data-kind": "run" });
142  const button = h("button", { type: "button", "aria-expanded": "false", "aria-controls": `${p}-rows`, "aria-describedby": `${p}-d ${p}-w ${p}-t` }, runTitle(run));
143  li.append(
144    h("span", { class: "cap-hist-pick" }),
145    whoEl(`${p}-who`, run.who),
146    h("div", { class: "cap-row-title" }, button),
147    h("p", { class: "cap-row-detail", id: `${p}-d` }, rangeText(run.from, run.to, now)),
148    deltaEl(`${p}-w`, run.delta),
149    whenEl(`${p}-t`, run.to, now, true),
150    h("div", { class: "cap-row-actions" }),
151  );
152  const list = h("ul", { role: "list", "aria-label": runTitle(run) });
153  run.entries.forEach((e, k) => list.append(buildRow(e, deltas[k], o)));
154  const region = h("li", { class: "cap-hist-region", id: `${p}-rows`, hidden: true }, list);
155  return [li, region];
156}