Update interface.js

interface.js

@@ -5,7 +5,7 @@
 const currentScriptTag = document.currentScript;
 
 (async function() {
-  // ─── 1. Locate the <script> and load data-config ───────────────────────────────
+  // ─── 1. Locate the <script> and read data-config ───────────────────────────────
   let scriptTag = currentScriptTag;
   if (!scriptTag) {
     const scripts = document.getElementsByTagName('script');
@@ -23,16 +23,17 @@ const currentScriptTag = document.currentScript;
     console.error("No config file provided. Please set a data-config attribute on the <script> tag.");
     return;
   }
+
   let config = {};
   try {
     const resp = await fetch(configUrl);
     config = await resp.json();
-  } catch (error) {
-    console.error("Error loading config file:", error);
+  } catch (err) {
+    console.error("Error loading config file:", err);
     return;
   }
 
-  // ─── 2. Optionally inject CSS ────────────────────────────────────────────────
+  // ─── 2. Conditionally inject CSS ───────────────────────────────────────────────
   if (config.css_url) {
     const linkEl = document.createElement('link');
     linkEl.rel  = "stylesheet";
@@ -40,36 +41,55 @@ const currentScriptTag = document.currentScript;
     document.head.appendChild(linkEl);
   }
 
-  // ─── 3. Generate a unique instanceId ─────────────────────────────────────────
+  // ─── 3. Unique widget instance ID ───────────────────────────────────────────────
   const instanceId = Math.random().toString(36).substr(2, 8);
 
-  // ─── 4. Create the widget container ──────────────────────────────────────────
+  // ─── 4. Compute aspect ratio padding ────────────────────────────────────────────
+  let aspectPercent = "100%";
+  if (config.aspect) {
+    if (config.aspect.includes(":")) {
+      const [w, h] = config.aspect.split(":").map(parseFloat);
+      if (w > 0 && h > 0) aspectPercent = (h / w * 100) + "%";
+    } else if (+config.aspect > 0) {
+      aspectPercent = (100 / +config.aspect) + "%";
+    }
+  } else {
+    const parent = scriptTag.parentNode;
+    if (parent.offsetWidth && parent.offsetHeight) {
+      aspectPercent = (parent.offsetHeight / parent.offsetWidth * 100) + "%";
+    }
+  }
+
+  // ─── 5. Create container & inner HTML ──────────────────────────────────────────
   const widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.classList.add('ply-widget-container');
-  document.body.appendChild(widgetContainer);
+  widgetContainer.style.height        = "0";
+  widgetContainer.style.paddingBottom = aspectPercent;
+  widgetContainer.setAttribute('data-original-aspect', aspectPercent);
+
+  // Conditionally include tooltips-toggle only if a URL is provided
+  const tooltipBtn = config.tooltips_url
+    ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>`
+    : '';
 
-  // ─── 5. Build inner HTML, including the progress dialog ─────────────────────
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
-      <!-- Progress dialog must exist for viewer.js -->
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
         <progress id="progress-indicator-${instanceId}" max="100" value="0"></progress>
       </div>
     </div>
 
-    <!-- Control buttons -->
     <button id="fullscreen-toggle-${instanceId}" class="widget-button fullscreen-toggle">⇱</button>
     <button id="help-toggle-${instanceId}"      class="widget-button help-toggle">?</button>
     <button id="reset-camera-btn-${instanceId}" class="widget-button reset-camera-btn">⟲</button>
-    ${config.tooltips_url ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>` : ''}
+    ${tooltipBtn}
 
-    <!-- Help panel -->
     <div id="menu-content-${instanceId}" class="menu-content" style="display: block;">
       <span id="help-close-${instanceId}" class="help-close">×</span>
       <div class="help-text">
         ${(/iPad|iPhone|iPod/.test(navigator.userAgent) ? `
-          - Pour vous déplacer, glissez deux doigts.<br>
+          - Pour vous déplacer, glissez deux doigts sur l'écran.<br>
           - Pour orbiter, un doigt.<br>
           - Pour zoomer, pincez.<br>
         ` : `
@@ -83,7 +103,6 @@ const currentScriptTag = document.currentScript;
       </div>
     </div>
 
-    <!-- Tooltip panel -->
     <div id="tooltip-panel" class="tooltip-panel" style="display: none;">
       <span id="tooltip-close" class="tooltip-close">×</span>
       <div id="tooltip-text" class="tooltip-text"></div>
@@ -91,10 +110,13 @@ const currentScriptTag = document.currentScript;
     </div>
   `;
 
-  // ─── 6. Grab elements and hook up any UI listeners ──────────────────────────
-  // (your existing click/toggle/drag-hide logic remains here…)
+  // Insert into the page
+  scriptTag.parentNode.appendChild(widgetContainer);
+
+  // ─── 6. Grab elements & hook up listeners ─────────────────────────────────────
+  // (all your existing listener code goes here, unchanged)
 
-  // ─── 7. Now dynamic-import viewer.js ────────────────────────────────────────
+  // ─── 7. Load and initialize PlayCanvas viewer ─────────────────────────────────
   try {
     const viewerModule = await import('./viewer.js');
     await viewerModule.initializeViewer(config, instanceId);
@@ -102,6 +124,6 @@ const currentScriptTag = document.currentScript;
     console.error("Failed to load viewer.js or initialize the 3D viewer:", err);
   }
 
-  // ─── 8. (rest of your interface.js code…) ───────────────────────────────────
+  // ─── 8. (rest of interface.js…) ───────────────────────────────────────────────
 
 })();