@orbytes/astrolab 0.4.0-next.1 → 0.4.0-next.2

package/src/chrome/navbar-client.ts

@@ -0,0 +1,324 @@
+// The navbar's own behaviour on the component page (./StoryView.astro) and the page view
+// (./views/Pages.astro). The viewport half is ./viewport-client.ts; the menus are native popovers
+// placed by ./shell-client.ts.
+//
+//   · THE PROPERTIES PANEL (./Properties.astro) — the eye beside the name. Hovering it opens the
+//     panel after a short delay, and the panel stays while the pointer is on the eye or on it;
+//     clicking the eye (Enter / Space) pins it open until Escape or a click outside. Focus goes
+//     back to the eye when it closes. `popover="manual"`, because light dismiss would close it
+//     on the very click that pins it.
+//   · COMMENT — the pin board's picker, confined to the canvas. The picker is the dev toolbar's pin
+//     app (../pin/toolbar.js): this sends it `orbytes-pin:command` and follows its
+//     `orbytes-pin:state`, so there is one picker and one composer, never a second copy. The
+//     button is pressed while the app is on (blue, as pins are), and a hint names the gesture
+//     while it is picking.
+//   · THE PINS — one marker per ticket left on the framed page, drawn over the frame at its
+//     element: blue while open, grey once resolved. ⋯ › Pins governs them — Show pins (on by
+//     default), Show resolved (off) — remembered per viewer. A ticket whose selector finds nothing
+//     here, or more than one thing, draws no marker rather than a guessed one (the same rule as
+//     the pin app's own markers). The list is the pin app's, re-read after every write, so a new
+//     pin appears the moment its ticket lands.
+//
+// Every marker and the hint carry `data-orbytes-pin-ui`, which the picker skips, so a pick can
+// never land on the lab's own marker instead of the element under it.
+
+interface PinTicket {
+  id: string;
+  title?: string;
+  status?: string;
+  url?: string | null;
+  selector?: string | null;
+}
+interface PinState {
+  active: boolean;
+  mode: "idle" | "picking" | "selected";
+  tickets: PinTicket[];
+}
+
+declare global {
+  interface Window {
+    __orbytesPin?: PinState;
+  }
+}
+
+const read = (key: string): string | null => {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+const write = (key: string, value: string) => {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    /* private mode — the choice holds for this page */
+  }
+};
+
+// ---- the Properties panel ---------------------------------------------------------------------
+const trigger = document.querySelector<HTMLElement>("[data-lab-props-trigger]");
+const panel = document.querySelector<HTMLElement>("[data-lab-props]");
+
+if (trigger && panel) {
+  const OPEN_DELAY = 150;
+  const CLOSE_DELAY = 200;
+  let pinned = false;
+  let openTimer = 0;
+  let closeTimer = 0;
+
+  const isOpen = () => panel.matches(":popover-open");
+  const place = () => {
+    const box = trigger.getBoundingClientRect();
+    const width = panel.offsetWidth;
+    const height = panel.offsetHeight;
+    const left = Math.max(8, Math.min(box.left, window.innerWidth - width - 8));
+    let top = box.bottom + 4;
+    if (top + height > window.innerHeight - 8) top = Math.max(8, window.innerHeight - height - 8);
+    panel.style.left = `${left}px`;
+    panel.style.top = `${top}px`;
+  };
+  const open = () => {
+    clearTimeout(openTimer);
+    clearTimeout(closeTimer);
+    if (!isOpen()) panel.showPopover();
+    place();
+    trigger.setAttribute("aria-expanded", "true");
+  };
+  const close = (returnFocus = false) => {
+    clearTimeout(openTimer);
+    clearTimeout(closeTimer);
+    pinned = false;
+    delete trigger.dataset.pinned;
+    if (isOpen()) panel.hidePopover();
+    trigger.setAttribute("aria-expanded", "false");
+    if (returnFocus) trigger.focus();
+  };
+  const closeSoon = () => {
+    clearTimeout(closeTimer);
+    if (!pinned) closeTimer = window.setTimeout(() => close(), CLOSE_DELAY);
+  };
+
+  trigger.addEventListener("mouseenter", () => {
+    clearTimeout(closeTimer);
+    if (!isOpen()) openTimer = window.setTimeout(open, OPEN_DELAY);
+  });
+  trigger.addEventListener("mouseleave", () => {
+    clearTimeout(openTimer);
+    closeSoon();
+  });
+  panel.addEventListener("mouseenter", () => clearTimeout(closeTimer));
+  panel.addEventListener("mouseleave", closeSoon);
+  trigger.addEventListener("click", () => {
+    if (pinned) {
+      close();
+      return;
+    }
+    pinned = true;
+    trigger.dataset.pinned = "";
+    open();
+  });
+  document.addEventListener(
+    "pointerdown",
+    (event) => {
+      if (!isOpen()) return;
+      const path = event.composedPath();
+      if (path.includes(panel) || path.includes(trigger)) return;
+      close();
+    },
+    true,
+  );
+  // A click inside the preview frame never reaches this document; it takes the focus with it, so
+  // the lab's window losing focus to a frame is the same outside click.
+  window.addEventListener("blur", () => {
+    requestAnimationFrame(() => {
+      if (isOpen() && document.activeElement instanceof HTMLIFrameElement) close();
+    });
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || !isOpen()) return;
+    const inside = panel.contains(document.activeElement) || document.activeElement === trigger;
+    close(inside);
+  });
+  window.addEventListener("resize", () => isOpen() && place());
+}
+
+// ---- the pin switches in ⋯ --------------------------------------------------------------------
+const SHOW_KEY = "lab-pins-show";
+const RESOLVED_KEY = "lab-pins-resolved";
+const view = {
+  show: read(SHOW_KEY) !== "0",
+  resolved: read(RESOLVED_KEY) === "1",
+};
+const toggles = [...document.querySelectorAll<HTMLElement>("[data-lab-pins-toggle]")];
+const paintToggles = () => {
+  for (const item of toggles) {
+    const on = item.dataset.labPinsToggle === "resolved" ? view.resolved : view.show;
+    item.setAttribute("aria-checked", String(on));
+  }
+};
+for (const item of toggles) {
+  item.addEventListener("click", () => {
+    if (item.dataset.labPinsToggle === "resolved") {
+      view.resolved = !view.resolved;
+      write(RESOLVED_KEY, view.resolved ? "1" : "0");
+    } else {
+      view.show = !view.show;
+      write(SHOW_KEY, view.show ? "1" : "0");
+    }
+    paintToggles();
+    drawPins();
+  });
+}
+paintToggles();
+
+// ---- Comment ----------------------------------------------------------------------------------
+const comment = document.querySelector<HTMLButtonElement>("[data-lab-comment]");
+const hint = document.querySelector<HTMLElement>("[data-lab-pin-hint]");
+const stage = document.querySelector<HTMLElement>("[data-lab-vp-stage]");
+let pin: PinState | null = window.__orbytesPin ?? null;
+
+const paintComment = () => {
+  if (comment) {
+    comment.disabled = !pin;
+    comment.setAttribute("aria-pressed", String(Boolean(pin?.active)));
+  }
+  if (hint) hint.hidden = pin?.mode !== "picking";
+};
+
+comment?.addEventListener("click", () => {
+  if (!pin) return;
+  window.dispatchEvent(
+    new CustomEvent("orbytes-pin:command", {
+      detail: pin.active ? { action: "stop" } : { action: "pick", within: stage },
+    }),
+  );
+});
+
+window.addEventListener("orbytes-pin:state", (event) => {
+  pin = (event as CustomEvent<PinState>).detail;
+  paintComment();
+  drawPins();
+});
+paintComment();
+// The pin app starts when the dev toolbar is idle; if it never does, say why the button is dead.
+window.setTimeout(() => {
+  if (!pin && comment) comment.title = "Comment is waiting for the pin board's toolbar app, which has not started";
+}, 5000);
+
+// ---- the pins on the frame --------------------------------------------------------------------
+const layer = document.querySelector<HTMLElement>("[data-lab-vp-pins]");
+const frame = document.querySelector<HTMLIFrameElement>("[data-lab-vp-frame]");
+const box = document.querySelector<HTMLElement>("[data-lab-vp-box]");
+const PIN = 24;
+
+/** `/a/` and `/a` are the same page; a query string is part of the address. */
+const norm = (value: string) => {
+  const cut = value.indexOf("?");
+  const path = cut === -1 ? value : value.slice(0, cut);
+  return (path.length > 1 ? path.replace(/\/+$/, "") : path) + (cut === -1 ? "" : value.slice(cut));
+};
+const statusOf = (raw?: string) => {
+  const s = String(raw ?? "").trim().toLowerCase();
+  return s === "resolved" || s === "done" ? "resolved" : s === "cancelled" || s === "canceled" ? "cancelled" : "open";
+};
+const numberOf = (id: string) => Number(/(\d+)/.exec(id)?.[1] ?? 0);
+
+function framePath(): string | null {
+  try {
+    const win = frame!.contentWindow!;
+    return win.location.pathname + win.location.search;
+  } catch {
+    return null;
+  }
+}
+
+function drawPins() {
+  if (!layer || !frame || !box) return;
+  layer.textContent = "";
+  const here = framePath();
+  const doc = (() => {
+    try {
+      return frame.contentDocument;
+    } catch {
+      return null;
+    }
+  })();
+  if (!view.show || !pin || !here || !doc?.documentElement) return;
+
+  // Every ticket left on this page, numbered in the order it was made: a pin keeps its number
+  // whether or not the resolved ones are showing.
+  const onPage = pin.tickets
+    .filter((t) => t.url && norm(t.url) === norm(here) && statusOf(t.status) !== "cancelled")
+    .sort((a, b) => numberOf(a.id) - numberOf(b.id));
+
+  const frameBox = frame.getBoundingClientRect();
+  const origin = box.getBoundingClientRect();
+  const sx = frame.offsetWidth ? frameBox.width / frame.offsetWidth : 1;
+  const sy = frame.offsetHeight ? frameBox.height / frame.offsetHeight : 1;
+  const viewH = frame.contentWindow?.innerHeight ?? frame.offsetHeight;
+  const viewW = frame.contentWindow?.innerWidth ?? frame.offsetWidth;
+  const href = layer.dataset.tasksHref;
+
+  onPage.forEach((ticket, i) => {
+    const state = statusOf(ticket.status);
+    if (state === "resolved" && !view.resolved) return;
+    if (!ticket.selector) return;
+    let found: NodeListOf<Element>;
+    try {
+      found = doc.querySelectorAll(ticket.selector);
+    } catch {
+      return;
+    }
+    if (found.length !== 1) return;
+    const r = found[0]!.getBoundingClientRect();
+    if ((!r.width && !r.height) || r.bottom < 0 || r.top > viewH || r.right < 0 || r.left > viewW) return;
+    // The pin's bottom-left corner is its anchor, set on the element's top-left corner.
+    const x = frameBox.left - origin.left + Math.max(0, r.left) * sx;
+    const y = frameBox.top - origin.top + Math.max(0, r.top) * sy - PIN;
+    const marker = document.createElement(href ? "a" : "span");
+    marker.className = "lab-pin";
+    marker.dataset.state = state;
+    marker.setAttribute("data-orbytes-pin-ui", "lab-pin");
+    marker.textContent = String(i + 1);
+    const label = `${ticket.id} · ${state === "resolved" ? "resolved" : (ticket.status ?? "open")} — ${ticket.title ?? ""}`.trim();
+    marker.title = label;
+    marker.setAttribute("aria-label", label);
+    if (href && marker instanceof HTMLAnchorElement) marker.href = href;
+    marker.style.left = `${Math.max(0, Math.min(x, origin.width - PIN))}px`;
+    marker.style.top = `${Math.max(0, Math.min(y, origin.height - PIN))}px`;
+    layer.append(marker);
+  });
+}
+
+if (layer && frame) {
+  let queued = false;
+  const redraw = () => {
+    if (queued) return;
+    queued = true;
+    requestAnimationFrame(() => {
+      queued = false;
+      drawPins();
+    });
+  };
+  document.querySelector("[data-lab-vp]")?.addEventListener("lab:viewport", redraw);
+  window.addEventListener("resize", redraw);
+  // The frame scrolls, reflows and navigates on its own; follow it each time it loads.
+  const follow = () => {
+    try {
+      const win = frame.contentWindow;
+      const doc = frame.contentDocument;
+      if (!win || !doc?.documentElement) return;
+      win.addEventListener("scroll", redraw, { passive: true });
+      win.addEventListener("resize", redraw);
+      new ResizeObserver(redraw).observe(doc.documentElement);
+    } catch {
+      /* cross-origin — no pins can be placed on it anyway */
+    }
+    redraw();
+  };
+  frame.addEventListener("load", follow);
+  if (frame.contentDocument?.readyState === "complete") follow();
+}
+
+export {};