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 82a34d8..a35ba2b 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 //////// 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 paragraphe 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 // mapHome : document.querySelectorAll('.field_field_map_block #block-sitesmapblock'),\n // mapSite : document.querySelectorAll('#sites-map-container'),\n lienDoc : document.querySelectorAll('.field_field_documents'),\n lienURL : document.querySelectorAll('.field_field_liens_site'),\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 // ScrollReveal().reveal(nodes.mapHome, showUp);\n // ScrollReveal().reveal(nodes.mapSite, showUp);\n ScrollReveal().reveal(nodes.lienDoc, showUp);\n ScrollReveal().reveal(nodes.lienURL, showUp);\n\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 // 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: false,\n draggable: true,\n infinite: false,\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: false,\n infinite: false,\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 // Nombre maximum de caractères à afficher\n const maxChars = 140; // Ajustez cette valeur selon vos besoins\n\n document.querySelectorAll('#actus-caroussel .node-type-actualite').forEach(function(node) {\n let paragraphs = node.querySelectorAll('.field_body p');\n let fullText = \"\";\n \n // Concaténer tous les paragraphes\n paragraphs.forEach(p => fullText += p.textContent.trim() + \" \");\n fullText = fullText.trim();\n\n // Vérifier si le texte dépasse la limite\n if (fullText.length > maxChars) {\n let truncatedText = fullText.slice(0, maxChars) + '...';\n\n // Vider tout le contenu et insérer seulement le texte tronqué\n let firstParagraph = paragraphs[0];\n firstParagraph.textContent = truncatedText;\n\n // Masquer les autres paragraphes\n for (let i = 1; i < paragraphs.length; i++) {\n paragraphs[i].style.display = \"none\";\n }\n }\n });\n });\n\n \n\n //////////// start slideshow home ////////////////////////// \n\n\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: false,\n autoplay: false,\n // autoplaySpeed: 1500,\n // infinite: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n // slidesToScroll: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n // centerMode: true,\n // centerPadding: '100px',\n autoplay: false,\n // autoplaySpeed: 2000,\n }\n }]\n });\n console.log('salut slick home');\n \n }\n $('.slick-carousel').slick({\n lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'\n });\n\n });\n\n\n\n\n $(document).ready(function () {\n let diapohome = $('.config_pages--type--diaporama-home .diaporama');\n\n if (diapohome.length) {\n // Initialisation de Slick\n diapohome.slick({\n slidesToShow: 1,\n dots: false,\n arrows: false,\n // centerMode: true,\n adaptiveHeight: false,\n autoplay: true, // Activer l'autoplay\n autoplaySpeed: 4000, // Changement de slide toutes les 4 secondes\n // infinite: true,\n pauseOnHover: false, // Ne pas arrêter l'autoplay lors du survol\n pauseOnFocus: false,\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: false,\n draggable: true,\n centerMode: false,\n }\n }]\n });\n\n }\n});\n\n //////////// end slideshow home ////////////////////////// \n\n//////////////// start lightbox galerie image page site////////////////////////\n\n// Sélection des images et de leurs légendes dans la galerie\nlet images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');\nlet currentIndex;\n\n// Création de la lightbox et de ses éléments\nconst lightbox = document.createElement('div');\nlightbox.id = 'lightbox';\nlightbox.classList.add('lightbox');\ndocument.body.appendChild(lightbox);\n\nconst img = document.createElement('img');\nlightbox.appendChild(img);\n\n// Élément pour afficher la légende\nconst caption = document.createElement('p');\ncaption.classList.add('caption');\nlightbox.appendChild(caption);\n\nconst closeBtn = document.createElement('span');\ncloseBtn.classList.add('close');\ncloseBtn.innerHTML = '×';\nlightbox.appendChild(closeBtn);\n\nconst prevBtn = document.createElement('a');\nprevBtn.classList.add('prev');\nprevBtn.innerHTML = '❮';\nlightbox.appendChild(prevBtn);\n\nconst nextBtn = document.createElement('a');\nnextBtn.classList.add('next');\nnextBtn.innerHTML = '❯';\nlightbox.appendChild(nextBtn);\n\n// Fonction pour afficher l'image et la légende à l'index donné\nfunction showImage(index) {\n if (index < 0) index = images.length - 1;\n if (index >= images.length) index = 0;\n currentIndex = index;\n\n // Mettre à jour l'image\n img.src = images[currentIndex].getAttribute('src');\n\n // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)\n const captionText = images[currentIndex]\n .closest('.cadre-img-zoom')\n .nextElementSibling.querySelector('.image-field-caption p')\n .textContent;\n \n caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente\n lightbox.style.display = 'flex';\n}\n\n// Événements de clic sur chaque image pour ouvrir le lightbox avec la légende\nimages.forEach((image, index) => {\n image.addEventListener('click', () => {\n showImage(index);\n });\n});\n\n// Fermer le lightbox\ncloseBtn.addEventListener('click', () => {\n lightbox.style.display = 'none';\n});\n\n// Navigation pour images précédente et suivante\nprevBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n showImage(currentIndex - 1);\n});\n\nnextBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n showImage(currentIndex + 1);\n});\n\n// Fermer le lightbox en cliquant en dehors de l'image\nlightbox.addEventListener('click', (e) => {\n if (e.target === lightbox) {\n lightbox.style.display = 'none';\n }\n});\n\n// Ajout des contrôles clavier (Échap, flèches gauche/droite)\ndocument.addEventListener('keydown', (e) => {\n if (lightbox.style.display === 'flex') {\n if (e.key === 'Escape') {\n lightbox.style.display = 'none';\n } else if (e.key === 'ArrowLeft') {\n showImage(currentIndex - 1);\n } else if (e.key === 'ArrowRight') {\n showImage(currentIndex + 1);\n }\n }\n});\n\n\n//////////////// end lightbox galerie image page site////////////////////////\n\n \n\n//////////////////// start wrapper views-row lessites /////////////////////////\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n // Sélectionne le conteneur principal avec l'ID 'lessites'\n const container = document.getElementById(\"lessites\");\n\n // Vérifie si le conteneur existe pour éviter toute erreur sur d'autres pages\n if (container) {\n // Sélectionne l'élément 'view' à l'intérieur de '.views-element-container'\n const viewContainer = container.querySelector(\".views-element-container .view\");\n\n // Vérifie si 'viewContainer' existe pour éviter les erreurs\n if (viewContainer) {\n // Crée une div englobante pour tous les éléments 'views-row'\n const wrapperDiv = document.createElement(\"div\");\n wrapperDiv.classList.add(\"views-row-wrapper\"); // ajoute une classe pour faciliter le style CSS\n\n // Déplace tous les éléments 'views-row' dans la nouvelle div\n const viewsRows = viewContainer.querySelectorAll(\".views-row\");\n viewsRows.forEach(row => wrapperDiv.appendChild(row));\n\n // Ajoute la div englobante dans le 'viewContainer'\n viewContainer.appendChild(wrapperDiv);\n }\n }\n});\n\n\n//////////////////// end wrapper views-row lessites /////////////////////////\n\n\n\n//////////////////// start div infos site ////////////////////////\n\n// Vérifie si la page a la classe 'node-type-site' dans le \nif (document.body.classList.contains('node-type-site')) {\n // Sélectionne le conteneur principal\n const blockRegion = document.querySelector('.block-region-second');\n\n // Liste des classes spécifiques à cibler\n const fieldClasses = [\n '.field_field_region',\n '.field_field_nom_du_qpv_nb_d_hab',\n '.field_field_departement_s',\n '.field_field_programme_de_l_etat',\n '.field_field_porteur_s_de_site',\n '.field_field_nom_de_la_commune_nb_d_hab'\n ];\n\n // Sélectionne les div parents de chacun des champs listés\n const elementsToWrap = [];\n fieldClasses.forEach(className => {\n const fieldElement = blockRegion.querySelector(className);\n if (fieldElement) {\n // Ajoute le parent du champ au tableau si trouvé\n elementsToWrap.push(fieldElement.parentElement);\n }\n });\n\n // Vérifie que des éléments ont été trouvés\n if (elementsToWrap.length > 0) {\n // Crée le conteneur avec la classe 'infos'\n const infosContainer = document.createElement('div');\n infosContainer.className = 'infos';\n\n // Insère le conteneur `.infos` avant le premier élément ciblé\n const firstElement = elementsToWrap[0];\n blockRegion.insertBefore(infosContainer, firstElement);\n\n // Déplace chaque élément dans le conteneur `.infos`\n elementsToWrap.forEach(element => infosContainer.appendChild(element));\n }\n}\n//////////////////// end div infos site ////////////////////////\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n // Sélectionner les éléments à déplacer\n const documentsField = document.querySelector(\".field_field_documents\");\n const liensSiteField = document.querySelector(\".field_field_liens_site\");\n \n // Sélectionner la destination\n const thirdRegion = document.querySelector(\".block-region-third > div\");\n\n // Créer une nouvelle div pour englober les éléments déplacés\n const wrapperDiv = document.createElement(\"div\");\n wrapperDiv.classList.add(\"documents-liens-wrapper\");\n\n // Déplacer les éléments dans la nouvelle div\n if (documentsField && liensSiteField && thirdRegion) {\n wrapperDiv.appendChild(documentsField);\n wrapperDiv.appendChild(liensSiteField);\n\n // Ajouter la nouvelle div dans la destination\n thirdRegion.appendChild(wrapperDiv);\n }\n});\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n // Sélectionner les éléments pertinents\n const documentsLiensWrapper = document.querySelector(\".documents-liens-wrapper\");\n const blockRegionThird = document.querySelector(\".block-region-third\");\n\n // Vérifier que les éléments existent avant de les manipuler\n if (documentsLiensWrapper && blockRegionThird) {\n // Déplacer .documents-liens-wrapper en dehors du div contenant les boutons prev/next\n blockRegionThird.appendChild(documentsLiensWrapper);\n }\n});\n\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n // Fonction pour déplacer le bloc en fonction de la taille de l'écran\n function moveLanguageSwitcher() {\n const languageSwitcher = document.getElementById(\"block-quartiers-de-demain-selecteurdelangue\");\n const navContainer = document.querySelector(\".header_nav_container\");\n\n if (window.innerWidth <= 810) { // Si écran téléphone\n if (languageSwitcher && navContainer && !navContainer.contains(languageSwitcher)) {\n navContainer.appendChild(languageSwitcher); // Déplace le bloc dans header_nav_container\n }\n } else { // Si écran non téléphone\n const headerRightContainer = document.querySelector(\".header_right_container\");\n if (languageSwitcher && headerRightContainer && !headerRightContainer.contains(languageSwitcher)) {\n headerRightContainer.appendChild(languageSwitcher); // Remet le bloc dans sa position initiale\n }\n }\n }\n\n // Déclencher au chargement et au redimensionnement\n moveLanguageSwitcher();\n window.addEventListener(\"resize\", moveLanguageSwitcher);\n});\n\n\n//////////////////////////////////////////\n\n\n/////////// Start script ressources ////////////////////////////////\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const view = document.querySelector(\".view\");\n const elements = Array.from(view.children);\n\n let newView = document.createElement(\"div\");\n newView.classList.add(\"view\");\n\n let group = null;\n let groupContent = null;\n\n elements.forEach((el) => {\n if (el.tagName === \"H3\") {\n if (group) {\n newView.appendChild(group);\n }\n\n group = document.createElement(\"div\");\n group.classList.add(\"group\");\n\n groupContent = document.createElement(\"div\");\n groupContent.classList.add(\"group-content\");\n\n groupContent.appendChild(el);\n group.appendChild(groupContent);\n } else if (el.classList.contains(\"views-row\")) {\n groupContent.appendChild(el);\n }\n });\n\n if (group) {\n newView.appendChild(group);\n }\n\n view.replaceWith(newView);\n\n // Ajouter un bouton \"Voir plus\" dans chaque groupe\n document.querySelectorAll(\".group\").forEach((group) => {\n const rows = group.querySelectorAll(\".views-row\");\n const button = document.createElement(\"button\");\n button.classList.add(\"toggle-btn\");\n button.textContent = \"Voir plus de\";\n\n rows.forEach((row, index) => {\n if (index >= 3) {\n row.classList.add(\"hidden\");\n row.style.maxHeight = \"0\";\n row.style.opacity = \"0\";\n }\n });\n\n button.addEventListener(\"click\", () => {\n const isExpanded = button.textContent === \"Voir moins de\";\n const hiddenRows = group.querySelectorAll(\".views-row.hidden\");\n\n if (isExpanded) {\n // Cacher les lignes avec un délai pour l'effet de transition\n hiddenRows.forEach((row) => {\n row.style.maxHeight = \"0\";\n row.style.opacity = \"0\";\n setTimeout(() => row.classList.add(\"hidden\"), 500); // Délai pour la transition\n });\n } else {\n // Afficher les lignes\n hiddenRows.forEach((row) => {\n row.classList.remove(\"hidden\");\n row.style.maxHeight = row.scrollHeight + \"px\";\n row.style.opacity = \"1\";\n });\n }\n\n button.textContent = isExpanded ? \"Voir plus de\" : \"Voir moins de\";\n });\n\n group.appendChild(button);\n });\n});\n\n\n/////////// end script ressources ////////////////////////////////\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//////// start header ////////////\ndocument.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 paragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\nvar 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\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),\n // mapHome : document.querySelectorAll('.field_field_map_block #block-sitesmapblock'),\n // mapSite : document.querySelectorAll('#sites-map-container'),\n lienDoc : document.querySelectorAll('.field_field_documents'),\n lienURL : document.querySelectorAll('.field_field_liens_site'),\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 // ScrollReveal().reveal(nodes.mapHome, showUp);\n // ScrollReveal().reveal(nodes.mapSite, showUp);\n ScrollReveal().reveal(nodes.lienDoc, showUp);\n ScrollReveal().reveal(nodes.lienURL, showUp);\n\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 // 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: false,\n draggable: true,\n infinite: false,\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: false,\n infinite: false,\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\ndocument.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//////////// start slideshow home ////////////////////////// \n\n\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: false,\n autoplay: false,\n // autoplaySpeed: 1500,\n // infinite: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n // slidesToScroll: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n // centerMode: true,\n // centerPadding: '100px',\n autoplay: false,\n // autoplaySpeed: 2000,\n }\n }]\n });\n console.log('salut slick home');\n \n }\n $('.slick-carousel').slick({\n lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'\n });\n\n});\n\n\n\n\n$(document).ready(function () {\n let diapohome = $('.config_pages--type--diaporama-home .diaporama');\n\n if (diapohome.length) {\n // Initialisation de Slick\n diapohome.slick({\n slidesToShow: 1,\n dots: false,\n arrows: false,\n // centerMode: true,\n adaptiveHeight: false,\n autoplay: true, // Activer l'autoplay\n autoplaySpeed: 4000, // Changement de slide toutes les 4 secondes\n // infinite: true,\n pauseOnHover: false, // Ne pas arrêter l'autoplay lors du survol\n pauseOnFocus: false,\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: false,\n draggable: true,\n centerMode: false,\n }\n }]\n });\n\n}\n});\n\n//////////// end slideshow home ////////////////////////// \n\n//////////////// start lightbox galerie image page site////////////////////////\n\n// Sélection des images et de leurs légendes dans la galerie\nlet images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');\nlet currentIndex;\n\n// Création de la lightbox et de ses éléments\nconst lightbox = document.createElement('div');\nlightbox.id = 'lightbox';\nlightbox.classList.add('lightbox');\ndocument.body.appendChild(lightbox);\n\nconst img = document.createElement('img');\nlightbox.appendChild(img);\n\n// Élément pour afficher la légende\nconst caption = document.createElement('p');\ncaption.classList.add('caption');\nlightbox.appendChild(caption);\n\nconst closeBtn = document.createElement('span');\ncloseBtn.classList.add('close');\ncloseBtn.innerHTML = '×';\nlightbox.appendChild(closeBtn);\n\nconst prevBtn = document.createElement('a');\nprevBtn.classList.add('prev');\nprevBtn.innerHTML = '❮';\nlightbox.appendChild(prevBtn);\n\nconst nextBtn = document.createElement('a');\nnextBtn.classList.add('next');\nnextBtn.innerHTML = '❯';\nlightbox.appendChild(nextBtn);\n\n// Fonction pour afficher l'image et la légende à l'index donné\nfunction showImage(index) {\nif (index < 0) index = images.length - 1;\nif (index >= images.length) index = 0;\ncurrentIndex = index;\n\n// Mettre à jour l'image\nimg.src = images[currentIndex].getAttribute('src');\n\n// Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)\nconst captionText = images[currentIndex]\n .closest('.cadre-img-zoom')\n .nextElementSibling.querySelector('.image-field-caption p')\n .textContent;\n \ncaption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente\nlightbox.style.display = 'flex';\n}\n\n// Événements de clic sur chaque image pour ouvrir le lightbox avec la légende\nimages.forEach((image, index) => {\nimage.addEventListener('click', () => {\n showImage(index);\n});\n});\n\n// Fermer le lightbox\ncloseBtn.addEventListener('click', () => {\nlightbox.style.display = 'none';\n});\n\n// Navigation pour images précédente et suivante\nprevBtn.addEventListener('click', (e) => {\ne.stopPropagation();\nshowImage(currentIndex - 1);\n});\n\nnextBtn.addEventListener('click', (e) => {\ne.stopPropagation();\nshowImage(currentIndex + 1);\n});\n\n// Fermer le lightbox en cliquant en dehors de l'image\nlightbox.addEventListener('click', (e) => {\nif (e.target === lightbox) {\n lightbox.style.display = 'none';\n}\n});\n\n// Ajout des contrôles clavier (Échap, flèches gauche/droite)\ndocument.addEventListener('keydown', (e) => {\nif (lightbox.style.display === 'flex') {\n if (e.key === 'Escape') {\n lightbox.style.display = 'none';\n } else if (e.key === 'ArrowLeft') {\n showImage(currentIndex - 1);\n } else if (e.key === 'ArrowRight') {\n showImage(currentIndex + 1);\n }\n}\n});\n\n\n//////////////// end lightbox galerie image page site////////////////////////\n\n\n\n//////////////////// start wrapper views-row lessites /////////////////////////\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n// Sélectionne le conteneur principal avec l'ID 'lessites'\nconst container = document.getElementById(\"lessites\");\n\n// Vérifie si le conteneur existe pour éviter toute erreur sur d'autres pages\nif (container) {\n // Sélectionne l'élément 'view' à l'intérieur de '.views-element-container'\n const viewContainer = container.querySelector(\".views-element-container .view\");\n\n // Vérifie si 'viewContainer' existe pour éviter les erreurs\n if (viewContainer) {\n // Crée une div englobante pour tous les éléments 'views-row'\n const wrapperDiv = document.createElement(\"div\");\n wrapperDiv.classList.add(\"views-row-wrapper\"); // ajoute une classe pour faciliter le style CSS\n\n // Déplace tous les éléments 'views-row' dans la nouvelle div\n const viewsRows = viewContainer.querySelectorAll(\".views-row\");\n viewsRows.forEach(row => wrapperDiv.appendChild(row));\n\n // Ajoute la div englobante dans le 'viewContainer'\n viewContainer.appendChild(wrapperDiv);\n }\n}\n});\n\n\n//////////////////// end wrapper views-row lessites /////////////////////////\n\n\n\n//////////////////// start div infos site ////////////////////////\n\n// Vérifie si la page a la classe 'node-type-site' dans le \nif (document.body.classList.contains('node-type-site')) {\n// Sélectionne le conteneur principal\nconst blockRegion = document.querySelector('.block-region-second');\n\n// Liste des classes spécifiques à cibler\nconst fieldClasses = [\n '.field_field_region',\n '.field_field_nom_du_qpv_nb_d_hab',\n '.field_field_departement_s',\n '.field_field_programme_de_l_etat',\n '.field_field_porteur_s_de_site',\n '.field_field_nom_de_la_commune_nb_d_hab'\n];\n\n// Sélectionne les div parents de chacun des champs listés\nconst elementsToWrap = [];\nfieldClasses.forEach(className => {\n const fieldElement = blockRegion.querySelector(className);\n if (fieldElement) {\n // Ajoute le parent du champ au tableau si trouvé\n elementsToWrap.push(fieldElement.parentElement);\n }\n});\n\n// Vérifie que des éléments ont été trouvés\nif (elementsToWrap.length > 0) {\n // Crée le conteneur avec la classe 'infos'\n const infosContainer = document.createElement('div');\n infosContainer.className = 'infos';\n\n // Insère le conteneur `.infos` avant le premier élément ciblé\n const firstElement = elementsToWrap[0];\n blockRegion.insertBefore(infosContainer, firstElement);\n\n // Déplace chaque élément dans le conteneur `.infos`\n elementsToWrap.forEach(element => infosContainer.appendChild(element));\n}\n}\n//////////////////// end div infos site ////////////////////////\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n// Sélectionner les éléments à déplacer\nconst documentsField = document.querySelector(\".field_field_documents\");\nconst liensSiteField = document.querySelector(\".field_field_liens_site\");\n\n// Sélectionner la destination\nconst thirdRegion = document.querySelector(\".block-region-third > div\");\n\n// Créer une nouvelle div pour englober les éléments déplacés\nconst wrapperDiv = document.createElement(\"div\");\nwrapperDiv.classList.add(\"documents-liens-wrapper\");\n\n// Déplacer les éléments dans la nouvelle div\nif (documentsField && liensSiteField && thirdRegion) {\n wrapperDiv.appendChild(documentsField);\n wrapperDiv.appendChild(liensSiteField);\n\n // Ajouter la nouvelle div dans la destination\n thirdRegion.appendChild(wrapperDiv);\n}\n});\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n// Sélectionner les éléments pertinents\nconst documentsLiensWrapper = document.querySelector(\".documents-liens-wrapper\");\nconst blockRegionThird = document.querySelector(\".block-region-third\");\n\n// Vérifier que les éléments existent avant de les manipuler\nif (documentsLiensWrapper && blockRegionThird) {\n // Déplacer .documents-liens-wrapper en dehors du div contenant les boutons prev/next\n blockRegionThird.appendChild(documentsLiensWrapper);\n}\n});\n\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n// Fonction pour déplacer le bloc en fonction de la taille de l'écran\nfunction moveLanguageSwitcher() {\n const languageSwitcher = document.getElementById(\"block-quartiers-de-demain-selecteurdelangue\");\n const navContainer = document.querySelector(\".header_nav_container\");\n\n if (window.innerWidth <= 810) { // Si écran téléphone\n if (languageSwitcher && navContainer && !navContainer.contains(languageSwitcher)) {\n navContainer.appendChild(languageSwitcher); // Déplace le bloc dans header_nav_container\n }\n } else { // Si écran non téléphone\n const headerRightContainer = document.querySelector(\".header_right_container\");\n if (languageSwitcher && headerRightContainer && !headerRightContainer.contains(languageSwitcher)) {\n headerRightContainer.appendChild(languageSwitcher); // Remet le bloc dans sa position initiale\n }\n }\n}\n\n// Déclencher au chargement et au redimensionnement\nmoveLanguageSwitcher();\nwindow.addEventListener(\"resize\", moveLanguageSwitcher);\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/src/assets/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js index 5b5dff8..1b85ec6 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 @@ -4,468 +4,452 @@ */ (function (Drupal) { - 'use strict'; - - Drupal.behaviors.quartiers_de_demain = { - attach: function (context, settings) { - console.log('It works!'); - } - }; - } (Drupal)); + 'use strict'; - - //////// start header //////////// - document.addEventListener('DOMContentLoaded', function() { - - const header = document.querySelector('header'); - 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)'); - const headerNavContainer = document.querySelector('.header_nav_container'); - const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward'); - const isTargetPath = window.location.pathname === '/'; - - // Fonction pour démarrer l'animation du logo SVG - function startLogoAnimation() { - logo.classList.add('animated'); + Drupal.behaviors.quartiers_de_demain = { + attach: function (context, settings) { + console.log('It works!'); } - - // Fonction pour arrêter l'animation du logo SVG - function stopLogoAnimation() { - logo.classList.remove('animated'); - } - - // Vérifier si le header a la classe header--collapse - function checkHeaderCollapse() { - if (header.classList.contains('header--collapsed')) { - stopLogoAnimation(); - } else if (header.classList.contains('header--collapsed-already')) { - stopLogoAnimation(); - } else { - startLogoAnimation(); - } + }; +} (Drupal)); - } - - // Appeler la fonction au chargement initial - checkHeaderCollapse(); - - // Observer les changements de classe sur le header - const observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if (mutation.attributeName === 'class') { - checkHeaderCollapse(); - } - }); - }); - observer.observe(header, { attributes: true }); - - // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement - if (!isFirstLoad || !isTargetPath) { - header.classList.add('header--collapsed-already'); - // logo.classList.remove('animated'); +//////// start header //////////// +document.addEventListener('DOMContentLoaded', function() { + + const header = document.querySelector('header'); + 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)'); + const headerNavContainer = document.querySelector('.header_nav_container'); + const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward'); + const isTargetPath = window.location.pathname === '/'; + + // Fonction pour démarrer l'animation du logo SVG + function startLogoAnimation() { + logo.classList.add('animated'); + } + + // Fonction pour arrêter l'animation du logo SVG + function stopLogoAnimation() { + logo.classList.remove('animated'); + } + + // Vérifier si le header a la classe header--collapse + function checkHeaderCollapse() { + if (header.classList.contains('header--collapsed')) { stopLogoAnimation(); - } else { - // Sinon, appliquer la transition après un délai - setTimeout(() => { - header.classList.add('header--collapsed'); - }, 5000); + } else if (header.classList.contains('header--collapsed-already')) { + stopLogoAnimation(); + } else { + startLogoAnimation(); } - ////////////////////////////////////// + } - let lastScrollTop = 0; - let threshold = 100; // Change this value as needed - let isHidden = false; - - function slideOut() { - headerNavContainer.animate([ - { transform: 'translateX(0)' }, - { transform: 'translateX(-100%)' } - ], { - duration: 300, - fill: 'forwards' - }); - isHidden = true; - } - - function slideIn() { - headerNavContainer.animate([ - { transform: 'translateX(-100%)' }, - { transform: 'translateX(0)' } - ], { - duration: 300, - fill: 'forwards' - }); - isHidden = false; - } - - function slideDown() { - // headerNavContainer.style.display = 'block'; - headerNavContainer.animate([ - { transform: 'translateY(0%)' }, - { transform: 'translateY(+100%)' } - ], { - duration: 300, - fill: 'forwards' - }); - isHidden = false; - } - - function slideUp() { - headerNavContainer.animate([ - { transform: 'translateY(100%)' }, - { transform: 'translateY(0%)' } - ], { - duration: 300, - fill: 'forwards' - }).onfinish = function() { - // headerNavContainer.style.display = 'none'; - }; - isHidden = true; - } - // Fonction pour ajuster la hauteur du header lors du défilement - function adjustHeaderHeight() { - if (window.scrollY > 0) { - header.classList.add('shrink'); - } else { - header.classList.remove('shrink'); - } - } + // Appeler la fonction au chargement initial + checkHeaderCollapse(); - function handleScroll() { - let scrollTop = window.pageYOffset || document.documentElement.scrollTop; - const isMobile = window.innerWidth < 811; + // Observer les changements de classe sur le header + const observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + if (mutation.attributeName === 'class') { + checkHeaderCollapse(); + } + }); + }); + observer.observe(header, { attributes: true }); - if (scrollTop > threshold && !isHidden) { - if (isMobile) { - slideUp(); - } else { - slideOut(); - } - } else if (scrollTop <= threshold && isHidden) { - if (isMobile) { - slideDown(); - } else { - slideIn(); - } - } + + // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement + if (!isFirstLoad || !isTargetPath) { + header.classList.add('header--collapsed-already'); + // logo.classList.remove('animated'); + stopLogoAnimation(); + } else { + // Sinon, appliquer la transition après un délai + setTimeout(() => { + header.classList.add('header--collapsed'); + }, 5000); + } + + ////////////////////////////////////// + + let lastScrollTop = 0; + let threshold = 100; // Change this value as needed + let isHidden = false; + + function slideOut() { + headerNavContainer.animate([ + { transform: 'translateX(0)' }, + { transform: 'translateX(-100%)' } + ], { + duration: 300, + fill: 'forwards' + }); + isHidden = true; + } + + function slideIn() { + headerNavContainer.animate([ + { transform: 'translateX(-100%)' }, + { transform: 'translateX(0)' } + ], { + duration: 300, + fill: 'forwards' + }); + isHidden = false; + } - - lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling - } - - function handleTouchAndMouseEnter() { - if (isHidden) { - if (window.innerWidth < 811) { - slideDown(); - } else { - slideIn(); - } + function slideDown() { + // headerNavContainer.style.display = 'block'; + headerNavContainer.animate([ + { transform: 'translateY(0%)' }, + { transform: 'translateY(+100%)' } + ], { + duration: 300, + fill: 'forwards' + }); + isHidden = false; + } + + function slideUp() { + headerNavContainer.animate([ + { transform: 'translateY(100%)' }, + { transform: 'translateY(0%)' } + ], { + duration: 300, + fill: 'forwards' + }).onfinish = function() { + // headerNavContainer.style.display = 'none'; + }; + isHidden = true; + } + // Fonction pour ajuster la hauteur du header lors du défilement + function adjustHeaderHeight() { + if (window.scrollY > 0) { + header.classList.add('shrink'); + } else { + header.classList.remove('shrink'); } } - - function handleTouchAndMouseLeave() { - if (lastScrollTop > threshold && !isHidden) { - if (window.innerWidth < 811) { - slideUp(); - } else { - slideOut(); - } - } - } - - window.addEventListener('scroll', handleScroll); - window.addEventListener('scroll', adjustHeaderHeight); - - // Mouse events for desktop - header.addEventListener('mouseenter', handleTouchAndMouseEnter); - header.addEventListener('mouseleave', handleTouchAndMouseLeave); - - // Touch events for tablets and mobile devices - header.addEventListener('touchstart', handleTouchAndMouseEnter); - header.addEventListener('touchend', handleTouchAndMouseLeave); - - // Initial check to see if we're at the top of the page - if (window.pageYOffset <= threshold) { - if (window.innerWidth < 811) { - slideDown(); - } else { - slideIn(); - } - } else { - if (window.innerWidth < 811) { + + function handleScroll() { + let scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const isMobile = window.innerWidth < 811; + + if (scrollTop > threshold && !isHidden) { + if (isMobile) { slideUp(); + } else { + slideOut(); + } + } else if (scrollTop <= threshold && isHidden) { + if (isMobile) { + slideDown(); } else { slideIn(); } } - - }); + + + lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling + } + + function handleTouchAndMouseEnter() { + if (isHidden) { + if (window.innerWidth < 811) { + slideDown(); + } else { + slideIn(); + } + } + } + + function handleTouchAndMouseLeave() { + if (lastScrollTop > threshold && !isHidden) { + if (window.innerWidth < 811) { + slideUp(); + } else { + slideOut(); + } + } + } + + window.addEventListener('scroll', handleScroll); + window.addEventListener('scroll', adjustHeaderHeight); + + // Mouse events for desktop + header.addEventListener('mouseenter', handleTouchAndMouseEnter); + header.addEventListener('mouseleave', handleTouchAndMouseLeave); + + // Touch events for tablets and mobile devices + header.addEventListener('touchstart', handleTouchAndMouseEnter); + header.addEventListener('touchend', handleTouchAndMouseLeave); + + // Initial check to see if we're at the top of the page + if (window.pageYOffset <= threshold) { + if (window.innerWidth < 811) { + slideDown(); + } else { + slideIn(); + } + } else { + if (window.innerWidth < 811) { + slideUp(); + } else { + slideIn(); + } + } + +}); //////// end header //////////// - + //// ancre dans texte au click paragraphe correspondant arrive en dessous du header (function($, window) { - var adjustAnchor = function() { - var $anchor = $('.sidebar_first_container'), - fixedElementHeight = 500; - if ($anchor.length > 0) { - $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0); - } - }; - - $(window).on('hashchange', function() { - adjustAnchor(); - }); - - - //////////////////////// start script smooth apparition des textes ///////////////// - - function scrollReaveal(){ - - const nodes = { - logo : document.querySelectorAll('#logo-animated-container'), - chapeau : document.querySelectorAll('.field_body'), - paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'), - enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'), - // mapHome : document.querySelectorAll('.field_field_map_block #block-sitesmapblock'), - // mapSite : document.querySelectorAll('#sites-map-container'), - lienDoc : document.querySelectorAll('.field_field_documents'), - lienURL : document.querySelectorAll('.field_field_liens_site'), +var adjustAnchor = function() { + var $anchor = $('.sidebar_first_container'), + fixedElementHeight = 500; + if ($anchor.length > 0) { + $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0); } +}; - const showUp = { - origin: 'bottom', - delay: 100, - duration: 1000, - distance: '50px', - easing: 'cubic-bezier(0.5, 0, 0, 1)' - } +$(window).on('hashchange', function() { + adjustAnchor(); +}); - const Show = { - delay: 100, - duration: 600, - easing: 'cubic-bezier(0.5, 0, 0, 1)' - } - console.log(nodes); +//////////////////////// start script smooth apparition des textes ///////////////// - ScrollReveal().reveal(nodes.logo, Show); - ScrollReveal().reveal(nodes.chapeau, showUp); - ScrollReveal().reveal(nodes.paragraph, showUp); - ScrollReveal().reveal(nodes.enjeux, showUp); - // ScrollReveal().reveal(nodes.mapHome, showUp); - // ScrollReveal().reveal(nodes.mapSite, showUp); - ScrollReveal().reveal(nodes.lienDoc, showUp); - ScrollReveal().reveal(nodes.lienURL, showUp); +function scrollReaveal(){ + const nodes = { + logo : document.querySelectorAll('#logo-animated-container'), + chapeau : document.querySelectorAll('.field_body'), + paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'), + enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'), + // mapHome : document.querySelectorAll('.field_field_map_block #block-sitesmapblock'), + // mapSite : document.querySelectorAll('#sites-map-container'), + lienDoc : document.querySelectorAll('.field_field_documents'), + lienURL : document.querySelectorAll('.field_field_liens_site'), } + const showUp = { + origin: 'bottom', + delay: 100, + duration: 1000, + distance: '50px', + easing: 'cubic-bezier(0.5, 0, 0, 1)' + } - $( document ).ready(function() { - scrollReaveal(); + const Show = { + delay: 100, + duration: 600, + easing: 'cubic-bezier(0.5, 0, 0, 1)' + } + + console.log(nodes); + + ScrollReveal().reveal(nodes.logo, Show); + ScrollReveal().reveal(nodes.chapeau, showUp); + ScrollReveal().reveal(nodes.paragraph, showUp); + ScrollReveal().reveal(nodes.enjeux, showUp); + // ScrollReveal().reveal(nodes.mapHome, showUp); + // ScrollReveal().reveal(nodes.mapSite, showUp); + ScrollReveal().reveal(nodes.lienDoc, showUp); + ScrollReveal().reveal(nodes.lienURL, showUp); + +} + + +$( document ).ready(function() { + scrollReaveal(); +}); + +//////////////////////// end script smooth apparition des textes ///////////////// + +// //////////////////// start Timeline script /////////////////////// + + // Update month field to only show the first 3 letters + document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { + const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)'); + if (monthField) { + const monthText = monthField.textContent.trim(); + if (monthText === "juillet") { + monthField.textContent = monthText.slice(0, 4); + monthField.classList.add('after'); + } else if (monthText === "juin") { + monthField.textContent = monthText.slice(0, 4); + } else if (monthText.length > 3) { + monthField.textContent = monthText.slice(0, 3); + monthField.classList.add('after'); + } + } }); - //////////////////////// end script smooth apparition des textes ///////////////// + // Fonction pour ajouter ou retirer la classe .only + function updateDateClasses() { + document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) { + const date2Element = dateElement.querySelector('.date2'); + const yearElement = dateElement.querySelector('.field_field_date_de_annee'); - // //////////////////// start Timeline script /////////////////////// - - // Update month field to only show the first 3 letters - document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { - const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)'); - if (monthField) { - const monthText = monthField.textContent.trim(); - if (monthText === "juillet") { - monthField.textContent = monthText.slice(0, 4); - monthField.classList.add('after'); - } else if (monthText === "juin") { - monthField.textContent = monthText.slice(0, 4); - } else if (monthText.length > 3) { - monthField.textContent = monthText.slice(0, 3); - monthField.classList.add('after'); + if (date2Element && !date2Element.textContent.trim()) { + if (yearElement) { + yearElement.classList.add('only'); + } + } else { + if (yearElement) { + yearElement.classList.remove('only'); } } }); - - // Fonction pour ajouter ou retirer la classe .only - function updateDateClasses() { - document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) { - const date2Element = dateElement.querySelector('.date2'); - const yearElement = dateElement.querySelector('.field_field_date_de_annee'); - - if (date2Element && !date2Element.textContent.trim()) { - if (yearElement) { - yearElement.classList.add('only'); - } - } else { - if (yearElement) { - yearElement.classList.remove('only'); - } - } - }); + } + + // Exécuter la fonction une première fois pour le contenu déjà présent + updateDateClasses(); + + // MutationObserver pour surveiller les changements dans le DOM + const observer = new MutationObserver(function(mutationsList, observer) { + for(let mutation of mutationsList) { + if (mutation.type === 'childList') { + updateDateClasses(); + } } - - // Exécuter la fonction une première fois pour le contenu déjà présent - updateDateClasses(); - - // MutationObserver pour surveiller les changements dans le DOM - const observer = new MutationObserver(function(mutationsList, observer) { - for(let mutation of mutationsList) { - if (mutation.type === 'childList') { - updateDateClasses(); - } - } + }); + + +// ////////////////////// start calendrier home ///////////////////////////////// + $(document).ready(function(){ + $('.__timeline-content').slick({ + slidesToShow: 3, + slidesToScroll: 1, + dots: false, + arrows: true, + centerMode: false, + draggable: true, + infinite: false, + responsive: [ + { + breakpoint: 810, + settings: { + slidesToShow: 1, + adaptiveHeight: false, + arrows: true, + draggable: true, + centerMode: false, + infinite: false, + } + }] }); + console.log('salut slick calendrier'); + + }); + +//////////////////////// end calendrier home ///////////////////////////////// - // ////////////////////// start calendrier home ///////////////////////////////// - $(document).ready(function(){ - $('.__timeline-content').slick({ + +//////////////////////// end Timeline script ///////////////////////////////////////////// + +/////////////////// caracteres body actus///////////////////////// + +document.addEventListener('DOMContentLoaded', function() { + // Maximum number of characters to display + const maxChars = 140; // Adjust this value as needed + + document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) { + let text = paragraph.textContent.trim(); + if (text.length > maxChars) { + let truncatedText = text.slice(0, maxChars) + '...'; + paragraph.textContent = truncatedText; + } + }); +}); + + +//////////// start slideshow home ////////////////////////// + + + +$(document).ready(function(){ + let actuview = $('.content-actus .view ') + if (actuview) { + actuview.slick({ slidesToShow: 3, - slidesToScroll: 1, + // slidesToScroll: 1, dots: false, arrows: true, - centerMode: false, - draggable: true, - infinite: false, + // centerMode: true, + adaptiveHeight: false, + autoplay: false, + // autoplaySpeed: 1500, + // infinite: true, + // centerPadding: '100px', responsive: [ { breakpoint: 810, settings: { slidesToShow: 1, + // slidesToScroll: 1, adaptiveHeight: false, arrows: true, draggable: true, - centerMode: false, - infinite: false, + // centerMode: true, + // centerPadding: '100px', + autoplay: false, + // autoplaySpeed: 2000, } }] }); - console.log('salut slick calendrier'); - - }); - - //////////////////////// end calendrier home ///////////////////////////////// - - - - //////////////////////// end Timeline script ///////////////////////////////////////////// - - /////////////////// caracteres body actus///////////////////////// - - document.addEventListener('DOMContentLoaded', function() { - // Nombre maximum de caractères à afficher - const maxChars = 140; // Ajustez cette valeur selon vos besoins - - document.querySelectorAll('#actus-caroussel .node-type-actualite').forEach(function(node) { - let paragraphs = node.querySelectorAll('.field_body p'); - let fullText = ""; - - // Concaténer tous les paragraphes - paragraphs.forEach(p => fullText += p.textContent.trim() + " "); - fullText = fullText.trim(); - - // Vérifier si le texte dépasse la limite - if (fullText.length > maxChars) { - let truncatedText = fullText.slice(0, maxChars) + '...'; - - // Vider tout le contenu et insérer seulement le texte tronqué - let firstParagraph = paragraphs[0]; - firstParagraph.textContent = truncatedText; - - // Masquer les autres paragraphes - for (let i = 1; i < paragraphs.length; i++) { - paragraphs[i].style.display = "none"; - } - } + console.log('salut slick home'); + + } + $('.slick-carousel').slick({ + lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive' }); - }); - - - //////////// start slideshow home ////////////////////////// - - - - $(document).ready(function(){ - let actuview = $('.content-actus .view ') - if (actuview) { - actuview.slick({ - slidesToShow: 3, - // slidesToScroll: 1, - dots: false, - arrows: true, - // centerMode: true, - adaptiveHeight: false, - autoplay: false, - // autoplaySpeed: 1500, - // infinite: true, - // centerPadding: '100px', - responsive: [ - { - breakpoint: 810, - settings: { - slidesToShow: 1, - // slidesToScroll: 1, - adaptiveHeight: false, - arrows: true, - draggable: true, - // centerMode: true, - // centerPadding: '100px', - autoplay: false, - // autoplaySpeed: 2000, - } - }] - }); - console.log('salut slick home'); - - } - $('.slick-carousel').slick({ - lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive' - }); - - }); - - - - - $(document).ready(function () { - let diapohome = $('.config_pages--type--diaporama-home .diaporama'); - - if (diapohome.length) { - // Initialisation de Slick - diapohome.slick({ - slidesToShow: 1, - dots: false, - arrows: false, - // centerMode: true, - adaptiveHeight: false, - autoplay: true, // Activer l'autoplay - autoplaySpeed: 4000, // Changement de slide toutes les 4 secondes - // infinite: true, - pauseOnHover: false, // Ne pas arrêter l'autoplay lors du survol - pauseOnFocus: false, - responsive: [ - { - breakpoint: 810, - settings: { - slidesToShow: 1, - adaptiveHeight: false, - arrows: false, - draggable: true, - centerMode: false, - } - }] - }); - - } }); - //////////// end slideshow home ////////////////////////// + + + +$(document).ready(function () { + let diapohome = $('.config_pages--type--diaporama-home .diaporama'); + + if (diapohome.length) { + // Initialisation de Slick + diapohome.slick({ + slidesToShow: 1, + dots: false, + arrows: false, + // centerMode: true, + adaptiveHeight: false, + autoplay: true, // Activer l'autoplay + autoplaySpeed: 4000, // Changement de slide toutes les 4 secondes + // infinite: true, + pauseOnHover: false, // Ne pas arrêter l'autoplay lors du survol + pauseOnFocus: false, + responsive: [ + { + breakpoint: 810, + settings: { + slidesToShow: 1, + adaptiveHeight: false, + arrows: false, + draggable: true, + centerMode: false, + } + }] + }); + +} +}); + +//////////// end slideshow home ////////////////////////// //////////////// start lightbox galerie image page site//////////////////////// @@ -504,95 +488,95 @@ lightbox.appendChild(nextBtn); // Fonction pour afficher l'image et la légende à l'index donné function showImage(index) { - if (index < 0) index = images.length - 1; - if (index >= images.length) index = 0; - currentIndex = index; +if (index < 0) index = images.length - 1; +if (index >= images.length) index = 0; +currentIndex = index; - // Mettre à jour l'image - img.src = images[currentIndex].getAttribute('src'); +// Mettre à jour l'image +img.src = images[currentIndex].getAttribute('src'); - // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image) - const captionText = images[currentIndex] - .closest('.cadre-img-zoom') - .nextElementSibling.querySelector('.image-field-caption p') - .textContent; - - caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente - lightbox.style.display = 'flex'; +// Récupérer la légende associée (le paragraphe dans blockquote suivant l'image) +const captionText = images[currentIndex] + .closest('.cadre-img-zoom') + .nextElementSibling.querySelector('.image-field-caption p') + .textContent; + +caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente +lightbox.style.display = 'flex'; } // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende images.forEach((image, index) => { - image.addEventListener('click', () => { - showImage(index); - }); +image.addEventListener('click', () => { + showImage(index); +}); }); // Fermer le lightbox closeBtn.addEventListener('click', () => { - lightbox.style.display = 'none'; +lightbox.style.display = 'none'; }); // Navigation pour images précédente et suivante prevBtn.addEventListener('click', (e) => { - e.stopPropagation(); - showImage(currentIndex - 1); +e.stopPropagation(); +showImage(currentIndex - 1); }); nextBtn.addEventListener('click', (e) => { - e.stopPropagation(); - showImage(currentIndex + 1); +e.stopPropagation(); +showImage(currentIndex + 1); }); // Fermer le lightbox en cliquant en dehors de l'image lightbox.addEventListener('click', (e) => { - if (e.target === lightbox) { - lightbox.style.display = 'none'; - } +if (e.target === lightbox) { + lightbox.style.display = 'none'; +} }); // Ajout des contrôles clavier (Échap, flèches gauche/droite) document.addEventListener('keydown', (e) => { - if (lightbox.style.display === 'flex') { - if (e.key === 'Escape') { - lightbox.style.display = 'none'; - } else if (e.key === 'ArrowLeft') { - showImage(currentIndex - 1); - } else if (e.key === 'ArrowRight') { - showImage(currentIndex + 1); - } +if (lightbox.style.display === 'flex') { + if (e.key === 'Escape') { + lightbox.style.display = 'none'; + } else if (e.key === 'ArrowLeft') { + showImage(currentIndex - 1); + } else if (e.key === 'ArrowRight') { + showImage(currentIndex + 1); } +} }); //////////////// end lightbox galerie image page site//////////////////////// - + //////////////////// start wrapper views-row lessites ///////////////////////// document.addEventListener("DOMContentLoaded", function() { - // Sélectionne le conteneur principal avec l'ID 'lessites' - const container = document.getElementById("lessites"); +// Sélectionne le conteneur principal avec l'ID 'lessites' +const container = document.getElementById("lessites"); - // Vérifie si le conteneur existe pour éviter toute erreur sur d'autres pages - if (container) { - // Sélectionne l'élément 'view' à l'intérieur de '.views-element-container' - const viewContainer = container.querySelector(".views-element-container .view"); +// Vérifie si le conteneur existe pour éviter toute erreur sur d'autres pages +if (container) { + // Sélectionne l'élément 'view' à l'intérieur de '.views-element-container' + const viewContainer = container.querySelector(".views-element-container .view"); - // Vérifie si 'viewContainer' existe pour éviter les erreurs - if (viewContainer) { - // Crée une div englobante pour tous les éléments 'views-row' - const wrapperDiv = document.createElement("div"); - wrapperDiv.classList.add("views-row-wrapper"); // ajoute une classe pour faciliter le style CSS + // Vérifie si 'viewContainer' existe pour éviter les erreurs + if (viewContainer) { + // Crée une div englobante pour tous les éléments 'views-row' + const wrapperDiv = document.createElement("div"); + wrapperDiv.classList.add("views-row-wrapper"); // ajoute une classe pour faciliter le style CSS - // Déplace tous les éléments 'views-row' dans la nouvelle div - const viewsRows = viewContainer.querySelectorAll(".views-row"); - viewsRows.forEach(row => wrapperDiv.appendChild(row)); + // Déplace tous les éléments 'views-row' dans la nouvelle div + const viewsRows = viewContainer.querySelectorAll(".views-row"); + viewsRows.forEach(row => wrapperDiv.appendChild(row)); - // Ajoute la div englobante dans le 'viewContainer' - viewContainer.appendChild(wrapperDiv); - } + // Ajoute la div englobante dans le 'viewContainer' + viewContainer.appendChild(wrapperDiv); } +} }); @@ -604,188 +588,103 @@ document.addEventListener("DOMContentLoaded", function() { // Vérifie si la page a la classe 'node-type-site' dans le if (document.body.classList.contains('node-type-site')) { - // Sélectionne le conteneur principal - const blockRegion = document.querySelector('.block-region-second'); +// Sélectionne le conteneur principal +const blockRegion = document.querySelector('.block-region-second'); - // Liste des classes spécifiques à cibler - const fieldClasses = [ - '.field_field_region', - '.field_field_nom_du_qpv_nb_d_hab', - '.field_field_departement_s', - '.field_field_programme_de_l_etat', - '.field_field_porteur_s_de_site', - '.field_field_nom_de_la_commune_nb_d_hab' - ]; +// Liste des classes spécifiques à cibler +const fieldClasses = [ + '.field_field_region', + '.field_field_nom_du_qpv_nb_d_hab', + '.field_field_departement_s', + '.field_field_programme_de_l_etat', + '.field_field_porteur_s_de_site', + '.field_field_nom_de_la_commune_nb_d_hab' +]; - // Sélectionne les div parents de chacun des champs listés - const elementsToWrap = []; - fieldClasses.forEach(className => { - const fieldElement = blockRegion.querySelector(className); - if (fieldElement) { - // Ajoute le parent du champ au tableau si trouvé - elementsToWrap.push(fieldElement.parentElement); - } - }); +// Sélectionne les div parents de chacun des champs listés +const elementsToWrap = []; +fieldClasses.forEach(className => { + const fieldElement = blockRegion.querySelector(className); + if (fieldElement) { + // Ajoute le parent du champ au tableau si trouvé + elementsToWrap.push(fieldElement.parentElement); + } +}); - // Vérifie que des éléments ont été trouvés - if (elementsToWrap.length > 0) { - // Crée le conteneur avec la classe 'infos' - const infosContainer = document.createElement('div'); - infosContainer.className = 'infos'; +// Vérifie que des éléments ont été trouvés +if (elementsToWrap.length > 0) { + // Crée le conteneur avec la classe 'infos' + const infosContainer = document.createElement('div'); + infosContainer.className = 'infos'; - // Insère le conteneur `.infos` avant le premier élément ciblé - const firstElement = elementsToWrap[0]; - blockRegion.insertBefore(infosContainer, firstElement); + // Insère le conteneur `.infos` avant le premier élément ciblé + const firstElement = elementsToWrap[0]; + blockRegion.insertBefore(infosContainer, firstElement); - // Déplace chaque élément dans le conteneur `.infos` - elementsToWrap.forEach(element => infosContainer.appendChild(element)); - } + // Déplace chaque élément dans le conteneur `.infos` + elementsToWrap.forEach(element => infosContainer.appendChild(element)); +} } //////////////////// end div infos site //////////////////////// document.addEventListener("DOMContentLoaded", function() { - // Sélectionner les éléments à déplacer - const documentsField = document.querySelector(".field_field_documents"); - const liensSiteField = document.querySelector(".field_field_liens_site"); - - // Sélectionner la destination - const thirdRegion = document.querySelector(".block-region-third > div"); +// Sélectionner les éléments à déplacer +const documentsField = document.querySelector(".field_field_documents"); +const liensSiteField = document.querySelector(".field_field_liens_site"); - // Créer une nouvelle div pour englober les éléments déplacés - const wrapperDiv = document.createElement("div"); - wrapperDiv.classList.add("documents-liens-wrapper"); +// Sélectionner la destination +const thirdRegion = document.querySelector(".block-region-third > div"); - // Déplacer les éléments dans la nouvelle div - if (documentsField && liensSiteField && thirdRegion) { - wrapperDiv.appendChild(documentsField); - wrapperDiv.appendChild(liensSiteField); +// Créer une nouvelle div pour englober les éléments déplacés +const wrapperDiv = document.createElement("div"); +wrapperDiv.classList.add("documents-liens-wrapper"); - // Ajouter la nouvelle div dans la destination - thirdRegion.appendChild(wrapperDiv); - } +// Déplacer les éléments dans la nouvelle div +if (documentsField && liensSiteField && thirdRegion) { + wrapperDiv.appendChild(documentsField); + wrapperDiv.appendChild(liensSiteField); + + // Ajouter la nouvelle div dans la destination + thirdRegion.appendChild(wrapperDiv); +} }); document.addEventListener("DOMContentLoaded", function() { - // Sélectionner les éléments pertinents - const documentsLiensWrapper = document.querySelector(".documents-liens-wrapper"); - const blockRegionThird = document.querySelector(".block-region-third"); +// Sélectionner les éléments pertinents +const documentsLiensWrapper = document.querySelector(".documents-liens-wrapper"); +const blockRegionThird = document.querySelector(".block-region-third"); - // Vérifier que les éléments existent avant de les manipuler - if (documentsLiensWrapper && blockRegionThird) { - // Déplacer .documents-liens-wrapper en dehors du div contenant les boutons prev/next - blockRegionThird.appendChild(documentsLiensWrapper); - } +// Vérifier que les éléments existent avant de les manipuler +if (documentsLiensWrapper && blockRegionThird) { + // Déplacer .documents-liens-wrapper en dehors du div contenant les boutons prev/next + blockRegionThird.appendChild(documentsLiensWrapper); +} }); document.addEventListener("DOMContentLoaded", function () { - // Fonction pour déplacer le bloc en fonction de la taille de l'écran - function moveLanguageSwitcher() { - const languageSwitcher = document.getElementById("block-quartiers-de-demain-selecteurdelangue"); - const navContainer = document.querySelector(".header_nav_container"); +// Fonction pour déplacer le bloc en fonction de la taille de l'écran +function moveLanguageSwitcher() { + const languageSwitcher = document.getElementById("block-quartiers-de-demain-selecteurdelangue"); + const navContainer = document.querySelector(".header_nav_container"); - if (window.innerWidth <= 810) { // Si écran téléphone - if (languageSwitcher && navContainer && !navContainer.contains(languageSwitcher)) { - navContainer.appendChild(languageSwitcher); // Déplace le bloc dans header_nav_container - } - } else { // Si écran non téléphone - const headerRightContainer = document.querySelector(".header_right_container"); - if (languageSwitcher && headerRightContainer && !headerRightContainer.contains(languageSwitcher)) { - headerRightContainer.appendChild(languageSwitcher); // Remet le bloc dans sa position initiale - } + if (window.innerWidth <= 810) { // Si écran téléphone + if (languageSwitcher && navContainer && !navContainer.contains(languageSwitcher)) { + navContainer.appendChild(languageSwitcher); // Déplace le bloc dans header_nav_container + } + } else { // Si écran non téléphone + const headerRightContainer = document.querySelector(".header_right_container"); + if (languageSwitcher && headerRightContainer && !headerRightContainer.contains(languageSwitcher)) { + headerRightContainer.appendChild(languageSwitcher); // Remet le bloc dans sa position initiale } } +} - // Déclencher au chargement et au redimensionnement - moveLanguageSwitcher(); - window.addEventListener("resize", moveLanguageSwitcher); +// Déclencher au chargement et au redimensionnement +moveLanguageSwitcher(); +window.addEventListener("resize", moveLanguageSwitcher); }); -////////////////////////////////////////// - - -/////////// Start script ressources //////////////////////////////// - -document.addEventListener("DOMContentLoaded", () => { - const view = document.querySelector(".view"); - const elements = Array.from(view.children); - - let newView = document.createElement("div"); - newView.classList.add("view"); - - let group = null; - let groupContent = null; - - elements.forEach((el) => { - if (el.tagName === "H3") { - if (group) { - newView.appendChild(group); - } - - group = document.createElement("div"); - group.classList.add("group"); - - groupContent = document.createElement("div"); - groupContent.classList.add("group-content"); - - groupContent.appendChild(el); - group.appendChild(groupContent); - } else if (el.classList.contains("views-row")) { - groupContent.appendChild(el); - } - }); - - if (group) { - newView.appendChild(group); - } - - view.replaceWith(newView); - - // Ajouter un bouton "Voir plus" dans chaque groupe - document.querySelectorAll(".group").forEach((group) => { - const rows = group.querySelectorAll(".views-row"); - const button = document.createElement("button"); - button.classList.add("toggle-btn"); - button.textContent = "Voir plus de"; - - rows.forEach((row, index) => { - if (index >= 3) { - row.classList.add("hidden"); - row.style.maxHeight = "0"; - row.style.opacity = "0"; - } - }); - - button.addEventListener("click", () => { - const isExpanded = button.textContent === "Voir moins de"; - const hiddenRows = group.querySelectorAll(".views-row.hidden"); - - if (isExpanded) { - // Cacher les lignes avec un délai pour l'effet de transition - hiddenRows.forEach((row) => { - row.style.maxHeight = "0"; - row.style.opacity = "0"; - setTimeout(() => row.classList.add("hidden"), 500); // Délai pour la transition - }); - } else { - // Afficher les lignes - hiddenRows.forEach((row) => { - row.classList.remove("hidden"); - row.style.maxHeight = row.scrollHeight + "px"; - row.style.opacity = "1"; - }); - } - - button.textContent = isExpanded ? "Voir plus de" : "Voir moins de"; - }); - - group.appendChild(button); - }); -}); - - -/////////// end script ressources //////////////////////////////// - })(jQuery, window);