custom dynamic sites svg map

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();
+    }
+});