94 lines
3.4 KiB
JavaScript
94 lines
3.4 KiB
JavaScript
// 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('#home') !== null;
|
|
const isLessitesPage = document.querySelector('main#lessites') !== null;
|
|
const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
|
|
|
|
// 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
|
|
}
|
|
|
|
// 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
|
|
if (event.target.tagName === 'circle') {
|
|
event.target.setAttribute('fill', 'red');
|
|
}
|
|
});
|
|
|
|
// Gérer la sortie de survol des cercles en fonction de la page
|
|
svgElement.addEventListener('mouseout', function(event) {
|
|
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) {
|
|
closePopup();
|
|
}
|
|
|
|
// 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
|
|
if (event.target.tagName === 'circle') {
|
|
event.target.setAttribute('fill', 'black');
|
|
}
|
|
});
|
|
|
|
// Gérer les clics pour la page node-type-site
|
|
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
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Mise en évidence du cercle correspondant à la page courante pour node-type-site
|
|
if (isNodeTypeSitePage) {
|
|
const body = document.querySelector('body');
|
|
const pageIdMatch = body.className.match(/node-id-(\d+)/);
|
|
if (pageIdMatch) {
|
|
const pageId = pageIdMatch[1];
|
|
const matchingCircle = document.querySelector(`#site-${pageId} circle`);
|
|
if (matchingCircle) matchingCircle.setAttribute('fill', 'red');
|
|
}
|
|
}
|