slick calendrier

web/themes/custom/quartiers_de_demain/quartiers_de_demain.libraries.yml

@@ -1,5 +1,6 @@
 # Main theme library.
 global:
+  version: 0.1
   js:
     dist/assets/bundle.js: {}
     librairies/slick-1.8.1/slick/slick.min.js: {}

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

@@ -1,10 +1,11 @@
 document.addEventListener('scroll', function() {
     const scrolled = window.pageYOffset;
     const background = document.getElementById('background-animated');
-  
-    // Adjust this value to control the speed of the parallax effect
-    const parallaxSpeed = 0.2;
-    background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';
+    if (background) {
+      // Adjust this value to control the speed of the parallax effect
+      const parallaxSpeed = 0.2;
+      background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';
+    }
 });
 
 
@@ -34,21 +35,24 @@ document.addEventListener('scroll', function() {
 //ANimation Pilliers 
 const svg = document.querySelector('#paragraph-id--7 .colone-picto');
 
-// Configuration de l'observateur d'intersection
-const observer = new IntersectionObserver(entries => {
-  entries.forEach(entry => {
-    if (entry.isIntersecting) {
-      // Ajoute une classe lorsque l'élément est visible
-      // svg.classList.remove('invisible');
-      svg.classList.add('visible');
-    } 
-    // else {
-    //   // Optionnel : Retirez la classe si nécessaire
-    //   svg.classList.remove('visible');
-
-    // }
+if (svg) {
+  // Configuration de l'observateur d'intersection
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        // Ajoute une classe lorsque l'élément est visible
+        // svg.classList.remove('invisible');
+        svg.classList.add('visible');
+      } 
+      // else {
+      //   // Optionnel : Retirez la classe si nécessaire
+      //   svg.classList.remove('visible');
+  
+      // }
+    });
   });
-});
-
-// Observer l'élément SVG
-observer.observe(svg);
+  
+  // Observer l'élément SVG
+  observer.observe(svg);
+  
+}

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

@@ -320,15 +320,30 @@
       // 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}%)`;
-      } else {
-        document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
+      let timeline = document.querySelector('.__timeline-content');
+      if (timeline) {
+        if (window.innerWidth <= 600){
+          timeline.style.transform = `translateX(${offsetmobile}%)`;
+        } else {
+          timeline.style.transform = `translateX(${offset}%)`;
+        }
       }
   
       // Enable/disable arrows based on the current slide
+<<<<<<< HEAD
       // document.getElementById('arrowPrev').disabled = false; // Always enabled now
       // document.getElementById('arrowNext').disabled = false; // Always enabled now
+=======
+      // Attach event listeners
+      let arrowprev = document.getElementById('arrowPrev');
+      if (arrowprev) {
+        arrowprev.disabled = false; // Always enabled now
+      }
+      let arrownext = document.getElementById('arrowNext')
+      if (arrownext) {
+        arrownext.disabled = false; // Always enabled now
+      }
+>>>>>>> 6c2457bb060757b2098347e082eaa1c8e2b2d6a3
     }
   
     // function prevSlide() {
@@ -339,10 +354,24 @@
     //   showSlides(currentSlide + 1);
     // }
   
+<<<<<<< HEAD
     // // Attach event listeners
     // document.getElementById('arrowPrev').addEventListener('click', prevSlide);
     // document.getElementById('arrowNext').addEventListener('click', nextSlide);
   
+=======
+    // Attach event listeners
+    let arrowprev = document.getElementById('arrowPrev');
+    if (arrowprev) {
+      arrowprev.addEventListener('click', prevSlide);
+    }
+    let arrownext = document.getElementById('arrowNext')
+    if (arrownext) {
+      arrownext.addEventListener('click', nextSlide);
+    }
+    
+
+>>>>>>> 6c2457bb060757b2098347e082eaa1c8e2b2d6a3
     // 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)');
@@ -427,52 +456,58 @@
  ////////////  slideshow home  ////////////////////////// 
 
   $(document).ready(function(){
-      $('.content-actus .view').slick({
-        slidesToShow: 3,
-        // slidesToScroll: 1,
-        dots: false,
-        arrows: true,
-        centerMode: true,
-        adaptiveHeight: true,
-        autoplay: false,
-        // autoplaySpeed: 1500,
-        // infinite: true,
-        // centerPadding: '100px',
-        responsive: [
-          {
-            breakpoint: 810,
-            settings: {
-              slidesToShow: 1,
-              adaptiveHeight: false,
-              arrows: true,
-              draggable: true,
-              centerMode: true,
-              autoplay: false,
-              // autoplaySpeed: 2000,
-            }
-          }]
-      });
-      console.log('salut slick home');
+      let actuview = $('.content-actus .view')
+      if (actuview) {
+        actuview.slick({
+          slidesToShow: 3,
+          // slidesToScroll: 1,
+          dots: false,
+          arrows: true,
+          centerMode: true,
+          adaptiveHeight: true,
+          autoplay: false,
+          // autoplaySpeed: 1500,
+          // infinite: true,
+          // centerPadding: '100px',
+          responsive: [
+            {
+              breakpoint: 810,
+              settings: {
+                slidesToShow: 1,
+                adaptiveHeight: false,
+                arrows: true,
+                draggable: true,
+                centerMode: true,
+                autoplay: false,
+                // autoplaySpeed: 2000,
+              }
+            }]
+        });
+        console.log('salut slick home');
+        
+      }
 
   });
 
       ////////////////////// start  diaporama home swiper  /////////////////////////////////
- 
-      $(document).ready(function () {
-        //initialize swiper when document ready
-        var mySwiper = new Swiper ('.swiper-container', {
+      
+      // PAS DE SWIPER CHARGÉ DANS L'ENV JS ...
+
+      // $(document).ready(function () {
+      //   //initialize swiper when document ready
+      //   let mySwiper = new Swiper ('.swiper-container', {
           
-          speed: 400,
-          spaceBetween: 100,
-          // Optional parameters
-          autoplay: {
-            delay: 3000,
-            disableOnInteraction: false,
-          },
-          direction: 'horizontal',
-          loop: true,
-        })
-      });
+      //     speed: 400,
+      //     spaceBetween: 100,
+      //     // Optional parameters
+      //     autoplay: {
+      //       delay: 3000,
+      //       disableOnInteraction: false,
+      //     },
+      //     direction: 'horizontal',
+      //     loop: true,
+      //   })
+      // });
   
       ////////////////////// end  diaporama home swiper /////////////////////////////////