@luigisbox/luma 0.2.0 → 0.4.0

package/src/widgets/listing/view.ts

@@ -46,6 +46,9 @@ export type ListingData = Omit<SearchScope, keyof Helpers | 'go' | 'toggleFacet'
 export interface ListingView {
   /** Groups opened or closed by the shopper, by facet name. */
   open?: Record<string, boolean>;
+  /** Groups shown open for their selection earlier in the visit: they stay open with it gone (`keptOpen` records them). */
+  kept?: Record<string, boolean>;
+  keptOpen?: (name: string) => void;
   /** Groups open by default (`facetGroups.open` at this width): all, none, or the first N of the sidebar. */
   openDefault?: boolean | number;
   /** A group's search text, by facet name. */
@@ -120,11 +123,18 @@ export const listingData = (ctx: Pick<WidgetContext<ListingConfig>, 'config' | '
   const ranges: SearchScope['ranges'] = [];
   const names = facetFields(cfg, q);
   const layout = q.layout ? [...q.layout, ...names.filter((n) => !q.layout!.includes(n))] : names;
-  /** A group's accordion state: the shopper's toggle, else open with a selection, else the default (all, none, the first N of the sidebar). */
+  /**
+   * A group's accordion state: the shopper's toggle, else open with a
+   * selection (and from then on in the visit: unticking its last value does
+   * not collapse it under the finger), else the default (all, none, the
+   * first N of the sidebar).
+   */
   const group = (name: string, selected: boolean) => {
     const at = layout.indexOf(name);
     const byDefault = typeof openDefault === 'number' ? at >= 0 && at < openDefault : !!openDefault;
-    return { id: groupId(route.id, name), open: view.open?.[name] ?? (selected || byDefault), toggle: () => view.toggleGroup?.(name) };
+    const toggled = view.open?.[name];
+    if (toggled == null && selected) view.keptOpen?.(name);
+    return { id: groupId(route.id, name), open: toggled ?? (selected || !!view.kept?.[name] || byDefault), toggle: () => view.toggleGroup?.(name) };
   };
   for (const name of names) {
     const data = res.facets[name];

package/src/widgets/search/range.ts

@@ -18,6 +18,8 @@ type Range = SearchScope['ranges'][number];
 
 /** A pause after the last key before a thumb moved from the keyboard commits (one request for a run of presses). */
 export const KEY_COMMIT_MS = 600;
+/** How far a touch on the track goes sideways (and more than down) before it is a drag, not the start of a scroll. */
+const TOUCH_SLOP_PX = 8;
 
 interface Parts {
   root: HTMLElement;
@@ -169,7 +171,10 @@ export const rangeHandlers = (r: Range) => {
     /**
      * A press on the slider: on a thumb, the native drag (committed when the
      * pointer lets go); on the track, the nearer thumb jumps there and follows
-     * the pointer until it lets go.
+     * the pointer until it lets go. A touch (or pen) on the track may be the
+     * start of a scroll (touch-action: pan-y): nothing moves until the finger
+     * goes sideways (a drag) or lifts where it pressed (a tap). A cancelled
+     * press (the browser took the gesture) commits nothing.
      */
     press: (e: PointerEvent) => {
       const p = at(e);
@@ -187,36 +192,53 @@ export const rangeHandlers = (r: Range) => {
         return snap(r.min + Math.min(1, Math.max(0, f)) * (r.max - r.min), r);
       };
       let thumb: HTMLInputElement | null = null;
-      if (track) {
-        e.preventDefault();
+      const move = (x: number) => {
+        const { from: f, to: t } = values(p, r);
+        const n = valueAt(x);
+        show(p, r, thumb === p.lo ? Math.min(n, t) : f, thumb === p.lo ? t : Math.max(n, f));
+      };
+      /** The thumb nearer the press takes it, and goes to x. */
+      const grab = (x: number) => {
         const v = valueAt(e.clientX);
         const { from, to } = values(p, r);
-        thumb = Math.abs(v - from) < Math.abs(v - to) || (v < from && from === to) ? p.lo : p.hi;
+        thumb = Math.abs(v - from) < Math.abs(v - to) || (v < from && from === to) ? p.lo! : p.hi!;
         thumb.focus({ preventScroll: true });
-        const move = (x: number) => {
-          const { from: f, to: t } = values(p, r);
-          const n = valueAt(x);
-          show(p, r, thumb === p.lo ? Math.min(n, t) : f, thumb === p.lo ? t : Math.max(n, f));
-        };
-        move(e.clientX);
+        move(x);
+      };
+      let onMove: ((m: PointerEvent) => void) | null = null;
+      if (track) {
+        e.preventDefault();
+        if (e.pointerType === 'mouse' || !e.pointerType) grab(e.clientX);
         try {
           p.slider.setPointerCapture(e.pointerId);
         } catch {}
-        const onMove = (m: PointerEvent) => m.pointerId === e.pointerId && move(m.clientX);
+        onMove = (m: PointerEvent) => {
+          if (m.pointerId !== e.pointerId) return;
+          if (!thumb) {
+            const dx = Math.abs(m.clientX - e.clientX);
+            if (dx < TOUCH_SLOP_PX || dx <= Math.abs(m.clientY - e.clientY)) return;
+            grab(m.clientX);
+          } else move(m.clientX);
+        };
         p.slider.addEventListener('pointermove', onMove);
-        const done = () => p.slider!.removeEventListener('pointermove', onMove);
-        p.slider.addEventListener('lostpointercapture', done, { once: true });
       }
-      const up = (u: PointerEvent) => {
+      const end = (u: PointerEvent) => {
         if (u.pointerId !== e.pointerId) return;
-        window.removeEventListener('pointerup', up, true);
-        window.removeEventListener('pointercancel', up, true);
+        window.removeEventListener('pointerup', end, true);
+        window.removeEventListener('pointercancel', end, true);
+        if (onMove) p.slider!.removeEventListener('pointermove', onMove);
         st.pressed = false;
+        if (u.type === 'pointercancel') {
+          // The browser took the gesture (a scroll): the track's thumb back where it was drawn. A thumb's own drag is the input's (its change commits, if any).
+          if (track && thumb) show(p, r, r.from, r.to);
+          return;
+        }
+        if (track && !thumb) grab(u.clientX); // a tap
         // The native drag's own `change` may come after this: commit() sends a value once.
         setTimeout(() => commit(p, r), 0);
       };
-      window.addEventListener('pointerup', up, true);
-      window.addEventListener('pointercancel', up, true);
+      window.addEventListener('pointerup', end, true);
+      window.addEventListener('pointercancel', end, true);
     },
     /** Typed into an input: the thumbs follow (within the range); nothing is committed yet. */
     numberInput: (e: Event) => {

package/src/widgets/search/style-search.css

@@ -42,8 +42,8 @@ lbx-search:focus, lbx-plp:focus { outline: none; }
 .lbx-s__fsearch { margin: 4px 0 8px; }
 .lbx-s__fsearch-input { box-sizing: border-box; width: 100%; min-height: 24px; font: inherit; }
 .lbx-s__fsearch-n { display: block; min-height: 1.2em; font-size: .875em; }
-/* A range facet's slider: its theming variables in template-search-range-default.ts. */
-.lbx-s__range-slider { --lbx-rs: var(--lbx-range-thumb-size, 24px); --lbx-rt: var(--lbx-range-thumb, #fff); --lbx-rb: var(--lbx-range-thumb-border, currentColor); --lbx-rr: var(--lbx-range-ring, currentColor); position: relative; height: max(24px, var(--lbx-rs)); margin: 4px 0 8px; }
+/* A range facet's slider: its theming variables in template-search-range-default.ts. touch-action: a horizontal touch drag is the slider's (a press on the track follows the finger), a vertical one still scrolls. */
+.lbx-s__range-slider { --lbx-rs: var(--lbx-range-thumb-size, 24px); --lbx-rt: var(--lbx-range-thumb, #fff); --lbx-rb: var(--lbx-range-thumb-border, currentColor); --lbx-rr: var(--lbx-range-ring, currentColor); position: relative; height: max(24px, var(--lbx-rs)); margin: 4px 0 8px; touch-action: pan-y; }
 .lbx-s__range-track { position: absolute; top: 50%; left: calc(var(--lbx-rs) / 2); right: calc(var(--lbx-rs) / 2); height: var(--lbx-range-height, 4px); transform: translateY(-50%); border-radius: 4px; background: var(--lbx-range-track, #c4c4c4); }
 .lbx-s__range-fill { position: absolute; top: 0; bottom: 0; left: var(--lbx-from, 0%); right: calc(100% - var(--lbx-to, 100%)); border-radius: inherit; background: var(--lbx-range-fill, currentColor); }
 [dir="rtl"] .lbx-s__range-fill { left: calc(100% - var(--lbx-to, 100%)); right: var(--lbx-from, 0%); }