@a2f0/skyline 0.1.2 → 0.1.4

package/docs/package.md

@@ -111,6 +111,8 @@ controls from the application's header and CSS. Embedding hides the standalone
 toolbar and study links so they do not overlap the host's navigation. Set
 `navigation: true` to show them. It retains stars, the traced
 loading silhouette, star controls, original comparison, and building details.
+The scene's control bar starts folded behind its star; set `controls: 'open'` to
+start it open, with no fold, from its first frame. Visitors can still fold it.
 A small independent **show original** button remains available until the first
 3D frame succeeds, and reappears if the graphics context is lost. The SVG stays
 reachable even if WebGL, the scene document, or its bootstrap script cannot load.

package/lib/skyline-package.d.ts

@@ -8,6 +8,8 @@ export interface SkylineOptions {
     title?: string;
     /** Show the standalone toolbar and study links. Hidden by default when embedded. */
     navigation?: boolean;
+    /** Start the 3D scene's control bar open, or folded behind its star. Closed by default. */
+    controls?: "open" | "closed";
 }
 export interface SkylineInstance {
     /** The viewer's frame; its styles are isolated from the host application. */
@@ -20,4 +22,4 @@ export interface SkylineInstance {
  * this module never touches the DOM; call it after mounting a browser component.
  * The container controls placement and size. Destroy it when that component leaves.
  */
-export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, navigation }: SkylineOptions): SkylineInstance;
+export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, navigation, controls }: SkylineOptions): SkylineInstance;

package/lib/skyline-package.js

@@ -3,7 +3,9 @@
  * this module never touches the DOM; call it after mounting a browser component.
  * The container controls placement and size. Destroy it when that component leaves.
  */
-export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", navigation = false }) {
+export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", navigation = false, controls = "closed" }) {
+    if (controls !== "open" && controls !== "closed")
+        throw new TypeError('Skyline controls must be "open" or "closed".');
     const document = container.ownerDocument;
     const base = new URL(assetsUrl, document.baseURI);
     if (!/^(https?:)$/.test(base.protocol))
@@ -17,6 +19,8 @@ export function mountSkyline(container, { assetsUrl, title = "Interactive Chicag
     const viewerUrl = new URL("index.html", base);
     if (!navigation)
         viewerUrl.searchParams.set("embed", "1");
+    if (controls === "open")
+        viewerUrl.searchParams.set("controls", "open");
     element.src = viewerUrl.href;
     element.allowFullscreen = true;
     element.style.cssText = "display:block;width:100%;height:100%;border:0";

package/package.json

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

package/site/skyline-3d.html

@@ -78,6 +78,23 @@
         </div>
       </div>
     </footer>
+    <script>
+      // ?controls=open, on this page's address or on the viewer that frames it, starts the bar
+      // open from its first frame, with no fold; skyline-3d.ts folds it from there.
+      (() => {
+        let controls = new URLSearchParams(location.search).get("controls");
+        try {
+          if (!controls && parent !== window && parent.document.querySelector("#skyline-3d-scene")?.contentWindow === window) {
+            controls = new URLSearchParams(parent.location.search).get("controls");
+          }
+        } catch { /* A scene embedded on another origin reads only its own address. */ }
+        if (controls !== "open") return;
+        const toggle = document.querySelector("#menu-toggle");
+        toggle.setAttribute("aria-expanded", "true");
+        toggle.title = "Hide the controls";
+        document.querySelector(".control-bar").classList.add("open");
+      })();
+    </script>
     <div class="tooltip" id="tooltip" aria-hidden="true" hidden></div>
     <div class="context-menu" id="building-menu" hidden>
       <p class="context-menu-title" id="building-menu-title"></p>