Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -4,12 +4,12 @@
    - Android/Desktop : WebXR AR (horizontaux uniquement) + slider yaw + blob shadow
    - Éclairage PBR par défaut (sans WebXR light estimation)
    - Monté dans un conteneur choisi (data-mount="#ar-mount") pour Squarespace
-   - Bouton "Lancer l'AR" (Android & iOS)
 */
 
 (function () {
   // ============ Utils: script tag / config / platform ============
   function getCurrentScript() {
+    // robuste même si currentScript n'est pas dispo
     return document.currentScript || (function () {
       var scripts = document.getElementsByTagName('script');
       return scripts[scripts.length - 1] || null;
@@ -118,12 +118,9 @@
     ".ar-ui input[type=\"range\"].rotY{position:absolute;opacity:0;pointer-events:none;width:0;height:0}",
     ".ar-ui .val{font-size:12px;opacity:.95}",
 
-    /* Bouton Lancer l'AR (visible Android & iOS) */
-    "#ar-launch-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:72px;z-index:10003;padding:12px 16px;border-radius:12px;border:none;background:#111;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer;pointer-events:auto}",
-    "#ar-launch-btn:active{transform:translateX(-50%) scale(0.98)}",
-
-    /* Anchor QuickLook caché (déclenché par le bouton sur iOS) */
-    "#ios-quicklook-anchor{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}"
+    /* iOS Quick Look button */
+    "#ios-quicklook-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10003;display:inline-block;pointer-events:auto}",
+    "#ios-quicklook-btn img{display:block;height:44px;width:auto}"
   ].join("\n");
   var styleTag = document.createElement("style");
   styleTag.textContent = css;
@@ -164,20 +161,43 @@
     }
   }
 
-  // Canvas monté dans un conteneur (Squarespace-friendly)
+  function ensureQuickLookButton(USDZ_URL) {
+    var btn = document.getElementById("ios-quicklook-btn");
+    if (btn) return btn;
+
+    var anchor = document.createElement("a");
+    anchor.id = "ios-quicklook-btn";
+    anchor.setAttribute("rel", "ar");
+    anchor.setAttribute("href", buildQuickLookHref(USDZ_URL));
+
+    var img = document.createElement("img");
+    img.alt = "Voir en AR";
+    img.src =
+      "data:image/svg+xml;charset=utf-8," +
+      encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="160" height="44"><rect rx="8" ry="8" width="160" height="44" fill="black"/><text x="80" y="28" font-size="14" text-anchor="middle" fill="white" font-family="system-ui, -apple-system, Segoe UI, Roboto">Voir en AR</text></svg>');
+
+    anchor.appendChild(img);
+    document.body.appendChild(anchor);
+    return anchor;
+  }
+
+  // ============ Canvas monté dans un conteneur contrôlé (Squarespace) ============
   function ensureCanvas() {
     var scriptEl = getCurrentScript();
     var mountSel = scriptEl && scriptEl.getAttribute('data-mount');
     var desiredHeight = (scriptEl && scriptEl.getAttribute('data-height')) || '70vh';
 
+    // Trouve le conteneur cible
     var mountEl = null;
     if (mountSel) mountEl = document.querySelector(mountSel);
     if (!mountEl) {
+      // fallback : tout en haut du body (pour éviter "sous le footer")
       mountEl = document.createElement('div');
       mountEl.id = 'ar-mount-fallback';
       document.body.insertBefore(mountEl, document.body.firstChild);
     }
 
+    // Style du conteneur
     var mountStyle = mountEl.style;
     if (!mountStyle.position) mountStyle.position = 'relative';
     mountStyle.width = mountStyle.width || '100%';
@@ -185,6 +205,7 @@
     mountStyle.touchAction = mountStyle.touchAction || 'manipulation';
     mountStyle.webkitTapHighlightColor = 'transparent';
 
+    // Réutilise ou crée le canvas
     var canvas = mountEl.querySelector('#application-canvas');
     if (!canvas) {
       canvas = document.createElement('canvas');
@@ -192,6 +213,7 @@
       mountEl.appendChild(canvas);
     }
 
+    // Le canvas remplit le conteneur
     var cs = canvas.style;
     cs.position = 'absolute';
     cs.left = '0';
@@ -200,6 +222,7 @@
     cs.height = '100%';
     cs.display = 'block';
 
+    // Optionnel : ramener le viewport sur le viewer
     try {
       mountEl.scrollIntoView({ behavior: 'instant', block: 'start' });
     } catch (_) {}
@@ -224,36 +247,6 @@
     return p;
   }
 
-  // Bouton "Lancer l'AR" + (iOS) ancre rel=ar cachée
-  function ensureLaunchControls(USDZ_URL) {
-    // bouton visible (toujours présent)
-    var btn = document.getElementById('ar-launch-btn');
-    if (!btn) {
-      btn = document.createElement('button');
-      btn.id = 'ar-launch-btn';
-      btn.type = 'button';
-      btn.textContent = 'Lancer l’AR';
-      // pointer-events auto par défaut ; stopper la propagation pour éviter le drag de la scène
-      btn.addEventListener('pointerdown', function (e) { e.stopPropagation(); }, { passive: true });
-      btn.addEventListener('click', function (e) { e.stopPropagation(); }, false);
-      document.body.appendChild(btn);
-    }
-
-    var anchor = document.getElementById('ios-quicklook-anchor');
-    if (isIOS()) {
-      if (!anchor) {
-        anchor = document.createElement('a');
-        anchor.id = 'ios-quicklook-anchor';
-        anchor.setAttribute('rel', 'ar');
-        document.body.appendChild(anchor);
-      }
-      if (USDZ_URL) {
-        anchor.setAttribute('href', buildQuickLookHref(USDZ_URL));
-      }
-    }
-    return { btn: btn, anchor: anchor || null };
-  }
-
   // ============ Boot : charge config, route iOS vs Android/Desktop ============
   (async function () {
     var cfgUrl = findConfigUrl();
@@ -265,56 +258,28 @@
                    cfg.usdz_url :
                    null;
 
-    // Toujours créer le bouton (même iOS)
-    var { btn: launchBtn, anchor: iosAnchor } = ensureLaunchControls(USDZ_URL);
-
     if (isIOS()) {
       if (USDZ_URL) {
-        // Texte explicite + bouton qui déclenche Quick Look
-        message("iOS détecté : appuyez sur « Lancer l’AR » pour ouvrir Quick Look.");
-        launchBtn.onclick = function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          // délencher l’ancre rel=ar (meilleure compatibilité iOS)
-          if (iosAnchor && iosAnchor.href) {
-            iosAnchor.click();
-          }
-        };
+        ensureQuickLookButton(USDZ_URL);
+        message("iOS détecté : utilisez le bouton « Voir en AR » (AR Quick Look).");
       } else {
         message("iOS détecté, mais aucun 'usdz_url' dans config.json.");
-        launchBtn.disabled = true;
-        launchBtn.style.opacity = '0.5';
       }
-      // (Optionnel) tu peux ajouter un viewer 3D non-AR ici si besoin.
       return;
     }
 
-    // Android / Desktop : charger PlayCanvas et initialiser l’app
     try {
       await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
     } catch (e) {
       console.error("Chargement PlayCanvas échoué ->", e);
       message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard.");
-      launchBtn.disabled = true;
-      launchBtn.style.opacity = '0.5';
       return;
     }
-
-    // init de l’app WebXR, puis bouton déclencheur
-    var activateARRef = { fn: null }; // on branche le bouton une fois activateAR défini
-    initARApp(GLB_URL, activateARRef);
-
-    launchBtn.onclick = function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (typeof activateARRef.fn === 'function') {
-        activateARRef.fn();
-      }
-    };
+    initARApp(GLB_URL);
   })();
 
   // ============ App Android/Desktop (WebXR) ============
-  function initARApp(GLB_URL, activateARRef) {
+  function initARApp(GLB_URL) {
     var pc = window.pc;
     var canvas = ensureCanvas();
     var ui = ensureSliderUI();
@@ -430,7 +395,7 @@
       return e;
     }
 
-    // Euler de base
+    // Euler de base (évite inversions)
     var baseEulerX = 0, baseEulerZ = 0;
 
     // Rotation via slider (0..360, 360 en haut / 0 en bas)
@@ -483,7 +448,7 @@
       baseEulerX = initE.x; baseEulerZ = initE.z;
 
       modelLoaded = true;
-      message("Modèle chargé. Appuyez sur « Lancer l’AR » pour démarrer.");
+      message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
     });
 
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
@@ -537,7 +502,7 @@
     document.addEventListener("pointerup", endDrag, { capture: true, passive: false });
     document.addEventListener("pointercancel", endDrag, { capture: true, passive: false });
 
-    // --- Démarrage AR (Android/Desktop) — exposé via activateARRef.fn et bouton
+    // --- Démarrage AR (Android/Desktop)
     function activateAR() {
       if (!app.xr.isAvailable(pc.XRTYPE_AR)) { message("AR immersive indisponible sur cet appareil."); return; }
       if (!app.xr.domOverlay) app.xr.domOverlay = {};
@@ -553,12 +518,6 @@
         }
       });
     }
-    // on branche la référence pour le bouton "Lancer l'AR"
-    if (activateARRef && typeof activateARRef === 'object') {
-      activateARRef.fn = activateAR;
-    }
-
-    // On garde la possibilité de démarrer par tap écran si tu veux (désactivable)
     app.mouse.on("mousedown", function () { if (!app.xr.active && !uiInteracting) activateAR(); });
     if (app.touch) {
       app.touch.on("touchend", function (evt) {
@@ -681,7 +640,7 @@
     app.xr.on("available:" + pc.XRTYPE_AR, function (a) {
       if (!a) message("AR immersive indisponible.");
       else if (!app.xr.hitTest.supported) message("AR Hit Test non supporté.");
-      else message(modelLoaded ? "Touchez l’écran ou « Lancer l’AR »." : "Chargement du modèle…");
+      else message(modelLoaded ? "Touchez l’écran pour démarrer l’AR." : "Chargement du modèle…");
     });
 
     if (!app.xr.isAvailable(pc.XRTYPE_AR)) message("AR immersive indisponible.");