Update index_sans_gif.js

index_sans_gif.js

@@ -26,13 +26,18 @@
   const instanceId = Math.random().toString(36).substr(2, 8);
   
   // Read required URLs and parameters from the config.
+  // The gifUrl is no longer used.
   var plyUrl = config.ply_url;
+  
+  // Optional parameters for zoom and rotation limits.
+  // Defaults: zoom from 0 to 20; rotation from 0 to 360.
   var minZoom = parseFloat(config.minZoom || "0");
   var maxZoom = parseFloat(config.maxZoom || "20");
   var minAngle = parseFloat(config.minAngle || "0");
   var maxAngle = parseFloat(config.maxAngle || "360");
   
   // Determine the aspect ratio.
+  // Default aspect: 1:1 (i.e. 100% padding-bottom)
   var aspectPercent = "100%";
   if (config.aspect) {
     if (config.aspect.indexOf(":") !== -1) {
@@ -49,6 +54,7 @@
       }
     }
   } else {
+    // If no aspect parameter is provided, compute the aspect ratio from the parent element.
     var parentContainer = scriptTag.parentNode;
     var containerWidth = parentContainer.offsetWidth;
     var containerHeight = parentContainer.offsetHeight;
@@ -57,9 +63,10 @@
     }
   }
   
+  // Detect if the device is iOS.
   var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   
-  // Inject CSS styles into the document head.
+  // Inject CSS styles into the document head, scoped with the unique id.
   var styleEl = document.createElement('style');
   styleEl.textContent = `
     /* Widget container styling */
@@ -81,6 +88,7 @@
     }
     /* Viewer Container styling */
     #viewer-container-${instanceId} {
+      /* Display the viewer by default */
       display: block;
       position: absolute;
       top: 0;
@@ -97,7 +105,7 @@
       height: 100%;
       display: block;
     }
-    /* Progress dialog styling */
+    /* Progress dialog styling (as a centered div) */
     #progress-dialog-${instanceId} {
       position: absolute;
       top: 50%;
@@ -110,7 +118,7 @@
       z-index: 1000;
       display: none;
     }
-    /* Menu content styling */
+    /* Menu (instructions) content styling */
     #menu-content-${instanceId} {
       display: none;
       position: absolute;
@@ -139,6 +147,8 @@
       align-items: center;
       justify-content: center;
     }
+    /* Positions: fullscreen at top-right, help (instructions) below fullscreen,
+       and reset camera below help */
     #fullscreen-toggle-${instanceId} {
       top: 17px;
       right: 15px;
@@ -154,16 +164,18 @@
       line-height: 1;
       padding: 0;
     }
+    /* Adjust the ⟲ icon position within the reset camera button */
     .reset-icon {
       display: inline-block;
     }
   `;
   document.head.appendChild(styleEl);
   
-  // Create the widget container.
+  // Create the widget container and set its inner HTML.
   var widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.innerHTML = `
+    <!-- Viewer Container (displayed directly) -->
     <div id="viewer-container-${instanceId}">
       <canvas id="canvas-${instanceId}"></canvas>
       <div id="progress-dialog-${instanceId}">
@@ -183,7 +195,7 @@
   `;
   scriptTag.parentNode.appendChild(widgetContainer);
   
-  // Grab element references.
+  // Grab element references using the unique IDs.
   var viewerContainer = document.getElementById('viewer-container-' + instanceId);
   var fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
   var helpToggle = document.getElementById('help-toggle-' + instanceId);
@@ -194,21 +206,40 @@
   var progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   
   // --- Button Event Handlers ---
+  
   fullscreenToggle.addEventListener('click', function() {
     if (isIOS) {
-      widgetContainer.classList.toggle('fake-fullscreen');
+      if (!widgetContainer.classList.contains('fake-fullscreen')) {
+        widgetContainer.classList.add('fake-fullscreen');
+      } else {
+        widgetContainer.classList.remove('fake-fullscreen');
+      }
       fullscreenToggle.textContent = widgetContainer.classList.contains('fake-fullscreen') ? '⇲' : '⇱';
     } else {
       if (!document.fullscreenElement) {
-        widgetContainer.requestFullscreen ? widgetContainer.requestFullscreen() : null;
+        if (widgetContainer.requestFullscreen) {
+          widgetContainer.requestFullscreen();
+        } else if (widgetContainer.webkitRequestFullscreen) {
+          widgetContainer.webkitRequestFullscreen();
+        } else if (widgetContainer.mozRequestFullScreen) {
+          widgetContainer.mozRequestFullScreen();
+        } else if (widgetContainer.msRequestFullscreen) {
+          widgetContainer.msRequestFullscreen();
+        }
       } else {
-        document.exitFullscreen ? document.exitFullscreen() : null;
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
       }
     }
   });
   
   document.addEventListener('fullscreenchange', function() {
-    fullscreenToggle.textContent = (document.fullscreenElement === widgetContainer) ? '⇲' : '⇱';
+    if (document.fullscreenElement === widgetContainer) {
+      fullscreenToggle.textContent = '⇲';
+    } else {
+      fullscreenToggle.textContent = '⇱';
+    }
   });
   
   helpToggle.addEventListener('click', function(e) {
@@ -221,8 +252,12 @@
     if (cameraInstance && initialCameraPosition && initialCameraRotation) {
       cameraInstance.position = initialCameraPosition.clone();
       cameraInstance.rotation = initialCameraRotation.clone();
-      if (typeof cameraInstance.update === 'function') cameraInstance.update();
-      if (controlsInstance && typeof controlsInstance.update === 'function') controlsInstance.update();
+      if (typeof cameraInstance.update === 'function') {
+        cameraInstance.update();
+      }
+      if (controlsInstance && typeof controlsInstance.update === 'function') {
+        controlsInstance.update();
+      }
     }
   });
   
@@ -230,29 +265,23 @@
   async function initializeViewer() {
     const SPLAT = await import("https://cdn.jsdelivr.net/npm/gsplat@latest");
     progressDialog.style.display = 'block';
-    
     const renderer = new SPLAT.WebGLRenderer(canvas);
     const scene = new SPLAT.Scene();
-    
-    // Create the camera.
     const camera = new SPLAT.Camera();
-    // Set the initial camera position from the config BEFORE creating OrbitControls.
+    const controls = new SPLAT.OrbitControls(camera, canvas);
+  
+    // Set the initial camera position from the config.
     if (config.cameraPosition &&
         Array.isArray(config.cameraPosition) &&
         config.cameraPosition.length === 3) {
+      // Since camera.position.set is not available, assign each coordinate.
       camera.position.x = config.cameraPosition[0];
       camera.position.y = config.cameraPosition[1];
       camera.position.z = config.cameraPosition[2];
-      // Optionally, update the camera if needed.
-      if (typeof camera.update === 'function') camera.update();
     }
-    
-    // Create OrbitControls AFTER the camera's position is set.
-    const controls = new SPLAT.OrbitControls(camera, canvas);
-    
+  
     cameraInstance = camera;
     controlsInstance = controls;
-    // Capture the adjusted initial camera values.
     initialCameraPosition = camera.position.clone();
     initialCameraRotation = camera.rotation.clone();