@a2f0/skyline 0.2.63 → 0.2.64

package/README.md

@@ -23,7 +23,7 @@ Serve `dist/` over HTTP rather than opening files directly: WebGL and the 3D pag
 
 | Page | Shows | Docs |
 | --- | --- | --- |
-| `index.html` | The viewer, mounted as the package mounts it: opens on the 3D skyline, with the enhanced drawing, the original drawing, and a WebGL prototype one button away | [The viewer](docs/viewer.md) |
+| `index.html` | The viewer, mounted as the package mounts it: opens on the 3D skyline, with the original drawing one button away and links to the enhanced drawing and the WebGL prototype | [The viewer](docs/viewer.md) |
 | `skyline-3d.html` | The full-screen 3D skyline on its own: camera views, streets, footprints, celebratory lights, and a building menu | [Full-screen 3D skyline](docs/viewer.md#full-screen-3d-skyline) |
 | `building-detail.html?building=<id>` | One mapped building alone on its platform | [Building menu and detail](docs/viewer.md#building-menu-and-detail) |
 | `skyline-study.html` | The 3D scene over the drawing, in the geographic layout or the original drawing's fit | [3D studies](docs/studies.md#skyline-study) |

package/docs/package.md

@@ -312,8 +312,8 @@ Before 0.2, the viewer ran in an iframe. Hosts upgrading:
 - If the viewer's or scene's code fails to load, as on a dropped connection, the
   browser keeps that failure for the page: later mounts on the same page fail the same
   way until it reloads. A frame used to retry with a new document.
-- The site's own `index.html` shows two prototypes from its toolbar, the hover-scripted
-  enhanced drawing and the WebGL prototype, as pages of their own in frames; a host's
+- The site's own `index.html` links two prototypes from its toolbar, the hover-scripted
+  enhanced drawing and the WebGL prototype, which open as pages of their own; a host's
   viewer never shows them.
 
 ## Import a scene or a building

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.2.63",
+  "version": "0.2.64",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {

package/site/skyline-animated.svg

@@ -5,9 +5,6 @@
    preserveAspectRatio="xMidYMax meet"
    version="1.1"
    id="svg6766"
-   role="img"
-   aria-label="Chicago skyline at night"
-   aria-describedby="skyline-description"
    style="color-scheme:dark"
    sodipodi:docname="skyline-animated.svg"
    inkscape:version="1.1 (c4e8f9e, 2021-05-24)"
@@ -144,12 +141,22 @@
       .building-tooltip {
         pointer-events: none;
       }
+      .back-link text {
+        fill: #a8a8a8;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+        text-decoration: underline;
+      }
+      .back-link:hover text,
+      .back-link:focus-visible text {
+        fill: #ffffff;
+      }
       @media (prefers-reduced-motion: reduce) {
         .interactive-building.is-active { transition: none; }
       }
     ]]></style>
   </defs>
-  <g id="skyline-position" transform="translate(1105.5923,-87.26366)">
+  <!-- The drawing is one image; the root stays a plain document so the link back reaches assistive technology. -->
+  <g id="skyline-position" transform="translate(1105.5923,-87.26366)" role="img" aria-label="Chicago skyline at night" aria-describedby="skyline-description">
   <g
      inkscape:groupmode="layer"
      id="layer4"
@@ -18670,6 +18677,17 @@
        style="display:inline;stroke-width:1.33526" />
   </g>
   </g>
+  <!-- Opened on its own, the drawing links back to the viewer; the script keeps it in the top-left corner. -->
+  <a
+     id="back-link"
+     class="back-link"
+     href="index.html">
+    <text
+       id="back-link-text"
+       font-size="70"
+       x="40"
+       y="110">← back to skyline</text>
+  </a>
   <g
      id="building-tooltip"
      class="building-tooltip"
@@ -18788,6 +18806,21 @@
         }
       }
 
+      // The way back to the viewer: 12px text, 12px in from the window's top left, at every
+      // window size.
+      const backLink = document.querySelector("#back-link-text");
+      function placeBackLink() {
+        const matrix = svg.getScreenCTM();
+        if (!matrix) return;
+        const scale = Math.hypot(matrix.a, matrix.b) || 1;
+        const start = svgPoint(0, 0, matrix.inverse());
+        backLink.setAttribute("font-size", 12 / scale);
+        backLink.setAttribute("x", start.x + 12 / scale);
+        backLink.setAttribute("y", start.y + 24 / scale);
+      }
+      placeBackLink();
+      window.addEventListener("resize", placeBackLink, { passive: true });
+
       svg.addEventListener("pointerover", updateHover, { passive: true });
       svg.addEventListener("pointermove", updateHover, { passive: true });
       svg.addEventListener("pointerleave", deactivate);

package/site/skyline-viewer.js

@@ -1,20 +1,18 @@
 import { loadMarkup } from "./markup.js";
 import { provideThree } from "./three-engine.js";
-// What each of the site toolbar's mode buttons shows, says and announces. The viewer opens
-// on the 3D skyline; each toggle shows its mode and, pressed again, returns to it.
+// What the site toolbar's mode button shows, says and announces. The viewer opens on the 3D
+// skyline; the toggle shows the original drawing and, pressed again, returns to it.
 const home = { label: "3d skyline", title: "Return to the 3D skyline", status: "3D skyline displayed" };
 const toggles = {
     original: { id: "toggle-skyline", label: "show original", title: "Compare with the original skyline SVG", status: "Original skyline displayed" },
-    webgl: { id: "toggle-webgl", label: "show webgl", title: "Preview the WebGL skyline prototype", status: "WebGL skyline prototype displayed" },
-    enhanced: { id: "toggle-enhanced", label: "show enhanced", title: "Show the enhanced interactive skyline drawing", status: "Enhanced interactive skyline displayed" },
-};
-// The two prototypes the site's toolbar shows in place are pages of their own, as the
-// studies are: the hover-scripted drawing and the WebGL prototype. Only the site's own
-// index.html shows them, in frames; a host's viewer never does.
-const prototypes = {
-    enhanced: { src: "skyline-animated.svg", title: "Animated Chicago skyline at night" },
-    webgl: { src: "skyline-webgl.html", title: "WebGL Chicago skyline prototype" },
 };
+// The two prototypes are pages of their own, as the studies are: the hover-scripted drawing
+// and the WebGL prototype. The site's toolbar links to them, and each page keeps its own
+// scripts and a way back; a host's viewer never shows them.
+const prototypes = [
+    { id: "link-webgl", href: "skyline-webgl.html", label: "webgl prototype", title: "Open the WebGL skyline prototype", ct: "viewer.webgl" },
+    { id: "link-enhanced", href: "skyline-animated.svg", label: "enhanced drawing", title: "Open the enhanced interactive skyline drawing", ct: "viewer.enhanced" },
+];
 export function sceneTransition(status, event) {
     switch (event) {
         case "ready":
@@ -66,7 +64,6 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
     // Both show original buttons wait while the scene boots, until its first frame, a failure
     // to load, or a lost graphics context; the drawing stays reachable while it is unavailable.
     let sceneStatus = "booting";
-    const frames = {};
     const toolbar = navigation ? createToolbar() : null;
     function updateView() {
         viewer.toggleAttribute("data-booting", sceneStatus !== "ready" && mode === "3d");
@@ -74,10 +71,6 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
         if (mode === "original" && !drawing.getAttribute("src"))
             drawing.src = new URL("skyline-original-fit.svg", assets).href;
         drawing.hidden = mode !== "original";
-        if (mode === "enhanced" || mode === "webgl")
-            frames[mode] ??= createPrototype(mode);
-        for (const [name, frame] of Object.entries(frames))
-            frame.hidden = name !== mode;
         originalReturn.hidden = mode !== "original";
         embeddedOriginal.hidden = navigation || mode !== "3d" || sceneStatus !== "unavailable";
         if (toolbar) {
@@ -295,6 +288,9 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
             toggleButton.addEventListener("click", () => showMode(mode === name ? "3d" : name), listening);
             nav.append(toggleButton);
         }
+        for (const prototype of prototypes) {
+            nav.append(element(document, "a", { id: prototype.id, href: new URL(prototype.href, assets).href, title: prototype.title, textContent: prototype.label }, { "data-ct": prototype.ct }));
+        }
         nav.append(element(document, "a", { href: new URL("building-study.html", assets).href, textContent: "3d building" }, { "data-ct": "viewer.building-study" }), element(document, "a", { href: new URL("skyline-study.html", assets).href, textContent: "skyline study" }, { "data-ct": "viewer.skyline-study" }));
         const debugButton = button("debug-motion", "debug motion", { "aria-describedby": "stars-motion-status" });
         const motionStatus = element(document, "p", { className: "motion-status", id: "stars-motion-status" }, { role: "status" });
@@ -329,17 +325,4 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
         resizing.observe(scene);
         signal.addEventListener("abort", () => resizing.disconnect(), { once: true });
     }
-    // A prototype's page, in a frame of its own, shown in place the first time it is chosen.
-    // Keys pressed inside it go to its own window, so F listens there too.
-    function createPrototype(name) {
-        const frame = element(document, "iframe", { className: "scene", id: `${name}-scene`, title: prototypes[name].title, src: new URL(prototypes[name].src, assets).href });
-        frame.addEventListener("load", () => {
-            try {
-                frame.contentWindow?.addEventListener("keydown", fullscreenShortcut, listening);
-            }
-            catch { /* A frame from another origin keeps its keys. */ }
-        }, listening);
-        viewer.insertBefore(frame, originalReturn);
-        return frame;
-    }
 }

package/site/skyline-webgl.html

@@ -73,6 +73,26 @@
         white-space: nowrap;
       }
 
+      .back {
+        position: fixed;
+        z-index: 3;
+        top: max(12px, env(safe-area-inset-top));
+        left: max(12px, env(safe-area-inset-left));
+        color: #a8a8a8;
+        font-size: 12px;
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-underline-offset: 3px;
+      }
+      .back:hover,
+      .back:focus-visible {
+        color: #fff;
+        text-decoration-thickness: 2px;
+      }
+      .back:focus-visible {
+        outline: 1px solid #fff;
+        outline-offset: 4px;
+      }
       [hidden] {
         display: none !important;
       }
@@ -80,6 +100,7 @@
     <script type="module" src="click-tracking-page.js"></script>
   </head>
   <body>
+    <a class="back" id="back-link" href="index.html">← back to skyline</a>
     <canvas id="skyline" role="img" aria-label="Interactive WebGL rendering of the Chicago skyline"></canvas>
     <p class="loading" id="loading" role="status">preparing WebGL building layers…</p>
     <div class="tooltip" id="tooltip" aria-hidden="true" hidden></div>
@@ -435,7 +456,7 @@
           }
 
           const sourceRoot = sourceDocument.documentElement;
-          sourceRoot.querySelectorAll("script, #building-tooltip").forEach((element) => element.remove());
+          sourceRoot.querySelectorAll("script, #building-tooltip, #back-link").forEach((element) => element.remove());
           sourceRoot.setAttribute("width", "850");
           sourceRoot.setAttribute("height", "278");
           const sourceHost = document.createElement("div");