app/enhance/system-map.ts

Functions

Imports

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

Source

1import { enhance } from "capsomer/behaviour/system-map";
2
3/*
4 * The family of systems at /systems (Capsomer's system map with circles), one page. The server rendered the whole
5 * map, a chosen system's circle (the rest Capsomer's script fetches once the page has loaded), the list of the same
6 * data and every system's facts, so with script off the drawing is one named picture and everything else is open.
7 * Capsomer makes the drawing the control: one tap on any system zooms into its circle (Dustin, 2026-10-18: "it's
8 * not intuitive to click twice"), a system on the rim zooms there, and Back to all systems, Escape or a tap outside
9 * the circle returns. This shows the system zoomed into's facts below the map (data-chosen, which systems.css
10 * reads) and keeps it in the address as ?system=<id> with history.replaceState: no navigation, no new page, and a
11 * shared link opens zoomed in, which the server draws.
12 */
13const PARAM = "system";
14
15/** Shows one system's facts, or none, and writes the choice into the address without navigating. */
16function show(id: string | null) {
17  for (const section of document.querySelectorAll<HTMLElement>("[data-systems-facts] .systems-facts[data-system]")) section.toggleAttribute("data-chosen", section.dataset.system === id);
18  const url = new URL(location.href);
19  if (id) url.searchParams.set(PARAM, id);
20  else url.searchParams.delete(PARAM);
21  if (url.href !== location.href) history.replaceState(history.state, "", url);
22}
23
24for (const root of document.querySelectorAll<HTMLElement>("[data-cap='system-map']")) {
25  root.addEventListener("cap:system-map-enter", (e) => show((e as CustomEvent<{ id: string }>).detail.id));
26  root.addEventListener("cap:system-map-leave", () => show(null));
27  // An address naming no system on the map loses the name; one naming a system is drawn zoomed into it.
28  if (!root.dataset.zoom) show(null);
29}
30enhance();