@swiftbrowser/web 0.3.1 → 0.5.0

package/src/scrollEdge.ts

@@ -0,0 +1,109 @@
+/**
+ * iOS 26's scroll edge effect at the bottom: a list or scroll view that runs
+ * down under a tab bar, or under its screen's bottom toolbar or search field,
+ * has its content inset by the bar (the engine's `bottomInset` chrome rect,
+ * layout/engine.ts). While content is under the bar (more of it below) its
+ * screen, or the tab it fills, shows the effect over it, behind the bar:
+ * `data-sb-scrolled-bottom` with `--sb-bottom-edge` the bar's height and
+ * `--sb-edge-bottom` its strength, which ramps down over the last
+ * `EDGE_RAMP` px of content (styles.css). The top edge's effect is the
+ * bar's own (largeTitle.ts).
+ *
+ * `.scrollEdgeEffectStyle(_:for:)` / `.scrollEdgeEffectHidden(_:for:)` reach
+ * the scroll view as `edgeEffect` props, which become `data-sb-edge-top` /
+ * `data-sb-edge-bottom` on it (`hard` or `hidden`; soft is the default) and
+ * are copied to the element that draws that edge's effect.
+ */
+
+import type { EdgeEffectProps } from './protocol';
+import type { Rect } from './layout';
+
+/**
+ * How far content has to be under a bar for its edge effect to be at full
+ * strength: the effect ramps up over this scroll distance (and back down as
+ * the end comes clear of a bottom bar) rather than switching on, which stood
+ * out over content that is not the background color (a photo).
+ */
+export const EDGE_RAMP = 40;
+
+/** The strength (0…1) of an edge effect over `distance` px of content under its bar, as a CSS value. */
+export function edgeStrength(distance: number): string {
+  return String(Math.round(Math.min(1, Math.max(0, distance / EDGE_RAMP)) * 1000) / 1000);
+}
+
+/** Sets a CSS custom property, untouched when unchanged. */
+export function setProperty(el: HTMLElement, name: string, value: string): void {
+  if (el.style.getPropertyValue(name) !== value) el.style.setProperty(name, value);
+}
+
+const bound = new WeakSet<HTMLElement>();
+/** The scroll view whose state each screen's (or tab's) bottom effect shows. */
+const claimedBy = new WeakMap<HTMLElement, HTMLElement>();
+
+/** A list's or scroll view's `edgeEffect` props, as `data-sb-edge-top` / `data-sb-edge-bottom`. */
+export function applyEdgeEffect(el: HTMLElement, effect: EdgeEffectProps | undefined): void {
+  setValue(el, 'sbEdgeTop', edgeValue(effect?.top));
+  setValue(el, 'sbEdgeBottom', edgeValue(effect?.bottom));
+}
+
+/** Soft is the default effect; only the others are marked. */
+function edgeValue(value: string | undefined): string | null {
+  return value === 'hard' || value === 'hidden' ? value : null;
+}
+
+/** The element that draws the bottom effect over a scroll view: its screen, else the tab it fills. */
+function ownerOf(scroller: HTMLElement): HTMLElement | null {
+  return scroller.closest<HTMLElement>('.sb-navscreen') ?? scroller.closest<HTMLElement>('.sb-tab');
+}
+
+/**
+ * Called for every list and scroll view the layout reaches with the engine's
+ * `bottomInset` rect (absent when no bar covers its bottom).
+ */
+export function bindScrollEdgeBottom(scroller: HTMLElement, covered: Rect | undefined): void {
+  const owner = ownerOf(scroller);
+  if (covered === undefined || covered.height <= 0) {
+    if (scroller.dataset['sbUnderBottom'] !== undefined) delete scroller.dataset['sbUnderBottom'];
+    if (owner && claimedBy.get(owner) === scroller) release(owner);
+    return;
+  }
+  setValue(scroller, 'sbUnderBottom', '');
+  scroller.style.setProperty('--sb-bottom-edge', `${covered.height}px`);
+  if (!bound.has(scroller)) {
+    bound.add(scroller);
+    scroller.addEventListener('scroll', () => syncScrollEdgeBottom(scroller), { passive: true });
+  }
+  syncScrollEdgeBottom(scroller);
+}
+
+export function syncScrollEdgeBottom(scroller: HTMLElement): void {
+  if (scroller.dataset['sbUnderBottom'] === undefined) return;
+  const owner = ownerOf(scroller);
+  if (!owner) return;
+  claimedBy.set(owner, scroller);
+  // Content is under the bar until the end has scrolled clear of it (the
+  // inset is room past the content's end).
+  const remaining = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
+  setValue(owner, 'sbScrolledBottom', remaining > 1 ? '' : null);
+  setProperty(owner, '--sb-edge-bottom', edgeStrength(remaining));
+  setValue(owner, 'sbEdgeBottom', scroller.dataset['sbEdgeBottom'] ?? null);
+  const height = scroller.style.getPropertyValue('--sb-bottom-edge');
+  if (owner.style.getPropertyValue('--sb-bottom-edge') !== height) owner.style.setProperty('--sb-bottom-edge', height);
+}
+
+function release(owner: HTMLElement): void {
+  claimedBy.delete(owner);
+  setValue(owner, 'sbScrolledBottom', null);
+  owner.style.removeProperty('--sb-edge-bottom');
+  setValue(owner, 'sbEdgeBottom', null);
+  owner.style.removeProperty('--sb-bottom-edge');
+}
+
+/** Sets a data attribute (by dataset key) to `value`, or removes it for null; untouched when unchanged. */
+export function setValue(el: HTMLElement, key: string, value: string | null): void {
+  if (value === null) {
+    if (el.dataset[key] !== undefined) delete el.dataset[key];
+  } else if (el.dataset[key] !== value) {
+    el.dataset[key] = value;
+  }
+}

package/src/scrollTo.ts

@@ -95,6 +95,12 @@ export function scrollToTarget(
     const viewport: Rect = { ...frame };
     const covered = result.chrome.get(at)?.['bottomInset'];
     if (covered) viewport.height = Math.max(0, covered.y - frame.y);
+    // Under its screen's bar the visible area starts below the bar.
+    const under = result.chrome.get(at)?.['topInset'];
+    if (under) {
+      viewport.y += under.height;
+      viewport.height = Math.max(0, viewport.height - under.height);
+    }
     let left = el.scrollLeft;
     let top = el.scrollTop;
     let changed = false;