carte points en rouge quand sur page site correspondant

web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js

@@ -4,95 +4,24 @@ const popup = document.querySelector('#sites-map-container #popup');
 const popupContent = document.querySelector('#sites-map-container #popup-content');
 const modalBackground = document.querySelector('#sites-map-container #modal-background');
 
+// Vérifiez si la page contient la classe '.node-type-site'
+const isSitePage = document.body.classList.contains('node-type-site');
+
+
 // Fonction pour afficher le popup
 function showPopup(content, x, y, isLeftHalf) {
+    // Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
+    if (isSitePage) return;
+
     popupContent.innerHTML = content;
 
-//     // Récupérer la position et les dimensions du conteneur SVG
-//     const rect = svgElement.getBoundingClientRect();
-
-//       // Récupérer la position de défilement (scroll) de la page
-//       const scrollX = window.scrollX;
-//       const scrollY = window.scrollY;
-
-//       // Variables pour stocker les positions calculées du popup
-//     let popupX, popupY;
-
-//     // Afficher temporairement le popup pour mesurer ses dimensions
-//     popup.style.display = 'block';
-//     const popupWidth = popup.offsetWidth;
-//     const popupHeight = popup.offsetHeight;
-
-    
-
-//     // // Vérifier si le point est dans la moitié gauche ou droite du SVG
-//     // if (isLeftHalf) {
-//     //     console.log('Le point est dans la moitié gauche');
-//     //     // Aligner le popup à gauche du cercle
-//     //     popupX = rect.left + x  -scrollX - popupWidth - 800; // Ajuster ici si nécessaire
-//     //     popupContent.style.textAlign = 'right'; // Alignement du texte à droite
-//     // } else {
-//     //     console.log('Le point est dans la moitié droite');
-//     //     // Aligner le popup à droite du cercle
-//         popupX = rect.left + x + scrollX - popupWidth ;
-//         popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
-//     // }
-
-//     // // Calculer la position Y avec un ajustement pour éviter qu'il soit trop bas
-//     const offsetY = - popupHeight - 10; // Ajuster la position vers le haut avec un décalage
-//     popupY = rect.top  + offsetY; // Centrer verticalement, puis ajuster
-
-//     // console.log('rect.top:', rect.top);
-//     // console.log('y:', y);
-//     // console.log('scrollY:', scrollY);
-//     // console.log('popupHeight:', popupHeight);
-//     // console.log('offsetY:', offsetY);
-
-
-//     // // Empêcher le popup de dépasser les bords de l'écran
-//     // const viewportWidth = window.innerWidth;
-//     // const viewportHeight = window.innerHeight;
-
-//     // // Vérifier si le popup dépasse à droite de l'écran
-//     // if (popupX + popupWidth > viewportWidth) {
-//     //     popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
-//     // }
-
-//     // // Vérifier si le popup dépasse à gauche
-//     // if (popupX < 10) {
-//     //     popupX = 10; // Ajustement à gauche
-//     // }
-
-//     // // Vérifier si le popup dépasse en bas
-//     // if (popupY + popupHeight > viewportHeight) {
-//     //     popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
-//     // }
-
-//     // // Vérifier si le popup dépasse en haut
-//     // if (popupY < 10) {
-//     //     popupY = 10; // Ajustement en haut
-//     // }
-
-//     // Appliquer les positions calculées au popup
-//     popup.style.left = `${popupX}px`;
-//     popup.style.top = `${popupY}px`;
 
     // Afficher le popup et le fond de modal
     popup.style.display = 'block';
     modalBackground.style.display = 'block';
 
-//     console.log(`Popup affiché à x: ${popupX}, y: ${popupY}`);
 }
 
-// // Recalculer la position du popup lors du redimensionnement de la fenêtre
-// window.addEventListener('resize', function() {
-//     if (popup.style.display === 'block') {
-//         const currentPopupRect = popup.getBoundingClientRect();
-//         const rect = svgElement.getBoundingClientRect();
-//         showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
-//     }
-// });
-
 // Fonction pour fermer le popup
 function closePopup() {
     popup.style.display = 'none';
@@ -104,19 +33,6 @@ svgElement.addEventListener('mouseover', function(event) {
     if (event.target.classList.contains('site-link')) {
         const content = event.target.getAttribute('data-content');
 
-//         // Récupérer la position et les dimensions du SVG
-//         const rect = svgElement.getBoundingClientRect();
-
-//         // Calculer la position relative du cercle
-//         const circleX = event.clientX - rect.left;
-//         const circleY = event.clientY - rect.top;
-
-//         // // Calculer la moitié du SVG
-//         // const svgHalfWidth = rect.width / 2;
-
-//         // // Déterminer si le cercle est sur la moitié gauche ou droite du SVG
-//         // const isLeftHalf = circleX < svgHalfWidth;
-
         // Afficher le popup avec la position et l'alignement adaptés
         showPopup(content);
     }
@@ -179,5 +95,22 @@ svgElement.addEventListener('click', function(event) {
 });
 
 
+///////////////////// page site point rouge   ///////////////////////
+
+// Récupérer l'ID de la page depuis la classe du body
+const body = document.querySelector('body');
+const pageId = body.className.match(/node-id-(\d+)/)[1];  // Extraire l'ID de la page
+
+// Sélectionner le groupe SVG qui a l'ID correspondant
+const matchingGroup = document.querySelector(`#site-${pageId}`);
+
+// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
+if (matchingGroup) {
+    const circle = matchingGroup.querySelector('circle');  // Sélectionner le cercle à l'intérieur du groupe
+    if (circle) {
+        circle.setAttribute('fill', 'red');  // Changer la couleur du cercle
+    }
+}
+
 
 

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -193,7 +193,7 @@ h2 {
 }
 .layout-container main {
   width: 100%;
-  padding-top: 320px;
+  padding-top: 280px;
 }
 @media (max-width: 810px) {
   .layout-container main {
@@ -291,7 +291,7 @@ header .header_left_container #block-quartiers-de-demain-logorepu-2 {
 }
 header .header_left_container #block-quartiers-de-demain-logoepau-2 {
   display: none;
-  height: 320px;
+  height: 280px;
 }
 @media (max-width: 891px) {
   header .header_left_container #block-quartiers-de-demain-logoepau-2 {
@@ -316,7 +316,7 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .
 header .header_left_container img {
   width: auto;
   margin: auto;
-  height: calc(320px - 5rem);
+  height: calc(280px - 1rem);
   padding: 2rem;
   transition: height 0.3s; /* Add transition for smooth resizing */
 }
@@ -379,6 +379,7 @@ header .header_right_container .language-switcher-language-url ul .is-active {
 header .header_nav_container {
   flex: 0 0 0%;
   width: 100%;
+  min-width: fit-content;
   background: rgb(7, 50, 194);
   text-align: center;
   transform: translateX(0);
@@ -398,10 +399,9 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
   flex-direction: column;
   align-items: flex-start;
   position: relative;
-  top: 80px;
   padding-left: 1rem;
   padding-right: 1rem;
-  margin: 0;
+  margin-top: 2rem;
 }
 @media (max-width: 1025px) {
   header .header_nav_container #block-quartiers-de-demain-entete ul {
@@ -409,11 +409,6 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
     align-items: center;
   }
 }
-@media (max-width: 1090px) {
-  header .header_nav_container #block-quartiers-de-demain-entete ul {
-    top: 16px;
-  }
-}
 @media (max-width: 1090px) {
   header .header_nav_container #block-quartiers-de-demain-entete ul li {
     padding-top: 0.3rem;
@@ -464,7 +459,7 @@ header .header:hover + .header_nav_container {
 
 /* Taille définitive du header après l'animation */
 .header--collapsed {
-  height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
+  height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */
   width: 35%;
   transform-origin: bottom right;
   transition: all 1s ease-in-out;
@@ -495,6 +490,7 @@ header .header:hover + .header_nav_container {
 .header--collapsed .header_nav_container {
   flex: 0 0 30%;
   transform-origin: bottom right;
+  min-width: fit-content;
 }
 @media (max-width: 810px) {
   .header--collapsed .header_nav_container {
@@ -505,7 +501,7 @@ header .header:hover + .header_nav_container {
 }
 
 .header--collapsed-already {
-  height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
+  height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */
   width: 35%;
   transform-origin: bottom right;
   transition: all 0s ease-in-out;
@@ -530,6 +526,7 @@ header .header:hover + .header_nav_container {
 }
 .header--collapsed-already .header_nav_container {
   flex: 0 0 30%;
+  min-width: fit-content;
   transform-origin: bottom right;
 }
 @media (max-width: 810px) {
@@ -1633,6 +1630,64 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   z-index: 0;
 }
 
+body {
+  font-family: Arial, sans-serif;
+}
+
+.diaporama {
+  display: flex;
+  gap: 10px;
+}
+
+.diaporama img {
+  width: 150px;
+  cursor: pointer;
+}
+
+.lightbox {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.lightbox img {
+  max-width: 90%;
+  max-height: 80%;
+}
+
+.lightbox .close {
+  position: absolute;
+  top: 20px;
+  right: 40px;
+  font-size: 40px;
+  color: white;
+  cursor: pointer;
+}
+
+.prev, .next {
+  position: absolute;
+  top: 50%;
+  color: white;
+  font-size: 30px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.prev {
+  left: 10px;
+}
+
+.next {
+  right: 10px;
+}
+
 /*pages*/
 #home .config_pages--type--diaporama-home {
   position: relative;
@@ -2847,6 +2902,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   margin-bottom: 3rem;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--first div {
+  width: fit-content;
   margin-bottom: 0.5rem;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
@@ -2915,13 +2971,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   padding-left: 0.2rem;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--second {
-  flex: 0 1 80%;
+  width: 60%;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-left: 2.5rem;
+  margin-left: 3.5rem;
 }
 @media (max-width: 500px) {
   .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
@@ -3000,6 +3056,12 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   font-size: 0.5rem;
   color: rgb(7, 50, 194);
 }
+.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties {
+  width: 70%;
+}
+.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties div {
+  width: fit-content;
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) {
   margin-top: 2rem;
 }
@@ -3042,6 +3104,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   font-size: 0.3rem;
   font-family: "gilroy-light";
 }
+.node-type-site .layout--threecol-25-50-25 .layout__region--third {
+  height: fit-content;
+}
 @media (max-width: 500px) {
   .node-type-site .layout--threecol-25-50-25 .layout__region--third {
     display: flex;

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -444,24 +444,69 @@
 });
 
 
-///////////// carte sticky node site ///////////////////
-  // window.addEventListener('scroll', function() {
-  //   const mapContainer = document.getElementById('sites-map-container');
-  //   const header = document.querySelector('header'); // Sélectionnez votre header
 
-  //   const headerHeight = header.offsetHeight; // Calculer la hauteur du header
+//////////////// lightbox galerie image page site////////////////////////
-  //   const scrollPosition = window.scrollY; // Obtenir la position actuelle du scroll
-  //   console.log('Hauteur dynamique du header:', headerHeight);
 
-  //   if (scrollPosition >= headerHeight - 350 ) {
+  // Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo'
-  //     mapContainer.classList.add('fixed');
+  let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
-  //     mapContainer.style.position = 'fixed';
+  let currentIndex;
-  //     mapContainer.style.top = headerHeight + 350 ; // Fixé en haut une fois passé le header
+
-  //   } else {
+  // Créer le lightbox et ses éléments
-  //     mapContainer.classList.remove('fixed');
+  const lightbox = document.createElement('div');
-  //     mapContainer.style.position = 'static'; // Retour à la position initiale
+  lightbox.id = 'lightbox';
-  //   }
+  lightbox.classList.add('lightbox');
-  // });
+  document.body.appendChild(lightbox);
+
+  const img = document.createElement('img');
+  lightbox.appendChild(img);
+
+  const closeBtn = document.createElement('span');
+  closeBtn.classList.add('close');
+  closeBtn.innerHTML = '×';
+  lightbox.appendChild(closeBtn);
+
+  const prevBtn = document.createElement('a');
+  prevBtn.classList.add('prev');
+  prevBtn.innerHTML = '❮';
+  lightbox.appendChild(prevBtn);
+
+  const nextBtn = document.createElement('a');
+  nextBtn.classList.add('next');
+  nextBtn.innerHTML = '❯';
+  lightbox.appendChild(nextBtn);
+
+  // Ajouter un écouteur d'événement sur chaque image pour ouvrir le lightbox
+  images.forEach((image, index) => {
+    image.addEventListener('click', () => {
+      lightbox.style.display = 'flex';
+      img.src = image.src;
+      currentIndex = index;
+    });
+  });
+
+  // Fermer le lightbox
+  closeBtn.addEventListener('click', () => {
+    lightbox.style.display = 'none';
+  });
+
+  // Naviguer vers l'image précédente
+  prevBtn.addEventListener('click', () => {
+    currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
+    img.src = images[currentIndex].src;
+  });
+
+  // Naviguer vers l'image suivante
+  nextBtn.addEventListener('click', () => {
+    currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
+    img.src = images[currentIndex].src;
+  });
+
+  // Fermer le lightbox quand on clique en dehors de l'image
+  lightbox.addEventListener('click', (e) => {
+    if (e.target === lightbox) {
+      lightbox.style.display = 'none';
+    }
+  });
 
 
   

web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss

@@ -1,5 +1,5 @@
 
-$header-height : 320px;
+$header-height : 280px;
 $header-height-pad : 160px;
 $header-height-small : 70px;
 $header-height-ultrasmall : 50px;

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss

@@ -7,6 +7,7 @@
         }
     }
     .layout--threecol-25-50-25{
+        
         flex-wrap: nowrap;
         @media(max-width: 500px){
             display: flex;
@@ -26,7 +27,7 @@
                 }
             }
             div{
-                // width: fit-content;
+                width: fit-content;
                 margin-bottom: 0.5rem;
                 // #sites-map-container.fixed{
                 //     width: auto;
@@ -102,12 +103,13 @@
             }
         }
         .layout__region--second{
-            flex: 0 1 80%;
+            // flex: 0 1 60%;
+            width: 60%;
             .block-region-second{
                 display: flex;
                 flex-direction: row;
                 flex-wrap: wrap;
-                margin-left: 2.5rem;
+                margin-left: 3.5rem;
                 @media(max-width: 500px){
                     margin-left: 0.5rem;
                     margin-top: 1rem;
@@ -197,7 +199,10 @@
                         color: $blue_QDD;
                     }
                 }
-    
+                .field_field_parties{
+                    div{width: fit-content;}
+                    width: 70%;
+                }
                 div:has(.field_field_parties){
                     margin-top: 2rem;
                     @media(max-width: 500px){
@@ -253,6 +258,7 @@
 
 
         .layout__region--third{
+            height: fit-content;
             @media(max-width: 500px){
                 display: flex;
                 flex-direction: column;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss

@@ -60,7 +60,7 @@ header{
         img{
             width: auto;
             margin: auto;
-            height: calc($header-height - 5rem);
+            height: calc($header-height - 1rem);
             padding: 2rem;
             transition: height 0.3s; /* Add transition for smooth resizing */   
             @media(max-width: 891px){
@@ -114,6 +114,7 @@ header{
     .header_nav_container{
         flex: 0 0 0%;
         width: 100%;
+        min-width: fit-content;
         background: $blue_QDD;
         text-align: center;
         transform: translateX(0);
@@ -135,10 +136,11 @@ header{
                 flex-direction: column;
                 align-items: flex-start;
                 position: relative;
-                top: calc($header-height / 4 );
+                // top: calc($header-height / 4 );
                 padding-left: 1rem;
                 padding-right: 1rem;
-                margin: 0;
+                margin-top: 2rem;
+                
                 // @media(max-width: 1200px){
                 //    top:0;
                 // }
@@ -148,7 +150,7 @@ header{
                     // margin: 1rem;
                 }
                 @media(max-width: 1090px){
-                    top: calc($header-height-pad / 10);
+                    // top: calc($header-height-pad / 10);
                 }
                 li{
                     @media(max-width: 1090px){
@@ -234,6 +236,7 @@ header{
     .header_nav_container{
         flex: 0 0 30%;
         transform-origin: bottom right; 
+        min-width: fit-content;
         @media(max-width: 810px){
             flex: 1 0 100%;
             position: relative;
@@ -263,6 +266,7 @@ header{
     }
     .header_nav_container{
         flex: 0 0 30%;
+        min-width: fit-content;
         transform-origin: bottom right; 
         @media(max-width: 810px){
             flex: 1 0 100%;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/lightbox.scss

@@ -0,0 +1,58 @@
+body {
+    font-family: Arial, sans-serif;
+  }
+  
+  .diaporama {
+    display: flex;
+    gap: 10px;
+  }
+  
+  .diaporama img {
+    width: 150px;
+    cursor: pointer;
+  }
+  
+  .lightbox {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+  }
+  
+  .lightbox img {
+    max-width: 90%;
+    max-height: 80%;
+  }
+  
+  .lightbox .close {
+    position: absolute;
+    top: 20px;
+    right: 40px;
+    font-size: 40px;
+    color: white;
+    cursor: pointer;
+  }
+  
+  .prev, .next {
+    position: absolute;
+    top: 50%;
+    color: white;
+    font-size: 30px;
+    cursor: pointer;
+    user-select: none;
+  }
+  
+  .prev {
+    left: 10px;
+  }
+  
+  .next {
+    right: 10px;
+  }
+  

web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss

@@ -33,6 +33,7 @@
 @import "partials/formes-animees";
 @import "partials/animation-pilliers";
 @import "partials/map";
+@import "partials/lightbox";
 
 
 // @import "partials/slick_custom";

web/themes/custom/quartiers_de_demain/templates/field--paragraph--site-diapo.html.twig

@@ -74,5 +74,11 @@
     {% if multiple %}
       </div>
     {% endif %}
+    <div id="lightbox" class="lightbox">
+      <span class="close">&times;</span>
+      <img class="lightbox-content" id="lightbox-img">
+      <a class="prev" id="prev">&#10094;</a>
+      <a class="next" id="next">&#10095;</a>
+    </div>
   </div>
 {% endif %}

web/themes/custom/quartiers_de_demain/templates/image.html.twig

@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an image.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the img tag.
+ * - style_name: (optional) The name of the image style applied.
+ *
+ * @see template_preprocess_image()
+ *
+ * @ingroup themeable
+ */
+#}
+<img class="lightbox-trigger" {{ attributes }} />