@luigisbox/luma 0.1.0 → 0.3.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/recommender/index.ts

@@ -18,7 +18,8 @@ import { onUrlChange } from '../../core/sense';
 import { setCss } from '../../core/styles';
 import { settleImages } from '../../core/support';
 import type { WidgetContext } from '../../main';
-import type { RecommenderConfigType } from '../../types';
+import type { RecommenderConfigType, Result } from '../../types';
+import { watch } from '../../core/tiles';
 
 export { default as css } from './style-recommender.css?raw';
 export const templates = byName(import.meta.glob('./template-*.ts', { eager: true, import: 'default' }));
@@ -52,6 +53,9 @@ const fetchHits = (ctx: Ctx, items: string[], signal?: AbortSignal) => {
   return signal ? untilAborted(p, signal) : p;
 };
 
+/** Our list, for its tiles' clicks and add-to-carts (core/tiles.ts). */
+const listOf = (ctx: Ctx) => ({ list: `lbx_reco_${ctx.id.slice(5)}`, global: ctx.global });
+
 const applyStyles = (ctx: Ctx) => {
   ctx.styles.forEach((c, i) => setCss(`itg:${ctx.id}:${i}`, c));
   useContrast();
@@ -67,6 +71,8 @@ interface State {
   tried: string | null;
   failures: number;
   retryAt: number;
+  /** What the tiles show (analytics: a click's result). */
+  results: Result[];
 }
 
 /** Retry a failed widget after 2, 4, 8, 16 s, then only when its inputs change. */
@@ -90,7 +96,8 @@ const load = (ctx: Ctx, el: HTMLElement, s: State, items: string[], key: string)
   fetchHits(ctx, items, ctl.signal)
     .then((hits) => {
       if (ctl.signal.aborted) return;
-      s.v.render('recommender-box-default', { ...ctx.helpers, results: hits.map(ctx.result) });
+      s.results = hits.map(ctx.result);
+      s.v.render('recommender-box-default', { ...ctx.helpers, results: s.results });
       settleImages(el, ctx.global.images?.fade !== false);
       el.style.minHeight = '';
       el.dataset.state = hits.length ? 'ready' : 'empty';
@@ -115,8 +122,9 @@ const load = (ctx: Ctx, el: HTMLElement, s: State, items: string[], key: string)
 /** Called by the entry once the placeholder is near the viewport. */
 export const attach = (ctx: Ctx, el: HTMLElement) => {
   applyStyles(ctx);
-  const s: State = { near: true, key: null, v: view(el, ctx.templates), tried: null, failures: 0, retryAt: 0 };
+  const s: State = { near: true, key: null, v: view(el, ctx.templates), tried: null, failures: 0, retryAt: 0, results: [] };
   attached.set(el, { ctx, s });
+  watch(el, { ...listOf(ctx), results: () => s.results });
   io.observe(el);
   sync();
 };
@@ -180,6 +188,7 @@ let pop: HTMLElement | null = null;
 let popView: ReturnType<typeof view> | null = null;
 let isOpen = false;
 let popCtl: AbortController | null = null;
+let popResults: Result[] = [];
 
 const close = () => {
   popCtl?.abort();
@@ -217,6 +226,7 @@ export const openPopup = (ctx: Ctx, item: string, near: DOMRect, notice?: Elemen
         // A modal library may set pointer-events: none on body, which inherits.
         pop.style.pointerEvents = 'auto';
         popView = view(pop, ctx.templates);
+        watch(pop, { ...listOf(ctx), results: () => popResults });
         // Dismissal: close button, Escape, a press outside, or leaving the page.
         addEventListener('keydown', (e) => isOpen && e.key === 'Escape' && close(), true);
         addEventListener('pointerdown', (e) => isOpen && !pop!.contains(e.target as Node) && close(), true);
@@ -231,7 +241,8 @@ export const openPopup = (ctx: Ctx, item: string, near: DOMRect, notice?: Elemen
         isOpen = false;
       }
       pop.setAttribute('aria-label', ctx.t('title'));
-      popView!.render('recommender-popup', { ...ctx.helpers, results: hits.map(ctx.result), close });
+      popResults = hits.map(ctx.result);
+      popView!.render('recommender-popup', { ...ctx.helpers, results: popResults, close });
       settleImages(pop, ctx.global.images?.fade !== false);
       pop.querySelector('[data-lbx-list]')?.scrollTo(0, 0);
       // Just below the host's notice, right-aligned with it.

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%); }