app/enhance/plate.ts

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1const LIT = "is-lit";
2
3const byId = new Map<string, Element[]>();
4for (const el of document.querySelectorAll("[data-plaque]")) {
5  const id = el.getAttribute("data-plaque") ?? "";
6  byId.set(id, [...(byId.get(id) ?? []), el]);
7}
8
9/** A tap keeps its plaque lit until another tap, so a touch reader can look from one to the other. */
10let pinned: string | null = null;
11
12function light(id: string | null) {
13  for (const [key, els] of byId) for (const el of els) el.classList.toggle(LIT, key === id);
14}
15
16for (const el of document.querySelectorAll<HTMLElement | SVGGElement>(".plate-plaque, .plate-key-entry")) {
17  const id = el.getAttribute("data-plaque");
18  if (!id) continue;
19  /*
20   * No focus stops: lighting is a pointer's way of matching a plaque to its key entry, and the key
21   * already pairs them in text. Twelve stops on things that are not controls cost a keyboard reader
22   * more than the highlight gives. The attribute is only the stylesheet's pointer cue.
23   */
24  el.setAttribute("data-plate-live", "");
25  // Hover is a mouse's preview; a touch lands as a click below, which pins instead.
26  el.addEventListener("pointerenter", (e) => {
27    if ((e as PointerEvent).pointerType === "mouse") light(id);
28  });
29  el.addEventListener("pointerleave", (e) => {
30    if ((e as PointerEvent).pointerType === "mouse") light(pinned);
31  });
32  el.addEventListener("click", () => {
33    pinned = pinned === id ? null : id;
34    light(pinned);
35  });
36}
37
38/*
39 * `fill: "backwards"` on purpose: when the animation ends the line drops back to its base style, a
40 * real style change that forces a repaint. A CSS animation holding its end state left the leaders
41 * unpainted in Chrome.
42 */
43function drawLeaders(svg: Element) {
44  svg.querySelectorAll(".plate-leader").forEach((leader, i) => {
45    leader.querySelectorAll<SVGLineElement>("line").forEach((line, j) => {
46      const len = String(Math.ceil(line.getTotalLength()));
47      line.animate(
48        [
49          { strokeDasharray: len, strokeDashoffset: len },
50          { strokeDasharray: len, strokeDashoffset: "0" },
51        ],
52        {
53          duration: j === 0 ? 600 : 260,
54          delay: i * 260 + (j === 0 ? 200 : 800),
55          easing: "cubic-bezier(0.2, 0.7, 0.2, 1)",
56          fill: "backwards",
57        },
58      );
59    });
60  });
61}
62
63const figure = document.querySelector(".home-plate");
64const shown = figure && [...figure.querySelectorAll("svg.plate")].find((s) => s.getBoundingClientRect().width > 0);
65if (shown && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
66  const onScreen = (r: DOMRect) => r.top < window.innerHeight && r.bottom > 0;
67  if (onScreen(shown.getBoundingClientRect())) {
68    // Already in view: start now, before the next paint, so the drawn plate never flashes first.
69    drawLeaders(shown);
70  } else if ("IntersectionObserver" in window) {
71    const observer = new IntersectionObserver(
72      (entries) => {
73        if (!entries.some((e) => e.isIntersecting)) return;
74        observer.disconnect();
75        drawLeaders(shown);
76      },
77      { threshold: 0.25 },
78    );
79    observer.observe(shown);
80  }
81}