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 086503e..b9d0134 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("document.addEventListener('scroll', function() {\n const scrolled = win \**********************************************/ /***/ (function() { -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 //////// start header ////////////\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');\n const headerNavContainer = document.querySelector('.header_nav_container');\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n const isTargetPath = window.location.pathname === '/';\n\n // Fonction pour démarrer l'animation du logo SVG\n function startLogoAnimation() {\n logo.classList.add('animated');\n }\n \n // Fonction pour arrêter l'animation du logo SVG\n function stopLogoAnimation() {\n logo.classList.remove('animated');\n }\n \n // Vérifier si le header a la classe header--collapse\n function checkHeaderCollapse() {\n if (header.classList.contains('header--collapsed')) {\n stopLogoAnimation();\n } else if (header.classList.contains('header--collapsed-already')) {\n stopLogoAnimation();\n } else {\n startLogoAnimation();\n }\n\n }\n \n // Appeler la fonction au chargement initial\n checkHeaderCollapse();\n \n // Observer les changements de classe sur le header\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.attributeName === 'class') {\n checkHeaderCollapse();\n }\n });\n });\n observer.observe(header, { attributes: true });\n \n\n // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n if (!isFirstLoad || !isTargetPath) {\n header.classList.add('header--collapsed-already');\n // logo.classList.remove('animated');\n stopLogoAnimation();\n } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 5000);\n }\n\n //////////////////////////////////////\n\n let lastScrollTop = 0;\n let threshold = 100; // Change this value as needed\n let isHidden = false;\n \n function slideOut() {\n headerNavContainer.animate([\n { transform: 'translateX(0)' },\n { transform: 'translateX(-100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = true;\n }\n \n function slideIn() {\n headerNavContainer.animate([\n { transform: 'translateX(-100%)' },\n { transform: 'translateX(0)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideDown() {\n // headerNavContainer.style.display = 'block';\n headerNavContainer.animate([\n { transform: 'translateY(0%)' },\n { transform: 'translateY(+100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideUp() {\n headerNavContainer.animate([\n { transform: 'translateY(100%)' },\n { transform: 'translateY(0%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n }).onfinish = function() {\n // headerNavContainer.style.display = 'none';\n };\n isHidden = true;\n }\n // Fonction pour ajuster la hauteur du header lors du défilement\n function adjustHeaderHeight() {\n if (window.scrollY > 0) {\n header.classList.add('shrink');\n } else {\n header.classList.remove('shrink');\n }\n }\n\n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const isMobile = window.innerWidth < 811;\n\n if (scrollTop > threshold && !isHidden) {\n if (isMobile) {\n slideUp();\n } else {\n slideOut();\n }\n } else if (scrollTop <= threshold && isHidden) {\n if (isMobile) {\n slideDown();\n } else {\n slideIn();\n }\n }\n \n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n if (window.innerWidth < 811) {\n slideDown();\n } else {\n slideIn();\n }\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideOut();\n }\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n window.addEventListener('scroll', adjustHeaderHeight);\n \n // Mouse events for desktop\n header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n header.addEventListener('touchstart', handleTouchAndMouseEnter);\n header.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n if (window.innerWidth < 811) {\n slideDown();\n } else { \n slideIn();\n } \n } else {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideIn();\n }\n }\n \n });\n\n //////// end header ////////////\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 //////////////////////// start script smooth apparition des textes /////////////////\n\n function 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 enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),\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 ScrollReveal().reveal(nodes.enjeux, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n //////////////////////// end script smooth apparition des textes /////////////////\n\n //////////////////// start Timeline script ///////////////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n \n //// responsive ///\n function getVisibleSlides() {\n if (window.innerWidth <= 600) {\n return 1; // Show 1 slide on small screens\n } else if (window.innerWidth <= 900) {\n return 4; // Show 4 slides on medium screens\n } else {\n return 4; // Show 4 slides on large screens\n }\n }\n \n function showSlides(index) {\n const slides = document.querySelectorAll('.__paragraphs');\n const totalSlides = slides.length;\n const visibleSlides = getVisibleSlides();\n const maxSlide = totalSlides - visibleSlides;\n \n // Adjust the index to ensure it loops\n if (index > maxSlide) {\n currentSlide = 0; // Go back to the first slide\n } else if (index < 0) {\n currentSlide = maxSlide; // Go to the last slide\n } else {\n currentSlide = index;\n }\n \n // Calculate the offset for the transform\n const offset = currentSlide * -50 / visibleSlides;\n const offsetmobile = currentSlide * -10 / visibleSlides;\n let timeline = document.querySelector('.__timeline-content');\n if (timeline) {\n if (window.innerWidth <= 600){\n timeline.style.transform = `translateX(${offsetmobile}%)`;\n } else {\n timeline.style.transform = `translateX(${offset}%)`;\n }\n }\n \n // Enable/disable arrows based on the current slide\n // document.getElementById('arrowPrev').disabled = false; // Always enabled now\n // document.getElementById('arrowNext').disabled = false; // Always enabled now\n // Attach event listeners\n let arrowprev = document.getElementById('arrowPrev');\n if (arrowprev) {\n arrowprev.disabled = false; // Always enabled now\n }\n let arrownext = document.getElementById('arrowNext')\n if (arrownext) {\n arrownext.disabled = false; // Always enabled now\n }\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 // Attach event listeners\n let arrowprev = document.getElementById('arrowPrev');\n if (arrowprev) {\n arrowprev.addEventListener('click', prevSlide);\n }\n let arrownext = document.getElementById('arrowNext')\n if (arrownext) {\n arrownext.addEventListener('click', nextSlide);\n }\n \n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText === \"juillet\") {\n monthField.textContent = monthText.slice(0, 4);\n monthField.classList.add('after');\n } else if (monthText === \"juin\") {\n monthField.textContent = monthText.slice(0, 4);\n } else if (monthText.length > 3) {\n monthField.textContent = monthText.slice(0, 3);\n monthField.classList.add('after');\n }\n }\n });\n \n // Fonction pour ajouter ou retirer la classe .only\n function updateDateClasses() {\n document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n \n if (date2Element && !date2Element.textContent.trim()) {\n if (yearElement) {\n yearElement.classList.add('only');\n }\n } else {\n if (yearElement) {\n yearElement.classList.remove('only');\n }\n }\n });\n }\n \n // Exécuter la fonction une première fois pour le contenu déjà présent\n updateDateClasses();\n \n // MutationObserver pour surveiller les changements dans le DOM\n const observer = new MutationObserver(function(mutationsList, observer) {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n updateDateClasses();\n }\n }\n });\n \n // Configuration de l'observateur\n const config = { childList: true, subtree: true };\n \n // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique\n observer.observe(document.body, config);\n \n // Handle window resize\n window.addEventListener('resize', function() {\n showSlides(currentSlide); // Recalculate the slides on resize\n });\n \n // Initialize\n showSlides(currentSlide);\n });\n \n\n //////////////////////// end Timeline script /////////////////////////////////////////////\n\n /////////////////// caracteres body actus/////////////////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n // Maximum number of characters to display\n const maxChars = 140; // Adjust this value as needed\n \n document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {\n let text = paragraph.textContent.trim();\n if (text.length > maxChars) {\n let truncatedText = text.slice(0, maxChars) + '...';\n paragraph.textContent = truncatedText;\n }\n });\n });\n \n\n //////////// slideshow home ////////////////////////// \n\n $(document).ready(function(){\n let actuview = $('.content-actus .view')\n if (actuview) {\n actuview.slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n autoplay: false,\n // autoplaySpeed: 1500,\n // infinite: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n autoplay: false,\n // autoplaySpeed: 2000,\n }\n }]\n });\n console.log('salut slick home');\n \n }\n\n });\n\n ////////////////////// start diaporama home swiper /////////////////////////////////\n \n // PAS DE SWIPER CHARGÉ DANS L'ENV JS ...\n\n // $(document).ready(function () {\n // //initialize swiper when document ready\n // let mySwiper = new Swiper ('.swiper-container', {\n \n // speed: 400,\n // spaceBetween: 100,\n // // Optional parameters\n // autoplay: {\n // delay: 3000,\n // disableOnInteraction: false,\n // },\n // direction: 'horizontal',\n // loop: true,\n // })\n // });\n \n ////////////////////// end diaporama home swiper /////////////////////////////////\n \n\n ////////////////////// start calendrier home swiper /////////////////////////////////\n $(document).ready(function(){\n $('.paragraph--type--phase-deroulement').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n autoplay: false,\n draggable: true,\n // autoplaySpeed: 1500,\n // infinite: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n autoplay: false,\n // autoplaySpeed: 2000,\n }\n }]\n });\n console.log('salut slick home');\n \n });\n \n ////////////////////// end diaporama home swiper /////////////////////////////////\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 //////// start header ////////////\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');\n const headerNavContainer = document.querySelector('.header_nav_container');\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n const isTargetPath = window.location.pathname === '/';\n\n // Fonction pour démarrer l'animation du logo SVG\n function startLogoAnimation() {\n logo.classList.add('animated');\n }\n \n // Fonction pour arrêter l'animation du logo SVG\n function stopLogoAnimation() {\n logo.classList.remove('animated');\n }\n \n // Vérifier si le header a la classe header--collapse\n function checkHeaderCollapse() {\n if (header.classList.contains('header--collapsed')) {\n stopLogoAnimation();\n } else if (header.classList.contains('header--collapsed-already')) {\n stopLogoAnimation();\n } else {\n startLogoAnimation();\n }\n\n }\n \n // Appeler la fonction au chargement initial\n checkHeaderCollapse();\n \n // Observer les changements de classe sur le header\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.attributeName === 'class') {\n checkHeaderCollapse();\n }\n });\n });\n observer.observe(header, { attributes: true });\n \n\n // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n if (!isFirstLoad || !isTargetPath) {\n header.classList.add('header--collapsed-already');\n // logo.classList.remove('animated');\n stopLogoAnimation();\n } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 5000);\n }\n\n //////////////////////////////////////\n\n let lastScrollTop = 0;\n let threshold = 100; // Change this value as needed\n let isHidden = false;\n \n function slideOut() {\n headerNavContainer.animate([\n { transform: 'translateX(0)' },\n { transform: 'translateX(-100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = true;\n }\n \n function slideIn() {\n headerNavContainer.animate([\n { transform: 'translateX(-100%)' },\n { transform: 'translateX(0)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideDown() {\n // headerNavContainer.style.display = 'block';\n headerNavContainer.animate([\n { transform: 'translateY(0%)' },\n { transform: 'translateY(+100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideUp() {\n headerNavContainer.animate([\n { transform: 'translateY(100%)' },\n { transform: 'translateY(0%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n }).onfinish = function() {\n // headerNavContainer.style.display = 'none';\n };\n isHidden = true;\n }\n // Fonction pour ajuster la hauteur du header lors du défilement\n function adjustHeaderHeight() {\n if (window.scrollY > 0) {\n header.classList.add('shrink');\n } else {\n header.classList.remove('shrink');\n }\n }\n\n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const isMobile = window.innerWidth < 811;\n\n if (scrollTop > threshold && !isHidden) {\n if (isMobile) {\n slideUp();\n } else {\n slideOut();\n }\n } else if (scrollTop <= threshold && isHidden) {\n if (isMobile) {\n slideDown();\n } else {\n slideIn();\n }\n }\n \n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n if (window.innerWidth < 811) {\n slideDown();\n } else {\n slideIn();\n }\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideOut();\n }\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n window.addEventListener('scroll', adjustHeaderHeight);\n \n // Mouse events for desktop\n header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n header.addEventListener('touchstart', handleTouchAndMouseEnter);\n header.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n if (window.innerWidth < 811) {\n slideDown();\n } else { \n slideIn();\n } \n } else {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideIn();\n }\n }\n \n });\n\n //////// end header ////////////\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 //////////////////////// start script smooth apparition des textes /////////////////\n\n function 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 enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),\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 ScrollReveal().reveal(nodes.enjeux, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n //////////////////////// end script smooth apparition des textes /////////////////\n\n // //////////////////// start Timeline script ///////////////////////\n\n // // document.addEventListener('DOMContentLoaded', function() {\n // // let currentSlide = 0;\n \n // // //// responsive ///\n // // function getVisibleSlides() {\n // // if (window.innerWidth <= 600) {\n // // return 1; // Show 1 slide on small screens\n // // } else if (window.innerWidth <= 900) {\n // // return 4; // Show 4 slides on medium screens\n // // } else {\n // // return 4; // Show 4 slides on large screens\n // // }\n // // }\n \n // // function showSlides(index) {\n // // const slides = document.querySelectorAll('.__paragraphs');\n // // const totalSlides = slides.length;\n // // const visibleSlides = getVisibleSlides();\n // // const maxSlide = totalSlides - visibleSlides;\n \n // // // Adjust the index to ensure it loops\n // // if (index > maxSlide) {\n // // currentSlide = 0; // Go back to the first slide\n // // } else if (index < 0) {\n // // currentSlide = maxSlide; // Go to the last slide\n // // } else {\n // // currentSlide = index;\n // // }\n \n // // // Calculate the offset for the transform\n // // const offset = currentSlide * -50 / visibleSlides;\n // // const offsetmobile = currentSlide * -10 / visibleSlides;\n // // let timeline = document.querySelector('.__timeline-content');\n // // if (timeline) {\n // // if (window.innerWidth <= 600){\n // // timeline.style.transform = `translateX(${offsetmobile}%)`;\n // // } else {\n // // timeline.style.transform = `translateX(${offset}%)`;\n // // }\n // // }\n \n // // // Enable/disable arrows based on the current slide\n // // // document.getElementById('arrowPrev').disabled = false; // Always enabled now\n // // // document.getElementById('arrowNext').disabled = false; // Always enabled now\n // // // Attach event listeners\n // // let arrowprev = document.getElementById('arrowPrev');\n // // if (arrowprev) {\n // // arrowprev.disabled = false; // Always enabled now\n // // }\n // // let arrownext = document.getElementById('arrowNext')\n // // if (arrownext) {\n // // arrownext.disabled = false; // Always enabled now\n // // }\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 // // // Attach event listeners\n // // let arrowprev = document.getElementById('arrowPrev');\n // // if (arrowprev) {\n // // arrowprev.addEventListener('click', prevSlide);\n // // }\n // // let arrownext = document.getElementById('arrowNext')\n // // if (arrownext) {\n // // arrownext.addEventListener('click', nextSlide);\n // // }\n \n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText === \"juillet\") {\n monthField.textContent = monthText.slice(0, 4);\n monthField.classList.add('after');\n } else if (monthText === \"juin\") {\n monthField.textContent = monthText.slice(0, 4);\n } else if (monthText.length > 3) {\n monthField.textContent = monthText.slice(0, 3);\n monthField.classList.add('after');\n }\n }\n });\n \n // Fonction pour ajouter ou retirer la classe .only\n function updateDateClasses() {\n document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n \n if (date2Element && !date2Element.textContent.trim()) {\n if (yearElement) {\n yearElement.classList.add('only');\n }\n } else {\n if (yearElement) {\n yearElement.classList.remove('only');\n }\n }\n });\n }\n \n // Exécuter la fonction une première fois pour le contenu déjà présent\n updateDateClasses();\n \n // MutationObserver pour surveiller les changements dans le DOM\n const observer = new MutationObserver(function(mutationsList, observer) {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n updateDateClasses();\n }\n }\n });\n \n // // Configuration de l'observateur\n // const config = { childList: true, subtree: true };\n \n // // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique\n // observer.observe(document.body, config);\n \n // // // Handle window resize\n // // window.addEventListener('resize', function() {\n // // showSlides(currentSlide); // Recalculate the slides on resize\n // // });\n \n // // // Initialize\n // // showSlides(currentSlide);\n // // });\n\n // ////////////////////// start calendrier home /////////////////////////////////\n $(document).ready(function(){\n $('.__timeline-content').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n autoplay: false,\n draggable: true,\n // autoplaySpeed: 1500,\n infinite: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n autoplay: false,\n // autoplaySpeed: 2000,\n }\n }]\n });\n console.log('salut slick calendrier');\n \n });\n \n // ////////////////////// end calendrier home /////////////////////////////////\n \n \n\n //////////////////////// end Timeline script /////////////////////////////////////////////\n\n /////////////////// caracteres body actus/////////////////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n // Maximum number of characters to display\n const maxChars = 140; // Adjust this value as needed\n \n document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {\n let text = paragraph.textContent.trim();\n if (text.length > maxChars) {\n let truncatedText = text.slice(0, maxChars) + '...';\n paragraph.textContent = truncatedText;\n }\n });\n });\n \n\n //////////// slideshow home ////////////////////////// \n\n $(document).ready(function(){\n let actuview = $('.content-actus .view')\n if (actuview) {\n actuview.slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n autoplay: false,\n // autoplaySpeed: 1500,\n // infinite: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n autoplay: false,\n // autoplaySpeed: 2000,\n }\n }]\n });\n console.log('salut slick home');\n \n }\n\n });\n\n ////////////////////// start diaporama home swiper /////////////////////////////////\n \n // PAS DE SWIPER CHARGÉ DANS L'ENV JS ...\n\n // $(document).ready(function () {\n // //initialize swiper when document ready\n // let mySwiper = new Swiper ('.swiper-container', {\n \n // speed: 400,\n // spaceBetween: 100,\n // // Optional parameters\n // autoplay: {\n // delay: 3000,\n // disableOnInteraction: false,\n // },\n // direction: 'horizontal',\n // loop: true,\n // })\n // });\n \n ////////////////////// end diaporama home swiper /////////////////////////////////\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?"); /***/ }) 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 d0821ba..8f6e3e0 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 @@ -1119,8 +1119,6 @@ footer { display: none; } -/* TIMELINE -–––––––––––––––––––––––––––––––––––––––––––––––––– */ #home * { box-sizing: border-box; } @@ -1143,145 +1141,67 @@ footer { padding-top: 4rem; font-size: 1.7rem; } -#home .timeline { - display: flex; - flex-direction: column; - white-space: nowrap; - overflow: hidden; +#home .__container-deroulement .config_pages--type--deroulement { + height: 550px; + margin-top: 4.5rem; +} +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase { + height: 100%; +} +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline { + height: 100%; +} +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content { padding-top: 2rem; - padding-bottom: 3rem; - height: 800px; } -@media (max-width: 1090px) { - #home .timeline { - overflow: scroll; - height: 600px; - } +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track { + height: 350px; } -#home .timeline .__timeline-arrows { - width: fit-content; - margin: auto; - margin-top: 0; - margin-bottom: 4rem; - padding-bottom: 2rem; -} -@media (max-width: 1090px) { - #home .timeline .__timeline-arrows { - margin-bottom: 9rem; - } -} -#home .timeline .__timeline-arrows button { - background-color: transparent; - border: none; - padding-left: 1rem; -} -#home .timeline .__timeline-arrows button:hover { - opacity: 0.5; -} -@media (max-width: 1090px) { - #home .timeline .__timeline-arrows button svg { - padding: 0.5rem; - } -} -#home .timeline .__timeline-content { - width: fit-content; - padding-top: 7rem; - padding-bottom: 2rem; - padding-left: 3rem; - transition: all 1s; -} -#home .timeline .__timeline-content .__paragraphs { - position: relative; - display: inline-flex; - width: 600px; - height: 1px; - background: black; -} -#home .timeline .__timeline-content .__paragraphs:not(:first-child) { - margin-left: 14px; -} -#home .timeline .__timeline-content .__paragraphs::after { - content: ""; - position: absolute; - top: 50%; - left: -18px; - bottom: 0; - width: 17px; - height: 17px; - transform: translateY(-50%); - border-radius: 50%; - background: black; -} -@media (max-width: 810px) { - #home .timeline .__timeline-content .__paragraphs { - width: 100vw; - } -} -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement { display: flex; flex-direction: row; - position: absolute; + align-items: center; + padding-right: 1rem; padding-bottom: 1rem; - left: -18px; - top: -16px; - transform: translateY(-100%); - width: 600px; - height: 300px; - font-size: 1rem; - white-space: normal; - color: black; + border-bottom: solid black 1px; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .slick-list { - padding: 0 !important; - width: 100%; +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before { + content: "."; + font-size: 4rem; + position: absolute; + top: 216px; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .slick-list .slick-track { - width: 100% !important; -} -@media (max-width: 550px) { - #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement { - padding-left: 0rem; - width: 240px; - align-items: end; - height: 200px; - } -} -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date { width: fit-content !important; display: flex; flex-direction: column; - margin: auto; - margin-left: 0; - margin-right: 0; - align-items: flex-start; padding-right: 1rem; - margin-bottom: 1rem; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_jour { font-size: 2.5rem; line-height: 0.3rem; } @media (max-width: 550px) { - #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour { + #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_jour { font-size: 3rem; line-height: 1.3rem; } } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_moi { padding-right: 0.2rem; text-transform: uppercase; font-size: 4rem; display: inline-flex; } @media (max-width: 550px) { - #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi { + #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_moi { font-size: 4rem; } } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi .after::after { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_moi .after::after { content: "."; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee { display: flex; align-items: center; font-size: 0.6rem; @@ -1289,71 +1209,72 @@ footer { top: -10px; } @media (max-width: 1090px) { - #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee { + #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee { font-size: 1.2rem; } } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee { display: inline-flex; align-items: center; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee::after { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee::after { content: url("../img/noun-arrow-to-right-black.svg"); display: flex; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only { display: inline-flex; align-items: center; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only::after { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only::after { content: ""; display: flex; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .date2 { display: inline-flex; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_jour { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_jour { padding-right: 0.2rem; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_moi { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_moi { padding-right: 0.2rem; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text { border: solid rgb(7, 50, 194) 1px; border-radius: 5%; padding: 0.6rem 0.6rem; line-height: 1.1; width: 41%; min-width: 35%; + height: 300px; } @media (max-width: 1090px) { - #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text { + #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text { height: 200px; min-width: 80%; } } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { - font-size: 0.6rem; +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_titre { + font-size: 0.7rem; font-family: "gilroy-semibold"; } @media (max-width: 1090px) { - #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { + #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_titre { font-size: 1rem; } } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_description { font-family: "gilroy-regular"; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p { - font-size: 0.6rem !important; +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_description p { + font-size: 0.7rem !important; margin: 0; } @media (max-width: 1090px) { - #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p { + #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_description p { font-size: 1rem !important; } } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above { +#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_description .field--label-above { display: none; } diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd-avec-points.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd-avec-points.svg new file mode 100644 index 0000000..c959c04 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd-avec-points.svg @@ -0,0 +1,191 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd-vierge.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd-vierge.svg new file mode 100644 index 0000000..435818c --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd-vierge.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd.svg new file mode 100644 index 0000000..8b4d77f --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg index a80c2db..67de0b8 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg @@ -5,8 +5,8 @@ version="1.1" id="svg1" width="1440.5675" - height="6329.9683" - viewBox="0 0 1440.5675 6329.9684" + height="6585.9683" + viewBox="0 0 1440.5675 6585.9684" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> + transform="translate(-509.36305,-2445.5661)"> 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 76d2b65..58c9b85 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 @@ -286,84 +286,84 @@ //////////////////////// end script smooth apparition des textes ///////////////// - //////////////////// start Timeline script /////////////////////// + // //////////////////// start Timeline script /////////////////////// - document.addEventListener('DOMContentLoaded', function() { - let currentSlide = 0; + // // document.addEventListener('DOMContentLoaded', function() { + // // let currentSlide = 0; - //// responsive /// - function getVisibleSlides() { - if (window.innerWidth <= 600) { - return 1; // Show 1 slide on small screens - } else if (window.innerWidth <= 900) { - return 4; // Show 4 slides on medium screens - } else { - return 4; // Show 4 slides on large screens - } - } + // // //// responsive /// + // // function getVisibleSlides() { + // // if (window.innerWidth <= 600) { + // // return 1; // Show 1 slide on small screens + // // } else if (window.innerWidth <= 900) { + // // return 4; // Show 4 slides on medium screens + // // } else { + // // return 4; // Show 4 slides on large screens + // // } + // // } - function showSlides(index) { - const slides = document.querySelectorAll('.__paragraphs'); - const totalSlides = slides.length; - const visibleSlides = getVisibleSlides(); - const maxSlide = totalSlides - visibleSlides; + // // function showSlides(index) { + // // const slides = document.querySelectorAll('.__paragraphs'); + // // const totalSlides = slides.length; + // // const visibleSlides = getVisibleSlides(); + // // const maxSlide = totalSlides - visibleSlides; - // Adjust the index to ensure it loops - 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; - } + // // // Adjust the index to ensure it loops + // // 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; - let timeline = document.querySelector('.__timeline-content'); - if (timeline) { - if (window.innerWidth <= 600){ - timeline.style.transform = `translateX(${offsetmobile}%)`; - } else { - timeline.style.transform = `translateX(${offset}%)`; - } - } + // // // Calculate the offset for the transform + // // const offset = currentSlide * -50 / visibleSlides; + // // const offsetmobile = currentSlide * -10 / visibleSlides; + // // 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 - // 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 - } - } + // // // Enable/disable arrows based on the current slide + // // // 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 + // // } + // // } - // function prevSlide() { - // showSlides(currentSlide - 1); - // } + // // // function prevSlide() { + // // // showSlides(currentSlide - 1); + // // // } - // function nextSlide() { - // showSlides(currentSlide + 1); - // } + // // // function nextSlide() { + // // // showSlides(currentSlide + 1); + // // // } - // // Attach event listeners - // document.getElementById('arrowPrev').addEventListener('click', prevSlide); - // document.getElementById('arrowNext').addEventListener('click', nextSlide); + // // // // 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); - } + // // // 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); + // // } // Update month field to only show the first 3 letters @@ -413,20 +413,55 @@ } }); - // Configuration de l'observateur - const config = { childList: true, subtree: true }; + // // Configuration de l'observateur + // const config = { childList: true, subtree: true }; - // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique - observer.observe(document.body, config); + // // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique + // observer.observe(document.body, config); - // Handle window resize - window.addEventListener('resize', function() { - showSlides(currentSlide); // Recalculate the slides on resize - }); + // // // Handle window resize + // // window.addEventListener('resize', function() { + // // showSlides(currentSlide); // Recalculate the slides on resize + // // }); + + // // // Initialize + // // showSlides(currentSlide); + // // }); + + // ////////////////////// start calendrier home ///////////////////////////////// + $(document).ready(function(){ + $('.__timeline-content').slick({ + slidesToShow: 3, + // slidesToScroll: 1, + dots: false, + arrows: true, + centerMode: true, + adaptiveHeight: true, + autoplay: false, + draggable: true, + // 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 calendrier'); + + }); + + // ////////////////////// end calendrier home ///////////////////////////////// - // Initialize - showSlides(currentSlide); - }); //////////////////////// end Timeline script ///////////////////////////////////////////// @@ -506,39 +541,6 @@ ////////////////////// end diaporama home swiper ///////////////////////////////// - ////////////////////// start calendrier home swiper ///////////////////////////////// - $(document).ready(function(){ - $('.paragraph--type--phase-deroulement').slick({ - slidesToShow: 3, - // slidesToScroll: 1, - dots: false, - arrows: true, - centerMode: true, - adaptiveHeight: true, - autoplay: false, - draggable: true, - // 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'); - - }); - - ////////////////////// end diaporama home swiper ///////////////////////////////// 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 4c8ec93..4bfcfca 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 @@ -1,6 +1,6 @@ -/* TIMELINE -–––––––––––––––––––––––––––––––––––––––––––––––––– */ +// /* TIMELINE +// –––––––––––––––––––––––––––––––––––––––––––––––––– */ #home{ * { box-sizing: border-box; } @@ -14,243 +14,164 @@ cursor:grab; } position: relative; - h2{ - width: fit-content; - margin: auto; - padding-top: 4rem; - font-size: 1.7rem; - - } - - } - .timeline { - display: flex; - flex-direction: column; - white-space: nowrap; - overflow: hidden; - padding-top: 2rem; - padding-bottom: 3rem; - height: 800px; - @media(max-width:1090px){ - // padding-top: 14rem; - overflow: scroll; - height: 600px; - } - .__timeline-arrows{ + h2{ width: fit-content; margin: auto; - margin-top: 0; - margin-bottom: 4rem; - padding-bottom: 2rem; - @media(max-width:1090px){ - // top: -211px; - // display: none; - margin-bottom: 9rem; - } - button{ - background-color: transparent; - border: none; - padding-left: 1rem; - &:hover{ - opacity: 0.5; - } - @media(max-width:1090px){ - svg{ - padding: 0.5rem; - } - } - } - } - .__timeline-content{ - // font-size: 0; - // width: 100vw; - width: fit-content; - padding-top: 7rem; - padding-bottom: 2rem; - padding-left: 3rem; - transition: all 1s; - .__paragraphs{ - position: relative; - display: inline-flex; - width: 600px; - height: 1px; - background: black; - // &:last-of-type{ - // height: 0px; - // } - // &:last-child { - // width: 20px; - // } - &:not(:first-child) { - margin-left: 14px; - } - &::after { - content: ""; - position: absolute; - top: 50%; - left: -18px; - bottom: 0; - width: 17px; - height: 17px; - transform: translateY(-50%); - border-radius: 50%; - background: black; - } - @media(max-width:810px){ - width: 100vw; - } + padding-top: 4rem; + font-size: 1.7rem; + + } + .config_pages--type--deroulement{ + height: 550px; + margin-top: 4.5rem; + .field_field_phase{ + height: 100%; + .timeline{ + height: 100%; + .__timeline-content{ + padding-top: 2rem; - .paragraph--type--phase-deroulement{ - display: flex; - flex-direction: row; - position: absolute; - padding-bottom: 1rem; - // left: 65%; - left: -18px; - top: -16px; - transform: translateY(-100%); - width: 600px; - height: 300px; - font-size: 1rem; - white-space: normal; - color: black; - .slick-list{ - padding: 0 !important; - width: 100%; .slick-track{ - width: 100% !important; - // .slick-slide&.date{ - // width: fit-content !important; + height: 350px; + // border-bottom: solid black 1px; + // &.__paragraphs{ + // ::before{ + // content: '.'; + // } // } + .paragraph--type--phase-deroulement{ + display: flex; + flex-direction: row; + align-items: center; + padding-right: 1rem; + padding-bottom: 1rem; + border-bottom: solid black 1px; + &:before{ + content:"."; + font-size: 4rem; + position: absolute; + top: 216px; + + } + + .date{ + width: fit-content !important; + display: flex; + flex-direction: column; + padding-right: 1rem; + .field_field_date_de_jour{ + font-size: 2.5rem; + line-height: 0.3rem; + @media(max-width:550px){ + font-size: 3rem; + line-height: 1.3rem; + } + } + .field_field_date_de_moi{ + padding-right: 0.2rem; + text-transform: uppercase; + font-size: 4rem; + display: inline-flex; + @media(max-width:550px){ + font-size: 4rem; + } + .after{ + &::after{ + content: '.'; + } + } + + } + + + .annee{ + display: flex; + align-items: center; + font-size: 0.6rem; + position: relative; + top: -10px; + @media(max-width:1090px){ + font-size: 1.2rem; + } + .field_field_date_de_annee{ + display: inline-flex; + align-items: center; + &::after{ + content: url('../img/noun-arrow-to-right-black.svg'); + display: flex; + } + + } + .field_field_date_de_annee.only{ + display: inline-flex; + align-items: center; + &::after{ + content: ''; + display: flex; + } + + } + .date2{ + display: inline-flex; + + .field_field_date_a_jour{ + padding-right: 0.2rem; + } + .field_field_date_a_moi{ + padding-right: 0.2rem; + + } + } + + } + + } + + .text{ + border: solid $blue_QDD 1px; + border-radius: 5%; + padding: 0.6rem 0.6rem; + line-height: 1.1; + width: 41%; + min-width: 35%; + height: 300px; + + + @media(max-width:1090px){ + height: 200px; + min-width: 80%; + } + .field_field_titre{ + font-size: 0.7rem; + // font-weight: 800; + font-family: 'gilroy-semibold'; + @media(max-width:1090px){ + font-size: 1rem; + } + } + .field_field_description{ + font-family: 'gilroy-regular'; + p{ + font-size: 0.7rem !important; + margin: 0; + @media(max-width:1090px){ + font-size: 1rem !important; + } + } + .field--label-above{ + display: none; + } + } + + } + } } } - // padding-bottom: 1rem; - // padding-left: 2rem; - // padding-right: 2rem; - @media(max-width:550px){ - padding-left: 0rem; - width: 240px; - align-items: end; - height: 200px; - } - .date{ - width: fit-content !important; - display: flex; - flex-direction: column; - margin: auto; - margin-left: 0; - margin-right: 0; - align-items: flex-start; - padding-right: 1rem; - margin-bottom: 1rem; - .field_field_date_de_jour{ - font-size: 2.5rem; - line-height: 0.3rem; - @media(max-width:550px){ - font-size: 3rem; - line-height: 1.3rem; - } - } - .field_field_date_de_moi{ - padding-right: 0.2rem; - text-transform: uppercase; - font-size: 4rem; - display: inline-flex; - @media(max-width:550px){ - font-size: 4rem; - } - .after{ - &::after{ - content: '.'; - } - } - - } - - - .annee{ - display: flex; - align-items: center; - font-size: 0.6rem; - position: relative; - top: -10px; - @media(max-width:1090px){ - font-size: 1.2rem; - } - .field_field_date_de_annee{ - display: inline-flex; - align-items: center; - &::after{ - content: url('../img/noun-arrow-to-right-black.svg'); - display: flex; - } - - } - .field_field_date_de_annee.only{ - display: inline-flex; - align-items: center; - &::after{ - content: ''; - display: flex; - } - - } - .date2{ - display: inline-flex; - - .field_field_date_a_jour{ - padding-right: 0.2rem; - } - .field_field_date_a_moi{ - padding-right: 0.2rem; - - } - } - - } - - - - - } - - .text{ - border: solid $blue_QDD 1px; - border-radius: 5%; - padding: 0.6rem 0.6rem; - line-height: 1.1; - width: 41%; - min-width: 35%; - @media(max-width:1090px){ - height: 200px; - min-width: 80%; - } - .field_field_titre{ - font-size: 0.6rem; - // font-weight: 800; - font-family: 'gilroy-semibold'; - @media(max-width:1090px){ - font-size: 1rem; - } - } - .field_field_description{ - font-family: 'gilroy-regular'; - p{ - font-size: 0.6rem !important; - margin: 0; - @media(max-width:1090px){ - font-size: 1rem !important; - } - } - .field--label-above{ - display: none; - } - } - - } - } + } } } + + } } \ No newline at end of file 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 d234f4b..7e93ef9 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,14 +68,14 @@ {{ label }}
-
+ {#
-
+
#}
{% if multiple %} {% endif %} diff --git a/web/themes/custom/quartiers_de_demain/templates/field--config-pages--diaporama-home.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--config-pages--diaporama-home.html.twig index 42ae347..1490106 100644 --- a/web/themes/custom/quartiers_de_demain/templates/field--config-pages--diaporama-home.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/field--config-pages--diaporama-home.html.twig @@ -50,6 +50,8 @@ {% set ancre_href = '#paragraph-id--' ~ paragraph.id() %} + + {% if label_hidden %} {% if multiple %}
diff --git a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig index 33f7075..876f336 100644 --- a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig @@ -80,12 +80,13 @@
#} {{ page.content }} -
{# /.layout-content #} -
- {% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %} - -
+ {# /.layout-content #} +
+ {% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %} + +
+ {% if page.sidebar_first %}