Update index.js

index.js

@@ -11,6 +11,15 @@
     return params.get(param);
   }
 
+  // Read required URLs and optional limits from the query parameters.
+  var gifUrl = getScriptQueryParam("gif_url");
+  var plyUrl = getScriptQueryParam("ply_url");
+  // Optional parameters for zoom and angle limits:
+  var minZoom = parseFloat(getScriptQueryParam("minZoom")) || 1.5;
+  var maxZoom = parseFloat(getScriptQueryParam("maxZoom")) || 5;
+  var minAngle = parseFloat(getScriptQueryParam("minAngle")) || 0;
+  var maxAngle = parseFloat(getScriptQueryParam("maxAngle")) || 90;
+
   // Inject CSS styles into the document head.
   var styleEl = document.createElement('style');
   styleEl.textContent = `
@@ -67,11 +76,11 @@
       padding: 20px;
       border-radius: 5px;
     }
-    /* Menu (help) content styling */
+    /* Menu (instructions) content styling */
     #menu-content {
       display: none;
       position: absolute;
-      top: 50px;
+      top: 72px;
       right: 15px;
       background: #FFFEF4;
       border: 1px solid #474558;
@@ -96,14 +105,19 @@
       align-items: center;
       justify-content: center;
     }
+    /* Positions: Close at top-left, fullscreen at top-right, help (instructions) below fullscreen */
     #close-btn {
       top: 17px;
       left: 15px;
     }
-    #menu-toggle {
+    #fullscreen-toggle {
       top: 17px;
       right: 15px;
     }
+    #help-toggle {
+      top: 72px;
+      right: 15px;
+    }
   `;
   document.head.appendChild(styleEl);
 
@@ -122,7 +136,8 @@
         <progress id="progress-indicator" max="100" value="0"></progress>
       </dialog>
       <button id="close-btn" class="widget-button">X</button>
-      <button id="menu-toggle" class="widget-button">≡</button>
+      <button id="fullscreen-toggle" class="widget-button">⇱</button>
+      <button id="help-toggle" class="widget-button">?</button>
       <div id="menu-content">
         - Rotate with right click<br>
         - Zoom in/out with middle click<br>
@@ -130,7 +145,7 @@
       </div>
     </div>
   `;
-  // Append widgetContainer to the current script's parent (so it appears in place)
+  // Append widgetContainer to the current script's parent so it appears in place.
   document.currentScript.parentNode.appendChild(widgetContainer);
 
   // Grab element references.
@@ -138,20 +153,20 @@
   var viewerContainer = document.getElementById('viewer-container');
   var previewImage = document.getElementById('preview-image');
   var closeBtn = document.getElementById('close-btn');
-  var menuToggle = document.getElementById('menu-toggle');
+  var fullscreenToggle = document.getElementById('fullscreen-toggle');
+  var helpToggle = document.getElementById('help-toggle');
   var menuContent = document.getElementById('menu-content');
   var canvas = document.getElementById('canvas');
   var progressDialog = document.getElementById('progress-dialog');
   var progressIndicator = document.getElementById('progress-indicator');
 
-  // Read the URLs from the script’s query parameters.
-  var gifUrl = getScriptQueryParam("gif_url");
-  var plyUrl = getScriptQueryParam("ply_url");
-
+  // Set the preview image if provided.
   if (gifUrl) {
     previewImage.src = gifUrl;
   }
 
+  // --- Button Event Handlers ---
+
   // When the preview image is clicked, hide it, show the viewer, and initialize the 3D viewer.
   gifPreview.addEventListener('click', function() {
     gifPreview.style.display = 'none';
@@ -159,19 +174,53 @@
     initializeViewer();
   });
 
-  // Close button event: hide the viewer and show the preview.
+  // Close button: hide the viewer and show the preview.
   closeBtn.addEventListener('click', function() {
+    // Exit fullscreen if active.
+    if (document.fullscreenElement === widgetContainer) {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
     viewerContainer.style.display = 'none';
     gifPreview.style.display = 'block';
   });
 
-  // Menu toggle event: show/hide the help instructions.
-  menuToggle.addEventListener('click', function(e) {
+  // Fullscreen toggle: toggle fullscreen on the widget container.
+  fullscreenToggle.addEventListener('click', function() {
+    if (!document.fullscreenElement) {
+      if (widgetContainer.requestFullscreen) {
+        widgetContainer.requestFullscreen();
+      } else if (widgetContainer.webkitRequestFullscreen) {
+        widgetContainer.webkitRequestFullscreen();
+      } else if (widgetContainer.mozRequestFullScreen) {
+        widgetContainer.mozRequestFullScreen();
+      } else if (widgetContainer.msRequestFullscreen) {
+        widgetContainer.msRequestFullscreen();
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+  });
+
+  // Update the fullscreen button icon on fullscreen change.
+  document.addEventListener('fullscreenchange', function() {
+    if (document.fullscreenElement === widgetContainer) {
+      fullscreenToggle.textContent = '⇲';
+    } else {
+      fullscreenToggle.textContent = '⇱';
+    }
+  });
+
+  // Help (instructions) toggle: show/hide the instructions.
+  helpToggle.addEventListener('click', function(e) {
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
 
-  // Initialize the 3D PLY viewer.
+  // --- Initialize the 3D PLY Viewer ---
   async function initializeViewer() {
     // Dynamically import the gsplat library.
     const SPLAT = await import("https://cdn.jsdelivr.net/npm/gsplat@latest");
@@ -183,14 +232,14 @@
     const controls = new SPLAT.OrbitControls(camera, canvas);
 
     canvas.style.background = "#FEFEFD";
-    controls.maxZoom = 5;
-    controls.minZoom = 1.5;
-    controls.minAngle = 0;
-    controls.maxAngle = 90;
+    controls.maxZoom = maxZoom;
+    controls.minZoom = minZoom;
+    controls.minAngle = minAngle;
+    controls.maxAngle = maxAngle;
 
     controls.update();
 
-    // Load the PLY model from the provided URL (using plyUrl).
+    // Load the PLY model from the provided URL.
     try {
       await SPLAT.PLYLoader.LoadAsync(
         plyUrl,
@@ -199,7 +248,7 @@
           progressIndicator.value = progress * 100;
         }
       );
-      // Close or hide the progress dialog once the model is loaded.
+      // Hide the progress dialog when done.
       if (typeof progressDialog.close === 'function') {
         progressDialog.close();
       } else {