@a2f0/skyline 0.1.7 → 0.2.2

package/site/markup.js

@@ -0,0 +1,36 @@
+// Loads the markup and styles the viewer renders in its shadow roots. The scene and the
+// building detail keep their markup in their own pages, skyline-3d.html and
+// building-detail.html, which also work on their own; the viewer takes it from there, so one
+// copy serves both.
+/**
+ * Fetches a page and parses it, leaving out its scripts and `noscript` fallbacks, with its
+ * links and sources resolved against the page's own address, so its elements can render in
+ * another document. Fragment links, such as an SVG `use` of a path beside it, stay as they are.
+ */
+export async function loadMarkup(url, signal) {
+    const response = await fetch(url, { signal });
+    if (!response.ok)
+        throw new Error(`Couldn't load ${url.href} (${response.status}).`);
+    const page = new DOMParser().parseFromString(await response.text(), "text/html");
+    page.querySelectorAll("script, noscript").forEach((element) => element.remove());
+    for (const element of page.querySelectorAll("[href], [src]")) {
+        for (const name of ["href", "src"]) {
+            const value = element.getAttribute(name);
+            if (value !== null && !value.startsWith("#"))
+                element.setAttribute(name, new URL(value, url).href);
+        }
+    }
+    return page;
+}
+/** Adds a stylesheet to a shadow root, and resolves once it has loaded. */
+export function loadStylesheet(root, url) {
+    const link = root.ownerDocument.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url.href;
+    const loaded = new Promise((resolve, reject) => {
+        link.addEventListener("load", () => resolve(), { once: true });
+        link.addEventListener("error", () => reject(new Error(`Couldn't load ${url.href}.`)), { once: true });
+    });
+    root.prepend(link);
+    return loaded;
+}

package/site/skyline-3d-page.js

@@ -0,0 +1,12 @@
+import { startSkyline3d } from "./skyline-3d.js";
+// skyline-3d.html: the full-screen 3D skyline on a page of its own, which has no drawing to
+// switch to. Its address's settings were applied before the scene's code arrived.
+const life = new AbortController();
+try {
+    startSkyline3d({ root: document, frame: document.body, assets: new URL("./", location.href), signal: life.signal });
+}
+catch (error) {
+    // A scene that fails part way releases what it started; study-loader.js says why.
+    life.abort(error);
+    throw error;
+}

package/site/skyline-3d.html

@@ -31,9 +31,9 @@
       <p class="visually-hidden" id="motion-status" role="status">Camera moves only when you interact or start the turntable.</p>
       <p class="visually-hidden" id="celebration-announcement" role="status"></p>
       <noscript><style>#loading { display: none; }</style><p class="loading">Enable JavaScript to explore the 3D skyline.</p></noscript>
-      <dialog class="detail-panel" id="building-detail" aria-label="Building detail">
+      <section class="detail-panel" id="building-detail" role="dialog" aria-label="Building detail" hidden>
         <button type="button" class="detail-close" id="detail-close" aria-label="Close building detail" title="Close (Esc)">×</button>
-      </dialog>
+      </section>
     </main>
     <footer class="control-bar" aria-label="3D skyline controls">
       <!-- Chicago's six-pointed star, after devopsrockstars' white-star-only.svg, drawn in
@@ -79,16 +79,12 @@
       </div>
     </footer>
     <script>
-      // Settings from this page's address, then from the viewer that frames it, applied before
-      // the bar's first frame. ?controls=open starts the bar open, with no fold; skyline-3d.ts
-      // folds it from there. ?attribution=hidden leaves out the OpenStreetMap credit.
+      // Settings from this page's address, applied before the bar's first frame.
+      // ?controls=open starts the bar open, with no fold; skyline-3d.ts folds it from there.
+      // ?attribution=hidden leaves out the OpenStreetMap credit. The viewer, which renders this
+      // markup in its shadow root, applies its own options the same way (skyline-viewer.ts).
       (() => {
         const settings = new URLSearchParams(location.search);
-        try {
-          if (parent !== window && parent.document.querySelector("#skyline-3d-scene")?.contentWindow === window) {
-            for (const [key, value] of new URLSearchParams(parent.location.search)) if (!settings.has(key)) settings.set(key, value);
-          }
-        } catch { /* A scene embedded on another origin reads only its own address. */ }
         if (settings.get("controls") === "open") {
           const toggle = document.querySelector("#menu-toggle");
           toggle.setAttribute("aria-expanded", "true");
@@ -107,6 +103,6 @@
       </div>
     </div>
     <!-- The loader is compiled into dist/; opened from the sources, say how to build it. -->
-    <script src="study-loader.js" data-study="./skyline-3d.js" onerror="document.querySelector('#loading').textContent = 'Build the site with bun run build:site, then serve dist/ with python3 -m http.server -d dist to explore the 3D skyline.'"></script>
+    <script src="study-loader.js" data-study="./skyline-3d-page.js" onerror="document.querySelector('#loading').textContent = 'Build the site with bun run build:site, then serve dist/ with python3 -m http.server -d dist to explore the 3D skyline.'"></script>
   </body>
 </html>