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 3db9557..2c90ffb 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\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\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: 500,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n autoplay: false,\n // autoplaySpeed: 2000,\n // centerPadding: '100px',\n\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\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 ////////////////////// start diaporama home swiper /////////////////////////////////\n\n // $(document).ready(function () {\n // //initialize swiper when document ready\n // var 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 $(document).ready(function(){\n let diapohome = $('.config_pages--type--diaporama-home .diaporama');\n if (diapohome) {\n diapohome.slick({\n slidesToShow: 1,\n dots: false,\n arrows: false,\n centerMode: false, // Désactivé pour éviter les sauts\n adaptiveHeight: false, // Désactivé pour éviter les changements de hauteur\n autoplay: true,\n autoplaySpeed: 2000,\n infinite: true,\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true, // Désactivé seulement pour les petits écrans\n }\n }]\n });\n console.log('Diaporama initialisé');\n }\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 f4e2c3a..d573e89 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 @@ -1614,20 +1614,23 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home .config_pages--type--diaporama-home { position: relative; } -#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide .cadre-img-zoom { +#home .config_pages--type--diaporama-home .diaporama .slick-list { + padding: 0 !important; +} +#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom { max-height: 1281px; overflow: hidden; } -#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide .cadre-img-zoom img { +#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img { width: 100%; height: auto; - animation: zoomOut 3.5s ease-in infinite; + animation: zoomOut 2.5s ease-in infinite; } -#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide blockquote { +#home .config_pages--type--diaporama-home .diaporama .slick-list blockquote { position: relative; top: -30px; } -#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide blockquote p { +#home .config_pages--type--diaporama-home .diaporama .slick-list blockquote p { font-size: 0.4rem !important; font-family: "gilroy-regular"; padding-top: 0.5rem; @@ -1637,7 +1640,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h transform: scale(1); } 100% { - transform: scale(1.1); + transform: scale(1.05); } } #home .content_container #block-quartiers-de-demain-titredepage { 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 15a5c24..047a404 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 @@ -288,6 +288,83 @@ // //////////////////// start Timeline script /////////////////////// + // // 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 + // // } + // // } + + // // 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; + // // } + + // // // 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 + // // } + // // } + + // // // 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); + + // // // 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 document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { @@ -335,7 +412,21 @@ } } }); - + + // // 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); + + // // // Handle window resize + // // window.addEventListener('resize', function() { + // // showSlides(currentSlide); // Recalculate the slides on resize + // // }); + + // // // Initialize + // // showSlides(currentSlide); + // // }); // ////////////////////// start calendrier home ///////////////////////////////// $(document).ready(function(){ @@ -353,7 +444,7 @@ // centerPadding: '100px', responsive: [ { - breakpoint: 500, + breakpoint: 810, settings: { slidesToShow: 1, adaptiveHeight: false, @@ -362,8 +453,6 @@ centerMode: true, autoplay: false, // autoplaySpeed: 2000, - // centerPadding: '100px', - } }] }); @@ -428,6 +517,79 @@ } }); + + ////////////////////// start diaporama home swiper ///////////////////////////////// + + // PAS DE SWIPER CHARGÉ DANS L'ENV JS ... + + // $(document).ready(function () { + // //initialize swiper when document ready + // let mySwiper = new Swiper ('.swiper-container', { + + // speed: 400, + // spaceBetween: 100, + // // Optional parameters + // autoplay: { + // delay: 3000, + // disableOnInteraction: false, + // }, + // direction: 'horizontal', + // loop: true, + // }) + // }); + + ////////////////////// end diaporama home swiper ///////////////////////////////// + + + ////////////////////// start diaporama home swiper ///////////////////////////////// + + // $(document).ready(function () { + // //initialize swiper when document ready + // var mySwiper = new Swiper ('.swiper-container', { + + // speed: 400, + // spaceBetween: 100, + // // Optional parameters + // autoplay: { + // delay: 3000, + // disableOnInteraction: false, + // }, + // direction: 'horizontal', + // loop: true, + // }) + // }); + + ////////////////////// end diaporama home swiper ///////////////////////////////// + + $(document).ready(function(){ + let diapohome = $('.config_pages--type--diaporama-home .diaporama'); + if (diapohome) { + diapohome.slick({ + slidesToShow: 1, + dots: false, + arrows: false, + centerMode: false, // Désactivé pour éviter les sauts + adaptiveHeight: false, // Désactivé pour éviter les changements de hauteur + autoplay: true, + autoplaySpeed: 2000, + infinite: true, + responsive: [ + { + breakpoint: 810, + settings: { + slidesToShow: 1, + adaptiveHeight: false, + arrows: true, + draggable: true, + centerMode: true, // Désactivé seulement pour les petits écrans + } + }] + }); + console.log('Diaporama initialisé'); + } +}); + + })(jQuery, window); diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss index 4d2045e..9ef12a6 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss @@ -4,41 +4,39 @@ .config_pages--type--diaporama-home{ position: relative; - .swiper-container{ - .swiper-wrapper{ - .swiper-slide { - - .cadre-img-zoom{ - max-height: 1281px; - overflow:hidden; - img{ - width: 100%; - height: auto; - animation: zoomOut 3.5s ease-in infinite; - } + .diaporama{ + .slick-list{ + padding: 0 !important; + .cadre-img-zoom{ + max-height: 1281px; + overflow:hidden; + img{ + width: 100%; + height: auto; + animation: zoomOut 2.5s ease-in infinite; } - blockquote{ - position: relative; - top: -30px; - p{ - font-size: 0.4rem !important; - font-family: 'gilroy-regular'; - padding-top: 0.5rem; - } - } - - @keyframes zoomOut { - 0% { - transform: scale(1); - } - 100% { - transform: scale(1.1); - } - } - } - } - } + blockquote{ + position: relative; + top: -30px; + p{ + font-size: 0.4rem !important; + font-family: 'gilroy-regular'; + padding-top: 0.5rem; + } + } + + @keyframes zoomOut { + 0% { + transform: scale(1); + } + 100% { + transform: scale(1.05); + } + } + + } + } } .content_container{ 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 1490106..30e1d93 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 @@ -65,16 +65,16 @@ {% endfor %} {% endif %} {% else %} -
+
{{ label }}
{% if multiple %} -
+ {#
#} {% endif %} {% for item in items %} -
{{ item.content }}
+
{{ item.content }}
{% endfor %} {% if multiple %} -
+ {#
#} {% endif %}
{% endif %}