@jsenv/navi 0.29.467 → 0.29.468

package/dist/jsenv_navi.js

@@ -33416,85 +33416,6 @@ const onDocumentClick = (clickEvent) => {
 
 installImportMetaCssBuild(import.meta);
 
-/**
- * The furniture around the pages — the fixed bars, and the popups standing
- * over them in the top layer — photographed with them for the length of a
- * route transition, so that a piece of it belonging to ONE of the two states
- * takes part in the movement instead of appearing or vanishing in a frame.
- *
- * Whether a bar is the frame or part of what changes is a fact about the PAIR
- * of states, never about the bar: the top bar of a list is the frame while one
- * goes into a row of that list, and part of what changes when the next page
- * takes the whole screen. So nothing is declared — a name is written on every
- * bar for the length of the movement, and the browser derives the rest:
- *
- * - a bar the two states SHARE is one element wearing one name on both sides.
- *   The browser pairs the two pictures into one group and holds it where it
- *   stands: the frame, and the pages move behind it exactly as before.
- * - a bar only one state has never meets a counterpart. It belongs to the page
- *   that has it, so it travels with that page — leaving by the keyframes the
- *   page being left leaves by, arriving by the ones the page arriving arrives
- *   by — instead of going out with the render. Over that page, as it is at
- *   rest: the page runs under it, and what it paints outside its box (a button
- *   standing up out of a tab bar) is not cut by its own page. Under the pages
- *   only when its page is covered by the other one — a cover-* movement — so
- *   the sheet comes over it; a popup over everything, standing where it
- *   stands in the document (see the z-order in route_transition.jsx). Which
- *   side a bar is on is said by a class on its group, written here.
- *
- * A popup shown in the top layer is furniture of the same kind, and its case
- * is the sharper one: it is a DOM descendant of the area, yet painted outside
- * the area's picture, so being captured on its own is the only way it is on
- * screen at all for those few hundred milliseconds (layout/popup_css.js). One
- * the two states share holds where it stands, one only a single state has
- * travels with that state's page — the same two outcomes, derived the same way.
- *
- * Which keyframes those are is published by the movement itself
- * (--navi-route-transition-leave / -enter, see route_transition.jsx): a
- * selector cannot say "the bars that have no counterpart" — the names are per
- * element, so there is nothing static to write — so the rule is written for
- * the length of the movement, over the names this one turned out to have.
- *
- * The name is per ELEMENT and kept for the element's whole life, which is what
- * makes "shared" mean shared: several bars can live on one edge
- * (layout/fixed_bar/fixed_bar_space.js), so a bar leaving and another one
- * arriving on that same edge are two names and two movements, not one bar
- * changing its mind.
- *
- * Worn only while a transition of navi's plays: named the rest of the time, a
- * bar would be captured during every view transition the APPLICATION starts —
- * dead to the pointer and drawn in the top layer for the length of a movement
- * that has nothing to do with it. Being unable to answer a press is the price
- * 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 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 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. 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
 // outside the area's picture whatever the DOM says.
 const TOP_LAYER_SELECTOR = ":modal, :popover-open";
@@ -33519,6 +33440,11 @@ const FURNITURE_NAME_PREFIX = "navi-transition-furniture-";
 const TOP_LAYER_WALL_SELECTOR =
   ".navi_dialog:modal, .navi_popover_backdrop:popover-open, .navi_popup_group:modal";
 const WALL_ATTRIBUTE = "data-navi-transition-wall";
+// Worn by a bar dimmed by a filter of navi's; the property holds the whole
+// chain, the bar's own filter first (see dimBarPicture).
+const WALL_FILTER_ATTRIBUTE = "data-navi-transition-wall-filter";
+const WALL_FILTER_PROPERTY = "--navi-transition-wall-filter";
+const WALL_FILTERS_ATTRIBUTE = "data-navi-transition-wall-filters";
 // Which side of the movement a bar is on, worn by the bar and read by the
 // browser as the class of its group (the CSS below): "leaving" from the first
 // picture, "arriving" for a bar the state arriving brought, "shared" for one
@@ -33574,6 +33500,18 @@ const TRANSITION_FURNITURE_CSS = /* css */ `.navi_fixed_bar[data-navi-transition
   }
 }
 
+.navi_fixed_bar[data-navi-transition-wall-filter] {
+  filter: var(--navi-transition-wall-filter) !important;
+}
+
+[data-navi-transition-wall-filters] {
+  pointer-events: none;
+  width: 0;
+  height: 0;
+  position: fixed;
+  overflow: hidden;
+}
+
 :root:not(:active-view-transition) [data-navi-transition-wall="rest"] {
   clip-path: var(--wall-holes-arriving, var(--wall-holes));
 }
@@ -33604,9 +33542,13 @@ 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 stand-ins for the walls open in the top layer, painted for one picture
-// and taken down before the next.
+// The walls open in the top layer, painted for one picture and taken down
+// before the next: the area's stand-ins, the bars wearing a filter for them,
+// and the <svg> holding those filters.
 let wallElements = [];
+let dimmedBars = [];
+let wallFilterSvg = null;
+let wallFilterCount = 0;
 // 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 = [];
@@ -33801,12 +33743,13 @@ const releaseTransitionFurniture = (owner) => {
   removeRestWalls();
 };
 
-// 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.
+// One stand-in per open wall over the pages, and one filter per open wall on
+// every bar outside them, 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();
   const sources = Array.from(
@@ -33815,23 +33758,24 @@ const paintTransitionWalls = (areaElement) => {
   if (sources.length === 0) {
     return sources;
   }
-  for (const target of pictureTargets(areaElement)) {
-    for (const source of sources) {
-      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
-      // 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 = pictureRect(target);
-      const wallRect = wall.getBoundingClientRect();
-      wall.style.left = `${targetRect.left - wallRect.left}px`;
-      wall.style.top = `${targetRect.top - wallRect.top}px`;
-      wall.style.width = `${targetRect.right - targetRect.left}px`;
-      wall.style.height = `${targetRect.bottom - targetRect.top}px`;
-      wallElements.push(wall);
-    }
+  for (const source of sources) {
+    const wall = createWall(source);
+    areaElement.appendChild(wall);
+    // The area is not necessarily a containing block (it 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 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);
+  }
+  for (const bar of barsOutside(areaElement)) {
+    dimBarPicture(bar, sources);
   }
   return sources;
 };
@@ -33841,18 +33785,102 @@ const removeTransitionWalls = () => {
     wall.remove();
   }
   wallElements = [];
+  for (const bar of dimmedBars) {
+    bar.removeAttribute(WALL_FILTER_ATTRIBUTE);
+    bar.style.removeProperty(WALL_FILTER_PROPERTY);
+  }
+  dimmedBars = [];
+  if (wallFilterSvg) {
+    wallFilterSvg.remove();
+    wallFilterSvg = null;
+  }
 };
 
-// What is photographed on its own and gets a stand-in in its picture: the
+// What is photographed on its own and carries the wall in its picture: the
 // pages, and every bar outside them.
 const pictureTargets = (areaElement) => {
-  const targets = [areaElement];
+  return [areaElement, ...barsOutside(areaElement)];
+};
+
+const barsOutside = (areaElement) => {
+  const bars = [];
   for (const bar of document.querySelectorAll(FIXED_BAR_SELECTOR$1)) {
     if (!areaElement.contains(bar)) {
-      targets.push(bar);
+      bars.push(bar);
     }
   }
-  return targets;
+  return bars;
+};
+
+// Room around what a bar's picture holds for what paints past every box — a
+// shadow, the blur of a wall — which no API measures: a filter cuts whatever
+// falls outside its region.
+const WALL_FILTER_INK_ROOM = 100;
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+// The bar's picture dimmed, not a rectangle over it: each wall's colour is
+// flooded atop the bar's own pixels (Porter-Duff source-atop, which no blend
+// mode gives), so what the bar leaves transparent stays so. Composited over
+// the area's picture and its stand-in, that is the wall over the bar over the
+// page: the frame at rest. A wall's filter comes before its colour, as its
+// backdrop-filter does at rest.
+const dimBarPicture = (bar, sources) => {
+  const box = bar.getBoundingClientRect();
+  // The filter region is in objectBoundingBox units, which measure from the
+  // box: one without an area leaves nothing to measure from.
+  if (box.width === 0 || box.height === 0) {
+    return;
+  }
+  const picture = pictureRect(bar);
+  const region = {
+    x: (picture.left - WALL_FILTER_INK_ROOM - box.left) / box.width,
+    y: (picture.top - WALL_FILTER_INK_ROOM - box.top) / box.height,
+    width:
+      (picture.right - picture.left + 2 * WALL_FILTER_INK_ROOM) / box.width,
+    height:
+      (picture.bottom - picture.top + 2 * WALL_FILTER_INK_ROOM) / box.height,
+  };
+  // Read while the bar wears none of navi's: removeTransitionWalls took it.
+  const ownFilter = getComputedStyle(bar).filter;
+  const chain = ownFilter === "none" ? [] : [ownFilter];
+  for (const source of sources) {
+    const backdropFilter = getComputedStyle(source)
+      .getPropertyValue("--backdrop-filter")
+      .trim();
+    if (backdropFilter && backdropFilter !== "none") {
+      chain.push(backdropFilter);
+    }
+    chain.push(`url(#${createWallFilter(source, region).id})`);
+  }
+  bar.style.setProperty(WALL_FILTER_PROPERTY, chain.join(" "));
+  bar.setAttribute(WALL_FILTER_ATTRIBUTE, "");
+  dimmedBars.push(bar);
+};
+
+const createWallFilter = (source, region) => {
+  if (!wallFilterSvg) {
+    wallFilterSvg = document.createElementNS(SVG_NS, "svg");
+    wallFilterSvg.setAttribute(WALL_FILTERS_ATTRIBUTE, "");
+    wallFilterSvg.setAttribute("aria-hidden", "true");
+    document.body.appendChild(wallFilterSvg);
+  }
+  wallFilterCount++;
+  const filter = document.createElementNS(SVG_NS, "filter");
+  filter.id = `navi-transition-wall-${wallFilterCount}`;
+  // linearRGB, the default, floods another colour than the wall's.
+  filter.setAttribute("color-interpolation-filters", "sRGB");
+  filter.setAttribute("x", region.x);
+  filter.setAttribute("y", region.y);
+  filter.setAttribute("width", region.width);
+  filter.setAttribute("height", region.height);
+  const flood = document.createElementNS(SVG_NS, "feFlood");
+  flood.setAttribute("flood-color", readBackdropColor(source));
+  const composite = document.createElementNS(SVG_NS, "feComposite");
+  composite.setAttribute("in2", "SourceGraphic");
+  composite.setAttribute("operator", "atop");
+  filter.append(flood, composite);
+  wallFilterSvg.appendChild(filter);
+  return filter;
 };
 
 const createWall = (source) => {
@@ -33866,8 +33894,8 @@ const createWall = (source) => {
 };
 
 // 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
+// painted from. A hole is cut where a picture stands, since the picture
+// carries the wall itself 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) => {
@@ -33888,10 +33916,10 @@ const measurePictureRects = (areaElement) => {
   return rects;
 };
 
-// What the picture holds, which is what the wall covers at rest: a bar's
-// picture carries what its content paints outside its box (a button standing
-// up out of a tab bar), so its rectangle is taken with its descendants'. The
-// pages' is their own box — the movement cuts them at it anyway.
+// What the picture holds: a bar's picture carries what its content paints
+// outside its box (a button standing up out of a tab bar), so its rectangle
+// is taken with its descendants'. The pages' is their own box — the movement
+// cuts them at it anyway.
 const pictureRect = (target) => {
   const rect = target.getBoundingClientRect();
   let { left, top, right, bottom } = rect;
@@ -33899,9 +33927,6 @@ const pictureRect = (target) => {
     return { left, top, right, bottom };
   }
   for (const descendant of target.querySelectorAll("*")) {
-    if (descendant.hasAttribute(WALL_ATTRIBUTE)) {
-      continue;
-    }
     const descendantRect = descendant.getBoundingClientRect();
     if (descendantRect.width === 0 || descendantRect.height === 0) {
       continue;