smooth apparition carte

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

@@ -6,16 +6,12 @@ const modalBackground = document.querySelector('#sites-map-container #modal-back
 
 // Vérifiez si la page contient la classe '.node-type-site'
 const isSitePage = document.body.classList.contains('node-type-site');
-const isLessitesPage = document.querySelector('#lessites') !== null; // Vérification de la page avec ID #lessites
+const isLessitesPage = document.querySelector('#lessites') !== null;
 
 // Fonction pour afficher le popup
 function showPopup(content, x, y, isLeftHalf) {
-    // Si on est sur la page #lessites ou une page avec la classe 'node-type-site', ne pas afficher le popup
     if (isSitePage || isLessitesPage) return;
-
     popupContent.innerHTML = content;
-
-    // Afficher le popup et le fond de modal
     popup.style.display = 'block';
     modalBackground.style.display = 'block';
 }
@@ -23,26 +19,18 @@ function showPopup(content, x, y, isLeftHalf) {
 // Fonction pour fermer le popup
 function closePopup() {
     popup.style.display = 'none';
-    modalBackground.style.display = 'none'; // Désactiver le fond modal
+    modalBackground.style.display = 'none';
 }
 
 // Gérer le survol des cercles
 svgElement.addEventListener('mouseover', function(event) {
     if (event.target.classList.contains('site-link')) {
         const content = event.target.getAttribute('data-content');
-        const dataId = event.target.getAttribute('data-id'); // Récupérer l'attribut data-id
+        const dataId = event.target.getAttribute('data-id');
         const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
-
-        // Afficher le popup avec la position et l'alignement adaptés
         showPopup(content);
-
+        if (correspondingRow) correspondingRow.style.border = '2px solid red';
-        // Ajouter une bordure rouge au .views-row correspondant
-        if (correspondingRow) {
-            correspondingRow.style.border = '2px solid red';
-        }
     }
-
-    // Gestion du changement de couleur sur le cercle
     if (event.target.tagName === 'circle') {
         event.target.setAttribute('fill', 'red');
     }
@@ -52,34 +40,24 @@ svgElement.addEventListener('mouseover', function(event) {
 svgElement.addEventListener('mouseout', function(event) {
     if (event.target.classList.contains('site-link')) {
         closePopup();
-
         const dataId = event.target.getAttribute('data-id');
         const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
-
+        if (correspondingRow) correspondingRow.style.border = 'none';
-        // Retirer la bordure rouge
-        if (correspondingRow) {
-            correspondingRow.style.border = 'none';
-        }
     }
-
-    // Réinitialiser la couleur du cercle au survol de la souris
     if (event.target.tagName === 'circle') {
-        event.target.setAttribute('fill', 'black'); // Remettre en noir
+        event.target.setAttribute('fill', 'black');
     }
 });
 
-// Mettre à jour la logique de calcul des positions
+// Fonction pour recalculer les positions des sites
 function recalculateSitePositions() {
     const allSites = document.querySelectorAll('.site-link');
-
+    allSites.forEach((site) => {
-    allSites.forEach((site, index) => {
+        const geofield = site.getAttribute('data-geofield');
-        const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
         const lon = parseFloat(geofield.split(',')[0]);
         const lat = parseFloat(geofield.split(',')[1]);
-
+        const x = Math.round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
-        const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
+        const y = Math.round((latTop - lat) / (latTop - latBottom) * vp_h);
-        const y = round((latTop - lat) / (latTop - latBottom) * vp_h);
-
         site.setAttribute('transform', `translate(${x}, ${y})`);
     });
 }
@@ -98,25 +76,28 @@ function handleCircleClick(content) {
     showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
 }
 
-// Écouter les événements de clic et de toucher sur le SVG
+// Écouter les événements de clic sur le SVG
 svgElement.addEventListener('click', function(event) {
-    if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
+    if (event.target.classList.contains('site-link')) {
         const content = event.target.getAttribute('data-content');
         handleCircleClick(content);
+    } else if (event.target.tagName === 'circle') {
+        const circleId = event.target.id;  // Récupérer l'ID du cercle cliqué
+        
+        if (circleId.startsWith('site-')) {
+            const pageId = circleId.split('-')[1];  // Extraire l'ID numérique du site
+            window.location.href = `sites/node/${pageId}`;  // Rediriger vers la page correspondante
+        }
+       
     }
+    
 });
 
-// Récupérer l'ID de la page depuis la classe du body
+// Mise en évidence du point rouge correspondant à la page courante
 const body = document.querySelector('body');
-const pageId = body.className.match(/node-id-(\d+)/)[1];  // Extraire l'ID de la page
+const pageIdMatch = body.className.match(/node-id-(\d+)/);
-
+if (pageIdMatch) {
-// Sélectionner le groupe SVG qui a l'ID correspondant
+    const pageId = pageIdMatch[1];
-const matchingGroup = document.querySelector(`#site-${pageId}`);
+    const matchingCircle = document.querySelector(`#site-${pageId} circle`);
-
+    if (matchingCircle) matchingCircle.setAttribute('fill', 'red');
-// 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

@@ -232,6 +232,10 @@
       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 = {
@@ -254,6 +258,11 @@
     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);
+
   }