Update index.js

index.js

@@ -1,19 +1,18 @@
 (function() {
-  // Helper function to get query parameters from the script's own src attribute.
+  // Helper: Get query parameters from THIS script’s src URL.
   function getScriptQueryParam(param) {
-    let params = new URLSearchParams("");
+    var params = new URLSearchParams("");
     if (document.currentScript && document.currentScript.src.indexOf('?') !== -1) {
-      const queryString = document.currentScript.src.split('?')[1];
+      var queryString = document.currentScript.src.split('?')[1];
       params = new URLSearchParams(queryString);
     } else {
-      // Fallback: check window.location if needed.
       params = new URLSearchParams(window.location.search);
     }
     return params.get(param);
   }
 
   // Inject CSS styles into the document head.
-  const styleEl = document.createElement('style');
+  var styleEl = document.createElement('style');
   styleEl.textContent = `
     /* Ply Viewer Widget Styles */
     #ply-widget-container {
@@ -70,7 +69,7 @@
       transition: transform 0.1s ease;
     }
     
-    /* Common button styling */
+    /* Button styling */
     .widget-button {
       width: 45px;
       height: 45px;
@@ -121,23 +120,24 @@
   `;
   document.head.appendChild(styleEl);
 
-  // Create the widget container and its inner HTML.
-  const widgetContainer = document.createElement('div');
+  // Create the widget container and set its inner HTML.
+  var widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container';
   widgetContainer.innerHTML = `
-    <!-- GIF Preview Container (initially shown) -->
+    <!-- GIF Preview Container (shown initially) -->
     <div id="gif-preview-container">
-      <img id="preview-image" alt="Preview">
+      <img id="preview-image" alt="Preview" crossorigin="anonymous">
     </div>
     
-    <!-- Viewer Container (initially hidden) -->
+    <!-- Viewer Container (hidden initially) -->
     <div id="viewer-container" class="zoomable-iframe-widget">
       <div class="iframe-container">
         <object
           id="viewer-object"
           data=""
           type="text/html"
-          class="gsplat">
+          class="gsplat"
+          crossorigin="anonymous">
         </object>
       </div>
       
@@ -154,34 +154,37 @@
   `;
   document.body.appendChild(widgetContainer);
 
-  // Element references.
-  const gifPreview = document.getElementById('gif-preview-container');
-  const viewerContainer = document.getElementById('viewer-container');
-  const iframeContainer = viewerContainer.querySelector('.iframe-container');
-  const contentObject = viewerContainer.querySelector('.gsplat');
-  const fullscreenToggle = viewerContainer.querySelector('.fullscreen-toggle');
-  const helpToggle = viewerContainer.querySelector('.help-toggle');
-  const closeToggle = viewerContainer.querySelector('.close-toggle');
-  const helpText = viewerContainer.querySelector('.help-text');
-  const previewImage = document.getElementById("preview-image");
+  // Grab element references.
+  var gifPreview = document.getElementById('gif-preview-container');
+  var viewerContainer = document.getElementById('viewer-container');
+  var iframeContainer = viewerContainer.querySelector('.iframe-container');
+  var contentObject = viewerContainer.querySelector('.gsplat');
+  var fullscreenToggle = viewerContainer.querySelector('.fullscreen-toggle');
+  var helpToggle = viewerContainer.querySelector('.help-toggle');
+  var closeToggle = viewerContainer.querySelector('.close-toggle');
+  var helpText = viewerContainer.querySelector('.help-text');
+  var previewImage = document.getElementById("preview-image");
 
-  // Get the gif and ply URLs from the script's query parameters.
-  const gifUrl = getScriptQueryParam("gif_url");
-  const plyUrl = getScriptQueryParam("ply_url");
+  // Read the URLs from the script’s query parameters.
+  var gifUrl = getScriptQueryParam("gif_url");
+  var plyUrl = getScriptQueryParam("ply_url");
 
-  // Update the elements.
-  if (gifUrl) previewImage.src = gifUrl;
-  if (plyUrl) contentObject.data = plyUrl;
+  if (gifUrl) {
+    previewImage.src = gifUrl;
+  }
+  if (plyUrl) {
+    contentObject.data = plyUrl;
+  }
   
-  let scale = 1;
+  var scale = 1;
 
-  // When the user clicks on the GIF preview, show the viewer.
+  // On clicking the preview, show the 3D viewer.
   gifPreview.addEventListener('click', function() {
     gifPreview.style.display = 'none';
     viewerContainer.style.display = 'block';
   });
 
-  // Toggle help text when clicking the "?" button.
+  // Toggle the help text when clicking the "?" button.
   helpToggle.addEventListener('click', function(event) {
     helpText.style.display = (helpText.style.display === 'none' || helpText.style.display === '')
       ? 'block'
@@ -189,7 +192,7 @@
     event.stopPropagation();
   });
 
-  // The "X" button toggles back to the GIF preview and exits fullscreen if active.
+  // The "X" button returns to the preview and exits fullscreen if active.
   closeToggle.addEventListener('click', function() {
     if (document.fullscreenElement === widgetContainer) {
       if (document.exitFullscreen) {
@@ -205,27 +208,64 @@
     viewerContainer.style.display = 'none';
     helpText.style.display = 'none';
     gifPreview.style.display = 'block';
-    // Re-enable page scrolling when the viewer is closed.
     document.body.style.overflow = 'auto';
   });
 
-  // Disable page scrolling when hovering over the ply viewer.
-  viewerContainer.addEventListener('mouseenter', () => {
+  // Disable page scrolling while hovering over the viewer.
+  viewerContainer.addEventListener('mouseenter', function() {
     document.body.style.overflow = 'hidden';
   });
-  viewerContainer.addEventListener('mouseleave', () => {
+  viewerContainer.addEventListener('mouseleave', function() {
     document.body.style.overflow = 'auto';
   });
 
-  // Intercept wheel events on the viewer container to prevent parent scrolling,
-  // while still allowing zoom functionality.
-  iframeContainer.addEventListener('wheel', (event) => {
+  // Enable zooming with the mouse wheel.
+  iframeContainer.addEventListener('wheel', function(event) {
     event.preventDefault();
     event.stopPropagation();
-    const zoomSpeed = 0.1;
+    var zoomSpeed = 0.1;
     if (event.deltaY < 0) {
       scale += zoomSpeed;
     } else {
       scale -= zoomSpeed;
     }
-    // Limit scale betwe
+    scale = Math.min(Math.max(scale, 0.5), 3);
+    contentObject.style.transform = 'scale(' + scale + ')';
+  }, { passive: false });
+
+  // Toggle fullscreen on clicking the fullscreen button.
+  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.fullscreenElement === widgetContainer) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      }
+    }
+  });
+
+  // Change the fullscreen button icon on fullscreen change.
+  document.addEventListener('fullscreenchange', function() {
+    if (document.fullscreenElement === widgetContainer) {
+      fullscreenToggle.textContent = '⇲';
+    } else {
+      fullscreenToggle.textContent = '⇱';
+    }
+  });
+})();