components/banner/banner.ts

Functions

Imports

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

Source

1// A banner's Dismiss button. The rest of a banner is CSS; its Try again is the app's own.
2
3// Hides a banner and puts focus somewhere sensible if it was inside: the page's main
4// region, made focusable for the purpose, so focus is never left on nothing.
5export function dismissBanner(banner: HTMLElement): void {
6  const hadFocus = banner.contains(document.activeElement);
7  banner.hidden = true;
8  if (!hadFocus) return;
9  const main = banner.closest("main") ?? document.querySelector("main");
10  if (!main) return;
11  if (!main.hasAttribute("tabindex")) main.setAttribute("tabindex", "-1");
12  main.focus();
13}
14
15// Attaches to every [data-cap="banner"] under root not yet attached. Returns a function
16// that detaches.
17export function enhance(root: ParentNode = document): () => void {
18  const undo: Array<() => void> = [];
19  for (const banner of root.querySelectorAll<HTMLElement>("[data-cap='banner']:not([data-cap-ready])")) {
20    banner.dataset.capReady = "";
21    const onClick = (e: MouseEvent) => {
22      if ((e.target as Element).closest("[data-cap-part='dismiss']")) dismissBanner(banner);
23    };
24    banner.addEventListener("click", onClick);
25    undo.push(() => {
26      banner.removeEventListener("click", onClick);
27      delete banner.dataset.capReady;
28    });
29  }
30  return () => undo.forEach((f) => f());
31}