@luigisbox/luma 0.2.0 → 0.3.0

package/src/widgets/listing/stash.ts

@@ -5,8 +5,12 @@
 //   (widgets/search/speculate.ts). Used by a plain navigation (or a prerender
 //   of the page) within its `ttl` (2 minutes), once.
 // - `back`: the listing as the shopper left it for a product page (pages
-//   1..N, where they were). Used by a back/forward load within 30 minutes; the
-//   listing then restores the scroll position and revalidates in the background.
+//   1..N, where they were). Used by a back/forward load within 30 minutes, or
+//   by a reload or a navigation from the page itself within a minute (a link
+//   whose server redirects back to it); the listing then restores the scroll
+//   position and revalidates in the background. Otherwise, on a load of the
+//   entry left (back/forward, reload): where they were only (`stale`), the
+//   browser's own restoration being off for it (`sr`).
 // Bounded: at most 3 entries (one `spec`), 400k characters each; a full store
 // drops ours first. Best-effort: storage may be unavailable, never required.
 
@@ -14,6 +18,7 @@ import { navigation, STASH, stashFits, stashKey } from '../../core/stash';
 import { pageKey } from '../../core/page';
 import type { ListingResult } from './query';
 import type { Query } from './state';
+import type { Spot } from './instant';
 
 export interface Stash {
   v: 1;
@@ -26,8 +31,12 @@ export interface Stash {
   route: string;
   query: Query;
   result: ListingResult;
-  /** back: the link the shopper followed (its href, its top in the viewport) and scrollY where it is gone. */
-  scroll?: { y: number; href?: string; top?: number };
+  /** back: the link the shopper followed (its href, which of the laid-out links to it, its top in the viewport) and scrollY where it is gone. */
+  scroll?: Spot;
+  /** back: Luma turned the browser's own scroll restoration off for the entry left (`history.scrollRestoration`): back on once restored. */
+  sr?: 1;
+  /** Read only: too old to render from, where the shopper was is all that is used. */
+  stale?: true;
 }
 
 const MAX_CHARS = 400_000;
@@ -48,7 +57,7 @@ const entries = (except?: string) => {
   return out.sort((a, b) => a.at - b.at);
 };
 
-/** The stashed result this page load may render from, or null. */
+/** The stashed result this page load may render from, or null. `stale`: a Back entry too old to render, for its scroll only. */
 export const readStash = (route: string, href: string): Stash | null => {
   try {
     const key = stashKey(href);
@@ -59,8 +68,22 @@ export const readStash = (route: string, href: string): Stash | null => {
     const nav = navigation();
     const fresh = s.v === 1 && age >= 0 && age < (s.ttl ?? MAX_AGE[s.kind] ?? 0);
     if (!fresh || s.kind === 'spec') sessionStorage.removeItem(key); // a speculation is used once
-    if (!fresh || s.route !== route || pageKey(nav.url) !== pageKey(href)) return null;
-    return stashFits(s.kind) ? s : null;
+    if (s.route !== route || pageKey(nav.url) !== pageKey(href)) return null;
+    if (fresh && stashFits(s.kind, s.at)) return s;
+    // The entry left loaded again (Back after long, a reload after the round
+    // trip's minute): the browser restores nothing where Luma turned its
+    // restoration off; where the shopper was is still known.
+    const again = nav.type === 'back_forward' || nav.type === 'reload';
+    return s.v === 1 && s.kind === 'back' && s.sr && again ? { ...s, stale: true } : null;
+  } catch {
+    return null;
+  }
+};
+
+/** This URL's stash as it is, whatever the load (the back/forward cache's restore: where the shopper was). */
+export const peekStash = (href: string): Stash | null => {
+  try {
+    return JSON.parse(sessionStorage.getItem(stashKey(href)) ?? 'null') as Stash | null;
   } catch {
     return null;
   }
@@ -76,7 +99,7 @@ export const dropStash = (href: string) => {
 /** false: too big, or storage refused it. */
 export const writeStash = (href: string, s: Omit<Stash, 'v' | 'at'>) => {
   try {
-    const json = JSON.stringify({ at: Date.now(), v: 1, kind: s.kind, ttl: s.ttl, route: s.route, query: s.query, result: s.result, scroll: s.scroll });
+    const json = JSON.stringify({ at: Date.now(), v: 1, kind: s.kind, ttl: s.ttl, route: s.route, query: s.query, result: s.result, scroll: s.scroll, sr: s.sr });
     if (json.length > MAX_CHARS) return false;
     const key = stashKey(href);
     const others = entries(key);

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