@swiftbrowser/web 0.2.0 → 0.3.1

package/src/interaction.ts

@@ -9,7 +9,10 @@
  * 2. the wrappers between the target and the root, innermost first: a
  *    `gesture` (drag, long press), a `contextmenu` (long press) and a swipe
  *    row (`swipeactions`, or a deletable `listrow` without one);
- * 3. the sheet card (drag down to dismiss);
+ * 3. the sheet card (drag down to dismiss): inside a vertical scroll view
+ *    only while that view is at its top, as UIKit hands a sheet's scroll
+ *    view's downward drag to the sheet there (a touch's first downward move
+ *    is kept from scrolling natively so the pointer reaches the sheet);
  * 4. pull to refresh on a `refreshable` scroller at its top.
  *
  * Nothing owns the pointer at first. On each move the candidates are asked in
@@ -188,6 +191,8 @@ export class InteractionController {
   private wheelPull: { scroller: HTMLElement; pulled: number; sent: boolean; timer: number } | null = null;
   /** Touch-driven pull (the browser cancels the pointer once the list scrolls). */
   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;
 
   constructor(private readonly host: InteractionHost) {
     const root = host.root;
@@ -198,6 +203,7 @@ export class InteractionController {
     root.addEventListener('scroll', this.onScroll, true);
     root.addEventListener('touchstart', this.onTouchStart, { passive: true });
     root.addEventListener('touchmove', this.onTouchMove, { passive: true });
+    root.addEventListener('touchmove', this.onSheetTouchMove, { passive: false });
     root.addEventListener('touchend', this.onTouchEnd, { passive: true });
     root.addEventListener('touchcancel', this.onTouchEnd, { passive: true });
     document.addEventListener('pointerdown', this.onDocumentPointerDown, true);
@@ -212,6 +218,7 @@ export class InteractionController {
     root.removeEventListener('scroll', this.onScroll, true);
     root.removeEventListener('touchstart', this.onTouchStart);
     root.removeEventListener('touchmove', this.onTouchMove);
+    root.removeEventListener('touchmove', this.onSheetTouchMove);
     root.removeEventListener('touchend', this.onTouchEnd);
     root.removeEventListener('touchcancel', this.onTouchEnd);
     document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
@@ -405,7 +412,9 @@ export class InteractionController {
     }
     const card = target.closest<HTMLElement>('.sb-sheet-card');
     const sheet = card?.parentElement;
-    if (card && sheet?.classList.contains('sb-sheet') && sheet.dataset['sbSheetPosition'] !== 'below') {
+    // A scroll view in the sheet that is scrolled down keeps the drag.
+    const sheetScroller = card ? verticalScrollerIn(target, card) : null;
+    if (card && sheet?.classList.contains('sb-sheet') && sheet.dataset['sbSheetPosition'] !== 'below' && !(sheetScroller && sheetScroller.scrollTop > 0)) {
       const id = Number(sheet.dataset[ID_ATTR]);
       const detents = (sheet.dataset['sbDetents'] ?? '').split(' ');
       // A full-screen cover (`detents: ["full"]`) has no drag to dismiss.
@@ -946,7 +955,15 @@ export class InteractionController {
 
   private readonly onTouchStart = (event: TouchEvent): void => {
     const touch = event.touches[0];
+    this.touchSheet = null;
     if (!touch || event.touches.length !== 1) return;
+    const target = event.target as HTMLElement;
+    const card = target.closest<HTMLElement>('.sb-sheet-card');
+    const sheetScroller = card ? verticalScrollerIn(target, card) : null;
+    // A refreshable scroller keeps its pull to refresh.
+    if (sheetScroller && sheetScroller.scrollTop <= 0 && sheetScroller.dataset['sbRefreshable'] === undefined) {
+      this.touchSheet = { scroller: sheetScroller, startY: touch.clientY };
+    }
     const scroller = this.refreshableScrollerOf(event.target as Element);
     if (!scroller || scroller.el.scrollTop > 0) return;
     this.touchPull = { scroller: scroller.el, id: scroller.id, startY: touch.clientY, sent: false };
@@ -969,6 +986,25 @@ export class InteractionController {
 
   private readonly onTouchEnd = (): void => {
     this.touchPull = null;
+    this.touchSheet = null;
+  };
+
+  /**
+   * The first move of a touch in a sheet's scroll view at its top: downwards,
+   * it is kept from scrolling (or overscrolling) the view, so the pointer
+   * stays with the sheet's drag; upwards, the view scrolls as usual.
+   */
+  private readonly onSheetTouchMove = (event: TouchEvent): void => {
+    const pending = this.touchSheet;
+    const touch = event.touches[0];
+    if (!pending || !touch) return;
+    const dy = touch.clientY - pending.startY;
+    if (dy === 0) return;
+    if (dy > 0 && pending.scroller.scrollTop <= 0 && event.cancelable) {
+      event.preventDefault();
+      return; // keep deciding: every move of this drag stays with the sheet
+    }
+    this.touchSheet = null;
   };
 
   private readonly onContextMenu = (event: MouseEvent): void => {
@@ -1088,6 +1124,18 @@ function clearSelectionIn(root: HTMLElement): void {
 }
 
 /** A scroll view that scrolls horizontally (`ScrollView(.horizontal)` or both axes). */
+/** The innermost vertically scrolling `list` / `scrollview` from `target` up to `limit` (excluded). */
+function verticalScrollerIn(target: HTMLElement, limit: HTMLElement): HTMLElement | null {
+  for (let el: HTMLElement | null = target; el && el !== limit; el = el.parentElement) {
+    if (el.classList.contains('sb-list')) return el;
+    if (el.classList.contains('sb-scrollview')) {
+      const axes = el.dataset['sbAxes'];
+      if (axes === 'vertical' || axes === 'both' || axes === undefined) return el;
+    }
+  }
+  return null;
+}
+
 function isHorizontalScroller(el: HTMLElement): boolean {
   if (!el.classList.contains('sb-scrollview')) return false;
   const axes = el.dataset['sbAxes'];

package/src/largeTitle.ts

@@ -0,0 +1,79 @@
+/**
+ * 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).
+ */
+
+/** 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>();
+
+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;
+}
+
+/**
+ * Called for every list and scroll view the layout reaches: `scrolls` is
+ * whether the engine marked it as carrying its screen's large title.
+ */
+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);
+    }
+    return;
+  }
+  scroller.dataset['sbScrollsTitle'] = '';
+  if (!bound.has(scroller)) {
+    bound.add(scroller);
+    scroller.addEventListener('scroll', () => syncLargeTitle(scroller), { passive: true });
+  }
+  syncLargeTitle(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'];
+}
+
+function setMask(el: HTMLElement, mask: string): void {
+  el.style.setProperty('mask-image', mask);
+  el.style.setProperty('-webkit-mask-image', mask);
+}
+
+function reset(screen: HTMLElement, title: HTMLElement): void {
+  title.style.transform = '';
+  setMask(title, '');
+  delete screen.dataset['sbCollapsed'];
+}