components/switch/switch.ts

Functions

Imports

It imports no other module of this repo. Imported by components/authorship/authorship.ts, components/switch-reason/switch-reason.react.tsx, components/switch-reason/switch-reason.ts, components/switch/switch.react.tsx.

Source

1// The switch's behaviour: keeps the state word beside it true. The word is "On" and "Off"
2// unless the .cap-switch-state element sets its own in data-on and data-off.
3
4export function stateWord(checked: boolean, on = "On", off = "Off"): string {
5  return checked ? on : off;
6}
7
8// Writes the word for one switch's current state.
9export function syncWord(label: Element): void {
10  const input = label.querySelector<HTMLInputElement>("input[role='switch']");
11  const word = label.querySelector<HTMLElement>(".cap-switch-state");
12  if (!input || !word) return;
13  word.textContent = stateWord(input.checked, word.dataset.on, word.dataset.off);
14}
15
16// Moves a switch from code (an Undo, a value from the server) and keeps its word true.
17// Fires no change event, so it cannot loop back into the app's own handler.
18export function setSwitch(label: Element, checked: boolean): void {
19  const input = label.querySelector<HTMLInputElement>("input[role='switch']");
20  if (!input) return;
21  input.checked = checked;
22  syncWord(label);
23}
24
25// Marks a switch pending while a request for its change runs (aria-busy, drawn as a dashed
26// outline), and clears it when the request has answered. The switch is not disabled, so
27// focus stays where it is.
28export function setBusy(label: Element, busy: boolean): void {
29  const input = label.querySelector<HTMLInputElement>("input[role='switch']");
30  if (!input) return;
31  if (busy) input.setAttribute("aria-busy", "true");
32  else input.removeAttribute("aria-busy");
33}
34
35// Attaches to every [data-cap="switch"] under root that is not attached yet. Returns a
36// function that detaches them all.
37export function enhance(root: ParentNode = document): () => void {
38  const undo: Array<() => void> = [];
39  for (const label of root.querySelectorAll<HTMLElement>("[data-cap='switch']:not([data-cap-ready])")) {
40    label.dataset.capReady = "";
41    syncWord(label);
42    const onChange = () => syncWord(label);
43    label.addEventListener("change", onChange);
44    undo.push(() => {
45      label.removeEventListener("change", onChange);
46      delete label.dataset.capReady;
47    });
48  }
49  return () => undo.forEach((f) => f());
50}