From a0e5c1d028a23fa32c2922b10b25df3cdfff1b74 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 5 Jul 2024 22:36:05 +0200 Subject: [PATCH] js timeline --- .../quartiers_de_demain/dist/assets/bundle.js | 2 +- .../dist/assets/css/bundle.css | 24 +++++++-- .../src/assets/js/quartiers_de_demain.js | 20 +++++++ .../src/assets/scss/partials/timeline.scss | 52 ++++++++++++++----- 4 files changed, 78 insertions(+), 20 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 96e2312..8d02732 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\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?"); +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 \n // Check and replace empty day fields\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const dateElement = paragraph.querySelector('.date');\n const dayField = paragraph.querySelector('.field_field_date_de_jour');\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n\n if (dayField && dayField.textContent.trim()) {\n dateElement.classList.add('jour');\n } else {\n dateElement.classList.add('mois');\n const monthText = monthField.textContent.trim();\n // console.log(monthText)\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n console.log(monthField)\n }\n }\n });\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 e5ac1ce..09751ea 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 @@ -1028,34 +1028,48 @@ footer span.totop #toTop .arrow-up::before { padding-bottom: 1rem; } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date { - width: 50%; + width: fit-content; display: flex; flex-direction: column; margin: auto; align-items: center; + padding-right: 1rem; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee { +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .moi-annee { display: inline-flex; font-size: 0.6rem; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee .field_field_date_de_moi { +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .moi-annee .field_field_date_de_moi { padding-right: 0.2rem; text-transform: uppercase; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour { +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .field_field_date_de_jour { font-size: 5rem; } +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.mois .moi-annee { + display: flex; + font-size: 0.6rem; + flex-direction: column; + align-items: center; +} +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.mois .moi-annee .field_field_date_de_moi { + padding-right: 0.2rem; + text-transform: uppercase; + font-size: 4rem; +} #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text { border: solid rgb(7, 50, 194) 1px; border-radius: 5%; padding: 0.6rem 0.6rem; - width: 45%; + width: fit-content; + min-width: 50%; } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { font-size: 0.6rem; } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p { font-size: 0.5rem !important; + margin: 0; } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above { display: none; 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 c0af56a..37ab7e4 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 @@ -130,6 +130,26 @@ document.addEventListener('DOMContentLoaded', function() { document.getElementById('arrowPrev').addEventListener('click', prevSlide); document.getElementById('arrowNext').addEventListener('click', nextSlide); + + // Check and replace empty day fields + document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { + const dateElement = paragraph.querySelector('.date'); + const dayField = paragraph.querySelector('.field_field_date_de_jour'); + const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)'); + + if (dayField && dayField.textContent.trim()) { + dateElement.classList.add('jour'); + } else { + dateElement.classList.add('mois'); + const monthText = monthField.textContent.trim(); + // console.log(monthText) + if (monthText.length >= 3) { + monthField.textContent = monthText.slice(0, 3); + console.log(monthField) + } + } + }); + // Initialize showSlides(currentSlide); }); 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 825ad7d..b33efdf 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 @@ -81,38 +81,62 @@ flex-direction: row; padding-bottom: 1rem; .date{ - width: 50%; + + width: fit-content; display: flex; flex-direction: column; margin: auto; align-items: center; - .moi-annee{ - display: inline-flex; - font-size: 0.6rem; - .field_field_date_de_moi{ - padding-right: 0.2rem; - text-transform: uppercase; - + padding-right: 1rem; + + &.jour{ + .moi-annee{ + display: inline-flex; + font-size: 0.6rem; + .field_field_date_de_moi{ + padding-right: 0.2rem; + text-transform: uppercase; + } + } + .field_field_date_de_jour{ + font-size: 5rem; } } - .field_field_date_de_jour{ - font-size: 5rem; - + &.mois{ + .moi-annee{ + display: flex; + font-size: 0.6rem; + flex-direction: column; + align-items: center; + .field_field_date_de_moi{ + padding-right: 0.2rem; + text-transform: uppercase; + font-size: 4rem; + } + } } + } .text{ border: solid $blue_QDD 1px; border-radius: 5%; padding: 0.6rem 0.6rem; - width: 45%; + + width: fit-content; + min-width: 50%; .field_field_titre{ font-size: 0.6rem; } .field_field_description{ - p{font-size: 0.5rem !important;} - .field--label-above{display: none;} + p{ + font-size: 0.5rem !important; + margin: 0; + } + .field--label-above{ + display: none; + } } }