Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 4x 4x 2x 2x 2x 5x 5x 2x 5x 3x 2x 1x 1x 1x 1x 1x | /**
* Fixed chrome (the floating WhatsApp button, a page's sticky "Contact" bar)
* steps aside while any of `targets` is on screen: the thing it would cover,
* or a second copy of the same action. The element gets `data-stand-down`,
* which its own classes turn into hidden + not focusable.
*
* Returns a disconnect function; callers run it on `astro:before-swap`.
*/
export function standDownWhileVisible(
el: HTMLElement,
targets: Iterable<Element>,
): () => void {
const list = [...targets];
if (list.length === 0 || typeof IntersectionObserver === "undefined") {
return () => {};
}
const visible = new Set<Element>();
const io = new IntersectionObserver((entries) => {
for (const e of entries) {
if (e.isIntersecting) visible.add(e.target);
else visible.delete(e.target);
}
el.toggleAttribute("data-stand-down", visible.size > 0);
});
for (const t of list) io.observe(t);
return () => io.disconnect();
}
/** Wire `standDownWhileVisible` to every Astro page load (first load and each swap). */
export function standDownOnEveryPage(
find: () => { el: HTMLElement | null; targets: Iterable<Element> },
): void {
document.addEventListener("astro:page-load", () => {
const { el, targets } = find();
Iif (!el) return;
const stop = standDownWhileVisible(el, targets);
document.addEventListener("astro:before-swap", stop, { once: true });
});
}
|