components/avatar/avatar.ts

Functions

Imports

It imports no other module of this repo. Imported by components/avatar/avatar.react.tsx, components/history-list/history-list-rows.ts, components/history-list/history-list.react.tsx.

Source

1// The avatar's one behaviour: an image that fails to load gives way to the initials already
2// in the HTML. Without script the picture simply covers them, so a page delivered as HTML
3// still names the person in text.
4
5const READY = "data-cap-ready";
6
7function watch(root: HTMLElement): () => void {
8  const img = root.querySelector<HTMLImageElement>(".cap-avatar-image");
9  if (!img) return () => {};
10  const fail = () => root.setAttribute("data-state", "error");
11  const ok = () => root.removeAttribute("data-state");
12  img.addEventListener("error", fail);
13  img.addEventListener("load", ok);
14  // An image that failed before this ran has already finished with no width.
15  if (img.complete && img.naturalWidth === 0 && img.getAttribute("src")) fail();
16  return () => {
17    img.removeEventListener("error", fail);
18    img.removeEventListener("load", ok);
19  };
20}
21
22export function enhance(root: ParentNode = document): () => void {
23  const undo: Array<() => void> = [];
24  for (const el of root.querySelectorAll<HTMLElement>('[data-cap="avatar"]')) {
25    if (el.hasAttribute(READY)) continue;
26    el.setAttribute(READY, "");
27    undo.push(watch(el));
28  }
29  return () => {
30    for (const fn of undo) fn();
31  };
32}
33
34// The initials for a name: the first letters of the first and last words.
35export function initials(name: string): string {
36  const words = name.trim().split(/\s+/).filter(Boolean);
37  if (words.length === 0) return "";
38  const first = words[0] ?? "";
39  const last = words.length > 1 ? (words[words.length - 1] ?? "") : "";
40  return `${[...first][0] ?? ""}${[...last][0] ?? ""}`;
41}