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

// Vérifiez si la page contient la classe '.node-type-site'
const isSitePage = document.body.classList.contains('node-type-site');


// Fonction pour afficher le popup
function showPopup(content, x, y, isLeftHalf) {
    // Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
    if (isSitePage) return;

    popupContent.innerHTML = content;


    // Afficher le popup et le fond de modal
    popup.style.display = 'block';
    modalBackground.style.display = 'block';

}

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

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


///////////////////// page site point rouge   ///////////////////////

// Récupérer l'ID de la page depuis la classe du body
const body = document.querySelector('body');
const pageId = body.className.match(/node-id-(\d+)/)[1];  // Extraire l'ID de la page

// Sélectionner le groupe SVG qui a l'ID correspondant
const matchingGroup = document.querySelector(`#site-${pageId}`);

// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
if (matchingGroup) {
    const circle = matchingGroup.querySelector('circle');  // Sélectionner le cercle à l'intérieur du groupe
    if (circle) {
        circle.setAttribute('fill', 'red');  // Changer la couleur du cercle
    }
}