Update interface.js

interface.js

@@ -80,11 +80,11 @@ const currentScriptTag = document.currentScript;
   const widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.classList.add('ply-widget-container');
-  widgetContainer.style.height = "0"; // always zero; padding-bottom controls aspect
+  widgetContainer.style.height = "0"; // Height is controlled via padding-bottom
   widgetContainer.style.paddingBottom = aspectPercent;
   widgetContainer.setAttribute('data-original-aspect', aspectPercent);
 
-  // Add the 3D-viewer HTML + 📍 toggle + tooltip markup
+  // Add the 3D-viewer HTML + ⦿ toggle + tooltip markup + help panel container
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
@@ -127,29 +127,38 @@ const currentScriptTag = document.currentScript;
   // Device detection for help text
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
-  if (isMobile) {
-    menuContent.innerHTML = `
-      - Pour vous déplacer, glissez deux doigts sur l'écran.<br>
-      - Pour orbiter, utilisez un doigt.<br>
-      - Pour zoomer, pincez avec deux doigts.<br>
-      - Cliquez sur ⦿ pour afficher/masquer les points d’information.
-    `;
-  } else {
-    menuContent.innerHTML = `
-      - orbitez avec le clic droit<br>
-      - zoomez avec la molette<br>
-      - déplacez vous avec le clic gauche<br>
-      - Cliquez sur ⦿ pour afficher/masquer les points d’information.
+
+  // Populate instructions panel with close button + text, and show it by default
+  const instructionsText = isMobile
+    ? `
+      <div style="margin-top: 16px;">
+        - Pour vous déplacer, glissez deux doigts sur l'écran.<br>
+        - Pour orbiter, utilisez un doigt.<br>
+        - Pour zoomer, pincez avec deux doigts.<br>
+        - Cliquez sur ⦿ pour afficher/masquer les points d’information.
+      </div>
+    `
+    : `
+      <div style="margin-top: 16px;">
+        - orbitez avec le clic droit<br>
+        - zoomez avec la molette<br>
+        - déplacez vous avec le clic gauche<br>
+        - Cliquez sur ⦿ pour afficher/masquer les points d’information.
+      </div>
     `;
-  }
-  // Show instructions panel by default
-  menuContent.style.display = 'block';
+  menuContent.innerHTML = `
+    <button id="help-close-${instanceId}" class="help-close">×</button>
+    <div>${instructionsText}</div>
+  `;
+  menuContent.style.display = 'block'; // open by default
 
-  viewerContainerElem.style.display = 'block';
+  // Listener for the ✕ inside help panel
+  const helpCloseBtn = document.getElementById(`help-close-${instanceId}`);
+  helpCloseBtn.addEventListener('click', () => {
+    menuContent.style.display = 'none';
+  });
 
-  // Attach a ResizeObserver to track viewerContainer size changes (no debug logs)
-  const containerObserver = new ResizeObserver(() => { /* no-op */ });
-  containerObserver.observe(viewerContainerElem);
+  viewerContainerElem.style.display = 'block';
 
   // Variable to hold the drag-hide listener reference
   let dragHide = null;
@@ -266,10 +275,6 @@ const currentScriptTag = document.currentScript;
       viewerModule.app.resizeCanvas(vw, vh);
     }
 
-    // Dispatch custom event so viewer.js can also trigger its own resize handlers
-    const evt = new CustomEvent('viewerFullscreenExit', { detail: { instanceId } });
-    window.dispatchEvent(evt);
-
     // Reset fullscreen button icon back to “⇱”
     fullscreenToggle.textContent = '⇱';
 
@@ -417,7 +422,7 @@ const currentScriptTag = document.currentScript;
     }
   });
 
-  // 📍 toggle button (now “⦿”)
+  // ⦿ toggle button
   let pointsVisible = !!config.showPointsDefault;
   if (!pointsVisible) {
     pointsToggleBtn.style.opacity = '0.5';