boucle frise calendrier

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -288,57 +288,61 @@
 
   //////////////////// start Timeline script ///////////////////////
 
-
   document.addEventListener('DOMContentLoaded', function() {
     let currentSlide = 0;
-
+  
     //// responsive ///
     function getVisibleSlides() {
       if (window.innerWidth <= 600) {
         return 1; // Show 1 slide on small screens
       } else if (window.innerWidth <= 900) {
-        return 4; // Show 2 slides on medium screens
+        return 4; // Show 4 slides on medium screens
       } else {
-        return 4; // Show 3 slides on large screens
+        return 4; // Show 4 slides on large screens
       }
     }
-
+  
     function showSlides(index) {
       const slides = document.querySelectorAll('.__paragraphs');
       const totalSlides = slides.length;
       const visibleSlides = getVisibleSlides();
       const maxSlide = totalSlides - visibleSlides;
-
+  
-      // Adjust the index to ensure it stays within bounds
+      // Adjust the index to ensure it loops
-      currentSlide = Math.max(0, Math.min(index, maxSlide));
+      if (index > maxSlide) {
-
+        currentSlide = 0; // Go back to the first slide
+      } else if (index < 0) {
+        currentSlide = maxSlide; // Go to the last slide
+      } else {
+        currentSlide = index;
+      }
+  
       // Calculate the offset for the transform
       const offset = currentSlide * -50 / visibleSlides;
       const offsetmobile = currentSlide * -10 / visibleSlides;
       if (window.innerWidth <= 600){
-      document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;
+        document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;
       } else {
         document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
       }
-      
+  
-
       // Enable/disable arrows based on the current slide
-      document.getElementById('arrowPrev').disabled = currentSlide === 0;
+      document.getElementById('arrowPrev').disabled = false; // Always enabled now
-      document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
+      document.getElementById('arrowNext').disabled = false; // Always enabled now
     }
-
+  
     function prevSlide() {
       showSlides(currentSlide - 1);
     }
-
+  
     function nextSlide() {
       showSlides(currentSlide + 1);
     }
-
+  
     // Attach event listeners
     document.getElementById('arrowPrev').addEventListener('click', prevSlide);
     document.getElementById('arrowNext').addEventListener('click', nextSlide);
-
+  
     // Update month field to only show the first 3 letters
     document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
       const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
@@ -355,55 +359,52 @@
         }
       }
     });
-
+  
-// Fonction pour ajouter ou retirer la classe .only
+    // Fonction pour ajouter ou retirer la classe .only
-function updateDateClasses() {
+    function updateDateClasses() {
-  document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
+      document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
-    const date2Element = dateElement.querySelector('.date2');
+        const date2Element = dateElement.querySelector('.date2');
-    const yearElement = dateElement.querySelector('.field_field_date_de_annee');
+        const yearElement = dateElement.querySelector('.field_field_date_de_annee');
-
+  
-    if (date2Element && !date2Element.textContent.trim()) {
+        if (date2Element && !date2Element.textContent.trim()) {
-      if (yearElement) {
+          if (yearElement) {
-        yearElement.classList.add('only');
+            yearElement.classList.add('only');
-      }
+          }
-    } else {
+        } else {
-      if (yearElement) {
+          if (yearElement) {
-        yearElement.classList.remove('only');
+            yearElement.classList.remove('only');
-      }
+          }
+        }
+      });
     }
-  });
+  
-}
+    // Exécuter la fonction une première fois pour le contenu déjà présent
-
+    updateDateClasses();
-// Exécuter la fonction une première fois pour le contenu déjà présent
+  
-updateDateClasses();
+    // MutationObserver pour surveiller les changements dans le DOM
-
+    const observer = new MutationObserver(function(mutationsList, observer) {
-// MutationObserver pour surveiller les changements dans le DOM
+      for(let mutation of mutationsList) {
-const observer = new MutationObserver(function(mutationsList, observer) {
+        if (mutation.type === 'childList') {
-  for(let mutation of mutationsList) {
+          updateDateClasses();
-    if (mutation.type === 'childList') {
+        }
-      updateDateClasses();
+      }
-    }
+    });
-  }
+  
-});
+    // Configuration de l'observateur
-
+    const config = { childList: true, subtree: true };
-// Configuration de l'observateur
+  
-const config = { childList: true, subtree: true };
+    // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
-
+    observer.observe(document.body, config);
-// Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
+  
-observer.observe(document.body, config);
+    // Handle window resize
-
-
-            // Handle window resize
     window.addEventListener('resize', function() {
       showSlides(currentSlide); // Recalculate the slides on resize
     });
-  // });
+  
-
-
     // Initialize
     showSlides(currentSlide);
   });
-
+  
 
   //////////////////////// end Timeline script /////////////////////////////////////////////