arrow report

assets/js/report.js

@@ -4,14 +4,18 @@ import { initSwipers } from './swipers.js';
 export function report(responsiveSmall) {
   if (document.body.dataset.template === 'report') {
 
-    // Initialiser tous les sliders et swipers de la page
+    // Initialiser tous les sliders de type before-after
     initSliderBeforeAfter();
-    initSwipers();
 
     // Ne fonctionne que pour les écrans plus grands que responsiveSmall
     if (window.matchMedia(responsiveSmall).matches) {
+      // Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
+      initSwipers();
       return;
     }
+
+    // Sur desktop : initMediaDisplay va gérer les media dynamiquement
+    // Les swipers seront initialisés au moment de l'insertion dans #report__medias
     initMediaDisplay();
   }
 }
@@ -62,12 +66,7 @@ function initMediaDisplay() {
       const anchor = document.createElement('div');
       anchor.className = 'media-anchor';
       anchor.dataset.mediaId = media.id;
-
-      // Style visuel pour debug (carré rouge de 10px)
-      anchor.style.width = '10px';
-      anchor.style.height = '10px';
-      anchor.style.backgroundColor = 'red';
-      anchor.style.position = 'relative';
+      anchor.innerHTML = '<span class="arrow-report">▶</span>'
 
       // Vérifier si le media est précédé d'un titre
       let previousElement = media.previousElementSibling;
@@ -96,8 +95,12 @@ function initMediaDisplay() {
 
   // 2. Fonction pour trouver et afficher le media le plus proche de la ligne de déclenchement
   let currentMediaId = null;
+  let isUpdating = false; // Flag pour éviter les mises à jour simultanées
 
   function updateActiveMedia() {
+    // Éviter les mises à jour simultanées
+    if (isUpdating) return;
+
     // Trouver l'ancre qui est la plus proche de la ligne de déclenchement (totalOffset du haut)
     let closestAnchor = null;
     let closestDistance = Infinity;
@@ -128,16 +131,29 @@ function initMediaDisplay() {
       const mediaData = mediaElements.find(m => m.anchor === closestAnchor);
 
       if (mediaData) {
-        // Vider le conteneur
-        reportMedias.innerHTML = '';
+        isUpdating = true;
 
-        // Ajouter le nouveau media
-        reportMedias.appendChild(mediaData.media.cloneNode(true));
-        currentMediaId = mediaId;
+        // Utiliser requestAnimationFrame pour éviter les conflits de reflow
+        requestAnimationFrame(() => {
+          // Vider le conteneur
+          reportMedias.innerHTML = '';
 
-        // Réinitialiser les sliders et swipers dans le media nouvellement inséré
-        initSliderBeforeAfter(reportMedias);
-        initSwipers(reportMedias);
+          // Ajouter le nouveau media
+          const newMediaElement = mediaData.media.cloneNode(true);
+          reportMedias.appendChild(newMediaElement);
+          currentMediaId = mediaId;
+
+          // Attendre le prochain frame pour initialiser les sliders/swipers
+          requestAnimationFrame(() => {
+            initSliderBeforeAfter(reportMedias);
+            initSwipers(reportMedias);
+
+            // Débloquer les mises à jour après un court délai
+            setTimeout(() => {
+              isUpdating = false;
+            }, 100);
+          });
+        });
       }
     } else {
       // Aucune ancre n'a encore franchi la ligne, vider le conteneur