js timeline

web/themes/custom/quartiers_de_demain/dist/assets/bundle.js

@@ -36,7 +36,7 @@ eval("\nfunction setLogoContainerSize() {\n    let svgContainer = document.query
   \**********************************************/
 /***/ (() => {
 
-eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n    'use strict';\n  \n    Drupal.behaviors.quartiers_de_demain = {\n      attach: function (context, settings) {\n        console.log('It works!');\n      }\n    };\n  } (Drupal));\n\n  \n  jQuery(document).ready(function($){\n\n    $('.open-block').click(function(){\n      $(this).toggleClass('opened');\n\n      $('.header_nav_container').toggleClass('display-nav-opened');\n    \n      if(mobile == true){\n        $(\"body\").css(\"overflow\",\"hidden\");\n      }\n\n    });\n  \n    // Hide the header_nav_container when a link inside it is clicked\n    $('.header_nav_container li').click(function() {\n        $('.header_nav_container').fadeOut();\n    });\n\n\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n  var adjustAnchor = function() {\n      var $anchor = $('.sidebar_first_container'),\n              fixedElementHeight = 500;\n      if ($anchor.length > 0) {\n          $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n      }\n  };\n\n  $(window).on('hashchange', function() {\n      adjustAnchor();\n  });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n  const nodes = {\n    logo : document.querySelectorAll('#logo-animated-container'),\n    chapeau :  document.querySelectorAll('.field_body'),\n    paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n  }\n\n  const showUp = {\n      origin: 'bottom',\n      delay: 100,\n      duration: 1000,\n      distance: '50px',\n      easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  const Show = {\n    delay: 100,\n    duration: 600,\n    easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  console.log(nodes);\n\n  ScrollReveal().reveal(nodes.logo, Show);\n  ScrollReveal().reveal(nodes.chapeau, showUp);\n  ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n  scrollReaveal();\n});\n\n\n\n////////////////// Timeline ///////////////////////\n\n// let currentSlide = 0;\n\n// function showSlides(index) {\n//     const slides = document.querySelectorAll('.__timeline-content');\n//     const totalSlides = slides.length;\n//     const visibleSlides = 3; // Number of slides to show at a time\n//     const maxSlide = totalSlides - visibleSlides;\n    \n//     // Adjust the index to ensure it stays within bounds\n//     currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n//     // const offset = currentSlide * -40; // Calculate the offset for the transform\n//     document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;\n\n//     // Enable/disable arrows based on the current slide\n//     document.querySelector('.arrow__prev').disabled = currentSlide === 0;\n//     document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;\n// }\n\n// function prevSlide() {\n//     showSlides(currentSlide - 1);\n// }\n\n// function nextSlide() {\n//     showSlides(currentSlide + 1);\n// }\n\n// // Initialize\n// showSlides(currentSlide);\n\n\n\n\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
+eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n    'use strict';\n  \n    Drupal.behaviors.quartiers_de_demain = {\n      attach: function (context, settings) {\n        console.log('It works!');\n      }\n    };\n  } (Drupal));\n\n  \n  jQuery(document).ready(function($){\n\n    $('.open-block').click(function(){\n      $(this).toggleClass('opened');\n\n      $('.header_nav_container').toggleClass('display-nav-opened');\n    \n      if(mobile == true){\n        $(\"body\").css(\"overflow\",\"hidden\");\n      }\n\n    });\n  \n    // Hide the header_nav_container when a link inside it is clicked\n    $('.header_nav_container li').click(function() {\n        $('.header_nav_container').fadeOut();\n    });\n\n\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n  var adjustAnchor = function() {\n      var $anchor = $('.sidebar_first_container'),\n              fixedElementHeight = 500;\n      if ($anchor.length > 0) {\n          $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n      }\n  };\n\n  $(window).on('hashchange', function() {\n      adjustAnchor();\n  });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n  const nodes = {\n    logo : document.querySelectorAll('#logo-animated-container'),\n    chapeau :  document.querySelectorAll('.field_body'),\n    paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n  }\n\n  const showUp = {\n      origin: 'bottom',\n      delay: 100,\n      duration: 1000,\n      distance: '50px',\n      easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  const Show = {\n    delay: 100,\n    duration: 600,\n    easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  console.log(nodes);\n\n  ScrollReveal().reveal(nodes.logo, Show);\n  ScrollReveal().reveal(nodes.chapeau, showUp);\n  ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n  scrollReaveal();\n});\n\n\n\n////////////////// Timeline ///////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n  let currentSlide = 0;\n\n  function showSlides(index) {\n      const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n      const totalSlides = slides.length;\n      const visibleSlides = 3; // Number of slides to show at a time\n      const maxSlide = totalSlides - visibleSlides;\n\n      // Adjust the index to ensure it stays within bounds\n      currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n      // Calculate the offset for the transform\n      const offset = currentSlide * -100 / visibleSlides;\n      document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n      // Enable/disable arrows based on the current slide\n      document.getElementById('arrowPrev').disabled = currentSlide === 0;\n      document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n  }\n\n  function prevSlide() {\n      showSlides(currentSlide - 1);\n  }\n\n  function nextSlide() {\n      showSlides(currentSlide + 1);\n  }\n\n  // Attach event listeners\n  document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n  document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n  // Initialize\n  showSlides(currentSlide);\n});\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
 
 /***/ })
 

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -963,7 +963,7 @@ footer span.totop #toTop .arrow-up::before {
   width: fit-content;
   margin: auto;
   position: relative;
-  top: -220px;
+  top: -115px;
 }
 #home .timeline .__timeline-arrows button {
   background-color: white;
@@ -972,6 +972,9 @@ footer span.totop #toTop .arrow-up::before {
 #home .timeline .__timeline-arrows button:hover {
   opacity: 0.5;
 }
+#home .timeline .__timeline-arrows button svg {
+  padding: 0.5rem;
+}
 #home .timeline .__timeline-content {
   width: 100vw;
   padding: 250px 0;

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

@@ -97,39 +97,42 @@ $( document ).ready(function() {
 
 ////////////////// Timeline ///////////////////////
 
-// let currentSlide = 0;
+document.addEventListener('DOMContentLoaded', function() {
+  let currentSlide = 0;
 
-// function showSlides(index) {
+  function showSlides(index) {
-//     const slides = document.querySelectorAll('.__timeline-content');
+      const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
-//     const totalSlides = slides.length;
+      const totalSlides = slides.length;
-//     const visibleSlides = 3; // Number of slides to show at a time
+      const visibleSlides = 3; // Number of slides to show at a time
-//     const maxSlide = totalSlides - visibleSlides;
+      const maxSlide = totalSlides - visibleSlides;
 
-//     // Adjust the index to ensure it stays within bounds
+      // Adjust the index to ensure it stays within bounds
-//     currentSlide = Math.max(0, Math.min(index, maxSlide));
+      currentSlide = Math.max(0, Math.min(index, maxSlide));
 
-//     // const offset = currentSlide * -40; // Calculate the offset for the transform
+      // Calculate the offset for the transform
-//     document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;
+      const offset = currentSlide * -100 / visibleSlides;
+      document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
 
-//     // Enable/disable arrows based on the current slide
+      // Enable/disable arrows based on the current slide
-//     document.querySelector('.arrow__prev').disabled = currentSlide === 0;
+      document.getElementById('arrowPrev').disabled = currentSlide === 0;
-//     document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;
+      document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
-// }
+  }
-
-// function prevSlide() {
-//     showSlides(currentSlide - 1);
-// }
-
-// function nextSlide() {
-//     showSlides(currentSlide + 1);
-// }
-
-// // Initialize
-// showSlides(currentSlide);
 
+  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);
 
+  // Initialize
+  showSlides(currentSlide);
+});
 
 })(jQuery, window);
 

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss

@@ -12,13 +12,18 @@
             width: fit-content;
             margin: auto;
             position: relative;
-            top: -220px;
+            top: -115px;
             button{
                 background-color: white;
                 border: none; 
                 &:hover{
                     opacity: 0.5;
-                }           }
+                } 
+                svg{
+                    padding: 0.5rem;
+
+                }
+            }
         }
         .__timeline-content{
             // font-size: 0;

web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig

@@ -68,10 +68,10 @@
     <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
     <div class='timeline'>
       <div class="__timeline-arrows">
-        <button class="arrow arrow__prev">
+        <button id='arrowPrev' class="arrow arrow__prev">
           {% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
         </button>
-        <button class="arrow arrow__next">
+        <button id='arrowNext' class="arrow arrow__next">
           {% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
         </button>
       </div>