104 lines
4.2 KiB
JavaScript
104 lines
4.2 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érifiez si la page contient la classe '.node-type-site'
|
|
const isSitePage = document.body.classList.contains('node-type-site');
|
|
const isLessitesPage = document.querySelector('#lessites') !== null;
|
|
|
|
// Fonction pour afficher le popup
|
|
function showPopup(content, x, y, isLeftHalf) {
|
|
if (isSitePage || isLessitesPage) return;
|
|
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
|
|
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}"]`);
|
|
showPopup(content);
|
|
if (correspondingRow) correspondingRow.style.border = '2px solid red';
|
|
}
|
|
if (event.target.tagName === 'circle') {
|
|
event.target.setAttribute('fill', 'red');
|
|
}
|
|
});
|
|
|
|
// Fermer le popup et retirer la bordure rouge lorsque la souris quitte le cercle
|
|
svgElement.addEventListener('mouseout', function(event) {
|
|
if (event.target.classList.contains('site-link')) {
|
|
closePopup();
|
|
const dataId = event.target.getAttribute('data-id');
|
|
const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
|
|
if (correspondingRow) correspondingRow.style.border = 'none';
|
|
}
|
|
if (event.target.tagName === 'circle') {
|
|
event.target.setAttribute('fill', 'black');
|
|
}
|
|
});
|
|
|
|
// Fonction pour recalculer les positions des sites
|
|
function recalculateSitePositions() {
|
|
const allSites = document.querySelectorAll('.site-link');
|
|
allSites.forEach((site) => {
|
|
const geofield = site.getAttribute('data-geofield');
|
|
const lon = parseFloat(geofield.split(',')[0]);
|
|
const lat = parseFloat(geofield.split(',')[1]);
|
|
const x = Math.round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
|
|
const y = Math.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 sur le SVG
|
|
svgElement.addEventListener('click', function(event) {
|
|
if (event.target.classList.contains('site-link')) {
|
|
const content = event.target.getAttribute('data-content');
|
|
handleCircleClick(content);
|
|
} else if (event.target.tagName === 'circle') {
|
|
const circleId = event.target.id; // Récupérer l'ID du cercle cliqué
|
|
|
|
if (circleId.startsWith('site-')) {
|
|
const pageId = circleId.split('-')[1]; // Extraire l'ID numérique du site
|
|
window.location.href = `sites/node/${pageId}`; // Rediriger vers la page correspondante
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// Mise en évidence du point rouge correspondant à la page courante
|
|
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');
|
|
}
|