custom dynamic sites svg map

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

@@ -0,0 +1,57 @@
+@font-face {
+  font-family: 'gilroy-semibold';
+  src: url('fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
+}
+#sites-map-container {
+  background-color: #c3cef2;
+  text-align: center;
+}
+/* #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;
+}
+
+#sites-map-container .site-link:hover circle.circle {
+  fill: #f7002b!important;
+}
+
+/* Styles du popup (caché par défaut) */
+#sites-map-container #popup {
+  font-family: 'gilroy-semibold';
+  display: none;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+}
+
+#sites-map-container strong{
+  color: #f7002b;
+  font-family: 'gilroy-semibold';
+}
+#sites-map-container a{
+  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;
+        
+}

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

@@ -0,0 +1,91 @@
+// Sélection des éléments au préalable pour éviter de les rechercher plusieurs fois
+const svgElement = document.querySelector('#sites-map-container svg');
+const popup = document.querySelector('#sites-map-container #popup');
+const popupContent = document.querySelector('#sites-map-container #popup-content');
+const modalBackground = document.querySelector('#sites-map-container #modal-background');
+console.log('svgElement', svgElement);
+
+// Fonction pour afficher le popup
+function showPopup(content, x, y) {
+    console.log('showPopup', content, x, y);
+    
+    popupContent.innerHTML = content;
+
+    // Récupérer la position de l'élément SVG seulement une fois
+    const rect = svgElement.getBoundingClientRect();
+
+    // Calculer la position du popup par rapport à l'élément SVG
+    const popupX = rect.left + x + 120; // Décalage de 120px à droite
+    const popupY = rect.top + y + 20;  // Décalage de 20px en dessous
+
+    // Dimensions de la fenêtre et du popup
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const popupWidth = popup.offsetWidth;
+    const popupHeight = popup.offsetHeight;
+
+    // Vérification des bordures droite et gauche
+    if (popupX + popupWidth > viewportWidth) {
+        popupX = viewportWidth - popupWidth - 10; // Ajuster pour qu'il ne dépasse pas à droite
+    }
+    if (popupX < 0) {
+        popupX = 10; // S'assurer que le popup ne dépasse pas à gauche
+    }
+
+    // Vérification des bordures inférieure et supérieure
+    if (popupY + popupHeight > viewportHeight) {
+        popupY = viewportHeight - popupHeight - 10; // Ajuster pour qu'il ne dépasse pas en bas
+    }
+    if (popupY < 0) {
+        popupY = 10; // S'assurer que le popup ne dépasse pas en haut
+    }
+
+    popup.style.left = `${popupX}px`;
+    popup.style.top = `${popupY}px`;
+    popup.style.display = 'block';
+    modalBackground.style.display = 'block'; // Activer le fond modal si nécessaire
+}
+
+// Recalculer la position du popup lors du redimensionnement de la fenêtre
+window.addEventListener('resize', function() {
+    if (popup.style.display === 'block') {
+        // Recalculer les coordonnées et ajuster la position
+        const currentPopupRect = popup.getBoundingClientRect();
+        showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.top);
+    }
+});
+
+// Fonction pour fermer le popup
+function closePopup() {
+    popup.style.display = 'none';
+    modalBackground.style.display = 'none'; // Désactiver le fond modal
+}
+
+// Ajout d'un écouteur d'événement sur l'élément SVG pour tous les cercles
+svgElement.addEventListener('click', function(event) {
+    console.log('svgElement click', event.target);
+    
+    if (event.target.classList.contains('site-link')) {
+        // Récupérer le contenu personnalisé de l'attribut data-content
+        const content = event.target.getAttribute('data-content');
+
+        // Récupérer la position du cercle cliqué par rapport à l'élément SVG
+        const rect = svgElement.getBoundingClientRect();
+        const circleX = event.clientX - rect.left;
+        const circleY = event.clientY - rect.top;
+
+        // Afficher le popup avec le contenu spécifique
+        showPopup(content, circleX, circleY);
+
+        // Empêcher la propagation de l'événement pour éviter la fermeture immédiate
+        event.stopPropagation();
+    }
+});
+
+// Ferme le popup quand on clique n'importe où sur la page, sauf sur le popup
+document.addEventListener('click', function(event) {
+    // Vérifier si le clic s'est produit en dehors du popup
+    if (popup.style.display === 'block' && !popup.contains(event.target)) {
+        closePopup();
+    }
+});