From 96ae5337a1b71f9517bfaf4c0a89e5f035ea2a5e Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 5 Jul 2024 16:04:40 +0200 Subject: [PATCH] js timeline --- .../quartiers_de_demain/dist/assets/bundle.js | 2 +- .../dist/assets/css/bundle.css | 5 +- .../src/assets/js/quartiers_de_demain.js | 53 ++++++++++--------- .../src/assets/scss/partials/timeline.scss | 9 +++- ...field--config-pages--deroulement.html.twig | 4 +- 5 files changed, 42 insertions(+), 31 deletions(-) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js index aaaaa80..96e2312 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/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?"); /***/ }) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 9580d15..b687168 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/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; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js index 73976f3..c0af56a 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js +++ b/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) { -// const slides = document.querySelectorAll('.__timeline-content'); -// const totalSlides = slides.length; -// const visibleSlides = 3; // Number of slides to show at a time -// const maxSlide = totalSlides - visibleSlides; - -// // Adjust the index to ensure it stays within bounds -// currentSlide = Math.max(0, Math.min(index, maxSlide)); + function showSlides(index) { + const slides = document.querySelectorAll('.paragraph--type--phase-deroulement'); + const totalSlides = slides.length; + const visibleSlides = 3; // Number of slides to show at a time + const maxSlide = totalSlides - visibleSlides; -// // const offset = currentSlide * -40; // Calculate the offset for the transform -// document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`; + // Adjust the index to ensure it stays within bounds + currentSlide = Math.max(0, Math.min(index, maxSlide)); -// // Enable/disable arrows based on the current slide -// document.querySelector('.arrow__prev').disabled = currentSlide === 0; -// document.querySelector('.arrow__next').disabled = currentSlide === maxSlide; -// } + // Calculate the offset for the transform + const offset = currentSlide * -100 / visibleSlides; + document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`; -// function prevSlide() { -// showSlides(currentSlide - 1); -// } - -// function nextSlide() { -// showSlides(currentSlide + 1); -// } - -// // Initialize -// showSlides(currentSlide); + // Enable/disable arrows based on the current slide + document.getElementById('arrowPrev').disabled = currentSlide === 0; + document.getElementById('arrowNext').disabled = currentSlide === maxSlide; + } + 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); diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss index 71cd864..0d17828 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss +++ b/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; diff --git a/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig index 4f8a59b..fb3ab31 100644 --- a/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig @@ -68,10 +68,10 @@ {{ label }}
- -