components/button/button.ts

Functions

Imports

It imports no other module of this repo. Imported by components/button/button.react.tsx.

Source

1// A label that changes in place (Save, Saving…, Saved): the button's width eases to the new
2// label's while the old words blur out and the new ones blur in (uiarc's morphing label). Opt
3// in: the words sit in `.cap-btn-label`, and the page changes them through morphLabel. Under
4// reduced motion, or with no `.cap-btn-label`, the label just changes. The leaving words are a
5// copy hidden from assistive technology, so the button's name is only ever the new label.
6
7const reduced = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
8
9// Animates a label that has already changed, from the button's width before the change and a
10// copy of the old label. The React wrapper calls it after React has written the new label.
11// Widths are layout widths (offsetWidth), so a pressed button's scale does not count. Returns
12// the new label's width.
13export function morphFrom(button: HTMLElement, from: number, old: HTMLElement): number {
14  const label = button.querySelector<HTMLElement>(":scope > .cap-btn-label:not([data-leaving])");
15  for (const a of button.getAnimations?.() ?? []) if (a.id === "cap-morph") a.cancel();
16  for (const g of button.querySelectorAll(":scope > [data-leaving]")) g.remove();
17  const to = button.offsetWidth;
18  if (!label || reduced() || typeof button.animate !== "function") return to;
19  const css = getComputedStyle(button);
20  const ms = (name: string, fallback: number) => parseFloat(css.getPropertyValue(name)) || fallback;
21  const timing = { duration: ms("--dur-base", 200), easing: css.getPropertyValue("--ease-out").trim() || "ease-out" };
22  old.dataset.leaving = "";
23  old.setAttribute("aria-hidden", "true");
24  button.append(old);
25  if (Math.abs(to - from) > 0.5) button.animate({ width: [`${from}px`, `${to}px`], overflow: ["clip", "clip"] }, { ...timing, id: "cap-morph" });
26  const out = old.animate({ opacity: [1, 0], filter: ["blur(0)", "blur(4px)"] }, { ...timing, duration: ms("--dur-fast", 100), fill: "forwards" });
27  out.onfinish = out.oncancel = () => old.remove();
28  // A pending button hides its label under the spinner; its own fade must not show it.
29  if (button.getAttribute("aria-busy") !== "true") label.animate({ opacity: [0, 1], filter: ["blur(4px)", "blur(0)"] }, timing);
30  return to;
31}
32
33// Changes a button's label with the morph: `change` writes the new label (into
34// `.cap-btn-label`), e.g. morphLabel(save, () => (label.textContent = "Saving…")).
35export function morphLabel(button: HTMLElement, change: () => void): void {
36  const label = button.querySelector<HTMLElement>(":scope > .cap-btn-label:not([data-leaving])");
37  const from = button.offsetWidth;
38  const old = label?.cloneNode(true) as HTMLElement | undefined;
39  change();
40  if (old) morphFrom(button, from, old);
41}