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/src/assets/js/quartiers_de_demain.js

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