@swiftbrowser/web 0.3.1 → 0.4.0

package/src/interaction.ts

@@ -34,8 +34,16 @@
  * top of a `refreshable` scroller pulls to refresh; touch moves are read
  * directly for pull to refresh (the browser cancels the pointer once it
  * scrolls the list).
+ *
+ * Two more candidates lift something (src/dragDrop.ts does the DOM work):
+ * a movable `listrow` (by its edit-mode grip from the pointer down, or by a
+ * long press when the list is not editing) is reordered among its
+ * neighbours, and a `draggable` (a 10 px mouse drag, or a long press on a
+ * touch screen) is carried to a `dropdestination`. While either owns the
+ * pointer its touch moves are kept from scrolling.
  */
 
+import { RowReorder, ViewDrag } from './dragDrop';
 import type { LayoutNode } from './layout';
 import { symbolOf, textOf, tintOf, unwrapStyledNode } from './nodeQueries';
 import type { DragEvent, ElementId, RendererEvent } from './protocol';
@@ -132,7 +140,11 @@ type Candidate =
   | { kind: 'contextmenu'; el: HTMLElement; id: ElementId }
   | { kind: 'swipe'; host: SwipeHost }
   | { kind: 'sheet'; sheet: HTMLElement; card: HTMLElement; id: ElementId }
-  | { kind: 'refresh'; scroller: HTMLElement; id: ElementId };
+  | { kind: 'refresh'; scroller: HTMLElement; id: ElementId }
+  /** A movable `listrow`: `immediate` from its grip (owned from the pointer down), else lifted by a long press. */
+  | { kind: 'reorder'; row: HTMLElement; id: ElementId; immediate: boolean }
+  /** A `draggable`: lifted by a long press (`byPress`, touch) or by moving 10 px (mouse). */
+  | { kind: 'dragsource'; el: HTMLElement; id: ElementId; byPress: boolean };
 
 interface Session {
   pointerId: number;
@@ -158,6 +170,9 @@ interface Session {
   swipeOffset: number;
   // sheet / refresh
   dy: number;
+  // reorder / drag source (src/dragDrop.ts)
+  reorder: RowReorder | null;
+  viewDrag: ViewDrag | null;
 }
 
 interface OpenSwipe {
@@ -193,6 +208,8 @@ export class InteractionController {
   private touchPull: { scroller: HTMLElement; id: ElementId; startY: number; sent: boolean } | null = null;
   /** A touch in a sheet's scroll view at its top: its first move decides who scrolls. */
   private touchSheet: { scroller: HTMLElement; startY: number } | null = null;
+  /** The last row reorder, which may still be settling after its pointer lifted. */
+  private reorder: RowReorder | null = null;
 
   constructor(private readonly host: InteractionHost) {
     const root = host.root;
@@ -204,6 +221,7 @@ export class InteractionController {
     root.addEventListener('touchstart', this.onTouchStart, { passive: true });
     root.addEventListener('touchmove', this.onTouchMove, { passive: true });
     root.addEventListener('touchmove', this.onSheetTouchMove, { passive: false });
+    root.addEventListener('touchmove', this.onLiftedTouchMove, { passive: false });
     root.addEventListener('touchend', this.onTouchEnd, { passive: true });
     root.addEventListener('touchcancel', this.onTouchEnd, { passive: true });
     document.addEventListener('pointerdown', this.onDocumentPointerDown, true);
@@ -219,6 +237,7 @@ export class InteractionController {
     root.removeEventListener('touchstart', this.onTouchStart);
     root.removeEventListener('touchmove', this.onTouchMove);
     root.removeEventListener('touchmove', this.onSheetTouchMove);
+    root.removeEventListener('touchmove', this.onLiftedTouchMove);
     root.removeEventListener('touchend', this.onTouchEnd);
     root.removeEventListener('touchcancel', this.onTouchEnd);
     document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
@@ -265,8 +284,9 @@ export class InteractionController {
     const target = event.target as HTMLElement | null;
     if (!target) return;
     // Pointer downs in a text field select text, never gesture; a slider
-    // (Phase 8 controls) owns its own pointer drag in the renderer.
-    const inField = target.closest('input, textarea, [contenteditable], .sb-slider') !== null;
+    // (Phase 8 controls) owns its own pointer drag in the renderer, and a
+    // `host` element's content is the page's own DOM.
+    const inField = target.closest('input, textarea, [contenteditable], .sb-slider, .sb-host') !== null;
     const candidates = inField ? [] : this.collectCandidates(target, event);
     const edgeStrip = target.classList.contains('sb-navscreen-edge') ? target : null;
     if (candidates.length === 0 && !edgeStrip) return;
@@ -294,20 +314,35 @@ export class InteractionController {
       swipeStart: 0,
       swipeOffset: 0,
       dy: 0,
+      reorder: null,
+      viewDrag: null,
     };
     this.session = session;
     window.addEventListener('pointermove', this.onPointerMove);
     window.addEventListener('pointerup', this.onPointerUp);
     window.addEventListener('pointercancel', this.onPointerCancel);
-    // The innermost long-press wrapper arms its timer right away.
-    const presser = candidates.find((c) => (c.kind === 'gesture' && c.longPress) || c.kind === 'contextmenu');
+    // The innermost long-press wrapper arms its timer right away (a row or
+    // view lifted by a long press counts; a context menu inside it wins).
+    const presser = candidates.find(
+      (c) =>
+        (c.kind === 'gesture' && c.longPress) ||
+        c.kind === 'contextmenu' ||
+        (c.kind === 'reorder' && !c.immediate) ||
+        (c.kind === 'dragsource' && c.byPress),
+    );
     if (presser) {
       const duration = presser.kind === 'gesture' ? presser.minDuration : LONG_PRESS_MS;
       session.longPressTimer = window.setTimeout(() => this.fireLongPress(session, presser), duration);
     }
-    // An immediate drag gesture (`minimumDistance: 0`) owns the pointer from the start.
-    const immediate = candidates.find((c) => c.kind === 'gesture' && c.drag && c.minDistance <= 0);
-    if (immediate && candidates[0] === immediate) this.claim(session, immediate, event);
+    // An immediate drag gesture (`minimumDistance: 0`) and a row's grip own the pointer from the start.
+    const immediate = candidates.find((c) => (c.kind === 'gesture' && c.drag && c.minDistance <= 0) || (c.kind === 'reorder' && c.immediate));
+    if (immediate && candidates[0] === immediate) this.claim(session, immediate, event.pointerId);
+  };
+
+  /** A lifted row or view moves with the finger: the list under it must not scroll. */
+  private readonly onLiftedTouchMove = (event: TouchEvent): void => {
+    const claimed = this.session?.claimed;
+    if (claimed && (claimed.kind === 'reorder' || claimed.kind === 'dragsource') && event.cancelable) event.preventDefault();
   };
 
   private readonly onPointerMove = (event: PointerEvent): void => {
@@ -328,7 +363,7 @@ export class InteractionController {
     if (!session.claimed) {
       const owner = session.candidates.find((c) => this.wants(c, dx, dy, distance));
       if (!owner) return;
-      this.claim(session, owner, event);
+      this.claim(session, owner, event.pointerId);
     }
     if (session.claimed) this.move(session, session.claimed, dx, dy);
   };
@@ -380,6 +415,14 @@ export class InteractionController {
   /** Every behaviour that could own a pointer that went down on `target`, in priority order. */
   private collectCandidates(target: HTMLElement, event: PointerEvent): Candidate[] {
     const out: Candidate[] = [];
+    // A press on a movable row's grip lifts the row right away, above all else.
+    const grip = target.closest<HTMLElement>('.sb-listrow-grip');
+    const gripRow = grip?.closest<HTMLElement>('.sb-listrow') ?? null;
+    const gripRowId = Number(gripRow?.dataset[ID_ATTR]);
+    if (gripRow && Number.isInteger(gripRowId) && !this.reorderSettling(gripRow)) {
+      out.push({ kind: 'reorder', row: gripRow, id: gripRowId, immediate: true });
+    }
+    const byPress = event.pointerType !== 'mouse';
     const screen = target.closest<HTMLElement>('.sb-navscreen');
     if (screen && screen.dataset['sbNavPosition'] === 'top' && Number(screen.dataset['sbDepth'] ?? '0') > 0 && !this.swipeBack) {
       const rect = screen.getBoundingClientRect();
@@ -405,9 +448,21 @@ export class InteractionController {
         out.push({ kind: 'gesture', el, id, drag, longPress, minDistance, minDuration });
       } else if (el.classList.contains('sb-contextmenu') && Number.isInteger(id)) {
         out.push({ kind: 'contextmenu', el, id });
+      } else if (el.classList.contains('sb-draggable') && Number.isInteger(id)) {
+        out.push({ kind: 'dragsource', el, id, byPress });
       } else if ((el.classList.contains('sb-swipeactions') || el.classList.contains('sb-listrow')) && !inHorizontalScroller) {
         const host = this.swipeHostFor(el);
         if (host) out.push({ kind: 'swipe', host });
+        // A movable row in a list that is not editing lifts on a long press.
+        if (
+          el.classList.contains('sb-listrow') &&
+          el.hasAttribute('data-sb-movable') &&
+          Number.isInteger(id) &&
+          !el.closest('.sb-list')?.hasAttribute('data-sb-editing') &&
+          !this.reorderSettling(el)
+        ) {
+          out.push({ kind: 'reorder', row: el, id, immediate: false });
+        }
       }
     }
     const card = target.closest<HTMLElement>('.sb-sheet-card');
@@ -451,10 +506,15 @@ export class InteractionController {
         return dy >= PAN_SLOP && dy > Math.abs(dx);
       case 'refresh':
         return dy >= PAN_SLOP && dy > Math.abs(dx) && c.scroller.scrollTop <= 0;
+      case 'reorder':
+        // Owned from the pointer down (the grip) or by a long press, never by motion.
+        return false;
+      case 'dragsource':
+        return !c.byPress && distance >= DRAG_MIN_DISTANCE;
     }
   }
 
-  private claim(session: Session, c: Candidate, event: PointerEvent): void {
+  private claim(session: Session, c: Candidate, pointerId: number): void {
     session.claimed = c;
     session.candidates = [c];
     if (session.longPressTimer !== null) {
@@ -463,7 +523,7 @@ export class InteractionController {
     }
     const captureOn = c.kind === 'gesture' ? c.el : c.kind === 'swipe' ? c.host.el : this.host.root;
     try {
-      captureOn.setPointerCapture(event.pointerId);
+      captureOn.setPointerCapture(pointerId);
     } catch {
       // Not every environment (or an already-cancelled pointer) allows capture.
     }
@@ -501,13 +561,28 @@ export class InteractionController {
         c.card.style.transition = 'none';
         break;
       case 'refresh': {
-        const content = scrollContentOf(c.scroller);
-        if (content) content.style.transition = 'none';
+        for (const el of pulledOf(c.scroller)) el.style.transition = 'none';
         c.scroller.dataset['sbPulling'] = '';
         break;
       }
       case 'contextmenu':
         break;
+      case 'reorder': {
+        this.host.closeMenu();
+        if (this.openSwipe) this.closeRow(this.openSwipe.host.el);
+        const reorder = new RowReorder(c.row, c.id, this.host);
+        this.reorder = reorder;
+        session.reorder = reorder;
+        reorder.start(session.y);
+        break;
+      }
+      case 'dragsource': {
+        this.host.closeMenu();
+        const drag = new ViewDrag(c.el, c.id, this.host);
+        session.viewDrag = drag;
+        drag.start();
+        break;
+      }
     }
   }
 
@@ -552,14 +627,20 @@ export class InteractionController {
       case 'refresh': {
         const pulled = Math.max(0, dy);
         session.dy = pulled;
-        const content = scrollContentOf(c.scroller);
         // The content follows with resistance; the spinner fades in over the pull distance.
-        if (content) content.style.transform = `translateY(${Math.min(REFRESH_PULL * 1.5, pulled * 0.6)}px)`;
+        const transform = `translateY(${Math.min(REFRESH_PULL * 1.5, pulled * 0.6)}px)`;
+        for (const el of pulledOf(c.scroller)) el.style.transform = transform;
         c.scroller.style.setProperty('--sb-pull', String(round2(clamp01(pulled / REFRESH_PULL))));
         return;
       }
       case 'contextmenu':
         return;
+      case 'reorder':
+        session.reorder?.move(dy, session.y);
+        return;
+      case 'dragsource':
+        session.viewDrag?.move(dx, dy, session.x, session.y);
+        return;
     }
   }
 
@@ -594,6 +675,12 @@ export class InteractionController {
       }
       case 'contextmenu':
         return;
+      case 'reorder':
+        session.reorder?.end();
+        return;
+      case 'dragsource':
+        session.viewDrag?.end(session.x, session.y);
+        return;
     }
   }
 
@@ -616,18 +703,35 @@ export class InteractionController {
         return;
       case 'contextmenu':
         return;
+      case 'reorder':
+        session.reorder?.cancel();
+        return;
+      case 'dragsource':
+        session.viewDrag?.cancel();
+        return;
     }
   }
 
   private fireLongPress(session: Session, c: Candidate): void {
     session.longPressTimer = null;
     if (this.session !== session || session.claimed) return;
-    session.done = true;
     session.suppressClick = true;
+    if (c.kind === 'reorder' || c.kind === 'dragsource') {
+      // Lifted: the pointer is owned from here, and every move drags.
+      this.claim(session, c, session.pointerId);
+      return;
+    }
+    session.done = true;
     if (c.kind === 'gesture') this.host.send({ type: 'longpress', id: c.id });
     else if (c.kind === 'contextmenu') this.host.openContextMenu(c.el, c.id);
   }
 
+  /** Whether a row of this card is still sliding into place after a reorder (its `move` is pending). */
+  private reorderSettling(row: HTMLElement): boolean {
+    const reorder = this.reorder;
+    return reorder !== null && reorder.settling && reorder.row.parentElement === row.parentElement;
+  }
+
   private dragEvent(session: Session, c: Extract<Candidate, { kind: 'gesture' }>, phase: DragEvent['phase'], velocity: { x: number; y: number }): DragEvent {
     const rect = session.gestureRect ?? c.el.getBoundingClientRect();
     return {
@@ -1031,10 +1135,9 @@ export class InteractionController {
   }
 
   private resetPull(scroller: HTMLElement): void {
-    const content = scrollContentOf(scroller);
-    if (content) {
-      content.style.transition = '';
-      content.style.transform = '';
+    for (const el of pulledOf(scroller)) {
+      el.style.transition = '';
+      el.style.transform = '';
     }
     delete scroller.dataset['sbPulling'];
     scroller.style.removeProperty('--sb-pull');
@@ -1148,8 +1251,11 @@ function contentOf(rowEl: HTMLElement): HTMLElement | null {
 }
 
 /** The scrolled content box of a `list` / `scrollview`. */
-function scrollContentOf(scroller: HTMLElement): HTMLElement | null {
-  return scroller.querySelector<HTMLElement>(':scope > .sb-list-content, :scope > .sb-scroll-content');
+/** What a pull to refresh moves: the content, and a large title that scrolls with it (src/largeTitle.ts). */
+function pulledOf(scroller: HTMLElement): HTMLElement[] {
+  return Array.from(
+    scroller.querySelectorAll<HTMLElement>(':scope > .sb-list-content, :scope > .sb-scroll-content, :scope > .sb-navbar-large-title'),
+  );
 }
 
 /**

package/src/largeTitle.ts

@@ -1,79 +1,120 @@
 /**
- * A navigation screen's large title scrolls with the screen's root list or
- * scroll view (iOS): the engine starts that scroll view under the bar, insets
- * its content by the title row and marks it with a `largeTitle` chrome rect
- * (layout/engine.ts, `placeNavScreen`). Here the title follows the scroll
- * offset and fades out at the bar's edge, as the scrolled content does
- * (`data-sb-scrolled`, iOS 26's scroll edge effect), and once it has gone
- * under the bar the screen gets `data-sb-collapsed`, which shows the inline
- * title (styles.css). Pulled past the top (a touch overscroll), the title
- * moves down with the content (iOS 26 no longer grows it).
+ * iOS 26: a navigation screen's root list or vertical scroll view starts at
+ * the top of the screen and its content scrolls under the bar; a large title
+ * scrolls with it. The engine insets the scroll view's content by the bar
+ * (and the title row) and marks it with a `topInset` chrome rect, plus a
+ * `largeTitle` rect when the title scrolls with it (layout/engine.ts,
+ * `placeNavScreen`).
+ *
+ * The title element moves into the scroll view (an absolutely positioned
+ * child, which the browser scrolls with the content), so it moves in step
+ * with the content however fast it scrolls, overscroll included. Scrolling
+ * only toggles flags: `data-sb-scrolled` on the screen once content is under
+ * the bar (its scroll edge effect, styles.css) and `data-sb-collapsed` once
+ * the title has gone under it, which shows the inline title. A list or
+ * scroll view deeper in the screen's content whose top touches the bar runs
+ * under it too (without the title). Its `data-sb-edge-top`
+ * (`.scrollEdgeEffectStyle` / `.scrollEdgeEffectHidden`, scrollEdge.ts) is
+ * copied to the screen, whose bar draws the effect.
  */
 
+import type { Rect } from './layout';
+import { setValue } from './scrollEdge';
+
 /** The scroll offset past which the title has gone under the bar. */
 const COLLAPSE_OFFSET = 44;
-/** How far below the bar's edge content fades in (styles.css matches). */
-const EDGE_FADE = 16;
 
 const bound = new WeakSet<HTMLElement>();
+/** Each screen's large title element, wherever it currently is. */
+const titles = new WeakMap<HTMLElement, HTMLElement>();
+
+/**
+ * A screen's large title element: in the screen's body, or in the scroll
+ * view that carries it (put back in the body if that scroll view is gone).
+ */
+export function largeTitleOf(screen: HTMLElement): HTMLElement | null {
+  let title = titles.get(screen) ?? screen.querySelector<HTMLElement>(':scope > .sb-navscreen-body > .sb-navbar-large-title');
+  if (!title) return null;
+  titles.set(screen, title);
+  const body = screen.querySelector<HTMLElement>(':scope > .sb-navscreen-body');
+  if (body && !screen.contains(title.parentElement)) body.prepend(title);
+  return title;
+}
+
+/** Whether a screen's large title currently scrolls inside one of its scroll views. */
+export function largeTitleScrolls(screen: HTMLElement, title: HTMLElement): boolean {
+  return title.parentElement !== null && !title.parentElement.classList.contains('sb-navscreen-body') && screen.contains(title);
+}
 
-function largeTitleOf(scroller: HTMLElement): { screen: HTMLElement; title: HTMLElement } | null {
-  const screen = scroller.closest<HTMLElement>('.sb-navscreen');
-  const title = screen?.querySelector<HTMLElement>(':scope > .sb-navscreen-body > .sb-navbar-large-title');
-  return screen && title ? { screen, title } : null;
+function screenOf(scroller: HTMLElement): HTMLElement | null {
+  return scroller.closest<HTMLElement>('.sb-navscreen');
 }
 
 /**
- * Called for every list and scroll view the layout reaches: `scrolls` is
- * whether the engine marked it as carrying its screen's large title.
+ * Called for every list and scroll view the layout reaches with its frame and
+ * the engine's `topInset` / `largeTitle` rects (absent when it is not its
+ * screen's root scroller).
  */
-export function bindLargeTitle(scroller: HTMLElement, scrolls: boolean): void {
-  if (!scrolls) {
-    if (scroller.dataset['sbScrollsTitle'] !== undefined) {
-      delete scroller.dataset['sbScrollsTitle'];
-      delete scroller.dataset['sbScrolled'];
-      const parts = largeTitleOf(scroller);
-      if (parts) reset(parts.screen, parts.title);
+export function bindScrollUnderBar(scroller: HTMLElement, frame: Rect, topInset: Rect | undefined, titleRect: Rect | undefined): void {
+  const screen = screenOf(scroller);
+  if (topInset === undefined) {
+    if (scroller.dataset['sbUnderBar'] !== undefined) {
+      delete scroller.dataset['sbUnderBar'];
+      scroller.style.removeProperty('--sb-top-inset');
+      if (screen) {
+        delete screen.dataset['sbScrolled'];
+        delete screen.dataset['sbCollapsed'];
+        delete screen.dataset['sbEdgeTop'];
+      }
     }
+    if (screen) releaseTitle(screen, scroller);
     return;
   }
-  scroller.dataset['sbScrollsTitle'] = '';
+  scroller.dataset['sbUnderBar'] = '';
+  scroller.style.setProperty('--sb-top-inset', `${topInset.height}px`);
+  if (screen) {
+    setValue(screen, 'sbEdgeTop', scroller.dataset['sbEdgeTop'] ?? null);
+    const title = largeTitleOf(screen);
+    if (title && titleRect) {
+      if (title.parentElement !== scroller) scroller.append(title);
+      const s = title.style;
+      s.left = `${titleRect.x - frame.x}px`;
+      s.top = `${titleRect.y - frame.y}px`;
+      s.width = `${titleRect.width}px`;
+      s.height = `${titleRect.height}px`;
+    } else {
+      releaseTitle(screen, scroller);
+    }
+  }
   if (!bound.has(scroller)) {
     bound.add(scroller);
-    scroller.addEventListener('scroll', () => syncLargeTitle(scroller), { passive: true });
+    scroller.addEventListener('scroll', () => syncScrollUnderBar(scroller), { passive: true });
   }
-  syncLargeTitle(scroller);
+  syncScrollUnderBar(scroller);
 }
 
-export function syncLargeTitle(scroller: HTMLElement): void {
-  if (scroller.dataset['sbScrollsTitle'] === undefined) return;
-  const parts = largeTitleOf(scroller);
-  if (!parts) return;
-  const { screen, title } = parts;
-  const offset = scroller.scrollTop;
-  const s = title.style;
-  if (offset > 0) {
-    s.transform = `translateY(${-offset}px)`;
-    // Hide what has gone above the title's row (under the bar), fading in
-    // below the edge.
-    setMask(title, `linear-gradient(to bottom, transparent ${offset}px, #000 ${offset + EDGE_FADE}px)`);
-    scroller.dataset['sbScrolled'] = '';
-  } else {
-    s.transform = offset < 0 ? `translateY(${-offset}px)` : '';
-    setMask(title, '');
-    delete scroller.dataset['sbScrolled'];
-  }
-  if (offset > COLLAPSE_OFFSET) screen.dataset['sbCollapsed'] = '';
-  else delete screen.dataset['sbCollapsed'];
+/** Put a title this scroll view carries back in its screen's body. */
+function releaseTitle(screen: HTMLElement, scroller: HTMLElement): void {
+  const title = titles.get(screen);
+  if (!title || title.parentElement !== scroller) return;
+  screen.querySelector<HTMLElement>(':scope > .sb-navscreen-body')?.prepend(title);
 }
 
-function setMask(el: HTMLElement, mask: string): void {
-  el.style.setProperty('mask-image', mask);
-  el.style.setProperty('-webkit-mask-image', mask);
+export function syncScrollUnderBar(scroller: HTMLElement): void {
+  if (scroller.dataset['sbUnderBar'] === undefined) return;
+  const screen = screenOf(scroller);
+  if (!screen) return;
+  const offset = scroller.scrollTop;
+  setFlag(screen, 'sbScrolled', offset > 0);
+  const title = titles.get(screen);
+  const carries = title !== undefined && title.parentElement === scroller;
+  setFlag(screen, 'sbCollapsed', carries && offset > COLLAPSE_OFFSET);
 }
 
-function reset(screen: HTMLElement, title: HTMLElement): void {
-  title.style.transform = '';
-  setMask(title, '');
-  delete screen.dataset['sbCollapsed'];
+function setFlag(el: HTMLElement, key: string, on: boolean): void {
+  if (on) {
+    if (el.dataset[key] === undefined) el.dataset[key] = '';
+  } else if (el.dataset[key] !== undefined) {
+    delete el.dataset[key];
+  }
 }