@woylie/doggo 0.15.0

package/assets/js/hooks/dialog.js

@@ -0,0 +1,77 @@
+// Native `<dialog>` behaviour, with the parts browsers do not all have yet
+// filled in. Each fill is behind a feature test, so it drops out on its own as
+// support arrives, and the markup is already the markup we want.
+const hasCommand = () => "command" in HTMLButtonElement.prototype;
+const hasClosedBy = () => "closedBy" in HTMLDialogElement.prototype;
+
+// `execJS` is the one thing a framework has to supply: the dialog runs the
+// caller's `on_cancel` when it closes, and only the framework knows how.
+export function initDialog(dialog, { execJS = () => {} } = {}) {
+  let invoke;
+
+  const dismissable = () => dialog.getAttribute("closedby") === "any";
+
+  // Dispatched by `Doggo.show_modal/2`.
+  dialog.addEventListener("doggo:open", () => {
+    if (!dialog.open) dialog.showModal();
+  });
+
+  // Dispatched by `Doggo.hide_modal/2`.
+  dialog.addEventListener("doggo:close", () => dialog.close());
+
+  // The browser closes the dialog itself, so `on_cancel` runs from here
+  // rather than from the control that closed it.
+  dialog.addEventListener("close", () => {
+    const command = dialog.getAttribute("data-cancel");
+
+    if (command) execJS(dialog, command);
+  });
+
+  if (!hasCommand()) {
+    // On the document, not on the dialog.
+    invoke = (e) => {
+      const button = e.target.closest("button[commandfor]");
+
+      if (!button || button.getAttribute("commandfor") !== dialog.id) return;
+
+      const command = button.getAttribute("command");
+
+      if (command === "show-modal" && !dialog.open) dialog.showModal();
+      else if (command === "close") dialog.close();
+    };
+
+    document.addEventListener("click", invoke);
+  }
+
+  if (!hasClosedBy()) {
+    // `closedby="none"` has to hold Escape as well, which is the one part of
+    // the attribute that native `<dialog>` does not give us anyway.
+    dialog.addEventListener("cancel", (e) => {
+      if (!dismissable()) e.preventDefault();
+    });
+
+    // A click on the backdrop reaches the dialog itself, never a child, so
+    // the target is the test for being outside.
+    dialog.addEventListener("click", (e) => {
+      if (dismissable() && e.target === dialog) dialog.close();
+    });
+  }
+
+  return {
+    destroy() {
+      if (invoke) document.removeEventListener("click", invoke);
+    },
+  };
+}
+
+export default {
+  mounted() {
+    this.instance = initDialog(this.el, {
+      execJS: (el, command) => this.liveSocket.execJS(el, command),
+    });
+  },
+
+  destroyed() {
+    this.instance.destroy();
+  },
+};

package/assets/js/hooks/menu.js

@@ -0,0 +1,138 @@
+import { searchIndex, setRovingTabindex, targetIndex } from "../navigation.js";
+
+const ITEMS =
+  '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+
+const ORIENTATIONS = { menubar: "horizontal", menu: "vertical" };
+
+// How long the characters a user types stay one search. The ARIA Authoring
+// Practices describe this for type-ahead, and 500ms is taken from their
+// example.
+const SEARCH_MS = 500;
+
+export function initMenu(menu) {
+  const role = menu.getAttribute("role");
+
+  // Read on demand, and only the items of this menu: `menu_group` and
+  // `menu_item_radio_group` nest, and a submenu has its own hook.
+  const getItems = () =>
+    Array.from(menu.querySelectorAll(ITEMS)).filter(
+      (item) => item.closest('[role="menu"], [role="menubar"]') === menu,
+    );
+
+  let activeIdx = 0;
+  let search = "";
+  let searchTimeout;
+
+  const setActive = (idx) => {
+    activeIdx = idx;
+    setRovingTabindex(getItems(), idx);
+  };
+
+  const moveTo = (idx) => {
+    setActive(idx);
+    getItems()[idx].focus();
+  };
+
+  // Whatever the user focused becomes the tab stop.
+  menu.addEventListener("focusin", (e) => {
+    const idx = getItems().indexOf(e.target.closest(ITEMS));
+
+    if (idx >= 0 && idx !== activeIdx) setActive(idx);
+  });
+
+  const typeAhead = (key) => {
+    clearTimeout(searchTimeout);
+    search += key;
+    searchTimeout = setTimeout(() => (search = ""), SEARCH_MS);
+
+    // The same character typed again walks through the items starting with
+    // it, rather than searching for a repeated string. Any other second
+    // character refines the search, so it starts at the current item instead
+    // of after it.
+    const repeated = [...search].every((char) => char === search[0]);
+    const needle = repeated ? search[0] : search;
+    const from = repeated ? activeIdx : activeIdx - 1;
+
+    const labels = getItems().map((item) => item.textContent);
+    const idx = searchIndex(labels, needle, from);
+
+    if (idx !== null) moveTo(idx);
+  };
+
+  // Closing belongs to the button that opened the menu, which the menu finds
+  // through the `aria-controls` pointing at it. Compared rather than put in a
+  // selector, because the id is the caller's and may hold characters that
+  // would change what the selector matches.
+  const close = () => {
+    const button = Array.from(
+      document.querySelectorAll("[aria-controls]"),
+    ).find((el) => el.getAttribute("aria-controls") === menu.id);
+
+    if (!button) return false;
+
+    menu.setAttribute("hidden", "");
+    button.setAttribute("aria-expanded", "false");
+    button.focus();
+
+    return true;
+  };
+
+  menu.addEventListener("keydown", (e) => {
+    const items = getItems();
+    const currentIdx = items.indexOf(e.target.closest(ITEMS));
+
+    if (currentIdx < 0) return;
+
+    if (e.key === "Escape") {
+      // One press closes one thing: a menu inside a dialog must not close the
+      // dialog as well. When nothing closed, the key event doesn't belong to
+      // the component.
+      if (close()) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      return;
+    }
+
+    const nextIdx = targetIndex(e.key, currentIdx, items.length, {
+      orientation: ORIENTATIONS[role],
+    });
+
+    if (nextIdx !== null) {
+      e.preventDefault();
+      moveTo(nextIdx);
+      return;
+    }
+
+    // A single printable character, and no modifier, is a search rather than
+    // a shortcut.
+    if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      e.preventDefault();
+      typeAhead(e.key);
+    }
+  });
+
+  const restoreTabStop = () => {
+    const items = getItems();
+
+    if (items.length > 0) {
+      setActive(Math.min(activeIdx, items.length - 1));
+    }
+  };
+
+  restoreTabStop();
+
+  return { update: restoreTabStop };
+}
+
+export default {
+  mounted() {
+    this.instance = initMenu(this.el);
+  },
+
+  updated() {
+    this.instance.update();
+  },
+};

package/assets/js/hooks/menu_button.js

@@ -0,0 +1,35 @@
+export function initMenuButton(button) {
+  const getMenu = () =>
+    document.getElementById(button.getAttribute("aria-controls"));
+
+  // Opening from the keyboard puts the focus on an item straight away, which
+  // is the difference from opening with a pointer.
+  const open = (position) => {
+    const menu = getMenu();
+
+    if (!menu) return;
+
+    menu.removeAttribute("hidden");
+    button.setAttribute("aria-expanded", "true");
+
+    const items = menu.querySelectorAll(
+      '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]',
+    );
+    const item = position === "last" ? items[items.length - 1] : items[0];
+
+    if (item) item.focus();
+  };
+
+  button.addEventListener("keydown", (e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+
+    e.preventDefault();
+    open(e.key === "ArrowDown" ? "first" : "last");
+  });
+}
+
+export default {
+  mounted() {
+    initMenuButton(this.el);
+  },
+};

package/assets/js/hooks/split_pane.js

@@ -0,0 +1,100 @@
+// The property the caller's stylesheet reads.
+const POSITION = "--split-pane-position";
+
+const STEP = 1;
+const SHIFT_STEP = 10;
+
+export function initSplitPane(pane) {
+  const separator = pane.querySelector(':scope > [role="separator"]');
+
+  if (!separator) return { update: () => {} };
+
+  const numberOf = (name) => Number(separator.getAttribute(name));
+  const min = () => numberOf("aria-valuemin");
+  const max = () => numberOf("aria-valuemax");
+  const isVertical = () =>
+    separator.getAttribute("aria-orientation") === "vertical";
+
+  let position = numberOf("aria-valuenow");
+
+  // Where Enter goes back to: the last position that was not the minimum.
+  let expandedSize = null;
+
+  // Written through the CSSOM, which is not blocked under a strict content
+  // security policy.
+  const apply = (next) => {
+    position = Math.min(Math.max(Math.round(next), min()), max());
+    if (position > min()) expandedSize = position;
+
+    pane.style.setProperty(POSITION, `${position}%`);
+    separator.setAttribute("aria-valuenow", String(position));
+  };
+
+  // A vertical separator stands between two panes side by side, so it moves
+  // along the x axis, and a horizontal one along the y axis.
+  const fromPointer = (event) => {
+    const box = pane.getBoundingClientRect();
+
+    return isVertical()
+      ? ((event.clientX - box.left) / box.width) * 100
+      : ((event.clientY - box.top) / box.height) * 100;
+  };
+
+  separator.addEventListener("pointerdown", (e) => {
+    // Capture keeps the drag alive while the pointer is outside the
+    // separator, and it keeps the drag from selecting text. Preventing the
+    // default would take the focus off the click, and the keys have to work
+    // right after a drag.
+    separator.setPointerCapture(e.pointerId);
+  });
+
+  separator.addEventListener("pointermove", (e) => {
+    if (!separator.hasPointerCapture(e.pointerId)) return;
+
+    apply(fromPointer(e));
+  });
+
+  separator.addEventListener("keydown", (e) => {
+    const step = e.shiftKey ? SHIFT_STEP : STEP;
+    const [less, more] = isVertical()
+      ? ["ArrowLeft", "ArrowRight"]
+      : ["ArrowUp", "ArrowDown"];
+
+    if (e.key === more) {
+      apply(position + step);
+    } else if (e.key === less) {
+      apply(position - step);
+    } else if (e.key === "Home") {
+      apply(min());
+    } else if (e.key === "End") {
+      apply(max());
+    } else if (e.key === "Enter") {
+      if (position > min()) {
+        apply(min());
+      } else if (expandedSize !== null) {
+        apply(expandedSize);
+      }
+    } else {
+      return;
+    }
+
+    e.preventDefault();
+  });
+
+  const restore = () => apply(position);
+  restore();
+
+  return { update: restore };
+}
+
+export default {
+  mounted() {
+    this.instance = initSplitPane(this.el);
+  },
+
+  // A patch rewrites the separator's `aria-valuenow` and can drop the custom
+  // property with it, so the position the user dragged to is applied again.
+  updated() {
+    this.instance.update();
+  },
+};

package/assets/js/hooks/tabs.js

@@ -0,0 +1,80 @@
+import { clamp, selectTab, targetIndex } from "../navigation.js";
+
+export function initTabs(tabs) {
+  const getTabs = () =>
+    Array.from(
+      tabs.querySelectorAll(':scope > [role="tablist"] > [role="tab"]'),
+    );
+
+  const getPanels = () =>
+    Array.from(tabs.querySelectorAll(':scope > [role="tabpanel"]'));
+
+  let selectedIdx = 0;
+
+  const select = (idx) => {
+    selectedIdx = idx;
+
+    selectTab(getTabs(), idx);
+
+    getPanels().forEach((panel, i) => {
+      if (i === idx) {
+        panel.removeAttribute("hidden");
+      } else {
+        panel.setAttribute("hidden", "");
+      }
+    });
+  };
+
+  tabs.addEventListener("click", (e) => {
+    const idx = getTabs().indexOf(e.target.closest('[role="tab"]'));
+
+    if (idx >= 0) select(idx);
+  });
+
+  // Dispatched by `Doggo.show_tab/3`. One-based index.
+  tabs.addEventListener("doggo:show-tab", (e) => {
+    const idx = e.detail.index - 1;
+
+    if (idx >= 0 && idx < getTabs().length) select(idx);
+  });
+
+  tabs.addEventListener("keydown", (e) => {
+    const currentIdx = getTabs().indexOf(e.target.closest('[role="tab"]'));
+
+    if (currentIdx < 0) return;
+
+    const vertical =
+      tabs
+        .querySelector('[role="tablist"]')
+        .getAttribute("aria-orientation") === "vertical";
+
+    const nextIdx = targetIndex(e.key, currentIdx, getTabs().length, {
+      orientation: vertical ? "vertical" : "horizontal",
+    });
+
+    if (nextIdx === null) return;
+
+    e.preventDefault();
+    select(nextIdx);
+    getTabs()[nextIdx].focus();
+  });
+
+  const restoreSelection = () => {
+    const total = getTabs().length;
+
+    if (total > 0) select(clamp(selectedIdx, total));
+  };
+
+  return { update: restoreSelection };
+}
+
+export default {
+  mounted() {
+    this.instance = initTabs(this.el);
+  },
+
+  // Restore selected tab on patch.
+  updated() {
+    this.instance.update();
+  },
+};

package/assets/js/hooks/toolbar.js

@@ -0,0 +1,100 @@
+import { clamp, setRovingTabindex, targetIndex } from "../navigation.js";
+
+// Controls the toolbar manages
+const CONTROLS = 'a[href], button, input, select, textarea, [role="button"]';
+
+// Controls that use the arrow keys themselves
+const KEEPS_ARROWS =
+  'textarea, select, [role="slider"], [role="spinbutton"], [role="combobox"], [role="listbox"], [role="textbox"]';
+
+const TEXT_INPUTS = [
+  "text",
+  "search",
+  "url",
+  "tel",
+  "email",
+  "password",
+  "number",
+  "date",
+  "datetime-local",
+  "month",
+  "time",
+  "week",
+  "range",
+];
+
+function keepsArrows(el) {
+  if (el.matches(KEEPS_ARROWS)) return true;
+
+  return el.tagName === "INPUT" && TEXT_INPUTS.includes(el.type);
+}
+
+function isDisabled(el) {
+  return el.disabled || el.getAttribute("aria-disabled") === "true";
+}
+
+export function initToolbar(toolbar) {
+  // Read on demand: a patch can add and remove controls.
+  const getControls = () =>
+    Array.from(toolbar.querySelectorAll(CONTROLS)).filter(
+      (control) => !isDisabled(control),
+    );
+
+  const isVertical = () =>
+    toolbar.getAttribute("aria-orientation") === "vertical";
+
+  let activeIdx = 0;
+
+  const setActive = (idx) => {
+    activeIdx = idx;
+
+    setRovingTabindex(getControls(), idx);
+  };
+
+  toolbar.addEventListener("focusin", (e) => {
+    const idx = getControls().indexOf(e.target.closest(CONTROLS));
+
+    if (idx >= 0 && idx !== activeIdx) setActive(idx);
+  });
+
+  toolbar.addEventListener("keydown", (e) => {
+    const control = e.target.closest(CONTROLS);
+
+    if (!control || keepsArrows(control)) return;
+
+    const controls = getControls();
+    const currentIdx = controls.indexOf(control);
+
+    if (currentIdx < 0) return;
+
+    const nextIdx = targetIndex(e.key, currentIdx, controls.length, {
+      orientation: isVertical() ? "vertical" : "horizontal",
+    });
+
+    if (nextIdx === null) return;
+
+    e.preventDefault();
+    controls[nextIdx].focus();
+  });
+
+  const restoreTabStop = () => {
+    const total = getControls().length;
+
+    if (total > 0) setActive(clamp(activeIdx, total));
+  };
+
+  restoreTabStop();
+
+  return { update: restoreTabStop };
+}
+
+export default {
+  mounted() {
+    this.instance = initToolbar(this.el);
+  },
+
+  // A patch renders every control in the tab order again.
+  updated() {
+    this.instance.update();
+  },
+};

package/assets/js/hooks/tooltip.js

@@ -0,0 +1,48 @@
+export function initTooltip(tooltip) {
+  const isActive = () =>
+    tooltip.matches(":hover") || tooltip.matches(":focus-within");
+
+  const isShown = () => isActive() && !tooltip.hasAttribute("data-dismissed");
+
+  // A dismissed tooltip stays dismissed until the pointer and the focus have
+  // both left.
+  const clearWhenLeft = () =>
+    setTimeout(() => {
+      if (!isActive()) tooltip.removeAttribute("data-dismissed");
+    }, 0);
+
+  const dismiss = (e) => {
+    if (e.key !== "Escape" || !isShown()) return;
+
+    tooltip.setAttribute("data-dismissed", "");
+
+    // Stop propagation; a tooltip inside a dialog must not close the dialog
+    // as well.
+    e.stopPropagation();
+  };
+
+  // The listener sits on the window rather than on the tooltip, because a
+  // tooltip shown by hovering has the focus somewhere else entirely, and a
+  // key press goes to the focused element. WCAG 2.2 1.4.13 asks for that case
+  // to be dismissible too.
+  window.addEventListener("keydown", dismiss, true);
+
+  tooltip.addEventListener("focusout", clearWhenLeft);
+  tooltip.addEventListener("pointerleave", clearWhenLeft);
+
+  return {
+    destroy() {
+      window.removeEventListener("keydown", dismiss, true);
+    },
+  };
+}
+
+export default {
+  mounted() {
+    this.instance = initTooltip(this.el);
+  },
+
+  destroyed() {
+    this.instance.destroy();
+  },
+};