Update interface.js

interface.js

@@ -1,31 +1,26 @@
 // interface.js
 // ==============================
 
-// Garde global: si ce module a déjà initialisé toutes les balises, on ne refait pas
-if (!window.__PLY_IFACE_INIT_DONE__) {
-  window.__PLY_IFACE_INIT_DONE__ = true;
-
-  (async function () {
-    // Trouve toutes les balises <script src=".../interface.js" data-config="...">
-    const scriptTags = Array.from(
-      document.querySelectorAll('script[type="module"][src*="interface.js"][data-config]')
-    );
-    if (!scriptTags.length) return;
-
-    // Initialise une instance 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);
-      }
+(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);
     }
-  })();
-}
+  }
+})();
 
 async function initViewerInstance(scriptTag) {
-  // 1) Lire la config
+  // --- Lire la config ---
   const configUrl = scriptTag.getAttribute("data-config");
   if (!configUrl) return;
 
@@ -38,22 +33,11 @@ async function initViewerInstance(scriptTag) {
     return;
   }
 
-  // 2) Injecter la CSS si nécessaire (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 (e) {
-    // si CSS.escape indisponible, on ignore la vérif et on insère quand même
-    if (config.css_url && !document.querySelector(`link[rel="stylesheet"][href="${config.css_url}"]`)) {
+  // --- 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) {
       const linkEl = document.createElement("link");
       linkEl.rel = "stylesheet";
       linkEl.href = config.css_url;
@@ -61,10 +45,10 @@ async function initViewerInstance(scriptTag) {
     }
   }
 
-  // 3) ID unique pour l’instance
+  // --- ID unique pour l’instance ---
   const instanceId = Math.random().toString(36).substr(2, 8);
 
-  // 4) Aspect ratio
+  // --- Calcul de l’aspect ratio ---
   let aspectPercent = "100%";
   if (config.aspect) {
     if (config.aspect.includes(":")) {
@@ -82,14 +66,14 @@ async function initViewerInstance(scriptTag) {
     }
   } else {
     const parentContainer = scriptTag.parentNode;
-    const containerWidth = parentContainer.offsetWidth;
-    const containerHeight = parentContainer.offsetHeight;
+    const containerWidth = parentContainer?.offsetWidth || 0;
+    const containerHeight = parentContainer?.offsetHeight || 0;
     if (containerWidth > 0 && containerHeight > 0) {
       aspectPercent = (containerHeight / containerWidth) * 100 + "%";
     }
   }
 
-  // 5) Créer le container du widget
+  // --- Conteneur du widget ---
   const widgetContainer = document.createElement("div");
   widgetContainer.id = "ply-widget-container-" + instanceId;
   widgetContainer.classList.add("ply-widget-container");
@@ -101,7 +85,6 @@ async function initViewerInstance(scriptTag) {
     ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>`
     : "";
 
-  // NB: on rend le tooltip-panel unique par instance
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
@@ -118,6 +101,7 @@ 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>
@@ -130,24 +114,25 @@ async function initViewerInstance(scriptTag) {
   // Insérer juste après la balise script courante
   scriptTag.parentNode.appendChild(widgetContainer);
 
-  // 6) Références DOM pour cette instance
+  // --- Références DOM pour cette instance ---
   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);
 
-  // Détecteurs (déclarés UNE SEULE FOIS)
-  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>"
     : "";
@@ -170,13 +155,13 @@ async function initViewerInstance(scriptTag) {
       "- Cliquez sur ⇱ pour passer en plein écran.<br>";
   }
 
-  // --- DYNAMIC MENU SIZING ---
+  // --- Taille max du menu d’aide (mobile) ---
   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;
@@ -186,14 +171,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";
@@ -205,12 +190,11 @@ async function initViewerInstance(scriptTag) {
   document.addEventListener("fullscreenchange", setMenuContentMaxSize);
   window.addEventListener("orientationchange", setMenuContentMaxSize);
 
-  // --- HELP PANEL DEFAULT VISIBILITY ---
+  // --- Panneau d’aide visible par défaut ---
   menuContent.style.display = "block";
   viewerContainerElem.style.display = "block";
 
-  // 7) Charger viewer.js avec un paramètre unique (évite le cache ESM)
-  //    -> chaque instance obtient son propre module (et son propre état).
+  // --- Charger viewer.js avec un paramètre unique (évite le cache/état partagé) ---
   let viewerModule;
   try {
     const viewerUrl = `https://mikafil-viewer-sgos.static.hf.space/viewer.js?inst=${instanceId}`;
@@ -224,7 +208,7 @@ async function initViewerInstance(scriptTag) {
   const canvasId = "canvas-" + instanceId;
   const canvasEl = document.getElementById(canvasId);
 
-  // 8) Bouton tooltips : cacher si URL non valide
+  // --- Bouton Tooltips : cacher si URL invalide ---
   if (tooltipsToggleBtn) {
     if (!config.tooltips_url) {
       tooltipsToggleBtn.style.display = "none";
@@ -239,7 +223,7 @@ async function initViewerInstance(scriptTag) {
     }
   }
 
-  // 9) Panneau tooltips & interactions locales
+  // --- Panneau tooltips (local à l’instance) ---
   let dragHide = null;
   function hideTooltipPanel() {
     if (dragHide) {
@@ -256,11 +240,11 @@ async function initViewerInstance(scriptTag) {
     canvasEl.addEventListener("wheel", hideTooltipPanel, { passive: true });
   }
 
-  // NB : l’événement 'tooltip-selected' est global (tooltips.js l’émet sur document).
-  // Toutes les instances l’écoutent. Pour un découplage fin, il faudrait faire
-  // passer un identifiant d’instance dans detail (modif. de tooltips.js).
+  // 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) => {
-    // Affiche le panneau, annule un hide différé si présent
+    // Annule un hide différé si présent
     if (dragHide) {
       viewerContainerElem.removeEventListener("pointermove", dragHide);
       dragHide = null;
@@ -270,14 +254,12 @@ 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 (après un petit délai pour éviter un flicker)
+    // Fermer en cas de drag (petit délai pour éviter flicker)
     setTimeout(() => {
       dragHide = (e) => {
         if ((e.pointerType === "mouse" && e.buttons !== 0) || e.pointerType === "touch") {
@@ -288,6 +270,7 @@ async function initViewerInstance(scriptTag) {
     }, 100);
   });
 
+  // --- Plein écran ---
   let isFullscreen = false;
   let savedState = null;
 
@@ -296,19 +279,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
       }
     };
   }
@@ -317,26 +300,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(
@@ -352,22 +335,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);
@@ -424,6 +407,7 @@ async function initViewerInstance(scriptTag) {
     setMenuContentMaxSize();
   });
 
+  // --- Aide / Reset ---
   helpToggle.addEventListener("click", (e) => {
     hideTooltipPanel();
     e.stopPropagation();
@@ -443,6 +427,7 @@ async function initViewerInstance(scriptTag) {
     }
   });
 
+  // --- Bouton Tooltips ---
   if (tooltipsToggleBtn) {
     let tooltipsVisible = !!config.showTooltipsDefault;
     tooltipsToggleBtn.style.opacity = tooltipsVisible ? "1" : "0.5";
@@ -458,10 +443,7 @@ async function initViewerInstance(scriptTag) {
 
   tooltipCloseBtn.addEventListener("click", hideTooltipPanel);
 
-  document.addEventListener("keydown", (e) => {
-    if ((e.key === "Escape" || e.key === "Esc") && isFullscreen) exitFullscreen();
-  });
-
+  // --- Redimensionnement ---
   window.addEventListener("resize", () => {
     if (viewerModule.app) {
       if (isFullscreen) {
@@ -476,11 +458,10 @@ async function initViewerInstance(scriptTag) {
     setMenuContentMaxSize();
   });
 
-  // Init par défaut
+  // --- Init par défaut ---
   setTimeout(() => {
-    // Sauvegarder l'état non-fullscreen courant
     saveCurrentState();
-    // Propager l'état par défaut des tooltips (global pour l’instant)
+    // Propager l'état par défaut des tooltips (événement global)
     document.dispatchEvent(
       new CustomEvent("toggle-tooltips", { detail: { visible: !!config.showTooltipsDefault } })
     );