components/breadcrumb/breadcrumb.ts

Functions

Imports

It imports components/popover/popover.ts. Imported by components/breadcrumb/breadcrumb.react.tsx.

Source

1// The breadcrumb's behaviour: a long trail folds its middle levels into a popover of links.
2// The server sends the whole trail (every level a real link in the HTML); on a trail with
3// data-max-items this module keeps the first level and the last (max - 1) and moves the rest
4// into the popover behind a three-dot button. A trail that already carries the folded item
5// (the markup the React wrapper renders) only needs its popover attached. Nothing else in a
6// breadcrumb needs script.
7
8import { enhance as enhancePopover } from "../popover/popover.ts";
9
10const READY = "data-cap-ready";
11let uid = 0;
12
13const DOTS =
14  '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><circle cx="3" cy="8" r="1.4" fill="currentColor"/><circle cx="8" cy="8" r="1.4" fill="currentColor"/><circle cx="13" cy="8" r="1.4" fill="currentColor"/></svg>';
15
16// Which levels fold: none unless the trail is longer than `max` and at least two levels
17// would go (one level is no shorter than the button that replaces it). The first level and
18// the last `max - 1` stay. Returns the positions that fold, a run in the middle.
19export function foldedLevels(count: number, max: number): number[] {
20  const keepEnd = Math.max(1, max - 1);
21  const from = 1;
22  const to = count - keepEnd; // exclusive
23  if (count <= max || to - from < 2) return [];
24  return Array.from({ length: to - from }, (_, i) => from + i);
25}
26
27// The folded item's markup, the contract in breadcrumb.md. `links` are the levels' anchors.
28function foldedItem(links: HTMLAnchorElement[]): HTMLLIElement {
29  const id = `cap-breadcrumb-more-${++uid}`;
30  const li = document.createElement("li");
31  li.className = "cap-breadcrumb-item";
32  li.dataset.collapsed = "";
33  const wrap = document.createElement("span");
34  wrap.dataset.cap = "popover";
35  const button = document.createElement("button");
36  button.type = "button";
37  button.className = "cap-breadcrumb-ellipsis";
38  button.setAttribute("popovertarget", id);
39  button.setAttribute("aria-haspopup", "dialog");
40  button.setAttribute("aria-expanded", "false");
41  button.setAttribute("aria-label", `Show ${links.length} more levels`);
42  button.innerHTML = DOTS;
43  const pop = document.createElement("div");
44  pop.className = "cap-popover";
45  pop.id = id;
46  pop.setAttribute("popover", "auto");
47  pop.setAttribute("role", "dialog");
48  pop.setAttribute("aria-label", "More levels");
49  pop.dataset.side = "bottom";
50  pop.dataset.align = "start";
51  pop.dataset.size = "auto";
52  pop.dataset.flush = "";
53  const ul = document.createElement("ul");
54  ul.className = "cap-breadcrumb-more";
55  for (const a of links) {
56    const item = document.createElement("li");
57    const link = a.cloneNode(true) as HTMLAnchorElement;
58    link.className = "cap-breadcrumb-more-link";
59    item.append(link);
60    ul.append(item);
61  }
62  pop.append(ul);
63  wrap.append(button, pop);
64  li.append(wrap);
65  return li;
66}
67
68// Folds a trail now. Returns a function that puts the levels back, or null when nothing folds.
69export function collapse(nav: HTMLElement, max: number): (() => void) | null {
70  const list = nav.querySelector<HTMLElement>(".cap-breadcrumb-list");
71  if (!list) return null;
72  const items = [...list.querySelectorAll<HTMLLIElement>(":scope > .cap-breadcrumb-item")];
73  const folded = foldedLevels(items.length, max).map((i) => items[i]).filter((li): li is HTMLLIElement => !!li);
74  const links = folded.map((li) => li.querySelector<HTMLAnchorElement>("a")).filter((a): a is HTMLAnchorElement => !!a);
75  if (folded.length === 0 || links.length !== folded.length) return null;
76  const item = foldedItem(links);
77  folded[0]?.before(item);
78  for (const li of folded) li.remove();
79  const off = enhancePopover(item);
80  return () => {
81    off();
82    item.replaceWith(...folded);
83  };
84}
85
86// Attaches every [data-cap="breadcrumb"] under root not yet attached: folds a trail that has
87// data-max-items, and attaches the popover of a folded item. Returns a function that
88// detaches them (a folded trail is put back).
89export function enhance(root: ParentNode = document): () => void {
90  const undo: Array<() => void> = [];
91  for (const nav of root.querySelectorAll<HTMLElement>("[data-cap='breadcrumb']")) {
92    if (nav.hasAttribute(READY)) continue;
93    nav.setAttribute(READY, "");
94    const max = Number(nav.dataset.maxItems);
95    const restore = Number.isFinite(max) && max >= 2 ? collapse(nav, Math.floor(max)) : null;
96    const off = enhancePopover(nav);
97    undo.push(() => {
98      off();
99      restore?.();
100      nav.removeAttribute(READY);
101    });
102  }
103  return () => undo.forEach((f) => f());
104}