/lessites js

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

@@ -5,10 +5,24 @@ const popupContent = document.querySelector('#sites-map-container #popup-content
 const modalBackground = document.querySelector('#sites-map-container #modal-background');
 
 // Vérification de la page courante
-const isHomePage = document.querySelector('#home') !== null;
+const isHomePage = document.querySelector('main#home') !== null;
-const isLessitesPage = document.querySelector('main#lessites') !== null;
+const isLessitesPage = document.querySelector('div#lessites') !== null;
 const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
 
+// Identifier le cercle de la page courante pour node-type-site
+let currentPageCircle = null;
+if (isNodeTypeSitePage) {
+    const body = document.querySelector('body');
+    const pageIdMatch = body.className.match(/node-id-(\d+)/);
+    if (pageIdMatch) {
+        const pageId = pageIdMatch[1];
+        currentPageCircle = document.querySelector(`#site-${pageId} circle`);
+        if (currentPageCircle) {
+            currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle correspondant
+        }
+    }
+}
+
 // Fonction pour afficher le popup
 function showPopup(content) {
     popupContent.innerHTML = content;
@@ -40,14 +54,19 @@ svgElement.addEventListener('mouseover', function(event) {
         }
     }
 
-    // Applique une couleur rouge au cercle au survol
+    // Applique une couleur rouge au cercle au survol, sauf pour le cercle de la page courante
-    if (event.target.tagName === 'circle') {
+    if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
         event.target.setAttribute('fill', 'red');
     }
 });
 
-// Gérer la sortie de survol des cercles en fonction de la page
+// Gérer la sortie de survol des cercles en fonction de la page, avec exception pour le cercle de la page courante
 svgElement.addEventListener('mouseout', function(event) {
+    // Ignorer le mouseout pour le cercle correspondant à la page courante dans node-type-site
+    if (event.target === currentPageCircle) {
+        return;
+    }
+
     if (event.target.classList.contains('site-link')) {
         const dataId = event.target.getAttribute('data-id');
         const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
@@ -63,13 +82,13 @@ svgElement.addEventListener('mouseout', function(event) {
         }
     }
 
-    // Remet la couleur noire au cercle lorsqu'on quitte le survol
+    // Remet la couleur noire au cercle lorsqu'on quitte le survol, sauf pour le cercle de la page courante
-    if (event.target.tagName === 'circle') {
+    if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
         event.target.setAttribute('fill', 'black');
     }
 });
 
-// Gérer les clics pour la page node-type-site
+// Gérer les clics pour la page node-type-site uniquement
 svgElement.addEventListener('click', function(event) {
     if (isNodeTypeSitePage) {
         if (event.target.classList.contains('site-link')) {
@@ -81,13 +100,77 @@ svgElement.addEventListener('click', function(event) {
     }
 });
 
-// Mise en évidence du cercle correspondant à la page courante pour node-type-site
+// Fonction pour gérer l'agrandissement de views-row au survol des cercles
-if (isNodeTypeSitePage) {
+if (isLessitesPage) {
-    const body = document.querySelector('body');
+    const circles = svgElement.querySelectorAll('circle.site-link');
-    const pageIdMatch = body.className.match(/node-id-(\d+)/);
+    
-    if (pageIdMatch) {
+    circles.forEach(circle => {
-        const pageId = pageIdMatch[1];
+        // Récupérer l'URL du projet depuis le `data-url` du cercle
-        const matchingCircle = document.querySelector(`#site-${pageId} circle`);
+        const projectUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
-        if (matchingCircle) matchingCircle.setAttribute('fill', 'red');
+
-    }
+        circle.addEventListener('mouseover', function() {
+            // Sélectionner le .views-row correspondant
+            const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
+                const rowLink = row.querySelector('a[href]');
+                return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
+            });
+
+            // Si un .views-row correspondant est trouvé, on augmente sa taille
+            if (correspondingRow) {
+                correspondingRow.style.transform = 'scale(1.2)';
+                correspondingRow.style.transition = 'transform 0.2s ease'; // Animation fluide
+            }
+        });
+
+        circle.addEventListener('mouseout', function() {
+            // Sélectionner le .views-row correspondant
+            const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
+                const rowLink = row.querySelector('a[href]');
+                return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
+            });
+
+            // Remettre la taille d'origine du .views-row
+            if (correspondingRow) {
+                correspondingRow.style.transform = 'scale(1)'; // Taille d'origine
+            }
+        });
+    });
+
+    // Gérer le survol des .views-row pour surligner le cercle correspondant
+    const viewsRows = document.querySelectorAll('.views-row');
+
+    viewsRows.forEach(row => {
+        // Récupère l'URL du projet dans le premier lien <a>
+        const link = row.querySelector('a[href]');
+        if (!link) return; // Passe si aucun lien n'est trouvé
+        const projectUrl = new URL(link.getAttribute('href'), window.location.origin).pathname;
+
+        row.addEventListener('mouseover', function() {
+            // Sélectionne le cercle qui a la même URL dans data-url
+            const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
+                const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
+                return circleUrl === projectUrl;
+            });
+
+            // Si un cercle correspondant est trouvé, le mettre en rouge
+            if (correspondingCircle) {
+                correspondingCircle.setAttribute('fill', 'red');  // Surligne le cercle correspondant
+            }
+        });
+
+        row.addEventListener('mouseout', function() {
+            // Sélectionne le cercle qui a la même URL dans data-url
+            const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
+                const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
+                return circleUrl === projectUrl;
+            });
+
+            // Remettre le cercle à sa couleur initiale
+            if (correspondingCircle && correspondingCircle !== currentPageCircle) {
+                correspondingCircle.setAttribute('fill', 'black');  // Remet le cercle à sa couleur initiale
+            }
+        });
+    });
+
+    
 }