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

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