// the home banner follows the pointer: an icon shows its page's line from the index pages,
// a section's box shows the section. on touch there's no hover, and a tap fires mouseover
// right before the click, so it would flash a different entry just as the page changes.
const home = document.querySelector<HTMLElement>("[data-home]");
const banner = document.querySelector<HTMLElement>("[data-banner]");
const LAST = "hydrant-last-page";
if (home && banner) {
const layers = new Map([...banner.querySelectorAll<HTMLElement>("[data-for]")].map((l) => [l.dataset.for!, l]));
let shown = "";
const show = (key: string) => {
if (!layers.has(key)) key = "";
if (key === shown) return;
layers.get(shown)?.classList.remove("on");
layers.get(key)!.classList.add("on");
shown = key;
};
const point = (ev: Event) => {
const t = ev.target as HTMLElement;
show(t.closest<HTMLElement>("[data-page]")?.dataset.page ?? t.closest<HTMLElement>("[data-section]")?.dataset.section ?? "");
};
if (matchMedia("(hover: hover)").matches) {
home.addEventListener("mouseover", point);
home.addEventListener("focusin", point);
home.addEventListener("mouseleave", () => show(""));
}
// the last page you opened stays selected, like a tracker window remembers
const last = localStorage.getItem(LAST);
if (last) home.querySelector(`[data-page="${CSS.escape(last)}"]`)?.classList.add("last");
home.addEventListener("click", (ev) => {
const a = (ev.target as HTMLElement).closest<HTMLAnchorElement>("[data-page]");
if (a) localStorage.setItem(LAST, a.dataset.page!);
});
}
export {};