Update interface.js

interface.js

@@ -91,18 +91,17 @@ const currentScriptTag = document.currentScript;
       <button id="reset-camera-btn-${instanceId}" class="widget-button reset-camera-btn">
         <span class="reset-icon">⟲</span>
       </button>
-      <button id="points-toggle-${instanceId}" class="widget-button points-toggle">⦿</button>
+      <button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>
       <div id="menu-content-${instanceId}" class="menu-content">
         <span id="help-close-${instanceId}" class="help-close">×</span>
-        <div class="help-text">
-        </div>
+        <div class="help-text"></div>
       </div>
     </div>
-    <div id="point-tooltip" class="point-tooltip" style="display: none;">
-      <div class="point-tooltip-content">
-        <span id="point-tooltip-close" class="point-tooltip-close">×</span>
-        <div id="point-tooltip-text" class="point-tooltip-text"></div>
-        <img id="point-tooltip-image" class="point-tooltip-image" src="" alt="" style="display: none;" />
+    <div id="tooltip-panel" class="tooltip-panel" style="display: none;">
+      <div class="tooltip-content">
+        <span id="tooltip-close" class="tooltip-close">×</span>
+        <div id="tooltip-text" class="tooltip-text"></div>
+        <img id="tooltip-image" class="tooltip-image" src="" alt="" style="display: none;" />
       </div>
     </div>
   `;
@@ -116,23 +115,23 @@ const currentScriptTag = document.currentScript;
   const helpToggle          = document.getElementById('help-toggle-' + instanceId);
   const helpCloseBtn        = document.getElementById('help-close-' + instanceId);
   const resetCameraBtn      = document.getElementById('reset-camera-btn-' + instanceId);
-  const pointsToggleBtn     = document.getElementById('points-toggle-' + instanceId);
+  const tooltipsToggleBtn   = document.getElementById('tooltips-toggle-' + instanceId);
   const menuContent         = document.getElementById('menu-content-' + instanceId);
   const helpTextDiv         = menuContent.querySelector('.help-text');
 
-  // Tooltip elements
-  const tooltipDiv       = document.getElementById('point-tooltip');
-  const tooltipTextDiv   = document.getElementById('point-tooltip-text');
-  const tooltipImage     = document.getElementById('point-tooltip-image');
-  const tooltipCloseBtn  = document.getElementById('point-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;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
-  // Conditionally include the French tooltip instruction line if points_url exists
-  const tooltipInstruction = config.points_url
-    ? '- Cliquez sur ⦿ pour afficher/masquer les points d’information.<br>'
+  // Conditionally include the French tooltip instruction line if tooltips_url exists
+  const tooltipInstruction = config.tooltips_url
+    ? '- Cliquez sur ⦿ pour afficher/masquer les tooltips.<br>'
     : '';
 
   // Fill help text with appropriate instructions
@@ -161,12 +160,12 @@ const currentScriptTag = document.currentScript;
   let dragHide = null;
 
   // Utility: hide tooltip and remove drag-hide listener
-  function hideTooltip() {
+  function hideTooltipPanel() {
     if (dragHide) {
       viewerContainerElem.removeEventListener('pointermove', dragHide);
       dragHide = null;
     }
-    tooltipDiv.style.display = 'none';
+    tooltipPanel.style.display = 'none';
   }
 
   // Utility: hide instructions panel
@@ -188,18 +187,18 @@ const currentScriptTag = document.currentScript;
   const canvasId = 'canvas-' + instanceId;
   const canvasEl = document.getElementById(canvasId);
 
-  // ─── 8. Conditional display of points-toggle button ─────────────────────────
-  if (!config.points_url) {
-    pointsToggleBtn.style.display = 'none';
+  // ─── 8. Conditional display of tooltips-toggle button ─────────────────────────
+  if (!config.tooltips_url) {
+    tooltipsToggleBtn.style.display = 'none';
   } else {
-    fetch(config.points_url)
+    fetch(config.tooltips_url)
       .then(resp => {
         if (!resp.ok) {
-          pointsToggleBtn.style.display = 'none';
+          tooltipsToggleBtn.style.display = 'none';
         }
       })
       .catch(() => {
-        pointsToggleBtn.style.display = 'none';
+        tooltipsToggleBtn.style.display = 'none';
       });
   }
 
@@ -373,7 +372,7 @@ const currentScriptTag = document.currentScript;
   // ─── 10. Hook up event listeners ────���──────────────────────────────────────
 
   fullscreenToggle.addEventListener('click', () => {
-    hideTooltip();
+    hideTooltipPanel();
     if (!isFullscreen) {
       enterFullscreen();
     } else {
@@ -419,7 +418,7 @@ const currentScriptTag = document.currentScript;
   });
 
   helpToggle.addEventListener('click', (e) => {
-    hideTooltip();
+    hideTooltipPanel();
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
@@ -429,48 +428,48 @@ const currentScriptTag = document.currentScript;
   });
 
   resetCameraBtn.addEventListener('click', () => {
-    hideTooltip();
+    hideTooltipPanel();
     if (viewerModule.resetViewerCamera) {
       viewerModule.resetViewerCamera();
     }
   });
 
   // ⦿ toggle button
-  let pointsVisible = !!config.showPointsDefault;
-  if (pointsToggleBtn.style.display !== 'none') {
-    if (!pointsVisible) {
-      pointsToggleBtn.style.opacity = '0.5';
+  let tooltipsVisible = !!config.showTooltipsDefault;
+  if (tooltipsToggleBtn.style.display !== 'none') {
+    if (!tooltipsVisible) {
+      tooltipsToggleBtn.style.opacity = '0.5';
     }
-    pointsToggleBtn.addEventListener('click', () => {
-      hideTooltip();
-      pointsVisible = !pointsVisible;
-      pointsToggleBtn.style.opacity = pointsVisible ? '1' : '0.5';
-      document.dispatchEvent(new CustomEvent('toggle-points', { detail: { visible: pointsVisible } }));
+    tooltipsToggleBtn.addEventListener('click', () => {
+      hideTooltipPanel();
+      tooltipsVisible = !tooltipsVisible;
+      tooltipsToggleBtn.style.opacity = tooltipsVisible ? '1' : '0.5';
+      document.dispatchEvent(new CustomEvent('toggle-tooltips', { detail: { visible: tooltipsVisible } }));
     });
   }
 
-  // Close tooltip on button click
+  // Close tooltip panel on button click
   tooltipCloseBtn.addEventListener('click', () => {
-    hideTooltip();
+    hideTooltipPanel();
   });
 
-  // Listen for point-selection events and show tooltip
-  document.addEventListener('point-selected', (evt) => {
-    const { text, imageUrl } = evt.detail;
-    tooltipTextDiv.textContent = text || "";
-    if (imageUrl) {
-      tooltipImage.src = imageUrl;
+  // 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';
     }
-    tooltipDiv.style.display = 'flex';
+    tooltipPanel.style.display = 'flex';
 
     // Attach drag-based hide listener
     dragHide = (e) => {
       if ((e.pointerType === 'mouse' && e.buttons !== 0) ||
           (e.pointerType === 'touch')) {
-        hideTooltip();
+        hideTooltipPanel();
       }
     };
     viewerContainerElem.addEventListener('pointermove', dragHide);
@@ -479,7 +478,7 @@ const currentScriptTag = document.currentScript;
   // Hide on any wheel event (zoom)
   if (canvasEl) {
     canvasEl.addEventListener('wheel', () => {
-      hideTooltip();
+      hideTooltipPanel();
     }, { passive: true });
   }
 
@@ -504,7 +503,7 @@ const currentScriptTag = document.currentScript;
   // Save “initial state” after a brief delay
   setTimeout(() => {
     saveCurrentState();
-    document.dispatchEvent(new CustomEvent('toggle-points', { detail: { visible: pointsVisible } }));
+    document.dispatchEvent(new CustomEvent('toggle-tooltips', { detail: { visible: tooltipsVisible } }));
   }, 200);
 
 })();