actual-css 0.1.0

package/src/js/context-menu.js

@@ -0,0 +1,291 @@
+import enhance from "./enhance.js";
+import { EVENTS } from "./events.js";
+import { focusFirstMenuItem, hasMenuItems } from "./menu.js";
+import { CLASSES } from "./selectors.js";
+import {
+  closeSurface,
+  disconnectSurface,
+  isSurfaceOpen,
+  openSurface,
+  prepareSurface,
+} from "./surface.js";
+
+const LONG_PRESS_MS = 450;
+const MOVE_TOLERANCE = 10;
+const CONTEXT_MENU_SELECTOR = `menu.${CLASSES.flyout}`;
+const CONTEXT_TARGET_SELECTOR = "[data-context-menu]";
+const contextMap = new WeakMap();
+const contextByMenu = new WeakMap();
+
+// Returns the detail from the last accepted `actual:context-menu` event for a
+// menu. This is intentionally optional: static menus need no application JS.
+export function contextFor(menu) {
+  return contextByMenu.get(menu) || null;
+}
+
+function menuFor(target) {
+  const id = target.getAttribute("data-context-menu");
+  const menu = id ? target.ownerDocument.getElementById(id) : null;
+  return menu?.matches(CONTEXT_MENU_SELECTOR) ? menu : null;
+}
+
+function shouldIgnoreNativeTarget(target) {
+  return !!target.closest?.(
+    "a, button, input, textarea, select, option, [contenteditable], [role='button'], [role='link'], [data-context-menu-ignore]",
+  );
+}
+
+function getContextScope(target) {
+  if (!target.hasAttribute("data-context-menu-scope")) return null;
+
+  const value = target.getAttribute("data-context-menu-scope").trim();
+  if (!value || value === "self") return target;
+  if (value === "parent") return target.parentElement;
+
+  try {
+    return target.closest(value) || target.ownerDocument.querySelector(value);
+  } catch {
+    return null;
+  }
+}
+
+function getLongPressDelay(target, menu) {
+  const value = target.dataset.contextMenuLongPress ?? menu.dataset.contextMenuLongPress;
+  if (value == null || value === "false" || value === "none") return null;
+  if (value === "") return LONG_PRESS_MS;
+
+  const delay = Number.parseInt(value, 10);
+  return Number.isFinite(delay) ? delay : LONG_PRESS_MS;
+}
+
+function focusMenuContainer(menu) {
+  if (!menu.hasAttribute("tabindex")) {
+    menu.tabIndex = -1;
+  }
+  menu.focus();
+}
+
+// Pointer-triggered opens (right-click, long-press) focus the menu container,
+// not the first item: a pointer-set focus ring is invisible (:focus-visible
+// doesn't match), so focusing "Open" makes the first ArrowDown look like it
+// skips to the second item. Focusing the container keeps the ring hidden and
+// lets keys.js's out-of-list fallback (indexOf === -1) land ArrowDown/ArrowUp
+// on the first/last item, matching native OS context menus. Keyboard-triggered
+// opens (openFromKeyboard) still focus the first item directly.
+function focusMenu(menu, mode) {
+  if (!hasMenuItems(menu)) return;
+  if (mode === "first-item") {
+    focusFirstMenuItem(menu);
+  } else {
+    focusMenuContainer(menu);
+  }
+}
+
+function requestContextMenu(context, menu, opts = {}) {
+  const detail = {
+    menu,
+    context,
+    origin: opts.origin || context,
+    trigger: opts.trigger,
+  };
+  const event = new CustomEvent(EVENTS.contextMenu, {
+    bubbles: true,
+    cancelable: true,
+    detail,
+  });
+  if (!context.dispatchEvent(event)) return null;
+  contextByMenu.set(menu, detail);
+  return detail;
+}
+
+function openContextMenu(context, menu, opts = {}) {
+  if (!requestContextMenu(context, menu, opts)) return;
+  if (isSurfaceOpen(menu)) closeSurface(menu);
+  if (
+    openSurface(menu, {
+      source: context,
+      x: opts.x,
+      y: opts.y,
+      placement: opts.placement || "bottom-start",
+      distance: opts.distance ?? 2,
+      mobile: opts.mobile || menu.dataset.flyoutMobile || "auto",
+      scope: opts.scope || getContextScope(context),
+      restoreFocusTo: opts.restoreFocusTo,
+    })
+  ) {
+    focusMenu(menu, opts.focus);
+  }
+}
+
+function openFromKeyboard(context, menu, origin = context, restoreFocusTo) {
+  const rect = origin.getBoundingClientRect();
+  openContextMenu(context, menu, {
+    x: rect.left,
+    y: rect.bottom,
+    placement: "bottom-start",
+    distance: 4,
+    focus: "first-item",
+    origin,
+    trigger: "keyboard",
+    restoreFocusTo,
+  });
+}
+
+function clearLongPress(state) {
+  if (state.timer) {
+    clearTimeout(state.timer);
+    state.timer = null;
+  }
+  state.pointerId = null;
+}
+
+function connectContextTarget(target) {
+  if (contextMap.has(target)) return;
+  const menu = menuFor(target);
+  if (!menu) return;
+
+  prepareSurface(menu);
+  const controller = new AbortController();
+  const state = {
+    controller,
+    menu,
+    timer: null,
+    pointerId: null,
+    startX: 0,
+    startY: 0,
+    suppressClickUntil: 0,
+  };
+
+  target.addEventListener(
+    "contextmenu",
+    (e) => {
+      if (shouldIgnoreNativeTarget(e.target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      openContextMenu(target, menu, {
+        x: e.clientX,
+        y: e.clientY,
+        origin: e.target,
+        trigger: "pointer",
+      });
+    },
+    { signal: controller.signal },
+  );
+
+  target.addEventListener(
+    "keydown",
+    (e) => {
+      if (e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10")) return;
+      if (shouldIgnoreNativeTarget(e.target)) return;
+      e.preventDefault();
+      openFromKeyboard(target, menu, e.target, target);
+    },
+    { signal: controller.signal },
+  );
+
+  target.addEventListener(
+    "pointerdown",
+    (e) => {
+      const delay = getLongPressDelay(target, menu);
+      if (e.pointerType !== "touch" || delay == null || shouldIgnoreNativeTarget(e.target)) {
+        return;
+      }
+
+      clearLongPress(state);
+      state.pointerId = e.pointerId;
+      state.startX = e.clientX;
+      state.startY = e.clientY;
+      state.timer = setTimeout(() => {
+        state.timer = null;
+        state.suppressClickUntil = Date.now() + 750;
+        openContextMenu(target, menu, {
+          x: state.startX,
+          y: state.startY,
+          origin: e.target,
+          trigger: "touch",
+        });
+      }, delay);
+    },
+    { signal: controller.signal, passive: true },
+  );
+
+  target.addEventListener(
+    "pointermove",
+    (e) => {
+      if (e.pointerId !== state.pointerId || !state.timer) return;
+      if (
+        Math.abs(e.clientX - state.startX) > MOVE_TOLERANCE ||
+        Math.abs(e.clientY - state.startY) > MOVE_TOLERANCE
+      ) {
+        clearLongPress(state);
+      }
+    },
+    { signal: controller.signal, passive: true },
+  );
+
+  for (const type of ["pointerup", "pointercancel", "pointerleave"]) {
+    target.addEventListener(
+      type,
+      (e) => {
+        if (e.pointerId === state.pointerId) clearLongPress(state);
+      },
+      { signal: controller.signal, passive: true },
+    );
+  }
+
+  target.addEventListener(
+    "click",
+    (e) => {
+      if (Date.now() <= state.suppressClickUntil) {
+        e.preventDefault();
+        e.stopPropagation();
+        state.suppressClickUntil = 0;
+      }
+    },
+    { signal: controller.signal, capture: true },
+  );
+
+  contextMap.set(target, state);
+}
+
+function disconnectContextTarget(target) {
+  const state = contextMap.get(target);
+  if (!state) return;
+  clearLongPress(state);
+  state.controller.abort();
+  if (contextFor(state.menu)?.context === target) contextByMenu.delete(state.menu);
+  contextMap.delete(target);
+}
+
+function connectContextMenu(menu) {
+  const controller = new AbortController();
+  menu.addEventListener(
+    EVENTS.surfaceOpen,
+    (event) => {
+      const options = event.detail?.options;
+      const trigger = options?.trigger;
+      const context = trigger?.closest?.(CONTEXT_TARGET_SELECTOR);
+      if (!context || menuFor(context) !== menu) return;
+      if (!requestContextMenu(context, menu, { origin: trigger, trigger: "button" })) {
+        event.preventDefault();
+        return;
+      }
+      options.source = context;
+      options.restoreFocusTo = trigger;
+    },
+    { signal: controller.signal },
+  );
+  return () => {
+    controller.abort();
+    contextByMenu.delete(menu);
+    disconnectSurface(menu);
+  };
+}
+
+enhance({
+  [CONTEXT_TARGET_SELECTOR]: (target) => {
+    connectContextTarget(target);
+    return () => disconnectContextTarget(target);
+  },
+  [CONTEXT_MENU_SELECTOR]: (menu) => connectContextMenu(menu),
+});

package/src/js/dialog-fallback.js

@@ -0,0 +1,163 @@
+/*
+ * Dialog fallback — minimal per-element shim for browsers without native
+ * <dialog> support (Safari <= 15.3, Firefox <= 97, both below Baseline 2023).
+ *
+ * Standalone side-effect module: the default runtime imports it, a custom
+ * build opts out by omitting it — dialog.js has no dependency on this file
+ * and falls back to its acknowledgement alert without it. On supporting
+ * browsers importing this module registers nothing.
+ *
+ * Not a polyfill: no top layer, no focus trap, no inert background. It only
+ * provides show()/showModal()/close(), an `open` property, and the
+ * form[method=dialog] close-on-submit contract (otherwise those forms really
+ * navigate on legacy browsers), so dialog.js can run its normal wiring —
+ * backdrop click, Escape cancel, close events, focus restore, and the scroll
+ * lock all come from that wiring, not from here.
+ *
+ * Presentation lives in dialog-fallback.css, keyed on the classes written
+ * below. The simulated backdrop is split in two there: a spread box-shadow
+ * for the dimming, and a transparent ::before covering the viewport for
+ * hit-testing — clicks on it target the dialog element outside its own box,
+ * which dialog.js already treats as a backdrop click, and it blocks pointer
+ * interaction with the page behind the modal.
+ *
+ * An adopter-provided polyfill (e.g. dialog-polyfill) still wins: elements it
+ * already patched expose showModal() and are left untouched.
+ */
+
+import { targetFor } from "./command.js";
+import enhance from "./enhance.js";
+import { CLASSES } from "./selectors.js";
+
+function supportsDialog() {
+  return (
+    typeof HTMLDialogElement !== "undefined" &&
+    typeof HTMLDialogElement.prototype.showModal === "function"
+  );
+}
+
+function focusInitial(dialog) {
+  const target = dialog.querySelector("[autofocus]") || dialog;
+  if (target === dialog && !dialog.hasAttribute("tabindex")) {
+    dialog.setAttribute("tabindex", "-1");
+  }
+  target.focus?.();
+}
+
+/**
+ * Patch one dialog element with rudimentary show/showModal/close support.
+ * No-op when the element is already controllable (native or polyfilled).
+ *
+ * @param {HTMLElement} dialog A <dialog> element.
+ */
+export default function shimDialog(dialog) {
+  if (
+    typeof dialog.show === "function" &&
+    typeof dialog.showModal === "function" &&
+    typeof dialog.close === "function"
+  ) {
+    return;
+  }
+
+  const doc = dialog.ownerDocument;
+  let escController = null;
+  let savedScroll = null;
+
+  function stopEscapeListener() {
+    escController?.abort();
+    escController = null;
+  }
+
+  function handleSubmit(event) {
+    const form = event.target;
+    // Read the attribute: on these browsers "dialog" is an invalid method
+    // value, so the reflected form.method property reports "get" and the
+    // form would otherwise really submit and navigate away.
+    if (form?.getAttribute?.("method")?.toLowerCase() !== "dialog") return;
+    event.preventDefault();
+    const submitter =
+      event.submitter || (doc.activeElement?.form === form ? doc.activeElement : null);
+    dialog.close(submitter?.value || "");
+  }
+
+  function handleEscape(event) {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    const cancel = new Event("cancel", { cancelable: true });
+    // dialog.js always claims the cancel event and decides itself whether to
+    // close; only an unwired dialog falls through to the direct close.
+    if (dialog.dispatchEvent(cancel)) {
+      dialog.close();
+    }
+  }
+
+  function open(modal) {
+    if (dialog.open) return;
+    // Old WebKit clamps the scroll position to 0 when the root element gains
+    // overflow:hidden (the has-modal-open lock applied right after this),
+    // losing the user's place. Remember it and put it back after close.
+    const win = doc.defaultView;
+    savedScroll = modal && win ? { x: win.scrollX, y: win.scrollY } : null;
+    dialog.setAttribute("open", "");
+    dialog.classList.toggle(CLASSES.fallbackModal, modal);
+    if (modal) {
+      escController = new AbortController();
+      doc.addEventListener("keydown", handleEscape, { signal: escController.signal });
+    }
+    focusInitial(dialog);
+  }
+
+  Object.defineProperty(dialog, "open", {
+    configurable: true,
+    get() {
+      return this.hasAttribute("open");
+    },
+    set(value) {
+      this.toggleAttribute("open", Boolean(value));
+    },
+  });
+
+  dialog.returnValue = "";
+  dialog.classList.add(CLASSES.dialogFallback);
+  dialog.addEventListener("submit", handleSubmit);
+  dialog.show = () => open(false);
+  dialog.showModal = () => open(true);
+  dialog.close = (returnValue = "") => {
+    if (!dialog.open) return;
+    stopEscapeListener();
+    dialog.returnValue = returnValue;
+    dialog.removeAttribute("open");
+    dialog.classList.remove(CLASSES.fallbackModal);
+    dialog.dispatchEvent(new Event("close"));
+    // After the close event: dialog.js has lifted the scroll lock and moved
+    // focus back to the trigger, so the restored position sticks.
+    if (savedScroll) {
+      doc.defaultView?.scrollTo?.(savedScroll.x, savedScroll.y);
+      savedScroll = null;
+    }
+  };
+}
+
+if (typeof document !== "undefined" && !supportsDialog()) {
+  enhance({
+    dialog: (el) => {
+      shimDialog(el);
+    },
+  });
+
+  // A dialog inserted right before its trigger's click may not be scanned by
+  // enhance() yet, so shim command targets in capture phase too — before the
+  // delegated command routing resolves them.
+  document.addEventListener(
+    "click",
+    (event) => {
+      const trigger = event.target?.closest?.("button[commandfor][command]");
+      if (!trigger) return;
+      const dialog = targetFor(trigger);
+      if (dialog?.localName === "dialog") {
+        shimDialog(dialog);
+      }
+    },
+    true,
+  );
+}