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

// Sélection des éléments principaux
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');

// Fonction pour afficher le popup
function showPopup(content, x, y, isLeftHalf) {
    popupContent.innerHTML = content;

    // 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;

    // 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
        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
        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

    // 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') {
        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
}

// 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;

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

    const isCircle = event.target.tagName === 'circle';
    console.log(isCircle);
    
    if (isCircle === true) {
        // Change la couleur en rouge
        event.target.setAttribute('fill', 'red');
    }

        // circle.style.fill = 'red';
});

// Fermer le popup lorsque la souris quitte le cercle
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');
    }
});