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érification de la page courante
const isHomePage = document.querySelector('main#home') !== null;
const isLessitesPage = document.querySelector('div#lessites') !== null;
const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
const isCandidaturePage = document.querySelector('main#pour_candidater') !== null;

// Identifier le cercle de la page courante pour node-type-site
let currentPageCircle = null;
let lastHoveredCircle = null; // Variable pour conserver le dernier cercle survolé

if (isNodeTypeSitePage) {
    const body = document.querySelector('body');
    const pageIdMatch = body.className.match(/node-id-(\d+)/);
    if (pageIdMatch) {
        const pageId = pageIdMatch[1];
        currentPageCircle = document.querySelector(`#site-${pageId} circle`);
        if (currentPageCircle) {
            currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle correspondant
        }
    }
}


// Fonction pour afficher le popup
function showPopup(content) {
    popupContent.innerHTML = content;
    popup.style.display = 'block';
    modalBackground.style.display = 'block';
}

// Fonction pour fermer le popup
function closePopup() {
    popup.style.display = 'none';
    modalBackground.style.display = 'none';
}

// Gérer le survol des cercles en fonction de la page
svgElement.addEventListener('mouseover', function(event) {
    if (event.target.classList.contains('site-link')) {
        const content = event.target.getAttribute('data-content');
        const dataId = event.target.getAttribute('data-id');
        const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);

        // Interaction pour la page d'accueil
        if (isHomePage) {
            showPopup(content);  // Affiche le popup
            if (lastHoveredCircle && lastHoveredCircle !== event.target) {
                lastHoveredCircle.setAttribute('fill', 'black'); // Remettre le dernier cercle survolé en noir
            }
            event.target.setAttribute('fill', 'red'); // Met le cercle en rouge
            lastHoveredCircle = event.target; // Mettre à jour le cercle survolé
        
        }
            // Interaction pour la page de candidature
            if (isCandidaturePage) {
            showPopup(content);  // Affiche le popup
            if (lastHoveredCircle && lastHoveredCircle !== event.target) {
                lastHoveredCircle.setAttribute('fill', 'black'); // Remettre le dernier cercle survolé en noir
            }
            event.target.setAttribute('fill', 'red'); // Met le cercle en rouge
            lastHoveredCircle = event.target; // Mettre à jour le cercle survolé
        }

        // Interaction pour la page #lessites
        if (isLessitesPage && correspondingRow) {
            correspondingRow.style.border = '2px solid red';  // Bordure rouge autour du .views-row correspondant
        }
    }

    // Applique une couleur rouge au cercle au survol, sauf pour le cercle de la page courante
    if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
        event.target.setAttribute('fill', 'red');
    }
});

// Gérer la sortie de survol des cercles en fonction de la page, avec exception pour le cercle de la page courante
svgElement.addEventListener('mouseout', function(event) {
    // Ignorer le mouseout pour le cercle correspondant à la page courante dans node-type-site
    if (event.target === currentPageCircle) {
        return;
    }

    if (event.target.classList.contains('site-link')) {
        const dataId = event.target.getAttribute('data-id');
        const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);

        // Ferme le popup pour la page d'accueil
        if (isHomePage || isCandidaturePage) {
            // closePopup();
            return;
        }

        // Supprime la bordure rouge autour du .views-row pour la page #lessites
        if (isLessitesPage && correspondingRow) {
            correspondingRow.style.border = 'none';
        }
    }

    // Remet la couleur noire au cercle lorsqu'on quitte le survol, sauf pour le cercle de la page courante
    if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
        event.target.setAttribute('fill', 'black');
    }
});


// Gérer les clics pour la page node-type-site uniquement
svgElement.addEventListener('click', function(event) {
    if (isNodeTypeSitePage) {
        if (event.target.classList.contains('site-link')) {
            const targetUrl = event.target.getAttribute('data-url');
            if (targetUrl) {
                window.location.href = targetUrl;  // Redirige vers le data-url correspondant
            }
        }
    }
});

// Fonction pour gérer l'agrandissement de views-row au survol des cercles
if (isLessitesPage) {
    const circles = svgElement.querySelectorAll('circle.site-link');
    
    circles.forEach(circle => {
        // Récupérer l'URL du projet depuis le `data-url` du cercle
        const projectUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;

        circle.addEventListener('mouseover', function() {
            // Sélectionner le .views-row correspondant
            const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
                const rowLink = row.querySelector('a[href]');
                return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
            });

            // Si un .views-row correspondant est trouvé, on augmente sa taille
            if (correspondingRow) {
                correspondingRow.style.transform = 'scale(1.05)';
                correspondingRow.style.transition = 'transform 0.2s ease'; // Animation fluide
            }
        });

        circle.addEventListener('mouseout', function() {
            // Sélectionner le .views-row correspondant
            const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
                const rowLink = row.querySelector('a[href]');
                return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
            });

            // Remettre la taille d'origine du .views-row
            if (correspondingRow) {
                correspondingRow.style.transform = 'scale(1)'; // Taille d'origine
            }
        });
    });

    // Gérer le survol des .views-row pour surligner le cercle correspondant
    const viewsRows = document.querySelectorAll('.views-row');

    viewsRows.forEach(row => {
        // Récupère l'URL du projet dans le premier lien <a>
        const link = row.querySelector('a[href]');
        if (!link) return; // Passe si aucun lien n'est trouvé
        const projectUrl = new URL(link.getAttribute('href'), window.location.origin).pathname;

        row.addEventListener('mouseover', function() {
            // Sélectionne le cercle qui a la même URL dans data-url
            const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
                const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
                return circleUrl === projectUrl;
            });

            // Si un cercle correspondant est trouvé, le mettre en rouge
            if (correspondingCircle) {
                correspondingCircle.setAttribute('fill', 'red');  // Surligne le cercle correspondant
            }
        });

        row.addEventListener('mouseout', function() {
            // Sélectionne le cercle qui a la même URL dans data-url
            const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
                const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
                return circleUrl === projectUrl;
            });

            // Remettre le cercle à sa couleur initiale
            if (correspondingCircle && correspondingCircle !== currentPageCircle) {
                correspondingCircle.setAttribute('fill', 'black');  // Remet le cercle à sa couleur initiale
            }
        });
    });

    
}