Update interface.js

interface.js

@@ -47,10 +47,7 @@ const currentScriptTag = document.currentScript;
   // ─── 3. Generate a unique instanceId for this widget ───────────────────────────
   const instanceId = Math.random().toString(36).substr(2, 8);
 
-  // ─── 4. Determine whether aspect was provided in config ────────────────────────
-  const hasConfigAspect = !!config.aspect;
-
-  // ─── 5. Compute the aspect ratio (padding-bottom %) ────────────────────────────
+  // ─── 4. Compute the aspect ratio (padding-bottom %) ────────────────────────────
   let aspectPercent = "100%";
   if (config.aspect) {
     if (config.aspect.includes(":")) {
@@ -67,24 +64,23 @@ const currentScriptTag = document.currentScript;
       }
     }
   } else {
-    // No config.aspect → compute from parent container
     const parentContainer = scriptTag.parentNode;
-    const containerWidth  = parentContainer.clientWidth;
-    const containerHeight = parentContainer.clientHeight;
+    const containerWidth  = parentContainer.offsetWidth;
+    const containerHeight = parentContainer.offsetHeight;
     if (containerWidth > 0 && containerHeight > 0) {
       aspectPercent = (containerHeight / containerWidth * 100) + "%";
     }
   }
 
-  // ─── 6. Create the widget container (no GIF preview, no close button) ───────────
+  // ─── 5. Create the widget container (no GIF preview, no close button) ───────────
   const widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.classList.add('ply-widget-container');
-  widgetContainer.style.height = "0"; // Height is controlled via padding-bottom
+  widgetContainer.style.height = "0";
   widgetContainer.style.paddingBottom = aspectPercent;
   widgetContainer.setAttribute('data-original-aspect', aspectPercent);
 
-  // Add the 3D-viewer HTML + ⦿ toggle + tooltip markup + help panel container
+  // Add the 3D-viewer HTML + 📍 toggle + tooltip markup
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
@@ -110,7 +106,7 @@ const currentScriptTag = document.currentScript;
   // Append the widget container immediately after the <script> tag
   scriptTag.parentNode.appendChild(widgetContainer);
 
-  // ─── 7. Grab references to new DOM elements ──────────────────────────────────
+  // ─── 6. Grab references to new DOM elements ──────────────────────────────────
   const viewerContainerElem = document.getElementById('viewer-container-' + instanceId);
   const fullscreenToggle    = document.getElementById('fullscreen-toggle-' + instanceId);
   const helpToggle          = document.getElementById('help-toggle-' + instanceId);
@@ -127,36 +123,21 @@ 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);
-
-  // 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>
+  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.
     `;
-  menuContent.innerHTML = `
-    <button id="help-close-${instanceId}" class="help-close">×</button>
-    <div>${instructionsText}</div>
-  `;
-  menuContent.style.display = 'block'; // open by default
-
-  // Listener for the ✕ inside help panel
-  const helpCloseBtn = document.getElementById(`help-close-${instanceId}`);
-  helpCloseBtn.addEventListener('click', () => {
-    menuContent.style.display = 'none';
-  });
+  } 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.
+    `;
+  }
 
   viewerContainerElem.style.display = 'block';
 
@@ -165,14 +146,16 @@ const currentScriptTag = document.currentScript;
 
   // Utility: hide tooltip and remove drag-hide listener
   function hideTooltip() {
+    // Remove drag-hide listener if present
     if (dragHide) {
       viewerContainerElem.removeEventListener('pointermove', dragHide);
       dragHide = null;
     }
+    // Hide tooltip DOM
     tooltipDiv.style.display = 'none';
   }
 
-  // ─── 8. Dynamically load viewer.js ─────────────────────────────────────────
+  // ─── 7. Dynamically load viewer.js ─────────────────────────────────────────
   let viewerModule;
   try {
     viewerModule = await import('./viewer.js');
@@ -186,6 +169,23 @@ const currentScriptTag = document.currentScript;
   const canvasId = 'canvas-' + instanceId;
   const canvasEl = document.getElementById(canvasId);
 
+  // ─── 8. Conditional display of points-toggle button ─────────────────────────
+  if (!config.points_url) {
+    // No points_url provided → hide button
+    pointsToggleBtn.style.display = 'none';
+  } else {
+    // Verify that points.json is reachable
+    fetch(config.points_url)
+      .then(resp => {
+        if (!resp.ok) {
+          pointsToggleBtn.style.display = 'none';
+        }
+      })
+      .catch(() => {
+        pointsToggleBtn.style.display = 'none';
+      });
+  }
+
   // ─── 9. Fullscreen / state-preservation logic ───────────────────────────────
   let isFullscreen = false;
   let savedState = null;
@@ -201,21 +201,21 @@ const currentScriptTag = document.currentScript;
 
     savedState = {
       widget: {
-        position:      widgetContainer.style.position,
-        top:           widgetContainer.style.top,
-        left:          widgetContainer.style.left,
-        width:         widgetContainer.style.width,
-        height:        widgetContainer.style.height,
-        maxWidth:      widgetContainer.style.maxWidth,
-        maxHeight:     widgetContainer.style.maxHeight,
+        position:     widgetContainer.style.position,
+        top:          widgetContainer.style.top,
+        left:         widgetContainer.style.left,
+        width:        widgetContainer.style.width,
+        height:       widgetContainer.style.height,
+        maxWidth:     widgetContainer.style.maxWidth,
+        maxHeight:    widgetContainer.style.maxHeight,
         paddingBottom: widgetContainer.style.paddingBottom || originalAspect,
-        margin:        widgetContainer.style.margin,
+        margin:       widgetContainer.style.margin,
         aspectPercent: originalAspect,
         calculatedAspect: calculatedRatio,
-        computedWidth: computedWidget.width,
-        computedHeight: computedWidget.height,
-        offsetWidth:  containerWidth,
-        offsetHeight: containerHeight
+        computedWidth:    computedWidget.width,
+        computedHeight:   computedWidget.height,
+        offsetWidth:     containerWidth,
+        offsetHeight:    containerHeight
       },
       viewer: {
         borderRadius: viewerContainerElem.style.borderRadius,
@@ -228,19 +228,16 @@ const currentScriptTag = document.currentScript;
 
   function restoreOriginalStyles() {
     if (!savedState) return;
-    let aspectToUse;
-
-    if (hasConfigAspect) {
+    let aspectToUse = aspectPercent;
+    if (savedState.widget.offsetWidth && savedState.widget.offsetHeight) {
+      const actualRatio = (savedState.widget.offsetHeight / savedState.widget.offsetWidth * 100) + '%';
+      aspectToUse = actualRatio;
+    } else if (savedState.widget.calculatedAspect) {
+      aspectToUse = savedState.widget.calculatedAspect;
+    } else if (savedState.widget.aspectPercent) {
       aspectToUse = savedState.widget.aspectPercent;
-    } else {
-      const parentContainer = widgetContainer.parentNode;
-      const containerWidth  = parentContainer.clientWidth;
-      const containerHeight = parentContainer.clientHeight;
-      if (containerWidth > 0 && containerHeight > 0) {
-        aspectToUse = (containerHeight / containerWidth * 100) + "%";
-      } else {
-        aspectToUse = savedState.widget.aspectPercent;
-      }
+    } else if (savedState.widget.paddingBottom) {
+      aspectToUse = savedState.widget.paddingBottom;
     }
 
     widgetContainer.style.position     = savedState.widget.position    || "";
@@ -251,7 +248,6 @@ const currentScriptTag = document.currentScript;
     widgetContainer.style.maxWidth     = savedState.widget.maxWidth    || "";
     widgetContainer.style.maxHeight    = savedState.widget.maxHeight   || "";
     widgetContainer.style.paddingBottom= aspectToUse;
-    widgetContainer.setAttribute('data-original-aspect', aspectToUse);
     widgetContainer.style.margin       = savedState.widget.margin      || "";
     widgetContainer.style.border       = savedState.widget.border      || "";
     widgetContainer.style.borderRadius = savedState.widget.borderRadius|| "";
@@ -268,16 +264,12 @@ const currentScriptTag = document.currentScript;
     viewerContainerElem.style.borderRadius= savedState.viewer.borderRadius || "";
     viewerContainerElem.style.border      = savedState.viewer.border       || "";
 
-    // Resize PlayCanvas immediately to container dims
     if (viewerModule.app) {
-      const vw = viewerContainerElem.clientWidth;
-      const vh = viewerContainerElem.clientHeight;
-      viewerModule.app.resizeCanvas(vw, vh);
+      const cw = viewerContainerElem.clientWidth;
+      const ch = viewerContainerElem.clientHeight;
+      viewerModule.app.resizeCanvas(cw, ch);
     }
 
-    // Reset fullscreen button icon back to “⇱”
-    fullscreenToggle.textContent = '⇱';
-
     savedState = null;
   }
 
@@ -422,17 +414,19 @@ const currentScriptTag = document.currentScript;
     }
   });
 
-  // ⦿ toggle button
+  // 📍 toggle button (⦿)
   let pointsVisible = !!config.showPointsDefault;
-  if (!pointsVisible) {
-    pointsToggleBtn.style.opacity = '0.5';
+  if (pointsToggleBtn.style.display !== 'none') {
+    if (!pointsVisible) {
+      pointsToggleBtn.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 } }));
+    });
   }
-  pointsToggleBtn.addEventListener('click', () => {
-    hideTooltip();
-    pointsVisible = !pointsVisible;
-    pointsToggleBtn.style.opacity = pointsVisible ? '1' : '0.5';
-    document.dispatchEvent(new CustomEvent('toggle-points', { detail: { visible: pointsVisible } }));
-  });
 
   // Close tooltip on button click
   tooltipCloseBtn.addEventListener('click', () => {
@@ -477,26 +471,14 @@ const currentScriptTag = document.currentScript;
     }
   });
 
-  // Window resize → adjust aspectRatios and resize PlayCanvas
+  // Window resize → resize PlayCanvas canvas
   window.addEventListener('resize', () => {
-    if (!hasConfigAspect && !isFullscreen) {
-      const parentContainer = widgetContainer.parentNode;
-      const cw = parentContainer.clientWidth;
-      const ch = parentContainer.clientHeight;
-      if (cw > 0 && ch > 0) {
-        const newPercent = (ch / cw * 100) + "%";
-        widgetContainer.style.paddingBottom = newPercent;
-        widgetContainer.setAttribute('data-original-aspect', newPercent);
-      }
-    }
-    if (viewerModule.app) {
-      if (isFullscreen) {
-        viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
-      } else {
-        const vcw = viewerContainerElem.clientWidth;
-        const vch = viewerContainerElem.clientHeight;
-        viewerModule.app.resizeCanvas(vcw, vch);
-      }
+    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);
     }
   });
 
@@ -505,4 +487,5 @@ const currentScriptTag = document.currentScript;
     saveCurrentState();
     document.dispatchEvent(new CustomEvent('toggle-points', { detail: { visible: pointsVisible } }));
   }, 200);
+
 })();