Update js_scripts/index.js

js_scripts/index.js

@@ -1,3 +1,4 @@
+/* viewer.js */
 (async function() {
   // Retrieve the current script tag and load the JSON configuration file from the data-config attribute.
   const scriptTag = document.currentScript;
@@ -16,16 +17,6 @@
     return;
   }
 
-  // Load external CSS if css_url is provided in the config.
-  if (config.css_url) {
-    const linkEl = document.createElement('link');
-    linkEl.rel = 'stylesheet';
-    linkEl.href = config.css_url;
-    document.head.appendChild(linkEl);
-  } else {
-    console.warn("No css_url provided in config; external CSS file will not be loaded.");
-  }
-
   // --- Outer scope variables for camera state ---
   let cameraInstance = null;
   let controlsInstance = null;
@@ -40,7 +31,6 @@
   // Read configuration values from the JSON file.
   const gifUrl = config.gif_url;
   const plyUrl = config.ply_url;
-  const canvasBg = config.canvas_background || "#FEFEFD";
   const minZoom = parseFloat(config.minZoom || "0");
   const maxZoom = parseFloat(config.maxZoom || "20");
   const minAngle = parseFloat(config.minAngle || "0");
@@ -96,8 +86,10 @@
   const widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.classList.add('ply-widget-container');
-  // Set dynamic aspect ratio using a CSS custom property.
-  widgetContainer.style.setProperty('--aspect-percent', aspectPercent);
+  // Set inline style for aspect ratio.
+  widgetContainer.style.height = "0";
+  widgetContainer.style.paddingBottom = aspectPercent;
+
   widgetContainer.innerHTML = `
     <!-- GIF Preview Container -->
     <div id="gif-preview-container-${instanceId}" class="gif-preview-container">
@@ -215,12 +207,20 @@
     }
   });
   
-  // Listen for native fullscreen changes. When exiting fullscreen, reset camera.
+  // Listen for native fullscreen changes.
+  // Update the widget container styles so that in fullscreen
+  // the aspect ratio style is removed (height = 100% and padding-bottom = 0) and then reset the camera.
   document.addEventListener('fullscreenchange', function() {
     if (document.fullscreenElement === widgetContainer) {
       fullscreenToggle.textContent = '⇲';
+      widgetContainer.style.height = '100%';
+      widgetContainer.style.paddingBottom = '0';
+      resetCamera();
     } else {
       fullscreenToggle.textContent = '⇱';
+      // Restore the original aspect ratio style when not fullscreen.
+      widgetContainer.style.height = '0';
+      widgetContainer.style.paddingBottom = aspectPercent;
       resetCamera();
     }
   });
@@ -268,13 +268,13 @@
     }
   }
   
-  // Modified reset button now calls the resetCamera function.
+  // Reset button now calls the resetCamera function.
   resetCameraBtn.addEventListener('click', async function() {
     console.log("Reset camera button clicked.");
     resetCamera();
   });
   
-  // --- Add keydown listener to exit fullscreen with Esc (or Echap) ---
+  // Add keydown listener to exit fullscreen with Esc (or Echap)
   document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape' || e.key === 'Esc') {
       let wasFullscreen = false;
@@ -303,10 +303,7 @@
     const renderer = new SPLAT.WebGLRenderer(canvas);
     const scene = new SPLAT.Scene();
 
-    // Set the canvas background from JSON.
-    canvas.style.background = canvasBg;
-
-    // Construct the camera (no custom position since it's no longer in the JSON).
+    // Construct the camera.
     const camera = new SPLAT.Camera();
     
     // Construct OrbitControls with the chosen initial orbit parameters.
@@ -328,6 +325,7 @@
     initialCameraPosition = camera.position.clone();
     initialCameraRotation = camera.rotation.clone();
   
+    canvas.style.background = "#FEFEFD";
     controlsInstance.maxZoom = maxZoom;
     controlsInstance.minZoom = minZoom;
     controlsInstance.minAngle = minAngle;