Update index_sans_gif.js

index_sans_gif.js

@@ -24,11 +24,18 @@
   
   // Generate a unique identifier for this widget instance.
   const instanceId = Math.random().toString(36).substr(2, 8);
-
-  // Read required URLs from the config.
-  var gifUrl = config.gif_url;
+  
+  // 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%";
@@ -47,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;
@@ -54,16 +62,10 @@
       aspectPercent = (containerHeight / containerWidth * 100) + "%";
     }
   }
-
-  // Optional parameters for zoom and rotation limits.
-  var minZoom = parseFloat(config.minZoom || "0");
-  var maxZoom = parseFloat(config.maxZoom || "20");
-  var minAngle = parseFloat(config.minAngle || "0");
-  var maxAngle = parseFloat(config.maxAngle || "360");
-
+  
   // Detect if the device is iOS.
   var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-
+  
   // Inject CSS styles into the document head, scoped with the unique id.
   var styleEl = document.createElement('style');
   styleEl.textContent = `
@@ -84,26 +86,10 @@
       padding-bottom: 0 !important;
       z-index: 9999 !important;
     }
-    /* GIF Preview styling */
-    #gif-preview-container-${instanceId} {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 1px solid #474558;
-      border-radius: 10px;
-      overflow: hidden;
-      cursor: pointer;
-    }
-    #gif-preview-container-${instanceId} img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
     /* Viewer Container styling */
     #viewer-container-${instanceId} {
-      display: none;
+      /* Display the viewer by default */
+      display: block;
       position: absolute;
       top: 0;
       left: 0;
@@ -119,7 +105,7 @@
       height: 100%;
       display: block;
     }
-    /* Progress dialog styling */
+    /* Progress dialog styling (as a centered div) */
     #progress-dialog-${instanceId} {
       position: absolute;
       top: 50%;
@@ -132,7 +118,7 @@
       z-index: 1000;
       display: none;
     }
-    /* Menu content styling */
+    /* Menu (instructions) content styling */
     #menu-content-${instanceId} {
       display: none;
       position: absolute;
@@ -161,11 +147,8 @@
       align-items: center;
       justify-content: center;
     }
-    /* Positions: Close at top-left, fullscreen at top-right, help (instructions) below fullscreen */
-    #close-btn-${instanceId} {
-      top: 17px;
-      left: 15px;
-    }
+    /* Positions: fullscreen at top-right, help (instructions) below fullscreen,
+       and reset camera below help */
     #fullscreen-toggle-${instanceId} {
       top: 17px;
       right: 15px;
@@ -174,37 +157,34 @@
       top: 72px;
       right: 15px;
     }
-    /* Reset Camera Button below the help button */
     #reset-camera-btn-${instanceId} {
       top: 127px;
       right: 15px;
+      font-size: 22px;
+      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);
-
+  
   // Create the widget container and set its inner HTML.
   var widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.innerHTML = `
-    <!-- GIF Preview Container -->
-    <div id="gif-preview-container-${instanceId}">
-      <img id="preview-image-${instanceId}" alt="Preview" crossorigin="anonymous">
-    </div>
-    <!-- Viewer Container -->
+    <!-- Viewer Container (displayed directly) -->
     <div id="viewer-container-${instanceId}">
       <canvas id="canvas-${instanceId}"></canvas>
       <div id="progress-dialog-${instanceId}">
         <progress id="progress-indicator-${instanceId}" max="100" value="0"></progress>
       </div>
-      <button id="close-btn-${instanceId}" class="widget-button">X</button>
       <button id="fullscreen-toggle-${instanceId}" class="widget-button">⇱</button>
       <button id="help-toggle-${instanceId}" class="widget-button">?</button>
       <button id="reset-camera-btn-${instanceId}" class="widget-button">
-        <span class="reset-icon">🗘</span>
+        <span class="reset-icon">⟲</span>
       </button>
       <div id="menu-content-${instanceId}">
         - Rotate with right click<br>
@@ -214,12 +194,9 @@
     </div>
   `;
   scriptTag.parentNode.appendChild(widgetContainer);
-
-  // Grab element references.
-  var gifPreview = document.getElementById('gif-preview-container-' + instanceId);
+  
+  // Grab element references using the unique IDs.
   var viewerContainer = document.getElementById('viewer-container-' + instanceId);
-  var previewImage = document.getElementById('preview-image-' + instanceId);
-  var closeBtn = document.getElementById('close-btn-' + instanceId);
   var fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
   var helpToggle = document.getElementById('help-toggle-' + instanceId);
   var resetCameraBtn = document.getElementById('reset-camera-btn-' + instanceId);
@@ -227,34 +204,16 @@
   var canvas = document.getElementById('canvas-' + instanceId);
   var progressDialog = document.getElementById('progress-dialog-' + instanceId);
   var progressIndicator = document.getElementById('progress-indicator-' + instanceId);
-
-  // Set the preview image if provided.
-  if (gifUrl) {
-    previewImage.src = gifUrl;
-  }
-
+  
   // --- Button Event Handlers ---
-
-  gifPreview.addEventListener('click', function() {
-    gifPreview.style.display = 'none';
-    viewerContainer.style.display = 'block';
-    initializeViewer();
-  });
-
-  closeBtn.addEventListener('click', function() {
-    if (document.fullscreenElement === widgetContainer) {
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      }
-    }
-    widgetContainer.classList.remove('fake-fullscreen');
-    viewerContainer.style.display = 'none';
-    gifPreview.style.display = 'block';
-  });
-
+  
   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) {
@@ -274,7 +233,7 @@
       }
     }
   });
-
+  
   document.addEventListener('fullscreenchange', function() {
     if (document.fullscreenElement === widgetContainer) {
       fullscreenToggle.textContent = '⇲';
@@ -282,12 +241,12 @@
       fullscreenToggle.textContent = '⇱';
     }
   });
-
+  
   helpToggle.addEventListener('click', function(e) {
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
-
+  
   resetCameraBtn.addEventListener('click', function() {
     console.log("Reset camera button clicked.");
     if (cameraInstance && initialCameraPosition && initialCameraRotation) {
@@ -301,48 +260,29 @@
       }
     }
   });
-
+  
   // --- Initialize the 3D PLY Viewer ---
   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 instance.
     const camera = new SPLAT.Camera();
-
-    // If the config provides a camera position, update the camera.
-    if (config.cameraPosition) {
-      if (Array.isArray(config.cameraPosition) && config.cameraPosition.length === 3) {
-        camera.position.set(
-          config.cameraPosition[0],
-          config.cameraPosition[1],
-          config.cameraPosition[2]
-        );
-      } else if (typeof config.cameraPosition === 'object') {
-        camera.position.set(
-          config.cameraPosition.x,
-          config.cameraPosition.y,
-          config.cameraPosition.z
-        );
-      }
-    }
-
     const controls = new SPLAT.OrbitControls(camera, canvas);
-
+  
     cameraInstance = camera;
     controlsInstance = controls;
     initialCameraPosition = camera.position.clone();
     initialCameraRotation = camera.rotation.clone();
-
+  
     canvas.style.background = "#FEFEFD";
     controls.maxZoom = maxZoom;
     controls.minZoom = minZoom;
     controls.minAngle = minAngle;
     controls.maxAngle = maxAngle;
-
+  
     controls.update();
-
+  
     try {
       await SPLAT.PLYLoader.LoadAsync(
         plyUrl,
@@ -356,19 +296,22 @@
       console.error("Error loading PLY file:", error);
       progressDialog.innerHTML = `<p style="color: red">Error loading model: ${error.message}</p>`;
     }
-
+  
     const frame = () => {
       controls.update();
       renderer.render(scene, camera);
       requestAnimationFrame(frame);
     };
-
+  
     const handleResize = () => {
       renderer.setSize(canvas.clientWidth, canvas.clientHeight);
     };
-
+  
     handleResize();
     window.addEventListener("resize", handleResize);
     requestAnimationFrame(frame);
   }
+  
+  // Initialize the viewer immediately.
+  initializeViewer();
 })();