70 lines
2.7 KiB
JavaScript
70 lines
2.7 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');
|
|
|
|
// Fonction pour afficher le popup
|
|
function showPopup(content, x, y) {
|
|
popupContent.innerHTML = content;
|
|
|
|
// Récupérer la position de l'élément SVG seulement une fois
|
|
const rect = svgElement.getBoundingClientRect();
|
|
|
|
// Calcul de la position du popup
|
|
let popupX = rect.left + x + 120;
|
|
let popupY = rect.top + y + 20;
|
|
|
|
// Dimensions de la fenêtre et du popup
|
|
const viewportWidth = window.innerWidth;
|
|
const viewportHeight = window.innerHeight;
|
|
const popupWidth = popup.offsetWidth;
|
|
const popupHeight = popup.offsetHeight;
|
|
|
|
// Ajuster les positions pour éviter les dépassements
|
|
popupX = Math.max(10, Math.min(popupX, viewportWidth - popupWidth - 10));
|
|
popupY = Math.max(10, Math.min(popupY, viewportHeight - popupHeight - 10));
|
|
|
|
// Affichage du popup et du fond modal
|
|
popup.style.left = `${popupX}px`;
|
|
popup.style.top = `${popupY}px`;
|
|
popup.style.display = 'block';
|
|
modalBackground.style.display = 'block';
|
|
}
|
|
|
|
// 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();
|
|
showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.top);
|
|
}
|
|
});
|
|
|
|
// Fonction pour fermer le popup
|
|
function closePopup() {
|
|
popup.style.display = 'none';
|
|
modalBackground.style.display = 'none'; // Désactiver le fond modal
|
|
}
|
|
|
|
// Délégation d'événement pour gérer les clics sur les cercles et paths
|
|
svgElement.addEventListener('click', function(event) {
|
|
// Gérer le clic sur les cercles associés aux points d'intérêt
|
|
if (event.target.classList.contains('site-link')) {
|
|
const content = event.target.getAttribute('data-content');
|
|
const rect = svgElement.getBoundingClientRect();
|
|
const circleX = event.clientX - rect.left;
|
|
const circleY = event.clientY - rect.top;
|
|
showPopup(content, circleX, circleY);
|
|
event.stopPropagation(); // Empêche la propagation de l'événement pour éviter une fermeture accidentelle
|
|
}
|
|
});
|
|
|
|
// Fermer le popup en cliquant à l'extérieur de celui-ci
|
|
document.addEventListener('click', function(event) {
|
|
if (popup.style.display === 'block' && !popup.contains(event.target)) {
|
|
closePopup();
|
|
}
|
|
});
|
|
|
|
|