Update index_sans_gif.js

index_sans_gif.js

@@ -1,10 +1,8 @@
 (async function() {
-  // Get the script tag and its config attribute.
+  // Retrieve the current script tag and the config URL from its data 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);
@@ -17,7 +15,7 @@
     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;
@@ -26,17 +24,11 @@
   
   // Generate a unique identifier for this widget instance.
   const instanceId = Math.random().toString(36).substr(2, 8);
-  
-  // Use configuration parameters from the JSON file.
+
+  // Read required URLs from the config.
+  var gifUrl = config.gif_url;
   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%";
@@ -55,7 +47,6 @@
       }
     }
   } 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;
@@ -63,10 +54,16 @@
       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 = `
@@ -87,9 +84,26 @@
       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: block;
+      display: none;
       position: absolute;
       top: 0;
       left: 0;
@@ -147,7 +161,11 @@
       align-items: center;
       justify-content: center;
     }
-    /* Button positions */
+    /* Positions: Close at top-left, fullscreen at top-right, help (instructions) below fullscreen */
+    #close-btn-${instanceId} {
+      top: 17px;
+      left: 15px;
+    }
     #fullscreen-toggle-${instanceId} {
       top: 17px;
       right: 15px;
@@ -156,33 +174,37 @@
       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;
     }
     .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 -->
     <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>
@@ -192,9 +214,12 @@
     </div>
   `;
   scriptTag.parentNode.appendChild(widgetContainer);
-  
+
   // Grab element references.
+  var gifPreview = document.getElementById('gif-preview-container-' + instanceId);
   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);
@@ -202,9 +227,31 @@
   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');
@@ -227,16 +274,20 @@
       }
     }
   });
-  
+
   document.addEventListener('fullscreenchange', function() {
-    fullscreenToggle.textContent = (document.fullscreenElement === widgetContainer) ? '⇲' : '⇱';
+    if (document.fullscreenElement === widgetContainer) {
+      fullscreenToggle.textContent = '⇲';
+    } else {
+      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) {
@@ -250,29 +301,48 @@
       }
     }
   });
-  
+
   // --- 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,
@@ -286,22 +356,19 @@
       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);
   }
-  
-  // Start the viewer.
-  initializeViewer();
 })();