@jsenv/navi 0.29.369 → 0.29.370

package/dist/jsenv_navi.js

@@ -29073,22 +29073,26 @@ installImportMetaCssBuild(import.meta);
  * of being photographed, and a route transition is where it costs nothing:
  * both pages are pictures for those few hundred milliseconds anyway.
  *
- * The WALL of a modal dialog goes the other way round: it cannot be
- * photographed at all. It is the browser's own ::backdrop — a pseudo-element,
- * which wears no name — and the top layer it is painted in is drawn during a
- * transition only as part of the root's picture, which is opted out while an
- * area is marked (route_transition.jsx). Captured on its own, the dialog's
- * box travels; its wall is painted nowhere for the length of the movement,
- * and the page under it leaves undimmed. So the wall is painted INTO the
- * page's picture instead: a stand-in laid over the area before each of the
- * two pictures is taken, painting what the ::backdrop paints, and removed
+ * The WALL of a popup goes the other way round: it is not photographed at
+ * all. The top layer is drawn during a transition only as part of the root's
+ * picture, which is opted out while an area is marked (route_transition.jsx),
+ * and a modal dialog's wall is its ::backdrop — a pseudo-element, which wears
+ * no name; a popover's is a real element, but named it would be a picture the
+ * size of the screen, sliding across the page arriving. Captured on its own,
+ * the popup's box travels; its wall is painted nowhere for the length of the
+ * movement, and the page under it leaves undimmed. So the wall is painted
+ * INTO the page's picture instead: a stand-in laid over the area before each
+ * of the two pictures is taken, painting what the wall paints, and removed
  * with the movement. Carried by the page's picture, it leaves with the page
  * being left and arrives with the page arriving, cut at the page's edge — and
- * under the dialog's own picture, which stands over the pages (the z-order in
- * route_transition.jsx). A bar the two states share is outside both pictures
- * and goes undimmed for those few hundred milliseconds: it is the frame, not
- * part of the page. A dialog with layer="local" paints a real element for its
- * wall, inside the page, and needs none of this.
+ * under the popup's own picture, which stands over the pages (the z-order in
+ * route_transition.jsx). The bars are under the wall as much as the page is,
+ * and each is a picture of its own: the same stand-in is laid over every bar
+ * 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.
  */
 
 // The browser's top layer: painted above everything the document paints, so
@@ -29106,15 +29110,22 @@ const FURNITURE_SELECTOR = `.navi_fixed_bar, .navi_popover:is(${TOP_LAYER_SELECT
 const TRANSITION_ATTRIBUTE$1 = "data-navi-route-transition";
 const NAME_PROPERTY$1 = "view-transition-name";
 const FURNITURE_NAME_PREFIX = "navi-transition-furniture-";
-// The dialogs whose wall is the browser's ::backdrop: shown with showModal().
-// A top-layer dialog without a wall is shown as a popover and has nothing to
-// stand in for.
-const MODAL_DIALOG_SELECTOR = ".navi_dialog:modal";
+// The walls painted in the top layer: a modal dialog's, which is its
+// ::backdrop, and a popover's, which is a real element shown as a popover
+// beside it (layout/popover.jsx) — unnamed, so covered by the pictures for
+// the length of the movement all the same. A top-layer dialog without a wall
+// is shown as a popover and has nothing to stand in for.
+const TOP_LAYER_WALL_SELECTOR =
+  ".navi_dialog:modal, .navi_popover_backdrop:popover-open";
 const WALL_ATTRIBUTE = "data-navi-transition-wall";
-// What the ::backdrop paints, resolved on the dialog (layout/dialog.jsx): the
-// same two properties, copied onto the wall.
+// What the wall paints, resolved on the matched element in both cases (the
+// dialog for its ::backdrop, the popover's wall for itself): the same two
+// properties, copied onto the stand-in.
 const WALL_PROPERTIES = ["--backdrop-background", "--backdrop-filter"];
 
+// The pictures the wall is painted into: the pages', and every bar's own.
+const FIXED_BAR_SELECTOR$1 = ".navi_fixed_bar";
+
 const TRANSITION_WALL_CSS = /* css */ `[data-navi-transition-wall] {
   z-index: var(--navi-z-index-top-layer);
   background: var(--backdrop-background);
@@ -29124,6 +29135,10 @@ const TRANSITION_WALL_CSS = /* css */ `[data-navi-transition-wall] {
   top: 0;
   left: 0;
 }
+
+:root:not(:active-view-transition) [data-navi-transition-wall] {
+  display: none;
+}
 `;
 
 // Called from the render of whatever holds the pages, never at module scope:
@@ -29144,8 +29159,8 @@ let namedElements = new Set();
 // The rule giving the one-sided bars their movement, written for one movement
 // and taken down with it.
 let travelStyleElement = null;
-// The walls standing in for the ::backdrop of the modal dialogs open in the
-// area, painted for one picture and taken down before the next.
+// The stand-ins for the walls open in the top layer, painted for one picture
+// and taken down before the next.
 let wallElements = [];
 
 /**
@@ -29266,29 +29281,49 @@ const releaseTransitionFurniture = (owner) => {
   removeTransitionWalls();
 };
 
-// One wall per modal dialog open in the area, in document order: the
-// ::backdrops stack in the top layer, and what dims the page is all of them.
+// One stand-in per open wall in every picture, walls in document order: they
+// stack in the top layer, and what dims the document is all of them. A wall
+// open anywhere covers everything the document paints, so the sources are
+// looked for in the whole document — a dialog opened from a bar dims the
+// pages too. A bar inside the area is part of the pages' picture, and the
+// area's stand-in answers for it.
 const paintTransitionWalls = (areaElement) => {
   removeTransitionWalls();
-  for (const dialog of areaElement.querySelectorAll(MODAL_DIALOG_SELECTOR)) {
-    const dialogStyle = getComputedStyle(dialog);
-    const wall = document.createElement("div");
-    wall.setAttribute(WALL_ATTRIBUTE, "");
-    for (const property of WALL_PROPERTIES) {
-      wall.style.setProperty(property, dialogStyle.getPropertyValue(property));
-    }
-    areaElement.appendChild(wall);
-    // The area is not necessarily a containing block, and made one for the
-    // movement it would move whatever the page positioned against an ancestor
-    // of the area: the wall is placed from wherever its containing block
-    // turns out to be, by the offset between that box and the area's.
-    const areaRect = areaElement.getBoundingClientRect();
-    const wallRect = wall.getBoundingClientRect();
-    wall.style.left = `${areaRect.left - wallRect.left}px`;
-    wall.style.top = `${areaRect.top - wallRect.top}px`;
-    wall.style.width = `${areaRect.width}px`;
-    wall.style.height = `${areaRect.height}px`;
-    wallElements.push(wall);
+  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);
+    }
+  }
+  for (const target of targets) {
+    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),
+        );
+      }
+      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
+      // positioned against an ancestor of it: the wall is placed from
+      // wherever its containing block turns out to be, by the offset between
+      // that box and the target's.
+      const targetRect = target.getBoundingClientRect();
+      const wallRect = wall.getBoundingClientRect();
+      wall.style.left = `${targetRect.left - wallRect.left}px`;
+      wall.style.top = `${targetRect.top - wallRect.top}px`;
+      wall.style.width = `${targetRect.width}px`;
+      wall.style.height = `${targetRect.height}px`;
+      wallElements.push(wall);
+    }
   }
 };