@luigisbox/luma 0.4.0 → 0.5.0

package/src/widgets/search/submit.ts

@@ -0,0 +1,136 @@
+// A submit of the site's search form, taken by Luma: in place on the search
+// page (./in-place.ts) or straight to the query's page (./direct.ts). Enter in
+// the input is modelled as the browser's implicit submission
+// (implicitSubmitter, validates). Not in lbx-nav (every listing page loads
+// that): a category page never takes a submit; loaded with in-place.ts
+// (build/vite.mjs lbx-search-in-place), direct.ts imports it from there.
+
+import { defaultSubmitter, type Submitter } from '../../core/default-button';
+import { reportError } from '../../core/health';
+
+/** Fields whose Enter is an implicit submission (the HTML standard's list): with no submit button, the form submits only when it has exactly one. */
+const BLOCKS_IMPLICIT = /^(text|search|email|url|tel|password|date|month|week|time|datetime-local|number)$/;
+
+/**
+ * What an Enter in a field of `form` submits with, as the browser's implicit
+ * submission: the default button (`submitter`, null without one), or null when
+ * it submits nothing: a disabled default button (a fieldset's too), or no
+ * button and not exactly one field that blocks implicit submission. The
+ * form's validation is `validates`, apart: the browser runs it last.
+ */
+export const implicitSubmitter = (form: HTMLFormElement): { submitter: Submitter | null } | null => {
+  const submitter = defaultSubmitter(form);
+  if (submitter) {
+    if (submitter.matches(':disabled')) return null;
+  } else if ([...form.elements].filter((el) => el instanceof HTMLInputElement && BLOCKS_IMPLICIT.test(el.type)).length !== 1) return null;
+  return { submitter };
+};
+
+/**
+ * The form's constraint validation, as the browser runs it before a submit:
+ * false when a field is invalid (the browser's own Enter then reports it and
+ * submits nothing), unless the form has `novalidate` or the submitter
+ * `formnovalidate`. `checkValidity` fires each invalid field's `invalid`
+ * event, as the browser is about to: asked last, only for an Enter that would
+ * otherwise be taken, so a host's listeners hear it once more at most.
+ */
+export const validates = (form: HTMLFormElement, submitter: Submitter | null) => form.noValidate || !!submitter?.formNoValidate || form.checkValidity();
+
+/**
+ * A submit of the site's search form, the one holding an input matching
+ * `inputSelector` (any form without a selector). `target(form, submitter,
+ * input)` says where it leads when it is ours to take (null: the browser's);
+ * then the event is cancelled and `go(to, form, input, e)` does it, and the
+ * event goes no further (a host handler that ignores defaultPrevented would
+ * navigate as well, htmx's boosted form). Heard as the window's `submit`
+ * (capture), in a shadow root's too (a web-component header: its submit is
+ * not composed) once one of its inputs is used, and as Enter in the input
+ * ahead of the site's own handlers (some navigate with form.submit() on Enter,
+ * which fires no submit event), as the browser's implicit submission
+ * (`implicitSubmitter`, then `validates` once the Enter would be taken: nothing
+ * where the browser would submit nothing). Not with a modifier key held (a
+ * new tab or window, where the browser supports it), and not an Enter on an
+ * option selected in our open autocomplete (the autocomplete's; its own
+ * hand-off of a query is a synthetic Enter, taken). Errors in `target` and
+ * `go` are reported as `where`'s. Returns `isInput` and the inputs seen in
+ * shadow roots (in-place.ts shows the query in them on back/forward).
+ */
+export const onSearchSubmit = (
+  where: string,
+  inputSelector: string | undefined,
+  target: (form: HTMLFormElement, submitter: HTMLElement | null, input: HTMLInputElement | null) => URL | null,
+  go: (to: URL, form: HTMLFormElement, input: HTMLInputElement | null, e: Event) => void,
+) => {
+  const isInput = (el: unknown): el is HTMLInputElement => !!inputSelector && el instanceof HTMLInputElement && el.matches(inputSelector);
+  const realTarget = (e: Event) => (e.composedPath?.()[0] ?? e.target) as Element | null;
+  let mods = { on: false, t: -1 };
+  const track = (e: KeyboardEvent | MouseEvent) => void (mods = { on: e.ctrlKey || e.metaKey || e.shiftKey || e.altKey, t: e.timeStamp });
+  addEventListener('keydown', track, true);
+  addEventListener('click', track, true);
+  const guarded = <T>(f: () => T, otherwise: T): T => {
+    try {
+      return f();
+    } catch (err) {
+      reportError(where, err);
+      return otherwise;
+    }
+  };
+  const taken = (to: URL, form: HTMLFormElement, input: HTMLInputElement | null, e: Event) => {
+    e.preventDefault();
+    guarded(() => go(to, form, input, e), undefined);
+  };
+  const onSubmit = (e: SubmitEvent) => {
+    const form = e.target;
+    if (e.defaultPrevented || !(form instanceof HTMLFormElement) || (mods.on && e.timeStamp - mods.t < 100)) return;
+    // The form's search input; with a selector, a form without one is not the site's search form.
+    const input = inputSelector ? ([...form.elements].find(isInput) ?? null) : null;
+    if (inputSelector && !input) return;
+    const to = guarded(() => target(form, e.submitter, input), null);
+    if (!to) return;
+    taken(to, form, input, e);
+    e.stopPropagation();
+  };
+  addEventListener('submit', onSubmit, true);
+  // A search input in a shadow root: its key events reach window retargeted to
+  // the shadow host (read from the composed path); its root gets the submit
+  // listener once one of its inputs is used.
+  const shadowInputs = new Set<HTMLInputElement>();
+  const roots = new WeakSet<ShadowRoot>();
+  const seen = (e: Event) => {
+    const i = realTarget(e);
+    const root = isInput(i) ? i.getRootNode() : null;
+    if (!(root instanceof ShadowRoot)) return;
+    shadowInputs.add(i as HTMLInputElement);
+    if (roots.has(root)) return;
+    roots.add(root);
+    root.addEventListener('submit', onSubmit as EventListener, true);
+  };
+  addEventListener('focusin', seen, true);
+  // Our open autocomplete with an option selected: in its shadow root by default (light DOM with dom: 'light').
+  const acSelection = () => {
+    const o = document.querySelector('[data-lbx="ac-overlay"]');
+    return !!o?.matches(':popover-open') && !!(o.shadowRoot ?? o).querySelector('[aria-selected="true"]');
+  };
+  addEventListener(
+    'keydown',
+    (e) => {
+      if (e.key !== 'Enter' || e.isComposing || e.defaultPrevented || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+      const input = realTarget(e);
+      if (!isInput(input) || !input.form) return;
+      seen(e);
+      if (e.isTrusted && acSelection()) return;
+      const form = input.form;
+      const sub = implicitSubmitter(form);
+      if (!sub) return; // the browser submits nothing
+      // `target` first (its formUrl builds the form's data: the form's `formdata` event, as a submit's), validation
+      // last: an Enter declined here fires no `invalid` events of ours before the browser's own; an invalid
+      // field then costs one `formdata` event the browser would not have sent, the smaller of the two.
+      const to = guarded(() => target(form, sub.submitter, input), null);
+      if (!to || !validates(form, sub.submitter)) return; // not ours; or the browser reports the invalid field and submits nothing
+      taken(to, form, input, e);
+      e.stopImmediatePropagation();
+    },
+    true,
+  );
+  return { isInput, shadowInputs };
+};