Update interface.js

interface.js

@@ -80,12 +80,11 @@ const currentScriptTag = document.currentScript;
   widgetContainer.style.paddingBottom = aspectPercent;
   widgetContainer.setAttribute('data-original-aspect', aspectPercent);
 
-  // Conditionally include the “tooltips-toggle” button only if config.tooltips_url is defined and non-empty
+  // Add the 3D-viewer HTML + ⦿ toggle + tooltip panel + help panel
   const tooltipsButtonHTML = config.tooltips_url
     ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>`
     : '';
 
-  // Add the 3D-viewer HTML + ⦿ toggle + tooltip + help HTML
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
@@ -110,8 +109,6 @@ const currentScriptTag = document.currentScript;
       </div>
     </div>
   `;
-
-  // Append the widget container immediately after the <script> tag
   scriptTag.parentNode.appendChild(widgetContainer);
 
   // ─── 6. Grab references to new DOM elements ──────────────────────────────────
@@ -139,12 +136,14 @@ const currentScriptTag = document.currentScript;
     ? '- Cliquez sur ⦿ pour afficher/masquer les tooltips.<br>'
     : '';
 
-  // Fill help text with appropriate instructions
+  // Fill help text with appropriate instructions, including new lines for reset & fullscreen
   if (isMobile) {
     helpTextDiv.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>
+      - ⟲ Réinitialise la caméra.<br>
+      - ⇱ Passe en plein écran.<br>
       ${tooltipInstruction}
     `;
   } else {
@@ -152,19 +151,20 @@ const currentScriptTag = document.currentScript;
       - orbitez avec le clic droit<br>
       - zoomez avec la molette<br>
       - déplacez vous avec le clic gauche<br>
+      - ⟲ Réinitialise la caméra.<br>
+      - ⇱ Passe en plein écran.<br>
       ${tooltipInstruction}
     `;
   }
 
   // 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;
 
-  // Utility: hide tooltip and remove drag-hide listener
+  // Utility: hide tooltip panel
   function hideTooltipPanel() {
     if (dragHide) {
       viewerContainerElem.removeEventListener('pointermove', dragHide);
@@ -173,7 +173,7 @@ const currentScriptTag = document.currentScript;
     tooltipPanel.style.display = 'none';
   }
 
-  // Utility: hide instructions panel
+  // Utility: hide help panel
   function hideHelpPanel() {
     menuContent.style.display = 'none';
   }
@@ -345,172 +345,4 @@ const currentScriptTag = document.currentScript;
         applyFullscreenStyles();
       } else if (widgetContainer.mozRequestFullScreen) {
         widgetContainer.mozRequestFullScreen();
-        applyFullscreenStyles();
-      } else if (widgetContainer.msRequestFullscreen) {
-        widgetContainer.msRequestFullscreen();
-        applyFullscreenStyles();
-      } else {
-        applyFullscreenStyles();
-        widgetContainer.classList.add('fake-fullscreen');
-      }
-    }
-  }
-
-  function exitFullscreen() {
-    if (document.fullscreenElement === widgetContainer) {
-      if (document.exitFullscreen) {
-        document.exitFullscreen().catch(err => {
-          console.error("Error exiting fullscreen:", err);
-        });
-      } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-      }
-    }
-
-    widgetContainer.classList.remove('fake-fullscreen');
-    restoreOriginalStyles();
-    isFullscreen = false;
-  }
-
-  // ─── 10. Hook up event listeners ───────────────────────────────────────────
-
-  fullscreenToggle.addEventListener('click', () => {
-    hideTooltipPanel();
-    if (!isFullscreen) {
-      enterFullscreen();
-    } else {
-      exitFullscreen();
-    }
-  });
-
-  document.addEventListener('fullscreenchange', () => {
-    if (document.fullscreenElement === widgetContainer) {
-      isFullscreen = true;
-      applyFullscreenStyles();
-    } else if (isFullscreen) {
-      isFullscreen = false;
-      restoreOriginalStyles();
-    }
-  });
-  document.addEventListener('webkitfullscreenchange', () => {
-    if (document.webkitFullscreenElement === widgetContainer) {
-      isFullscreen = true;
-      applyFullscreenStyles();
-    } else if (isFullscreen) {
-      isFullscreen = false;
-      restoreOriginalStyles();
-    }
-  });
-  document.addEventListener('mozfullscreenchange', () => {
-    if (document.mozFullScreenElement === widgetContainer) {
-      isFullscreen = true;
-      applyFullscreenStyles();
-    } else if (isFullscreen) {
-      isFullscreen = false;
-      restoreOriginalStyles();
-    }
-  });
-  document.addEventListener('MSFullscreenChange', () => {
-    if (document.msFullscreenElement === widgetContainer) {
-      isFullscreen = true;
-      applyFullscreenStyles();
-    } else if (isFullscreen) {
-      isFullscreen = false;
-      restoreOriginalStyles();
-    }
-  });
-
-  helpToggle.addEventListener('click', (e) => {
-    hideTooltipPanel();
-    e.stopPropagation();
-    menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
-  });
-
-  helpCloseBtn.addEventListener('click', () => {
-    hideHelpPanel();
-  });
-
-  resetCameraBtn.addEventListener('click', () => {
-    hideTooltipPanel();
-    if (viewerModule.resetViewerCamera) {
-      viewerModule.resetViewerCamera();
-    }
-  });
-
-  // ⦿ toggle button: only if it exists in the DOM
-  let tooltipsVisible = !!config.showTooltipsDefault;
-  if (tooltipsToggleBtn && tooltipsToggleBtn.style.display !== 'none') {
-    if (!tooltipsVisible) {
-      tooltipsToggleBtn.style.opacity = '0.5';
-    }
-    tooltipsToggleBtn.addEventListener('click', () => {
-      hideTooltipPanel();
-      tooltipsVisible = !tooltipsVisible;
-      tooltipsToggleBtn.style.opacity = tooltipsVisible ? '1' : '0.5';
-      document.dispatchEvent(new CustomEvent('toggle-tooltips', { detail: { visible: tooltipsVisible } }));
-    });
-  }
-
-  // Close tooltip panel on button click
-  tooltipCloseBtn.addEventListener('click', () => {
-    hideTooltipPanel();
-  });
-
-  // Listen for tooltip-selection events and show tooltip panel
-  document.addEventListener('tooltip-selected', (evt) => {
-    const { title, description, imgUrl } = evt.detail;
-    tooltipTextDiv.innerHTML = `<strong>${title}</strong><br>${description}`;
-    if (imgUrl) {
-      tooltipImage.src = imgUrl;
-      tooltipImage.style.display = 'block';
-    } else {
-      tooltipImage.style.display = 'none';
-    }
-    tooltipPanel.style.display = 'flex';
-
-    // Attach drag-based hide listener
-    dragHide = (e) => {
-      if ((e.pointerType === 'mouse' && e.buttons !== 0) ||
-          (e.pointerType === 'touch')) {
-        hideTooltipPanel();
-      }
-    };
-    viewerContainerElem.addEventListener('pointermove', dragHide);
-  });
-
-  // Hide on any wheel event (zoom)
-  if (canvasEl) {
-    canvasEl.addEventListener('wheel', () => {
-      hideTooltipPanel();
-    }, { passive: true });
-  }
-
-  // Escape key also exits fullscreen
-  document.addEventListener('keydown', (e) => {
-    if ((e.key === 'Escape' || e.key === 'Esc') && isFullscreen) {
-      exitFullscreen();
-    }
-  });
-
-  // Window resize → resize PlayCanvas canvas
-  window.addEventListener('resize', () => {
-    if (isFullscreen && viewerModule.app) {
-      viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
-    } else if (viewerModule.app) {
-      const cw = viewerContainerElem.clientWidth;
-      const ch = viewerContainerElem.clientHeight;
-      viewerModule.app.resizeCanvas(cw, ch);
-    }
-  });
-
-  // Save “initial state” after a brief delay
-  setTimeout(() => {
-    saveCurrentState();
-    document.dispatchEvent(new CustomEvent('toggle-tooltips', { detail: { visible: tooltipsVisible } }));
-  }, 200);
-
-})();
+        applyFullscreen