Update interface.js

interface.js

@@ -386,23 +386,29 @@ const currentScriptTag = document.currentScript;
   // ─────────────────────────────────────────────────────────────────────────────
   // 14) Fullscreen
   // ─────────────────────────────────────────────────────────────────────────────
-  let isFullscreen = false;
-  let savedState   = null;
+  let isFullscreen  = false;
+  let savedState    = null;
+  let savedParent   = null;   // ← nouveau : mémorise le parent original sur iOS
+  let savedSibling  = null;   // ← nouveau : mémorise le frère suivant sur iOS
+
+  function getHeightUnit() {
+    return (CSS && CSS.supports && CSS.supports('height', '100dvh')) ? '100dvh' : '100vh';
+  }
 
   function saveCurrentState() {
     if (isFullscreen) return;
     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,
+        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
       },
       viewer: {
         borderRadius: viewerContainerElem.style.borderRadius,
@@ -415,15 +421,16 @@ const currentScriptTag = document.currentScript;
     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.style.zIndex        = '';
     widgetContainer.classList.remove('fake-fullscreen');
 
     viewerContainerElem.style.position     = 'absolute';
@@ -436,6 +443,14 @@ const currentScriptTag = document.currentScript;
     viewerContainerElem.style.borderRadius = savedState.viewer.borderRadius || '';
     viewerContainerElem.style.border       = savedState.viewer.border       || '';
 
+    // ── Remettre le nœud à sa place d'origine dans le DOM (iOS) ──
+    if (savedParent) {
+      savedParent.insertBefore(widgetContainer, savedSibling);
+      savedParent  = null;
+      savedSibling = null;
+      document.body.style.overflow = '';
+    }
+
     if (viewerModule.app) {
       viewerModule.app.resizeCanvas(viewerContainerElem.clientWidth, viewerContainerElem.clientHeight);
     }
@@ -446,17 +461,20 @@ const currentScriptTag = document.currentScript;
   }
 
   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';
+    const h = isIOS ? getHeightUnit() : '100vh';
+
+    widgetContainer.style.position      = 'fixed';
+    widgetContainer.style.top           = '0';
+    widgetContainer.style.left          = '0';
+    widgetContainer.style.width         = '100vw';
+    widgetContainer.style.height        = h;
+    widgetContainer.style.maxWidth      = '100vw';
+    widgetContainer.style.maxHeight     = h;
     widgetContainer.style.paddingBottom = '0';
-    widgetContainer.style.margin    = '0';
-    widgetContainer.style.border    = 'none';
-    widgetContainer.style.borderRadius = '0';
+    widgetContainer.style.margin        = '0';
+    widgetContainer.style.zIndex        = '99999';
+    widgetContainer.style.border        = 'none';
+    widgetContainer.style.borderRadius  = '0';
 
     viewerContainerElem.style.width        = '100%';
     viewerContainerElem.style.height       = '100%';
@@ -476,19 +494,24 @@ const currentScriptTag = document.currentScript;
     if (!savedState) saveCurrentState();
 
     if (isIOS) {
-      applyFullscreenStyles();
+      // ── Déplacer dans <body> pour échapper au stacking context de Squarespace ──
+      savedParent  = widgetContainer.parentNode;
+      savedSibling = widgetContainer.nextSibling;
+      document.body.appendChild(widgetContainer);
+      document.body.style.overflow = 'hidden';
       widgetContainer.classList.add('fake-fullscreen');
+      applyFullscreenStyles();
     } else if (widgetContainer.requestFullscreen) {
       widgetContainer
         .requestFullscreen()
         .then(applyFullscreenStyles)
         .catch(() => {
-          applyFullscreenStyles();
           widgetContainer.classList.add('fake-fullscreen');
+          applyFullscreenStyles();
         });
     } else {
-      applyFullscreenStyles();
       widgetContainer.classList.add('fake-fullscreen');
+      applyFullscreenStyles();
     }
   }
 
@@ -519,6 +542,23 @@ const currentScriptTag = document.currentScript;
     setMenuContentMaxSize();
   });
 
+  // ── Resize : recalcule la hauteur en dvh sur iOS ──
+  window.addEventListener('resize', () => {
+    if (viewerModule.app) {
+      if (isFullscreen) {
+        viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
+        if (isIOS) {
+          const h = getHeightUnit();
+          widgetContainer.style.height    = h;
+          widgetContainer.style.maxHeight = h;
+        }
+      } else {
+        viewerModule.app.resizeCanvas(viewerContainerElem.clientWidth, viewerContainerElem.clientHeight);
+      }
+    }
+    setMenuContentMaxSize();
+  });
+
   // ─────────────────────────────────────────────────────────────────────────────
   // 15) Boutons d'interface
   // ─────────────────────────────────────────────────────────────────────────────