@jsenv/navi 0.30.6 → 0.30.8

package/dist/jsenv_navi.js

@@ -40388,17 +40388,19 @@ const STOPPED_SILENCE = 150;
 const isOnRow = (page) =>
   page.offsetWidth > 0 && !page.hasAttribute("data-off-row");
 
-const restsOn = (scroller, page) =>
+// `sideways`: see readRowStretch.
+const restsOn = (scroller, page, { sideways } = {}) =>
   Math.abs(page.offsetLeft - scroller.scrollLeft) <= AT_REST_DISTANCE &&
-  Math.abs(page.offsetTop - scroller.scrollTop) <= AT_REST_DISTANCE;
+  (sideways ||
+    Math.abs(page.offsetTop - scroller.scrollTop) <= AT_REST_DISTANCE);
 
 /**
  * @returns {Element|undefined} the page the row rests on, nothing while it stands
  *   between two: a hand can pause midway, and an engine may call that the end of
  *   a scroll.
  */
-const pageAtRest = (scroller, pages) =>
-  pages.find((page) => isOnRow(page) && restsOn(scroller, page));
+const pageAtRest = (scroller, pages, options) =>
+  pages.find((page) => isOnRow(page) && restsOn(scroller, page, options));
 
 /**
  * Where the row stands between two neighbouring pages, on the side it has moved
@@ -40406,14 +40408,18 @@ const pageAtRest = (scroller, pages) =>
  * since is walked over. A map moves along one axis at a time, the one it has
  * moved furthest on.
  *
+ * @param {object} [options]
+ * @param {boolean} [options.sideways] - a row with one line, whatever `offsetTop` its
+ *   pages read: a page pinned with `top` is still on it.
  * @returns {{base: Element, toward: Element|undefined, fraction: number, forward: boolean}}
  *   the last page the row has passed (`page` itself until then), the one after,
  *   and how far between the two from 0 to 1. Nothing `toward` past the last.
  */
-const readRowStretch = (scroller, pages, page) => {
+const readRowStretch = (scroller, pages, page, { sideways } = {}) => {
   const alongX =
+    sideways ||
     Math.abs(scroller.scrollLeft - page.offsetLeft) >=
-    Math.abs(scroller.scrollTop - page.offsetTop);
+      Math.abs(scroller.scrollTop - page.offsetTop);
   const position = alongX ? "offsetLeft" : "offsetTop";
   const cross = alongX ? "offsetTop" : "offsetLeft";
   const scrolled = alongX ? scroller.scrollLeft : scroller.scrollTop;
@@ -40421,7 +40427,8 @@ const readRowStretch = (scroller, pages, page) => {
   const step = forward ? 1 : -1;
   const line = pages
     .filter(
-      (candidate) => isOnRow(candidate) && candidate[cross] === page[cross],
+      (candidate) =>
+        isOnRow(candidate) && (sideways || candidate[cross] === page[cross]),
     )
     .sort((pageA, pageB) => pageA[position] - pageB[position]);
   let index = line.indexOf(page);
@@ -40628,6 +40635,11 @@ const css$16 = /* css */`.navi_route_travel {
 // there yet: past what a hand that only shook covers, so that a shake costs
 // neither a navigation nor the requests of a page.
 const SET_OFF_PULL = 16;
+// A row of routes is one line, whatever `offsetTop` its pinned panes read (see the pin
+// above): they are on it all the same.
+const ROW_READING = {
+  sideways: true
+};
 
 /**
  * @type {import("preact").FunctionComponent<{
@@ -40801,10 +40813,7 @@ const RouteTravel = ({
       const paneCurrent = panesOf(row)[currentIndex];
       if (paneCurrent) {
         movement.travelling = true;
-        row.scrollTo({
-          left: paneCurrent.offsetLeft,
-          behavior: "smooth"
-        });
+        travelRowTo(currentIndex, movement);
       }
     });
   };
@@ -40821,7 +40830,7 @@ const RouteTravel = ({
       base,
       toward,
       fraction
-    } = readRowStretch(row, panes, panes[0]);
+    } = readRowFrame(row, panes);
     publishRouteRowMove({
       basePath: pathOf(pages[panes.indexOf(base)]),
       towardPath: toward ? pathOf(pages[panes.indexOf(toward)]) : null,
@@ -40829,6 +40838,81 @@ const RouteTravel = ({
     });
   };
 
+  // A travel no hand set off is one box long however far the page is, as in a
+  // SlideContainer: the browser's smooth scroll would fly past every page in between.
+  // So the page asked for takes the column next to what is in the frame, on the side
+  // it already stands, which moves nothing on screen, and endMovement puts the columns
+  // back. Columns rather than offsets: every page stays a place to snap to, and none
+  // has to be hidden.
+  const travelRowTo = (index, movement) => {
+    const row = rowRef.current;
+    const panes = panesOf(row);
+    const pane = panes[index];
+    if (!pane) {
+      return;
+    }
+    const {
+      base,
+      toward,
+      fraction
+    } = readRowFrame(row, panes);
+    const inFrame = toward && fraction > 0 ? [base, toward] : [base];
+    if (!inFrame.includes(pane)) {
+      // In a window, what the window put in a column moves with its pane.
+      const standingIn = paneIndex => {
+        const standing = [panes[paneIndex]];
+        if (windowed) {
+          const picture = movement.pictures.get(paneIndex);
+          if (picture) {
+            standing.push(picture);
+          }
+          if (paneIndex === latestRef.current.liveIndex) {
+            standing.push(liveRef.current);
+          }
+        }
+        return standing;
+      };
+      const columns = [...panes].sort((a, b) => a.offsetLeft - b.offsetLeft);
+      const first = columns.indexOf(inFrame[0]);
+      const last = columns.indexOf(inFrame[inFrame.length - 1]);
+      const from = columns.indexOf(pane);
+      columns.splice(from, 1);
+      columns.splice(from < first ? first - 1 : last + 1, 0, pane);
+      movement.placed ||= new Map();
+      columns.forEach((eachPane, column) => {
+        for (const element of standingIn(panes.indexOf(eachPane))) {
+          if (!movement.placed.has(element)) {
+            movement.placed.set(element, element.style.gridColumn);
+          }
+          element.style.gridColumn = String(column + 1);
+        }
+      });
+    }
+    row.scrollTo({
+      left: pane.offsetLeft,
+      behavior: "smooth"
+    });
+  };
+
+  // Every column back where the map says, and the row on the page of the address, in
+  // one go: that page stands at the same place on screen either way.
+  const putRowBack = movement => {
+    const row = rowRef.current;
+    if (movement.placed) {
+      for (const [element, column] of movement.placed) {
+        element.style.gridColumn = column;
+      }
+      movement.placed = null;
+    }
+    const pane = panesOf(row)[latestRef.current.currentIndex];
+    if (pane && !restsOn(row, pane, ROW_READING)) {
+      row.scrollTo({
+        left: pane.offsetLeft,
+        behavior: "instant"
+      });
+    }
+  };
+
   // A tab pressed over a row a hand has left moving, which the browser plays on and
   // overwrites a travel with once that travel is over: the snap is ended first. Given
   // back, the row stands where it stood. A frame later, because until then WebKit still
@@ -40849,12 +40933,8 @@ const RouteTravel = ({
       row.setAttribute("data-route-row-taken", "");
       row.style.removeProperty("--navi-route-row-stand");
       afterFrames(1, () => {
-        const pane = panesOf(row)[latestRef.current.currentIndex];
-        if (movementRef.current === movement && pane) {
-          row.scrollTo({
-            left: pane.offsetLeft,
-            behavior: "smooth"
-          });
+        if (movementRef.current === movement) {
+          travelRowTo(latestRef.current.currentIndex, movement);
         }
       });
     });
@@ -40869,6 +40949,7 @@ const RouteTravel = ({
       return;
     }
     movementRef.current = null;
+    putRowBack(movement);
     row.removeAttribute("data-moving");
     row.removeAttribute("data-route-row-taken");
     publishRouteRowMove(null);
@@ -40908,7 +40989,7 @@ const RouteTravel = ({
     const pane = panesOf(row)[currentIndex];
     const answered = answeredPageRef.current;
     if (samePage(answered, page)) {
-      if (pane && !movementRef.current && !restsOn(row, pane)) {
+      if (pane && !movementRef.current && !restsOn(row, pane, ROW_READING)) {
         row.scrollTo({
           left: pane.offsetLeft,
           behavior: "instant"
@@ -40924,13 +41005,13 @@ const RouteTravel = ({
     if (asked && samePage(asked, page)) {
       askedPageRef.current = null;
       // The hand landed before the address did.
-      if (movementRef.current?.landed && restsOn(row, pane)) {
+      if (movementRef.current?.landed && restsOn(row, pane, ROW_READING)) {
         Promise.resolve().then(endMovement);
       }
       return;
     }
-    if (!answered || restsOn(row, pane)) {
-      if (!restsOn(row, pane)) {
+    if (!answered || restsOn(row, pane, ROW_READING)) {
+      if (!restsOn(row, pane, ROW_READING)) {
         row.scrollTo({
           left: pane.offsetLeft,
           behavior: "instant"
@@ -40942,19 +41023,17 @@ const RouteTravel = ({
     const movement = beginMovement({
       travelling: true
     });
-    // In this very commit: the tab pressed already wears its bar, and the first
-    // scroll event is a frame away.
-    sayRowMoves();
     if (movementBefore?.byHand && !movementBefore.rowTaken) {
+      sayRowMoves();
       takeRowFromHand(movement);
       return;
     }
     if (row.getAttribute("data-route-row-taken") !== "clip") {
-      row.scrollTo({
-        left: pane.offsetLeft,
-        behavior: "smooth"
-      });
+      travelRowTo(currentIndex, movement);
     }
+    // In this very commit: the tab pressed already wears its bar, and the first
+    // scroll event is a frame away.
+    sayRowMoves();
   });
 
   // Somebody else is about to move the address to another page of a window: its
@@ -41001,7 +41080,7 @@ const RouteTravel = ({
       }
       const moving = movementRef.current;
       const pane = panes[currentIndex];
-      if (!moving && pane && restsOn(row, pane)) {
+      if (!moving && pane && restsOn(row, pane, ROW_READING)) {
         // Written by this box, at rest: nobody is moving anything.
         return;
       }
@@ -41020,7 +41099,7 @@ const RouteTravel = ({
           base,
           toward,
           fraction
-        } = readRowStretch(row, panes, panes[0]);
+        } = readRowFrame(row, panes);
         followPageOnScreen(pages[panes.indexOf(fraction >= 0.5 && toward ? toward : base)], askedPageRef.current || pages[currentIndex]);
       }
       const pulled = row.scrollLeft - pane.offsetLeft;
@@ -41060,7 +41139,7 @@ const RouteTravel = ({
       const {
         base,
         toward
-      } = readRowStretch(row, panes, panes[0]);
+      } = readRowFrame(row, panes);
       const index = panes.indexOf(forward && toward ? toward : base);
       const page = pages[index];
       if (!page) {
@@ -41079,8 +41158,18 @@ const RouteTravel = ({
         return;
       }
       const panes = panesOf(row);
-      const pane = pageAtRest(row, panes);
+      const pane = pageAtRest(row, panes, ROW_READING);
       if (!pane) {
+        // A travel stopped short of its page: the layout moved under it (a scrollbar
+        // coming in narrows the row), and where it was sent is not where the page
+        // stands. Sent again: the row then rests, or does not move and is not heard.
+        const target = panes[latestRef.current.currentIndex];
+        if (movement.travelling && !isClipped() && target) {
+          row.scrollTo({
+            left: target.offsetLeft,
+            behavior: "smooth"
+          });
+        }
         return;
       }
       movement.landed = true;
@@ -41104,8 +41193,15 @@ const RouteTravel = ({
       onLand,
       onLeftToSnap
     });
-    // A hand back on a row taken from one: it is the hand's again, snapping included.
-    const onHandBack = () => {
+    // A finger on a travel still playing: the row is the finger's from here, and it
+    // stands where the travel was going, as in a SlideContainer. A wheel only gives the
+    // row its snapping back: a page scrolled vertically over it is no hand on it.
+    const onTouchOnTravel = () => {
+      if (movementRef.current?.travelling && !isClipped()) {
+        endMovement();
+      }
+    };
+    const onWheelOnTravel = () => {
       if (row.getAttribute("data-route-row-taken") === "") {
         row.removeAttribute("data-route-row-taken");
       }
@@ -41130,10 +41226,10 @@ const RouteTravel = ({
       movement.travelling = true;
       takeRowFromHand(movement);
     };
-    row.addEventListener("touchstart", onHandBack, {
+    row.addEventListener("touchstart", onTouchOnTravel, {
       passive: true
     });
-    row.addEventListener("wheel", onHandBack, {
+    row.addEventListener("wheel", onWheelOnTravel, {
       passive: true
     });
     document.addEventListener("click", onPress, {
@@ -41141,8 +41237,8 @@ const RouteTravel = ({
     });
     return () => {
       stopWatching();
-      row.removeEventListener("touchstart", onHandBack);
-      row.removeEventListener("wheel", onHandBack);
+      row.removeEventListener("touchstart", onTouchOnTravel);
+      row.removeEventListener("wheel", onWheelOnTravel);
       document.removeEventListener("click", onPress, {
         capture: true
       });
@@ -41161,7 +41257,7 @@ const RouteTravel = ({
       return;
     }
     const pane = panesOf(rowRef.current)[currentIndex];
-    if (pane && restsOn(rowRef.current, pane)) {
+    if (pane && restsOn(rowRef.current, pane, ROW_READING)) {
       Promise.resolve().then(endMovement);
     }
   }, [currentIndex]);
@@ -41269,10 +41365,6 @@ const copyScrollPositions = (from, to) => {
     }
   }
 };
-
-// A page of the row: a route, and the params that say which of its tabs when
-// several of them share it. Written as a bare route by a caller whose tabs are
-// routes of their own — which is the same page with nothing to tell apart.
 const afterFrames = (count, callback) => {
   if (count === 0) {
     callback();
@@ -41282,6 +41374,13 @@ const afterFrames = (count, callback) => {
     afterFrames(count - 1, callback);
   });
 };
+
+// The two pages the row stands between.
+const readRowFrame = (row, panes) => readRowStretch(row, panes, panes[0], ROW_READING);
+
+// A page of the row: a route, and the params that say which of its tabs when
+// several of them share it. Written as a bare route by a caller whose tabs are
+// routes of their own — which is the same page with nothing to tell apart.
 const normalizePage = page => page.isRoute ? {
   route: page,
   params: undefined
@@ -85413,10 +85512,13 @@ const useListScrollSync = ({
   };
   // Items that came in at another size than what stood in for them (a
   // skeleton becoming its item) leave the window short of the screen, or past
-  // it, and nothing scrolled to say so. Asked on the next frame, not inside
-  // the resize delivery: the window it frames is a render, which resizes what
-  // is observed once more, and the browser gives up on the loop
-  // ("ResizeObserver loop completed with undelivered notifications").
+  // it, and nothing scrolled to say so. A held list too: its hold places it but
+  // leaves the window to the screen (see holdWindow), and a placement that
+  // moves nothing — a document too short to scroll — fires no scroll that
+  // would size it. Asked on the next frame, not inside the resize delivery:
+  // the window it frames is a render, which resizes what is observed once
+  // more, and the browser gives up on the loop ("ResizeObserver loop
+  // completed with undelivered notifications").
   const onItemsResizedRef = useRef(null);
   onItemsResizedRef.current = () => {
     settleWindow();
@@ -85580,9 +85682,7 @@ const useListScrollSync = ({
     const putTopItemBack = entries => {
       const listResized = entries.some(entry => entry.target === listEl);
       if (listResized) {
-        if (onGeometryChangeRef.current()) {
-          return;
-        }
+        const placed = onGeometryChangeRef.current();
         cancelAnimationFrame(itemsResizedFrame);
         itemsResizedFrame = requestAnimationFrame(() => {
           if (pageLeftRef.current) {
@@ -85590,6 +85690,9 @@ const useListScrollSync = ({
           }
           onItemsResizedRef.current();
         });
+        if (placed) {
+          return;
+        }
       }
       if (!entries.some(entry => entry.target === scrollerEl)) {
         return;