pointer events croix, facilité mouseover

web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss

@@ -29,9 +29,10 @@
   font-family: 'gilroy-semibold';
   display: none;
   position: absolute;
-  left: 50%;
-  top: -20%;
-  transform: translate(-50%, -50%);
+  // left: 50%;
+  // top: -20%;
+  // transform: translate(-50%, -50%);
+  transition: opacity 0.3s ease, transform 0.3s ease;
   z-index: 1000;
   text-align: left;
   padding-left: 1rem;
@@ -68,3 +69,12 @@
   width: 300px;
 }
 
+// .popup {
+//   transition: opacity 0.3s ease, transform 0.3s ease;
+//   opacity: 0;
+//   transform: translateY(10px);
+// }
+// .popup.show {
+//   opacity: 1;
+//   transform: translateY(0);
+// }

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

@@ -11,55 +11,53 @@ function showPopup(content, x, y, isLeftHalf) {
     // Récupérer la position et les dimensions du conteneur SVG
     const rect = svgElement.getBoundingClientRect();
 
-    // 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;
 
+    // Variables pour stocker les positions calculées du popup
+    let popupX, popupY;
+
     // 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');
-        // Si le point est dans la moitié gauche, aligner le côté droit du popup avec le point
-        popupX = rect.left + x - popupWidth - 20; // Décalage à gauche
+        // Aligner le popup à gauche du cercle
+        popupX = rect.left + x - popupWidth - 20; // Ajuster ici si nécessaire
         popupContent.style.textAlign = 'right'; // Alignement du texte à droite
     } else {
         console.log('Le point est dans la moitié droite');
-        // Si le point est dans la moitié droite, afficher le popup à droite du point
-        popupX = rect.left + x + 100; // Décalage à droite
+        // Aligner le popup à droite du cercle
+        popupX = rect.left + x + 20;
         popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
     }
 
-    // Calculer la position Y (décalée légèrement en hauteur)
-    popupY = rect.top + y - 400; // Ajustement vertical avec un léger offset
+    // Calculer la position Y (centrée verticalement par rapport au cercle)
+    popupY = rect.top + y - popupHeight / 2;
 
-    // Empêcher le popup de dépasser les bords gauche et droite de l'écran
-    // const viewportWidth = window.innerWidth;
+    // 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 pour éviter de dépasser
-    // }
+    if (popupX + popupWidth > viewportWidth) {
+        popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
+    }
 
-    // Vérifier si le popup dépasse à gauche de l'écran
-    // if (popupX < 0) {
-    //     popupX = 10; // Ajustement à gauche pour ne pas dépasser
-    // }
+    // Vérifier si le popup dépasse à gauche
+    if (popupX < 10) {
+        popupX = 10; // Ajustement à gauche
+    }
 
-    // Empêcher le popup de dépasser en haut ou en bas
-    // const viewportHeight = window.innerHeight;
-
-    // Vérifier si le popup dépasse en bas de l'écran
-    // if (popupY + popupHeight > viewportHeight) {
-    //     popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
-    // }
+    // 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 < 0) {
-    //     popupY = 10; // Ajustement en haut pour ne pas dépasser
-    // }
+    if (popupY < 10) {
+        popupY = 10; // Ajustement en haut
+    }
 
     // Appliquer les positions calculées au popup
     popup.style.left = `${popupX}px`;
@@ -72,12 +70,12 @@ function showPopup(content, x, y, isLeftHalf) {
     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();
-        showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.top);
+        const rect = svgElement.getBoundingClientRect();
+        showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
     }
 });
 
@@ -109,15 +107,10 @@ svgElement.addEventListener('mouseover', function(event) {
         showPopup(content, circleX, circleY, isLeftHalf);
     }
 
-    const isCircle = event.target.tagName === 'circle';
-    console.log(isCircle);
-    
-    if (isCircle === true) {
-        // Change la couleur en rouge
+    // Gestion du changement de couleur sur le cercle
+    if (event.target.tagName === 'circle') {
         event.target.setAttribute('fill', 'red');
     }
-
-        // circle.style.fill = 'red';
 });
 
 // Fermer le popup lorsque la souris quitte le cercle
@@ -125,11 +118,9 @@ 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');
+    // Réinitialiser la couleur du cercle au survol de la souris
+    if (event.target.tagName === 'circle') {
+        event.target.setAttribute('fill', 'black'); // Remettre en noir
     }
 });

web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php

@@ -71,11 +71,11 @@ class SitesMap extends BlockBase {
         <path
           id="path84"
           d="m 0,$m v $l"
-          style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
+          style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
         <path
           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" />
+          style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
 
       </g>
       SVGSITEPATH;

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

@@ -3084,9 +3084,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   font-family: "gilroy-semibold";
   display: none;
   position: absolute;
-  left: 50%;
-  top: -20%;
-  transform: translate(-50%, -50%);
+  transition: opacity 0.3s ease, transform 0.3s ease;
   z-index: 1000;
   text-align: left;
   padding-left: 1rem;