boucle frise calendrier

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

@@ -288,7 +288,6 @@
 
   //////////////////// start Timeline script ///////////////////////
 
-
   document.addEventListener('DOMContentLoaded', function() {
     let currentSlide = 0;
   
@@ -297,9 +296,9 @@
       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
       }
     }
   
@@ -309,22 +308,27 @@
       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() {
@@ -356,49 +360,46 @@
       }
     });
   
-// 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
+    // Exécuter la fonction une première fois pour le contenu déjà présent
-updateDateClasses();
+    updateDateClasses();
   
-// MutationObserver pour surveiller les changements dans le DOM
+    // MutationObserver pour surveiller les changements dans le DOM
-const observer = new MutationObserver(function(mutationsList, observer) {
+    const observer = new MutationObserver(function(mutationsList, observer) {
-  for(let mutation of mutationsList) {
+      for(let mutation of mutationsList) {
-    if (mutation.type === 'childList') {
+        if (mutation.type === 'childList') {
-      updateDateClasses();
+          updateDateClasses();
-    }
+        }
-  }
+      }
-});
+    });
   
-// Configuration de l'observateur
+    // Configuration de l'observateur
-const config = { childList: true, subtree: true };
+    const config = { childList: true, subtree: true };
   
-// Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
+    // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
-observer.observe(document.body, config);
+    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);