@jsenv/navi 0.29.370 → 0.29.372

package/dist/dev/jsenv_navi.js

@@ -29997,8 +29997,13 @@ installImportMetaCssBuild(import.meta);
  * outside the area. A bar the two states share is one group with two
  * pictures — dimmed on the side that has a wall — and its cross-fade is the
  * wall fading out as the page leaves, or in as it arrives; a bar only one
- * state has carries the wall with it. A popup with layer="local" paints its
- * wall inside the page and needs none of this.
+ * state has carries the wall with it. What no picture covers — the glass
+ * beside a narrowed app, the window below a page shorter than it — shows the
+ * live document through, and only the live document can paint a wall there:
+ * one fixed stand-in over the window, under the pictures, with a hole cut
+ * where each picture stands, its opacity taken from the state being left to
+ * the state arriving on the movement's own clock. A popup with layer="local"
+ * paints its wall inside the page and needs none of this.
  */
 
 // The browser's top layer: painted above everything the document paints, so
@@ -30040,10 +30045,24 @@ const TRANSITION_WALL_CSS = /* css */ `[data-navi-transition-wall] {
   position: absolute;
   top: 0;
   left: 0;
+
+  &[data-navi-transition-wall="rest"] {
+    clip-path: var(--wall-holes);
+    transition: opacity var(--navi-route-transition-duration, .3s) ease;
+    position: fixed;
+    inset: 0;
+  }
 }
 
-:root:not(:active-view-transition) [data-navi-transition-wall] {
-  display: none;
+:root:not(:active-view-transition) [data-navi-transition-wall="rest"] {
+  clip-path: var(--wall-holes-arriving, var(--wall-holes));
+}
+
+:root[data-navi-route-transition] {
+  & .navi_dialog::backdrop, & .navi_popover_backdrop {
+    backdrop-filter: none;
+    background: none;
+  }
 }
 `;
 
@@ -30068,6 +30087,14 @@ let travelStyleElement = null;
 // The stand-ins for the walls open in the top layer, painted for one picture
 // and taken down before the next.
 let wallElements = [];
+// The stand-ins for what no picture covers, kept for the whole movement, and
+// the opacity they are heading to once it plays.
+let restWallElements = [];
+let restWallOpacity = "0";
+// Where each picture stood in the state being left, by element: a hole in
+// the rest walls is cut only where a picture stands at EVERY moment of the
+// movement, which takes both states' rectangles.
+let leavingRects = new Map();
 
 /**
  * Name what stands around the area, before the picture of the state being left
@@ -30080,7 +30107,14 @@ const nameTransitionFurniture = (owner, areaElement) => {
     namedElements = new Set();
   }
   nameFurnitureAround(areaElement);
-  paintTransitionWalls(areaElement);
+  const sources = paintTransitionWalls(areaElement);
+  // The state being left has walls: what no picture covers starts dimmed.
+  // The frame the first picture is taken on shows the live document, so the
+  // holes are this state's rectangles, stand-ins inside.
+  removeRestWalls();
+  leavingRects = measurePictureRects(areaElement);
+  paintRestWalls(sources, "1");
+  cutRestWalls([...leavingRects.values()]);
 };
 
 /**
@@ -30101,7 +30135,44 @@ const holdTransitionFurniture = (owner, areaElement) => {
     }
   }
   const namesArriving = nameFurnitureAround(areaElement);
-  paintTransitionWalls(areaElement);
+  const sources = paintTransitionWalls(areaElement);
+  // The state arriving has walls: what no picture covers ends dimmed. Painted
+  // from the state being left when that one had walls (they stay up if both
+  // have), from the state arriving otherwise (they come up from nothing).
+  restWallOpacity = sources.length > 0 ? "1" : "0";
+  if (restWallElements.length === 0) {
+    paintRestWalls(sources, "0");
+  }
+  // For the length of the movement a picture is only ever where the two
+  // states' rectangles meet: the pages' pictures slide, and a taller page
+  // arriving does not make the one leaving any taller. A picture only one
+  // state has travels away from where it stood, so it gets no hole at all.
+  const arrivingRects = measurePictureRects(areaElement);
+  const holes = [];
+  for (const [target, arrivingRect] of arrivingRects) {
+    const leavingRect = leavingRects.get(target);
+    if (!leavingRect) {
+      continue;
+    }
+    const left =
+      leavingRect.left > arrivingRect.left
+        ? leavingRect.left
+        : arrivingRect.left;
+    const top =
+      leavingRect.top > arrivingRect.top ? leavingRect.top : arrivingRect.top;
+    const right =
+      leavingRect.right < arrivingRect.right
+        ? leavingRect.right
+        : arrivingRect.right;
+    const bottom =
+      leavingRect.bottom < arrivingRect.bottom
+        ? leavingRect.bottom
+        : arrivingRect.bottom;
+    if (right > left && bottom > top) {
+      holes.push({ left, top, right, bottom });
+    }
+  }
+  cutRestWalls(holes, [...arrivingRects.values()]);
   const cssText = `${travelRule("old", namesLeaving, "--navi-route-transition-leave")}${travelRule("new", namesArriving, "--navi-route-transition-enter")}`;
   if (!cssText) {
     return;
@@ -30171,6 +30242,19 @@ const travelRule = (side, names, movementProperty) => {
   return `${selector}{animation-name:${animationName};animation-timing-function:ease;animation-fill-mode:both}`;
 };
 
+/**
+ * The pictures are up and about to move: what no picture covers heads to the
+ * state arriving, on the same clock.
+ */
+const startTransitionFurniture = (owner) => {
+  if (owner !== furnitureOwner) {
+    return;
+  }
+  for (const restWall of restWallElements) {
+    restWall.style.opacity = restWallOpacity;
+  }
+};
+
 const releaseTransitionFurniture = (owner) => {
   if (owner !== furnitureOwner) {
     return;
@@ -30185,6 +30269,7 @@ const releaseTransitionFurniture = (owner) => {
     travelStyleElement = null;
   }
   removeTransitionWalls();
+  removeRestWalls();
 };
 
 // One stand-in per open wall in every picture, walls in document order: they
@@ -30197,25 +30282,11 @@ const paintTransitionWalls = (areaElement) => {
   removeTransitionWalls();
   const sources = document.querySelectorAll(TOP_LAYER_WALL_SELECTOR);
   if (sources.length === 0) {
-    return;
-  }
-  const targets = [areaElement];
-  for (const bar of document.querySelectorAll(FIXED_BAR_SELECTOR$1)) {
-    if (!areaElement.contains(bar)) {
-      targets.push(bar);
-    }
+    return sources;
   }
-  for (const target of targets) {
+  for (const target of pictureTargets(areaElement)) {
     for (const source of sources) {
-      const sourceStyle = getComputedStyle(source);
-      const wall = document.createElement("div");
-      wall.setAttribute(WALL_ATTRIBUTE, "");
-      for (const property of WALL_PROPERTIES) {
-        wall.style.setProperty(
-          property,
-          sourceStyle.getPropertyValue(property),
-        );
-      }
+      const wall = createWall(source);
       target.appendChild(wall);
       // The target is not necessarily a containing block (the area is a plain
       // box), and made one for the movement it would move whatever the page
@@ -30231,6 +30302,7 @@ const paintTransitionWalls = (areaElement) => {
       wallElements.push(wall);
     }
   }
+  return sources;
 };
 
 const removeTransitionWalls = () => {
@@ -30240,6 +30312,83 @@ const removeTransitionWalls = () => {
   wallElements = [];
 };
 
+// What is photographed on its own and gets a stand-in in its picture: the
+// pages, and every bar outside them.
+const pictureTargets = (areaElement) => {
+  const targets = [areaElement];
+  for (const bar of document.querySelectorAll(FIXED_BAR_SELECTOR$1)) {
+    if (!areaElement.contains(bar)) {
+      targets.push(bar);
+    }
+  }
+  return targets;
+};
+
+const createWall = (source) => {
+  const sourceStyle = getComputedStyle(source);
+  const wall = document.createElement("div");
+  wall.setAttribute(WALL_ATTRIBUTE, "");
+  for (const property of WALL_PROPERTIES) {
+    wall.style.setProperty(property, sourceStyle.getPropertyValue(property));
+  }
+  return wall;
+};
+
+// One per open wall, over the window, at the opacity of the state they are
+// painted from. A hole is cut where a picture stands, since the picture has
+// a stand-in of its own and shows the live document through nowhere — and on
+// the frames the live document IS shown, the first and the last, a hole is
+// what keeps the two from being painted on top of each other.
+const paintRestWalls = (sources, opacity) => {
+  for (const source of sources) {
+    const restWall = createWall(source);
+    restWall.setAttribute(WALL_ATTRIBUTE, "rest");
+    restWall.style.opacity = opacity;
+    document.body.appendChild(restWall);
+    restWallElements.push(restWall);
+  }
+};
+
+const measurePictureRects = (areaElement) => {
+  const rects = new Map();
+  for (const target of pictureTargets(areaElement)) {
+    rects.set(target, target.getBoundingClientRect());
+  }
+  return rects;
+};
+
+// The holes for the movement, and the ones for its last frame (see the CSS).
+const cutRestWalls = (holes, holesArriving = null) => {
+  for (const restWall of restWallElements) {
+    restWall.style.setProperty("--wall-holes", holesPolygon(holes));
+    if (holesArriving) {
+      restWall.style.setProperty(
+        "--wall-holes-arriving",
+        holesPolygon(holesArriving),
+      );
+    }
+  }
+};
+
+// One evenodd polygon: the window, then each hole entered from and left by
+// the window's origin, so the bridges between them have no area.
+const holesPolygon = (holes) => {
+  let polygon = "0 0, 100% 0, 100% 100%, 0 100%, 0 0";
+  for (const { left, top, right, bottom } of holes) {
+    polygon += `, ${left}px ${top}px, ${right}px ${top}px, ${right}px ${bottom}px, ${left}px ${bottom}px, ${left}px ${top}px, 0 0`;
+  }
+  return `polygon(evenodd, ${polygon})`;
+};
+
+const removeRestWalls = () => {
+  for (const restWall of restWallElements) {
+    restWall.remove();
+  }
+  restWallElements = [];
+  restWallOpacity = "0";
+  leavingRects = new Map();
+};
+
 installImportMetaCssBuild(import.meta);
 
 const TRANSITION_WINDOW_CSS = /* css */ `@property --navi-transition-cover-top {
@@ -31836,6 +31985,7 @@ const beginTransition = ({
   // the only place the silent misconfigurations show. They are all about the
   // same thing — a movement playing on pictures that are not the pages.
   const viewTransitionReady = () => {
+    startTransitionFurniture(transition);
     const capturedNames = capturedViewTransitionNames();
     if (areaElements.length > 0) {
       if (!capturedNames.has(AREA_NAME)) {