Update interface.js

interface.js

@@ -1,26 +1,30 @@
 // interface.js
 // ==============================
 
-(async function () {
-  // 1) Récupère toutes les balises <script src=".../interface.js" data-config="...">
-  const scriptTags = Array.from(
-    document.querySelectorAll('script[src*="interface.js"][data-config]')
-  );
-  if (!scriptTags.length) return;
-
-  // 2) Initialise un viewer par balise
-  for (const scriptTag of scriptTags) {
-    try {
-      await initViewerInstance(scriptTag);
-    } catch (e) {
-      // Évite qu'une erreur d'instance empêche les autres de se créer
-      console.error("[interface.js] Instance init error:", e);
+// Évite les doubles initialisations si le script est inclus plusieurs fois
+if (!window.__PLY_IFACE_INIT_DONE__) {
+  window.__PLY_IFACE_INIT_DONE__ = true;
+
+  (async function () {
+    // Toutes les balises <script type="module" src=".../interface.js" data-config="...">
+    const scriptTags = Array.from(
+      document.querySelectorAll('script[type="module"][src*="interface.js"][data-config]')
+    );
+    if (!scriptTags.length) return;
+
+    // Une instance par balise
+    for (const scriptTag of scriptTags) {
+      try {
+        await initViewerInstance(scriptTag);
+      } catch (e) {
+        console.error("[interface.js] Instance init error:", e);
+      }
     }
-  }
-})();
+  })();
+}
 
 async function initViewerInstance(scriptTag) {
-  // --- Lire la config ---
+  // 1) Lire la config
   const configUrl = scriptTag.getAttribute("data-config");
   if (!configUrl) return;
 
@@ -33,11 +37,26 @@ async function initViewerInstance(scriptTag) {
     return;
   }
 
-  // --- Injecter la CSS si nécessaire (une seule fois par href absolu) ---
-  if (config.css_url) {
-    const already = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
-      .some(l => l.href === config.css_url || l.getAttribute("href") === config.css_url);
-    if (!already) {
+  // 2) CSS (une seule fois par href)
+  try {
+    if (
+      config.css_url &&
+      !document.querySelector(
+        `link[rel="stylesheet"][href="${
+          (window.CSS && CSS.escape) ? CSS.escape(config.css_url) : config.css_url
+        }"]`
+      )
+    ) {
+      const linkEl = document.createElement("link");
+      linkEl.rel = "stylesheet";
+      linkEl.href = config.css_url;
+      document.head.appendChild(linkEl);
+    }
+  } catch {
+    if (
+      config.css_url &&
+      !document.querySelector(`link[rel="stylesheet"][href="${config.css_url}"]`)
+    ) {
       const linkEl = document.createElement("link");
       linkEl.rel = "stylesheet";
       linkEl.href = config.css_url;
@@ -45,35 +64,31 @@ async function initViewerInstance(scriptTag) {
     }
   }
 
-  // --- ID unique pour l’instance ---
+  // 3) ID unique
   const instanceId = Math.random().toString(36).substr(2, 8);
 
-  // --- Calcul de l’aspect ratio ---
+  // 4) Aspect ratio
   let aspectPercent = "100%";
   if (config.aspect) {
-    if (config.aspect.includes(":")) {
-      const parts = config.aspect.split(":");
+    if (String(config.aspect).includes(":")) {
+      const parts = String(config.aspect).split(":");
       const w = parseFloat(parts[0]);
       const h = parseFloat(parts[1]);
-      if (!isNaN(w) && !isNaN(h) && w > 0) {
-        aspectPercent = (h / w) * 100 + "%";
-      }
+      if (!isNaN(w) && !isNaN(h) && w > 0) aspectPercent = (h / w) * 100 + "%";
     } else {
       const aspectValue = parseFloat(config.aspect);
-      if (!isNaN(aspectValue) && aspectValue > 0) {
-        aspectPercent = (100 / aspectValue) + "%";
-      }
+      if (!isNaN(aspectValue) && aspectValue > 0) aspectPercent = 100 / aspectValue + "%";
     }
   } else {
     const parentContainer = scriptTag.parentNode;
-    const containerWidth = parentContainer?.offsetWidth || 0;
-    const containerHeight = parentContainer?.offsetHeight || 0;
+    const containerWidth = parentContainer.offsetWidth;
+    const containerHeight = parentContainer.offsetHeight;
     if (containerWidth > 0 && containerHeight > 0) {
       aspectPercent = (containerHeight / containerWidth) * 100 + "%";
     }
   }
 
-  // --- Conteneur du widget ---
+  // 5) Container du widget
   const widgetContainer = document.createElement("div");
   widgetContainer.id = "ply-widget-container-" + instanceId;
   widgetContainer.classList.add("ply-widget-container");
@@ -85,6 +100,7 @@ async function initViewerInstance(scriptTag) {
     ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>`
     : "";
 
+  // HTML (tout en backticks !)
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
@@ -101,7 +117,6 @@ async function initViewerInstance(scriptTag) {
         <div class="help-text"></div>
       </div>
     </div>
-
     <div id="tooltip-panel-${instanceId}" class="tooltip-panel" style="display: none;">
       <div class="tooltip-content">
         <span id="tooltip-close-${instanceId}" class="tooltip-close">×</span>
@@ -111,57 +126,51 @@ async function initViewerInstance(scriptTag) {
     </div>
   `;
 
-  // Insérer juste après la balise script courante
+  // Insérer après la balise <script> correspondante
   scriptTag.parentNode.appendChild(widgetContainer);
 
-  // --- Références DOM pour cette instance ---
+  // 6) Références DOM
   const viewerContainerElem = document.getElementById("viewer-container-" + instanceId);
-  const fullscreenToggle    = document.getElementById("fullscreen-toggle-" + instanceId);
-  const helpToggle          = document.getElementById("help-toggle-" + instanceId);
-  const helpCloseBtn        = document.getElementById("help-close-" + instanceId);
-  const resetCameraBtn      = document.getElementById("reset-camera-btn-" + instanceId);
-  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-" + instanceId);
-  const tooltipTextDiv  = document.getElementById("tooltip-text-" + instanceId);
-  const tooltipImage    = document.getElementById("tooltip-image-" + instanceId);
+  const fullscreenToggle = document.getElementById("fullscreen-toggle-" + instanceId);
+  const helpToggle = document.getElementById("help-toggle-" + instanceId);
+  const helpCloseBtn = document.getElementById("help-close-" + instanceId);
+  const resetCameraBtn = document.getElementById("reset-camera-btn-" + instanceId);
+  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-" + instanceId);
+  const tooltipTextDiv = document.getElementById("tooltip-text-" + instanceId);
+  const tooltipImage = document.getElementById("tooltip-image-" + instanceId);
   const tooltipCloseBtn = document.getElementById("tooltip-close-" + instanceId);
 
-  const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
-  // --- Texte d’aide ---
   const tooltipInstruction = config.tooltips_url
     ? "- Cliquez sur ⦿ pour afficher/masquer les tooltips.<br>"
     : "";
 
-  if (isMobile) {
-    helpTextDiv.innerHTML =
-      "- Déplacez vous en glissant deux doigts sur l'écran.<br>" +
+  helpTextDiv.innerHTML = isMobile
+    ? "- Déplacez vous en glissant deux doigts sur l'écran.<br>" +
       "- Orbitez en glissant un doigt.<br>" +
       "- Zoomez en pinçant avec deux doigts.<br>" +
       tooltipInstruction +
       "- Cliquez sur ⟲ pour réinitialiser la caméra.<br>" +
-      "- Cliquez sur ⇱ pour passer en plein écran.<br>";
-  } else {
-    helpTextDiv.innerHTML =
-      "- Orbitez avec le clic droit ou shift + ←↑↓→<br>" +
+      "- Cliquez sur ⇱ pour passer en plein écran.<br>"
+    : "- Orbitez avec le clic droit ou shift + ←↑↓→<br>" +
       "- Zoomez avec la molette ou ctrl + ↑↓<br>" +
       "- Déplacez vous avec le clic gauche ou ←↑↓→<br>" +
       tooltipInstruction +
       "- Cliquez sur ⟲ pour réinitialiser la caméra.<br>" +
       "- Cliquez sur ⇱ pour passer en plein écran.<br>";
-  }
 
-  // --- Taille max du menu d’aide (mobile) ---
+  // 7) Sizing dynamique
   function setMenuContentMaxSize() {
     if (!isMobile) {
-      menuContent.style.maxWidth  = "";
+      menuContent.style.maxWidth = "";
       menuContent.style.maxHeight = "";
-      menuContent.style.width     = "";
-      menuContent.style.height    = "";
+      menuContent.style.width = "";
+      menuContent.style.height = "";
       menuContent.style.overflowY = "";
       menuContent.style.overflowX = "";
       return;
@@ -171,14 +180,14 @@ async function initViewerInstance(scriptTag) {
       const vw = parent.offsetWidth;
       const vh = parent.offsetHeight;
       if (vw && vh) {
-        menuContent.style.maxWidth  = Math.round(vw * 0.8) + "px";
+        menuContent.style.maxWidth = Math.round(vw * 0.8) + "px";
         menuContent.style.maxHeight = Math.round(vh * 0.8) + "px";
-        menuContent.style.width     = "";
-        menuContent.style.height    = "";
+        menuContent.style.width = "";
+        menuContent.style.height = "";
         menuContent.style.overflowY = "auto";
         menuContent.style.overflowX = "auto";
       } else {
-        menuContent.style.maxWidth  = "80vw";
+        menuContent.style.maxWidth = "80vw";
         menuContent.style.maxHeight = "80vh";
         menuContent.style.overflowY = "auto";
         menuContent.style.overflowX = "auto";
@@ -190,11 +199,11 @@ async function initViewerInstance(scriptTag) {
   document.addEventListener("fullscreenchange", setMenuContentMaxSize);
   window.addEventListener("orientationchange", setMenuContentMaxSize);
 
-  // --- Panneau d’aide visible par défaut ---
+  // Visibilité par défaut
   menuContent.style.display = "block";
   viewerContainerElem.style.display = "block";
 
-  // --- Charger viewer.js avec un paramètre unique (évite le cache/état partagé) ---
+  // 8) Charger viewer.js (avec un param unique pour isoler les instances)
   let viewerModule;
   try {
     const viewerUrl = `https://mikafil-viewer-sgos.static.hf.space/viewer.js?inst=${instanceId}`;
@@ -208,7 +217,7 @@ async function initViewerInstance(scriptTag) {
   const canvasId = "canvas-" + instanceId;
   const canvasEl = document.getElementById(canvasId);
 
-  // --- Bouton Tooltips : cacher si URL invalide ---
+  // 9) Gérer le bouton tooltips
   if (tooltipsToggleBtn) {
     if (!config.tooltips_url) {
       tooltipsToggleBtn.style.display = "none";
@@ -223,7 +232,7 @@ async function initViewerInstance(scriptTag) {
     }
   }
 
-  // --- Panneau tooltips (local à l’instance) ---
+  // 10) Panneau tooltips
   let dragHide = null;
   function hideTooltipPanel() {
     if (dragHide) {
@@ -240,11 +249,7 @@ async function initViewerInstance(scriptTag) {
     canvasEl.addEventListener("wheel", hideTooltipPanel, { passive: true });
   }
 
-  // NB : 'tooltip-selected' est global (émis par tooltips.js).
-  // Ici, on affiche simplement le panneau local; si plusieurs viewers sont visibles,
-  // chacun recevra l’événement (comportement actuel).
   document.addEventListener("tooltip-selected", (evt) => {
-    // Annule un hide différé si présent
     if (dragHide) {
       viewerContainerElem.removeEventListener("pointermove", dragHide);
       dragHide = null;
@@ -254,12 +259,13 @@ async function initViewerInstance(scriptTag) {
     tooltipImage.style.display = "none";
     tooltipImage.src = "";
     if (imgUrl) {
-      tooltipImage.onload = () => { tooltipImage.style.display = "block"; };
+      tooltipImage.onload = () => {
+        tooltipImage.style.display = "block";
+      };
       tooltipImage.src = imgUrl;
     }
     tooltipPanel.style.display = "flex";
 
-    // Fermer en cas de drag (petit délai pour éviter flicker)
     setTimeout(() => {
       dragHide = (e) => {
         if ((e.pointerType === "mouse" && e.buttons !== 0) || e.pointerType === "touch") {
@@ -270,7 +276,7 @@ async function initViewerInstance(scriptTag) {
     }, 100);
   });
 
-  // --- Plein écran ---
+  // 11) Plein écran & UI
   let isFullscreen = false;
   let savedState = null;
 
@@ -279,19 +285,19 @@ async function initViewerInstance(scriptTag) {
     const originalAspect = widgetContainer.getAttribute("data-original-aspect") || aspectPercent;
     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,
-        paddingBottom:  widgetContainer.style.paddingBottom || originalAspect,
-        margin:         widgetContainer.style.margin
+        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
       },
       viewer: {
         borderRadius: viewerContainerElem.style.borderRadius,
-        border:       viewerContainerElem.style.border
+        border: viewerContainerElem.style.border
       }
     };
   }
@@ -300,26 +306,26 @@ async function initViewerInstance(scriptTag) {
     if (!savedState) return;
     const aspectToUse = savedState.widget.paddingBottom;
 
-    widgetContainer.style.position      = savedState.widget.position || "";
-    widgetContainer.style.top           = savedState.widget.top || "";
-    widgetContainer.style.left          = savedState.widget.left || "";
-    widgetContainer.style.width         = "100%";
-    widgetContainer.style.height        = "0";
-    widgetContainer.style.maxWidth      = savedState.widget.maxWidth || "";
-    widgetContainer.style.maxHeight     = savedState.widget.maxHeight || "";
+    widgetContainer.style.position = savedState.widget.position || "";
+    widgetContainer.style.top = savedState.widget.top || "";
+    widgetContainer.style.left = savedState.widget.left || "";
+    widgetContainer.style.width = "100%";
+    widgetContainer.style.height = "0";
+    widgetContainer.style.maxWidth = savedState.widget.maxWidth || "";
+    widgetContainer.style.maxHeight = savedState.widget.maxHeight || "";
     widgetContainer.style.paddingBottom = aspectToUse;
-    widgetContainer.style.margin        = savedState.widget.margin || "";
+    widgetContainer.style.margin = savedState.widget.margin || "";
     widgetContainer.classList.remove("fake-fullscreen");
 
-    viewerContainerElem.style.position     = "absolute";
-    viewerContainerElem.style.top          = "0";
-    viewerContainerElem.style.left         = "0";
-    viewerContainerElem.style.right        = "0";
-    viewerContainerElem.style.bottom       = "0";
-    viewerContainerElem.style.width        = "100%";
-    viewerContainerElem.style.height       = "100%";
+    viewerContainerElem.style.position = "absolute";
+    viewerContainerElem.style.top = "0";
+    viewerContainerElem.style.left = "0";
+    viewerContainerElem.style.right = "0";
+    viewerContainerElem.style.bottom = "0";
+    viewerContainerElem.style.width = "100%";
+    viewerContainerElem.style.height = "100%";
     viewerContainerElem.style.borderRadius = savedState.viewer.borderRadius || "";
-    viewerContainerElem.style.border       = savedState.viewer.border || "";
+    viewerContainerElem.style.border = savedState.viewer.border || "";
 
     if (viewerModule.app) {
       viewerModule.app.resizeCanvas(
@@ -335,22 +341,22 @@ async function initViewerInstance(scriptTag) {
   }
 
   function applyFullscreenStyles() {
-    widgetContainer.style.position      = "fixed";
-    widgetContainer.style.top           = "0";
-    widgetContainer.style.left          = "0";
-    widgetContainer.style.width         = "100vw";
-    widgetContainer.style.height        = "100vh";
-    widgetContainer.style.maxWidth      = "100vw";
-    widgetContainer.style.maxHeight     = "100vh";
+    widgetContainer.style.position = "fixed";
+    widgetContainer.style.top = "0";
+    widgetContainer.style.left = "0";
+    widgetContainer.style.width = "100vw";
+    widgetContainer.style.height = "100vh";
+    widgetContainer.style.maxWidth = "100vw";
+    widgetContainer.style.maxHeight = "100vh";
     widgetContainer.style.paddingBottom = "0";
-    widgetContainer.style.margin        = "0";
-    widgetContainer.style.border        = "none";
-    widgetContainer.style.borderRadius  = "0";
+    widgetContainer.style.margin = "0";
+    widgetContainer.style.border = "none";
+    widgetContainer.style.borderRadius = "0";
 
-    viewerContainerElem.style.width        = "100%";
-    viewerContainerElem.style.height       = "100%";
+    viewerContainerElem.style.width = "100%";
+    viewerContainerElem.style.height = "100%";
     viewerContainerElem.style.borderRadius = "0";
-    viewerContainerElem.style.border       = "none";
+    viewerContainerElem.style.border = "none";
 
     if (viewerModule.app) {
       viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
@@ -407,7 +413,6 @@ async function initViewerInstance(scriptTag) {
     setMenuContentMaxSize();
   });
 
-  // --- Aide / Reset ---
   helpToggle.addEventListener("click", (e) => {
     hideTooltipPanel();
     e.stopPropagation();
@@ -422,12 +427,9 @@ async function initViewerInstance(scriptTag) {
 
   resetCameraBtn.addEventListener("click", () => {
     hideTooltipPanel();
-    if (viewerModule.resetViewerCamera) {
-      viewerModule.resetViewerCamera();
-    }
+    if (viewerModule.resetViewerCamera) viewerModule.resetViewerCamera();
   });
 
-  // --- Bouton Tooltips ---
   if (tooltipsToggleBtn) {
     let tooltipsVisible = !!config.showTooltipsDefault;
     tooltipsToggleBtn.style.opacity = tooltipsVisible ? "1" : "0.5";
@@ -443,7 +445,10 @@ async function initViewerInstance(scriptTag) {
 
   tooltipCloseBtn.addEventListener("click", hideTooltipPanel);
 
-  // --- Redimensionnement ---
+  document.addEventListener("keydown", (e) => {
+    if ((e.key === "Escape" || e.key === "Esc") && isFullscreen) exitFullscreen();
+  });
+
   window.addEventListener("resize", () => {
     if (viewerModule.app) {
       if (isFullscreen) {
@@ -458,10 +463,9 @@ async function initViewerInstance(scriptTag) {
     setMenuContentMaxSize();
   });
 
-  // --- Init par défaut ---
+  // Init par défaut
   setTimeout(() => {
     saveCurrentState();
-    // Propager l'état par défaut des tooltips (événement global)
     document.dispatchEvent(
       new CustomEvent("toggle-tooltips", { detail: { visible: !!config.showTooltipsDefault } })
     );