From d7986309bc732b18f9d856a2cbdaa97879700fc7 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Tue, 8 Oct 2024 11:47:01 +0200
Subject: [PATCH] js change color mouseover

---
 .../assets/css/carte-interactive-qdd.scss       | 15 +++------------
 .../q2d_mod/assets/js/carte-interactive-qdd.js  | 17 +++++++++++++++++
 .../q2d_mod/src/Plugin/Block/SitesMap.php       | 13 +++++--------
 .../dist/assets/css/bundle.css                  | 11 -----------
 4 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
index 8152cf5..22f94a0 100644
--- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
+++ b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
@@ -12,24 +12,15 @@
   stroke: white;
   stroke-width: 0.7;
 } */
+#sites-map-container circle.circle:hover{
+  // fill: #f7002b!important;
+}
 
 /* Changer la couleur au survol (hover) */
 #sites-map-container .site-link:hover{
   cursor: pointer;
 }
 
-#sites-map-container circle.circle {
-  fill: black !important;
-  &:hover{
-    fill: #f7002b!important;
-  }
-
-}
-#sites-map-container circle.circle:hover{
-    fill: #f7002b!important;
-  
-
-}
 
 /* Styles du popup (caché par défaut) */
 #sites-map-container #popup {
diff --git a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
index dc1e373..4ed7271 100644
--- a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
+++ b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
@@ -108,6 +108,16 @@ svgElement.addEventListener('mouseover', function(event) {
         // Afficher le popup avec la position et l'alignement adaptés
         showPopup(content, circleX, circleY, isLeftHalf);
     }
+
+    const isCircle = event.target.tagName === 'circle';
+    console.log(isCircle);
+    
+    if (isCircle === true) {
+        // Change la couleur en rouge
+        event.target.setAttribute('fill', 'red');
+    }
+
+        // circle.style.fill = 'red';
 });
 
 // Fermer le popup lorsque la souris quitte le cercle
@@ -115,4 +125,11 @@ svgElement.addEventListener('mouseout', function(event) {
     if (event.target.classList.contains('site-link')) {
         closePopup();
     }
+    const isCircle = event.target.tagName === 'circle';
+    console.log(isCircle);
+    
+    if (isCircle === true) {
+        // Change la couleur en rouge
+        event.target.setAttribute('fill', 'black');
+    }
 });
diff --git a/web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php b/web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php
index 92fb071..9f8fc66 100644
--- a/web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php
+++ b/web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php
@@ -63,10 +63,11 @@ class SitesMap extends BlockBase {
         id="site-$index"
         transform="
           translate($x,$y)">
-        <circle
-          id="path83" class="circle"
+          <circle
+          class="site-link"
+          data-content="$datacontent"
           cx="0" cy="0" r="$r"
-          style="fill:#000000;fill-opacity:1;fill-rule:nonzero;" />
+          style="fill-opacity:1;fill-rule:nonzero;" />
         <path
           id="path84"
           d="m 0,$m v $l"
@@ -75,11 +76,7 @@ class SitesMap extends BlockBase {
           id="path85"
           d="m $m,0 h $l"
           style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
-        <circle
-          class="site-link"
-          data-content="$datacontent"
-          cx="0" cy="0" r="$r"
-          style="fill:#000000;fill-opacity:0;fill-rule:nonzero;" />
+
       </g>
       SVGSITEPATH;
     }
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
index 371cd03..b610818 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -3077,17 +3077,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   cursor: pointer;
 }
 
-#sites-map-container circle.circle {
-  fill: black !important;
-}
-#sites-map-container circle.circle:hover {
-  fill: #f7002b !important;
-}
-
-#sites-map-container circle.circle:hover {
-  fill: #f7002b !important;
-}
-
 /* Styles du popup (caché par défaut) */
 #sites-map-container #popup {
   font-family: "gilroy-semibold";