Update index_sans_gif.js

index_sans_gif.js

@@ -1,4 +1,23 @@
-(function() {
+(async function() {
+  // Get the script tag and its config attribute.
+  const scriptTag = document.currentScript;
+  const configUrl = scriptTag.getAttribute("data-config");
+  let config = {};
+  
+  // Load configuration from the JSON file.
+  if (configUrl) {
+    try {
+      const response = await fetch(configUrl);
+      config = await response.json();
+    } catch (error) {
+      console.error("Error loading config file:", error);
+      return;
+    }
+  } else {
+    console.error("No config file provided. Please set a data-config attribute on the script tag.");
+    return;
+  }
+  
   // --- Outer scope variables for camera state ---
   let cameraInstance = null;
   let controlsInstance = null;
@@ -8,53 +27,36 @@
   // Generate a unique identifier for this widget instance.
   const instanceId = Math.random().toString(36).substr(2, 8);
   
-  // Helper: Get query parameters from THIS script’s src URL.
-  function getScriptQueryParam(param) {
-    var params = new URLSearchParams("");
-    if (document.currentScript && document.currentScript.src.indexOf('?') !== -1) {
-      var queryString = document.currentScript.src.split('?')[1];
-      params = new URLSearchParams(queryString);
-    } else {
-      params = new URLSearchParams(window.location.search);
-    }
-    return params.get(param);
-  }
-  
-  // Read required URLs.
-  // The gifUrl is no longer used.
-  var plyUrl = getScriptQueryParam("ply_url");
-  
-  // Read optional initial camera position (as a vector string "x,y,z").
-  var initialCameraPosParam = getScriptQueryParam("initialCameraPosition");
+  // Use configuration parameters from the JSON file.
+  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(getScriptQueryParam("minZoom") || "0");
-  var maxZoom = parseFloat(getScriptQueryParam("maxZoom") || "20");
-  var minAngle = parseFloat(getScriptQueryParam("minAngle") || "0");
-  var maxAngle = parseFloat(getScriptQueryParam("maxAngle") || "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%";
-  var aspectParam = getScriptQueryParam("aspect");
-  if (aspectParam) {
-    if (aspectParam.indexOf(":") !== -1) {
-      var parts = aspectParam.split(":");
+  if (config.aspect) {
+    if (config.aspect.indexOf(":") !== -1) {
+      var parts = config.aspect.split(":");
       var w = parseFloat(parts[0]);
       var h = parseFloat(parts[1]);
       if (!isNaN(w) && !isNaN(h) && w > 0) {
         aspectPercent = (h / w * 100) + "%";
       }
     } else {
-      var aspectValue = parseFloat(aspectParam);
+      var aspectValue = parseFloat(config.aspect);
       if (!isNaN(aspectValue) && aspectValue > 0) {
         aspectPercent = (100 / aspectValue) + "%";
       }
     }
   } else {
     // If no aspect parameter is provided, compute the aspect ratio from the parent element.
-    var parentContainer = document.currentScript.parentNode;
+    var parentContainer = scriptTag.parentNode;
     var containerWidth = parentContainer.offsetWidth;
     var containerHeight = parentContainer.offsetHeight;
     if (containerWidth > 0 && containerHeight > 0) {
@@ -87,7 +89,6 @@
     }
     /* Viewer Container styling */
     #viewer-container-${instanceId} {
-      /* Display the viewer by default */
       display: block;
       position: absolute;
       top: 0;
@@ -104,7 +105,7 @@
       height: 100%;
       display: block;
     }
-    /* Progress dialog styling (as a centered div) */
+    /* Progress dialog styling */
     #progress-dialog-${instanceId} {
       position: absolute;
       top: 50%;
@@ -117,7 +118,7 @@
       z-index: 1000;
       display: none;
     }
-    /* Menu (instructions) content styling */
+    /* Menu content styling */
     #menu-content-${instanceId} {
       display: none;
       position: absolute;
@@ -146,8 +147,7 @@
       align-items: center;
       justify-content: center;
     }
-    /* Positions: fullscreen at top-right, help (instructions) below fullscreen,
-       and reset camera below help */
+    /* Button positions */
     #fullscreen-toggle-${instanceId} {
       top: 17px;
       right: 15px;
@@ -163,10 +163,8 @@
       line-height: 1;
       padding: 0;
     }
-    /* Adjust the ⟲ icon position within the reset camera button */
     .reset-icon {
       display: inline-block;
-      transform: translateY(-3px);
     }
   `;
   document.head.appendChild(styleEl);
@@ -175,7 +173,7 @@
   var widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.innerHTML = `
-    <!-- Viewer Container (displayed directly) -->
+    <!-- Viewer Container -->
     <div id="viewer-container-${instanceId}">
       <canvas id="canvas-${instanceId}"></canvas>
       <div id="progress-dialog-${instanceId}">
@@ -193,9 +191,9 @@
       </div>
     </div>
   `;
-  document.currentScript.parentNode.appendChild(widgetContainer);
+  scriptTag.parentNode.appendChild(widgetContainer);
   
-  // Grab element references using the unique IDs.
+  // Grab element references.
   var viewerContainer = document.getElementById('viewer-container-' + instanceId);
   var fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
   var helpToggle = document.getElementById('help-toggle-' + instanceId);
@@ -209,11 +207,7 @@
   
   fullscreenToggle.addEventListener('click', function() {
     if (isIOS) {
-      if (!widgetContainer.classList.contains('fake-fullscreen')) {
-        widgetContainer.classList.add('fake-fullscreen');
-      } else {
-        widgetContainer.classList.remove('fake-fullscreen');
-      }
+      widgetContainer.classList.toggle('fake-fullscreen');
       fullscreenToggle.textContent = widgetContainer.classList.contains('fake-fullscreen') ? '⇲' : '⇱';
     } else {
       if (!document.fullscreenElement) {
@@ -235,11 +229,7 @@
   });
   
   document.addEventListener('fullscreenchange', function() {
-    if (document.fullscreenElement === widgetContainer) {
-      fullscreenToggle.textContent = '⇲';
-    } else {
-      fullscreenToggle.textContent = '⇱';
-    }
+    fullscreenToggle.textContent = (document.fullscreenElement === widgetContainer) ? '⇲' : '⇱';
   });
   
   helpToggle.addEventListener('click', function(e) {
@@ -270,21 +260,6 @@
     const camera = new SPLAT.Camera();
     const controls = new SPLAT.OrbitControls(camera, canvas);
   
-    // If an initial camera position was provided, parse and assign it.
-    if (initialCameraPosParam) {
-      var parts = initialCameraPosParam.split(",");
-      if (parts.length === 3) {
-        var camX = parseFloat(parts[0]);
-        var camY = parseFloat(parts[1]);
-        var camZ = parseFloat(parts[2]);
-        if (!isNaN(camX) && !isNaN(camY) && !isNaN(camZ)) {
-          camera.position.x = camX;
-          camera.position.y = camY;
-          camera.position.z = camZ;
-        }
-      }
-    }
-  
     cameraInstance = camera;
     controlsInstance = controls;
     initialCameraPosition = camera.position.clone();
@@ -327,6 +302,6 @@
     requestAnimationFrame(frame);
   }
   
-  // Initialize the viewer immediately.
+  // Start the viewer.
   initializeViewer();
 })();