position popup

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

@@ -16,11 +16,14 @@
 /* Changer la couleur au survol (hover) */
 #sites-map-container .site-link:hover{
   cursor: pointer;
+  fill: #f7002b!important;
+
 }
 
-#sites-map-container .site-link:hover circle.circle {
-  fill: #f7002b!important;
-}
+// #sites-map-container circle:hover {
+//   cursor: pointer;
+//   fill: #f7002b!important;
+// }
 
 /* Styles du popup (caché par défaut) */
 #sites-map-container #popup {
@@ -31,8 +34,12 @@
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 1000;
+  text-align: left;
+  padding-left: 1rem;
+
 }
 
+
 #sites-map-container strong{
   color: #f7002b;
   font-family: 'gilroy-semibold';
@@ -61,3 +68,4 @@
 #popup-content{
   width: 300px;
 }
+

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

@@ -5,33 +5,82 @@ const popupContent = document.querySelector('#sites-map-container #popup-content
 const modalBackground = document.querySelector('#sites-map-container #modal-background');
 
 // Fonction pour afficher le popup
-function showPopup(content, x, y) {
+function showPopup(content, x, y, isLeftHalf) {
     popupContent.innerHTML = content;
 
-    // Récupérer la position de l'élément SVG seulement une fois
+    // Récupérer la position et les dimensions du conteneur SVG
     const rect = svgElement.getBoundingClientRect();
-    
-    // Calcul de la position du popup
-    let popupX = rect.left + x + 100;
-    let popupY = rect.top + y + -300;
 
-    // Dimensions de la fenêtre et du popup
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
+    // 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;
 
-    // Ajuster les positions pour éviter les dépassements
-    popupX = Math.max(10, Math.min(popupX, viewportWidth - popupWidth - 10));
-    popupY = Math.max(10, Math.min(popupY, viewportHeight - popupHeight - 10));
+    // 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 - 10; // Décalage à gauche
+        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 + 10; // Décalage à droite
+        popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
+    }
 
-    // Affichage du popup et du fond modal
+    // Centrer verticalement le popup par rapport au point
+    popupY = rect.top + y - (popupHeight / 2); // Centrage vertical
+
+    // Ajustement pour éviter que le popup soit trop bas
+    // On peut ajouter un décalage supplémentaire vers le haut pour compenser
+    popupY -= 10; // Ajuster vers le haut si nécessaire
+
+    // Empêcher le popup de dépasser les bords gauche et droite de l'écran
+    const viewportWidth = window.innerWidth;
+
+    // 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
+    }
+
+    // Vérifier si le popup dépasse à gauche de l'écran
+    if (popupX < 0) {
+        popupX = 10; // Ajustement à gauche pour ne pas dépasser
+    }
+
+    // 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 haut
+    if (popupY < 0) {
+        popupY = 10; // Ajustement en haut pour ne pas dépasser
+    }
+
+    // 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') {
@@ -46,24 +95,32 @@ function closePopup() {
     modalBackground.style.display = 'none'; // Désactiver le fond modal
 }
 
-// Délégation d'événement pour gérer les clics sur les cercles et paths
-svgElement.addEventListener('click', function(event) {
-    // Gérer le clic sur les cercles associés aux points d'intérêt
+// Gérer le survol des cercles (au lieu du clic)
+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;
-        showPopup(content, circleX, circleY);
-        event.stopPropagation(); // Empêche la propagation de l'événement pour éviter une fermeture accidentelle
+
+        // 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, circleX, circleY, isLeftHalf);
     }
 });
 
-// Fermer le popup en cliquant à l'extérieur de celui-ci
-document.addEventListener('click', function(event) {
-    if (popup.style.display === 'block' && !popup.contains(event.target)) {
+// Fermer le popup lorsque la souris quitte le cercle
+svgElement.addEventListener('mouseout', function(event) {
+    if (event.target.classList.contains('site-link')) {
         closePopup();
     }
 });
-
-

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

@@ -57,7 +57,7 @@ class SitesMap extends BlockBase {
 
       $r = 10;
       $m = -$r+4;
-      $l = $r*2-8;
+      $l = $r*2-7;
       $sites_paths .= <<<SVGSITEPATH
       <g 
         id="site-$index"

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

@@ -3055,4 +3055,68 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .next-site::before {
   content: url("../img/next.svg");
+}
+
+@font-face {
+  font-family: "gilroy-semibold";
+  src: url("fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff");
+}
+#sites-map-container {
+  background-color: #cecfcc;
+  text-align: center;
+  position: relative;
+}
+
+/* #sites-map-container .circle {
+  fill: black;
+  stroke: white;
+  stroke-width: 0.7;
+} */
+/* Changer la couleur au survol (hover) */
+#sites-map-container .site-link:hover {
+  cursor: pointer;
+  fill: #f7002b !important;
+}
+
+/* Styles du popup (caché par défaut) */
+#sites-map-container #popup {
+  font-family: "gilroy-semibold";
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  text-align: left;
+  padding-left: 1rem;
+}
+
+#sites-map-container strong {
+  color: #f7002b;
+  font-family: "gilroy-semibold";
+}
+
+#sites-map-container a {
+  display: none;
+  /* display: inline-flex; */
+  align-items: center;
+  color: white;
+  background: black;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  padding-left: 0.5rem;
+  text-decoration: none;
+  margin-top: 0.7rem;
+  height: 1.3rem;
+}
+
+#sites-map-container a:after {
+  display: inline-flex;
+  content: url("../img/noun-arrow-to-right.svg");
+  padding-right: 0.2rem;
+  padding-left: 0.2rem;
+}
+
+#popup-content {
+  width: 300px;
 }

web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss

@@ -47,3 +47,5 @@
 @import "pages/actualite";
 @import "pages/node-type-site";
 
+
+@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss";