components/media/media-tile.ts

Functions

Imports

It imports components/media/media-record.ts, components/meter/meter.ts. Imported by components/media/media-inspector.ts, components/media/media.ts.

Source

1// The media library's tiles: the status glyphs and the markup a tile is drawn from. A tile's facts are
2// its data attributes, so the page, the filters and the inspector read one thing.
3
4import { enhance as enhanceMeters } from "../meter/meter.ts";
5import { byteSize, describeRecord, flagsFor, parseTags, type AltState, type Flag, type MediaRecord, type UsedIn } from "./media-record.ts";
6
7const NS = "http://www.w3.org/2000/svg";
8const GLYPHS: Record<string, string[]> = {
9  crit: ["M5 1h6l4 4v6l-4 4H5l-4-4V5zM7.2 4h1.6v5H7.2zM7.2 10.4h1.6V12H7.2z"],
10  warn: ["M8 1.2 15.4 14H.6zM7.3 6h1.4v4H7.3zM7.3 11h1.4v1.4H7.3z"],
11  ok: ["M8 1a7 7 0 1 0 0 14A7 7 0 1 0 8 1zM3.9 9l3 3 5.2-5.6-1.4-1.4-3.8 4.2-1.6-1.6z"],
12};
13
14// A status glyph, drawn in currentColor: a shape for each meaning, so colour is never alone.
15export function glyph(kind: "crit" | "warn" | "info" | "ok" | "nodata" | "running"): SVGSVGElement {
16  const svg = document.createElementNS(NS, "svg");
17  svg.setAttribute("class", "cap-status-glyph");
18  svg.setAttribute("viewBox", "0 0 16 16");
19  svg.setAttribute("aria-hidden", "true");
20  svg.setAttribute("focusable", "false");
21  const add = (tag: string, attrs: Record<string, string>) => {
22    const el = document.createElementNS(NS, tag);
23    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
24    svg.append(el);
25  };
26  const paths = GLYPHS[kind];
27  if (paths) for (const d of paths) add("path", { fill: "currentColor", "fill-rule": "evenodd", d });
28  else if (kind === "info") {
29    add("rect", { x: "1.5", y: "1.5", width: "13", height: "13", rx: "2", fill: "none", stroke: "currentColor", "stroke-width": "1.6" });
30    add("path", { fill: "currentColor", d: "M7.2 7h1.6v5H7.2zM7.2 4h1.6v1.7H7.2z" });
31  } else if (kind === "nodata") {
32    add("circle", { cx: "8", cy: "8", r: "6.2", fill: "none", stroke: "currentColor", "stroke-width": "1.6" });
33    add("path", { fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", d: "M5 8h6" });
34  } else {
35    add("circle", { cx: "8", cy: "8", r: "6.2", fill: "none", stroke: "currentColor", "stroke-width": "1.6", opacity: "0.35" });
36    add("path", { fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", d: "M8 1.8a6.2 6.2 0 0 1 6.2 6.2" });
37  }
38  return svg;
39}
40
41function statusSpan(tone: Flag["tone"], word: string): HTMLSpanElement {
42  const span = document.createElement("span");
43  span.className = "cap-status";
44  span.dataset.tone = tone;
45  span.append(glyph(tone), document.createTextNode(word));
46  return span;
47}
48
49const CHECK_PATH = "M3.5 8.5l3 3 6-7";
50
51function checkBox(): HTMLElement[] {
52  const box = document.createElement("span");
53  box.className = "cap-media-check-box";
54  box.setAttribute("aria-hidden", "true");
55  const svg = document.createElementNS(NS, "svg");
56  svg.setAttribute("viewBox", "0 0 16 16");
57  const p = document.createElementNS(NS, "path");
58  p.setAttribute("fill", "none");
59  p.setAttribute("stroke", "currentColor");
60  p.setAttribute("stroke-width", "2.4");
61  p.setAttribute("stroke-linecap", "round");
62  p.setAttribute("stroke-linejoin", "round");
63  p.setAttribute("d", CHECK_PATH);
64  svg.append(p);
65  box.append(svg);
66  const word = document.createElement("span");
67  word.className = "cap-media-check-word";
68  word.setAttribute("aria-hidden", "true");
69  word.textContent = "Selected";
70  return [box, word];
71}
72
73export const part = <T extends HTMLElement = HTMLElement>(root: ParentNode, name: string) => root.querySelector<T>(`[data-cap-part='${name}']`);
74
75// ---------------------------------------------------------------------------------------
76// Tiles. A tile's facts are its data attributes, so the page, the filters and the inspector read
77// one thing.
78
79export function recordOf(tile: HTMLElement): MediaRecord {
80  const d = tile.dataset;
81  let used: UsedIn[] = [];
82  try {
83    const parsed: unknown = JSON.parse(d.usedIn ?? "[]");
84    if (Array.isArray(parsed)) used = parsed.filter((u): u is UsedIn => !!u && typeof u === "object" && typeof (u as UsedIn).title === "string" && typeof (u as UsedIn).href === "string");
85  } catch {
86    used = [];
87  }
88  let suggested: string[] = [];
89  try {
90    const parsed: unknown = JSON.parse(d.suggestedTags ?? "[]");
91    if (Array.isArray(parsed)) suggested = parsed.filter((t): t is string => typeof t === "string");
92  } catch {
93    suggested = [];
94  }
95  const altState: AltState = d.alt === "decorative" || d.alt === "set" ? d.alt : "missing";
96  const img = tile.querySelector<HTMLImageElement>(".cap-media-thumb img");
97  const num = (v: string | undefined) => (v && Number.isFinite(Number(v)) ? Number(v) : undefined);
98  return {
99    key: d.key ?? "",
100    name: d.label ?? d.key ?? "",
101    url: d.url ?? "",
102    thumb: img?.getAttribute("src") ?? undefined,
103    kind: d.kind === "document" ? "document" : "image",
104    type: d.type ?? "",
105    bytes: num(d.bytes) ?? 0,
106    width: num(d.width),
107    height: num(d.height),
108    uploaded: d.uploaded,
109    alt: d.altText ?? "",
110    altState,
111    title: d.title ?? "",
112    caption: d.caption ?? "",
113    tags: parseTags(d.tags ?? ""),
114    used,
115    state: d.state === "uploading" || d.state === "failed" || d.state === "binned" ? d.state : "ready",
116    suggestedTags: suggested,
117    progress: num(d.progress),
118    error: d.error,
119  };
120}
121
122// Writes a record's facts onto a tile's attributes (the tile's markup is then redrawn by syncTile).
123export function writeRecord(tile: HTMLElement, r: Partial<MediaRecord>): void {
124  const d = tile.dataset;
125  if (r.key !== undefined) d.key = r.key;
126  if (r.name !== undefined) d.label = r.name;
127  if (r.url !== undefined) d.url = r.url;
128  if (r.kind !== undefined) d.kind = r.kind;
129  if (r.type !== undefined) d.type = r.type;
130  if (r.bytes !== undefined) d.bytes = String(r.bytes);
131  if (r.width !== undefined) d.width = String(r.width);
132  if (r.height !== undefined) d.height = String(r.height);
133  if (r.uploaded !== undefined) d.uploaded = r.uploaded;
134  if (r.altState !== undefined) d.alt = r.altState;
135  if (r.alt !== undefined) d.altText = r.alt;
136  if (r.title !== undefined) d.title = r.title;
137  if (r.caption !== undefined) d.caption = r.caption;
138  if (r.tags !== undefined) d.tags = r.tags.join(", ");
139  if (r.used !== undefined) {
140    d.usedIn = JSON.stringify(r.used);
141    d.used = String(r.used.length);
142  }
143  if (r.state !== undefined) d.state = r.state;
144  if (r.suggestedTags !== undefined) d.suggestedTags = JSON.stringify(r.suggestedTags);
145  if (r.progress !== undefined) d.progress = String(r.progress);
146  if (r.error !== undefined) d.error = r.error;
147}
148
149// Redraws what a tile shows from its attributes: the flags, the meta line, the description the
150// link carries, and the progress or failure block. The thumbnail and the name are not touched.
151export function syncTile(tile: HTMLElement): void {
152  const r = recordOf(tile);
153  tile.dataset.used = String(r.used.length);
154  const open = tile.querySelector<HTMLElement>(".cap-media-open");
155  const meta = tile.querySelector<HTMLElement>(".cap-media-meta");
156  if (meta) meta.textContent = r.state === "uploading" ? "Uploading" : r.state === "failed" ? "Not uploaded" : [r.type.split("/").pop()?.toUpperCase(), byteSize(r.bytes)].filter(Boolean).join(" · ");
157  let flags = tile.querySelector<HTMLElement>(".cap-media-flags");
158  if (!flags) {
159    flags = document.createElement("span");
160    flags.className = "cap-media-flags";
161    flags.id = `${tile.id || `tile-${Math.random().toString(36).slice(2, 8)}`}-flags`;
162    tile.append(flags);
163  }
164  const items: Node[] = flagsFor(r).map((f) => statusSpan(f.tone, f.word));
165  if (r.state === "binned") {
166    const restore = document.createElement("button");
167    restore.type = "button";
168    restore.className = "cap-btn";
169    restore.dataset.size = "xs";
170    restore.dataset.capPart = "restore";
171    restore.append("Restore");
172    const sr = document.createElement("span");
173    sr.className = "cap-sr-only";
174    sr.textContent = ` ${r.name}`;
175    restore.append(sr);
176    items.push(restore);
177  }
178  flags.replaceChildren(...items);
179  if (open) {
180    if (flags.id) open.setAttribute("aria-describedby", flags.id);
181    if (r.state === "uploading" || r.state === "failed") open.setAttribute("aria-description", describeRecord(r));
182    else open.removeAttribute("aria-description");
183  }
184  for (const old of tile.querySelectorAll(".cap-media-state")) old.remove();
185  if (r.state === "uploading") {
186    const block = document.createElement("div");
187    block.className = "cap-media-state";
188    const pct = Math.max(0, Math.min(100, Math.round(r.progress ?? 0)));
189    const meter = document.createElement("div");
190    meter.className = "cap-meter";
191    meter.dataset.cap = "meter";
192    const label = document.createElement("span");
193    label.className = "cap-meter-label";
194    label.id = `${flags.id}-p`;
195    label.textContent = "Uploading";
196    const value = document.createElement("span");
197    value.className = "cap-meter-value";
198    value.textContent = `${pct}%`;
199    const bar = document.createElement("span");
200    bar.className = "cap-meter-bar";
201    bar.setAttribute("role", "progressbar");
202    bar.setAttribute("aria-labelledby", label.id);
203    bar.setAttribute("aria-valuemin", "0");
204    bar.setAttribute("aria-valuemax", "100");
205    bar.setAttribute("aria-valuenow", String(pct));
206    bar.setAttribute("aria-valuetext", `${pct} percent of ${r.name} uploaded`);
207    const fill = document.createElement("span");
208    fill.className = "cap-meter-fill";
209    bar.append(fill);
210    meter.append(label, value, bar);
211    block.append(meter);
212    tile.append(block);
213    enhanceMeters(tile);
214  } else if (r.state === "failed") {
215    const block = document.createElement("div");
216    block.className = "cap-media-state";
217    block.dataset.tone = "crit";
218    const lead = document.createElement("p");
219    lead.className = "cap-media-state-lead";
220    lead.append(glyph("crit"), document.createTextNode("Upload failed"));
221    const why = document.createElement("p");
222    why.className = "cap-media-reason";
223    why.textContent = r.error ?? "The server did not say why.";
224    const retry = document.createElement("button");
225    retry.type = "button";
226    retry.className = "cap-btn";
227    retry.dataset.size = "sm";
228    retry.dataset.capPart = "retry";
229    retry.append("Retry");
230    const sr = document.createElement("span");
231    sr.className = "cap-sr-only";
232    sr.textContent = ` uploading ${r.name}`;
233    retry.append(sr);
234    block.append(lead, why, retry);
235    tile.append(block);
236  }
237}
238
239// Builds a tile for a record, as the server would render it. Used for uploads and anything the
240// page adds after it loaded.
241export function buildTile(r: MediaRecord): HTMLLIElement {
242  const li = document.createElement("li");
243  li.className = "cap-media-tile";
244  li.id = `tile-${r.key.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}`;
245  writeRecord(li, r);
246  li.dataset.used = String(r.used.length);
247  const selectable = r.state === "ready" || r.state === "binned";
248  const open = selectable ? document.createElement("a") : document.createElement("button");
249  open.className = "cap-media-open";
250  if (open instanceof HTMLAnchorElement) open.href = `?key=${encodeURIComponent(r.key)}`;
251  else {
252    open.type = "button";
253    open.setAttribute("aria-disabled", "true");
254  }
255  const thumb = document.createElement("span");
256  thumb.className = "cap-media-thumb";
257  if (r.kind === "image" && r.thumb) {
258    const img = document.createElement("img");
259    img.src = r.thumb;
260    img.alt = "";
261    img.loading = "lazy";
262    img.decoding = "async";
263    img.width = 320;
264    img.height = 320;
265    thumb.append(img);
266  } else {
267    const doc = document.createElement("span");
268    doc.className = "cap-media-doc";
269    doc.setAttribute("aria-hidden", "true");
270    doc.textContent = (r.name.split(".").pop() ?? "file").slice(0, 5).toUpperCase();
271    thumb.append(doc);
272  }
273  const name = document.createElement("span");
274  name.className = "cap-media-name";
275  name.title = r.key;
276  name.textContent = r.name;
277  const meta = document.createElement("span");
278  meta.className = "cap-media-meta";
279  open.append(thumb, name, meta);
280  li.append(open);
281  if (selectable) {
282    const check = document.createElement("label");
283    check.className = "cap-media-check";
284    const input = document.createElement("input");
285    input.type = "checkbox";
286    input.value = r.key;
287    input.dataset.capSelect = "";
288    input.setAttribute("aria-label", `Select ${r.name}`);
289    check.append(input, ...checkBox());
290    li.append(check);
291  }
292  syncTile(li);
293  return li;
294}
295