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

//       // Récupérer la position de défilement (scroll) de la page
//       const scrollX = window.scrollX;
//       const scrollY = window.scrollY;

//       // 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');
//     //     // Aligner le popup à gauche du cercle
//     //     popupX = rect.left + x  -scrollX - popupWidth - 800; // Ajuster ici si nécessaire
//     //     popupContent.style.textAlign = 'right'; // Alignement du texte à droite
//     // } else {
//     //     console.log('Le point est dans la moitié droite');
//     //     // Aligner le popup à droite du cercle
//         popupX = rect.left + x + scrollX - popupWidth ;
//         popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
//     // }

//     // // Calculer la position Y avec un ajustement pour éviter qu'il soit trop bas
//     const offsetY = - popupHeight - 10; // Ajuster la position vers le haut avec un décalage
//     popupY = rect.top  + offsetY; // Centrer verticalement, puis ajuster

//     // console.log('rect.top:', rect.top);
//     // console.log('y:', y);
//     // console.log('scrollY:', scrollY);
//     // console.log('popupHeight:', popupHeight);
//     // console.log('offsetY:', offsetY);


//     // // Empêcher le popup de dépasser les bords de l'écran
//     // const viewportWidth = window.innerWidth;
//     // const viewportHeight = window.innerHeight;

//     // // Vérifier si le popup dépasse à droite de l'écran
//     // if (popupX + popupWidth > viewportWidth) {
//     //     popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
//     // }

//     // // Vérifier si le popup dépasse à gauche
//     // if (popupX < 10) {
//     //     popupX = 10; // Ajustement à gauche
//     // }

//     // // Vérifier si le popup dépasse en bas
//     // if (popupY + popupHeight > viewportHeight) {
//     //     popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
//     // }

//     // // Vérifier si le popup dépasse en haut
//     // if (popupY < 10) {
//     //     popupY = 10; // Ajustement en haut
//     // }

//     // 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();
//         const rect = svgElement.getBoundingClientRect();
//         showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.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);
    }

    // Gestion du changement de couleur sur le cercle
    if (event.target.tagName === 'circle') {
        event.target.setAttribute('fill', 'red');
    }
});

// Fermer le popup lorsque la souris quitte le cercle
svgElement.addEventListener('mouseout', function(event) {
    if (event.target.classList.contains('site-link')) {
        closePopup();
    }

    // Réinitialiser la couleur du cercle au survol de la souris
    if (event.target.tagName === 'circle') {
        event.target.setAttribute('fill', 'black'); // Remettre en noir
    }
});


// Mettre à jour la logique de calcul des positions
function recalculateSitePositions() {
    const allSites = document.querySelectorAll('.site-link');

    allSites.forEach((site, index) => {
        const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
        const lon = parseFloat(geofield.split(',')[0]);
        const lat = parseFloat(geofield.split(',')[1]);

        const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
        const y = round((latTop - lat) / (latTop - latBottom) * vp_h);

        site.setAttribute('transform', `translate(${x}, ${y})`);
    });
}

window.addEventListener('resize', function() {
    recalculateSitePositions();
    if (popup.style.display === 'block') {
        const currentPopupRect = popup.getBoundingClientRect();
        const rect = svgElement.getBoundingClientRect();
        showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
    }
});

// Gérer le clic ou le toucher des cercles
function handleCircleClick(content) {
    showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
}

// Écouter les événements de clic et de toucher sur le SVG
svgElement.addEventListener('click', function(event) {
    if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
        const content = event.target.getAttribute('data-content');
        handleCircleClick(content);
    }
});