components/disclosure/disclosure.ts

Functions

Imports

It imports no other module of this repo. Imported by components/history-list/history-list.ts, components/moderation-queue/moderation-queue.ts.

Source

1// Show and hide. A <details class="cap-disclosure"> needs no JavaScript. This module runs
2// the group rows (.cap-group): a button with aria-expanded and aria-controls that shows or
3// hides the rows it groups. Two levels at most, and a critical item is never inside a
4// collapsed group. No framework; the React wrapper uses the same rules.
5
6// Shows or hides one group's rows and keeps its button's state true.
7export function setGroup(button: HTMLElement, expanded: boolean): void {
8  button.setAttribute("aria-expanded", String(expanded));
9  const rows = document.getElementById(button.getAttribute("aria-controls") ?? "");
10  if (rows) rows.hidden = !expanded;
11}
12
13export function toggleGroup(button: HTMLElement): void {
14  setGroup(button, button.getAttribute("aria-expanded") !== "true");
15}
16
17// How deep a group sits: 1 for a group at the top, 2 for one inside another.
18export function groupDepth(group: Element): number {
19  let depth = 0;
20  for (let n: Element | null = group; n; n = n.parentElement?.closest(".cap-group") ?? null) depth += 1;
21  return depth;
22}
23
24// Attaches to every [data-cap="disclosure"] group under root. A collapsed group that holds
25// a critical item ([data-tone="crit"]) is opened, because critical items are never hidden.
26// Returns a function that detaches them.
27export function enhance(root: ParentNode = document): () => void {
28  const undo: Array<() => void> = [];
29  for (const group of root.querySelectorAll<HTMLElement>(".cap-group[data-cap='disclosure']:not([data-cap-ready])")) {
30    group.dataset.capReady = "";
31    const button = group.querySelector<HTMLElement>(":scope > .cap-group-toggle, :scope > .cap-group-heading > .cap-group-toggle");
32    if (!button) continue;
33    if (groupDepth(group) > 2) console.warn("Capsomer disclosure: groups go two levels deep at most.", group);
34    const rows = document.getElementById(button.getAttribute("aria-controls") ?? "");
35    const holdsCritical = !!rows?.querySelector("[data-tone='crit']");
36    if (holdsCritical && button.getAttribute("aria-expanded") !== "true") {
37      console.warn("Capsomer disclosure: a critical item was inside a collapsed group, so the group is open.", group);
38      setGroup(button, true);
39    } else setGroup(button, button.getAttribute("aria-expanded") === "true");
40    const onClick = () => toggleGroup(button);
41    button.addEventListener("click", onClick);
42    undo.push(() => {
43      button.removeEventListener("click", onClick);
44      delete group.dataset.capReady;
45    });
46  }
47  return () => undo.forEach((f) => f());
48}