Update interface.js

interface.js

@@ -1,24 +1,11 @@
 // interface.js
 // ==============================
-// Robust version with iOS/Safari debug alerts
-// ==============================
 
+// Store a reference to the <script> tag that loaded this file
 const currentScriptTag = document.currentScript;
 
-function isIOSorSafari() {
-  const ua = navigator.userAgent;
-  return (
-    /iPad|iPhone|iPod/.test(ua) ||
-    (/Safari/.test(ua) && !/Chrome/.test(ua) && !/Android/.test(ua))
-  );
-}
-function logAndAlert(msg) {
-  console.log(msg);
-  if (isIOSorSafari()) alert(msg);
-}
-
 (async function() {
-  // ─── 1. Locate the <script> and read data-config ───────────────
+  // ─── 1. Locate the <script> and read data-config ───────────────────────────────
   let scriptTag = currentScriptTag;
   if (!scriptTag) {
     const scripts = document.getElementsByTagName('script');
@@ -33,21 +20,18 @@ function logAndAlert(msg) {
     }
   }
 
-  // Defensive fetch with CORS for config
   const configUrl = scriptTag.getAttribute('data-config');
   let config = {};
   if (configUrl) {
     try {
-      logAndAlert("[interface.js] Fetching config: " + configUrl);
-      const response = await fetch(configUrl, {mode: "cors"});
+      const response = await fetch(configUrl);
       config = await response.json();
-      logAndAlert("[interface.js] Config loaded");
     } catch (error) {
-      logAndAlert("Error loading config file: " + error);
+      console.error("Error loading config file:", error);
       return;
     }
   } else {
-    logAndAlert("No config file provided. Please set a data-config attribute on the <script> tag.");
+    console.error("No config file provided. Please set a data-config attribute on the <script> tag.");
     return;
   }
 
@@ -100,6 +84,7 @@ function logAndAlert(msg) {
     ? <button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>
     : '';
 
+  // Add the 3D-viewer HTML + tooltip + help HTML
   widgetContainer.innerHTML = 
     <div id="viewer-container-${instanceId}" class="viewer-container">
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
@@ -125,6 +110,7 @@ function logAndAlert(msg) {
     </div>
   ;
 
+  // Append the widget container immediately after the <script> tag
   scriptTag.parentNode.appendChild(widgetContainer);
 
   // ─── 6. Grab references to new DOM elements ──────────────────────────────────
@@ -136,10 +122,12 @@ function logAndAlert(msg) {
   const tooltipsToggleBtn   = document.getElementById('tooltips-toggle-' + instanceId);
   const menuContent         = document.getElementById('menu-content-' + instanceId);
   const helpTextDiv         = menuContent.querySelector('.help-text');
-  const tooltipPanel        = document.getElementById('tooltip-panel');
-  const tooltipTextDiv      = document.getElementById('tooltip-text');
-  const tooltipImage        = document.getElementById('tooltip-image');
-  const tooltipCloseBtn     = document.getElementById('tooltip-close');
+
+  // Tooltip panel elements
+  const tooltipPanel       = document.getElementById('tooltip-panel');
+  const tooltipTextDiv     = document.getElementById('tooltip-text');
+  const tooltipImage       = document.getElementById('tooltip-image');
+  const tooltipCloseBtn    = document.getElementById('tooltip-close');
 
   // ─── 6a. Detect mobile vs. desktop ────────────────────────────────────────────
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
@@ -150,6 +138,7 @@ function logAndAlert(msg) {
     ? '- Cliquez sur ⦿ pour afficher/masquer les tooltips.<br>'
     : '';
 
+  // Fill help text with instructions plus the two new French lines
   if (isMobile) {
     helpTextDiv.innerHTML = 
       - Pour vous déplacer, glissez deux doigts sur l'écran.<br>
@@ -170,10 +159,14 @@ function logAndAlert(msg) {
     ;
   }
 
+  // Ensure instructions panel is visible by default
   menuContent.style.display = 'block';
   viewerContainerElem.style.display = 'block';
 
+  // Variable to hold the drag-hide listener reference
   let dragHide = null;
+
+  // Utilities to hide panels
   function hideTooltipPanel() {
     if (dragHide) {
       viewerContainerElem.removeEventListener('pointermove', dragHide);
@@ -181,41 +174,42 @@ function logAndAlert(msg) {
     }
     tooltipPanel.style.display = 'none';
   }
-  function hideHelpPanel() { menuContent.style.display = 'none'; }
+  function hideHelpPanel() {
+    menuContent.style.display = 'none';
+  }
 
-  // ─── 7. Dynamically load viewer.js ─────────────────────────────
+  // ─── 7. Dynamically load viewer.js ─────────────────────────────────────────
   let viewerModule;
   try {
-    logAndAlert("[interface.js] Loading viewer.js...");
     viewerModule = await import('https://mikafil-viewer-gs.static.hf.space/viewer.js');
     await viewerModule.initializeViewer(config, instanceId);
-    logAndAlert("[interface.js] viewer.js initialized.");
   } catch (err) {
-    logAndAlert("Failed to load viewer.js or initialize the 3D viewer: " + err);
+    console.error("Failed to load viewer.js or initialize the 3D viewer:", err);
     return;
   }
 
   const canvasId = 'canvas-' + instanceId;
   const canvasEl = document.getElementById(canvasId);
 
-  // ─── 8. Conditional display of tooltips-toggle button ─────────
+  // ─── 8. Conditional display of tooltips-toggle button ─────────────────────────
   if (tooltipsToggleBtn) {
     if (!config.tooltips_url) {
       tooltipsToggleBtn.style.display = 'none';
     } else {
-      // Defensive CORS for tooltips.json
-      fetch(config.tooltips_url, {mode:"cors"})
+      fetch(config.tooltips_url)
         .then(resp => { if (!resp.ok) tooltipsToggleBtn.style.display = 'none'; })
         .catch(() => { tooltipsToggleBtn.style.display = 'none'; });
     }
   }
 
-  // ─── 9. Fullscreen / state-preservation logic ────────────────
+  // ─── 9. Fullscreen / state-preservation logic ───────────────────────────────
   let isFullscreen = false;
   let savedState = null;
 
   function saveCurrentState() {
     if (isFullscreen) return;
+    const computedWidget = window.getComputedStyle(widgetContainer);
+    const computedViewer = window.getComputedStyle(viewerContainerElem);
     const originalAspect = widgetContainer.getAttribute('data-original-aspect') || aspectPercent;
     savedState = {
       widget: {
@@ -266,6 +260,7 @@ function logAndAlert(msg) {
         viewerContainerElem.clientHeight
       );
     }
+
     savedState = null;
   }
 
@@ -322,7 +317,7 @@ function logAndAlert(msg) {
     isFullscreen = false;
   }
 
-  // ─── 10. Hook up event listeners ──────────────
+  // ─── 10. Hook up event listeners ───────────────────────────────────────────
   fullscreenToggle.addEventListener('click', () => {
     hideTooltipPanel();
     isFullscreen ? exitFullscreen() : enterFullscreen();
@@ -398,6 +393,7 @@ function logAndAlert(msg) {
     }
   });
 
+  // Save “initial state” after a brief delay
   setTimeout(() => {
     saveCurrentState();
     document.dispatchEvent(new CustomEvent('toggle-tooltips', { detail: { visible: !!config.showTooltipsDefault } }));