119 lines
4.5 KiB
JavaScript
119 lines
4.5 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, isLeftHalf) {
|
|
popupContent.innerHTML = content;
|
|
|
|
// Récupérer la position et les dimensions du conteneur SVG
|
|
const rect = svgElement.getBoundingClientRect();
|
|
|
|
// Variables pour stocker les positions calculées du popup
|
|
let popupX, popupY;
|
|
|
|
// Afficher temporairement le popup pour mesurer ses dimensions
|
|
popup.style.display = 'block';
|
|
const popupWidth = popup.offsetWidth;
|
|
const popupHeight = popup.offsetHeight;
|
|
|
|
// Vérifier si le point est dans la moitié gauche ou droite du SVG
|
|
if (isLeftHalf) {
|
|
console.log('Le point est dans la moitié gauche');
|
|
// Si le point est dans la moitié gauche, aligner le côté droit du popup avec le point
|
|
popupX = rect.left + x - popupWidth - 20; // Décalage à gauche
|
|
popupContent.style.textAlign = 'right'; // Alignement du texte à droite
|
|
} else {
|
|
console.log('Le point est dans la moitié droite');
|
|
// Si le point est dans la moitié droite, afficher le popup à droite du point
|
|
popupX = rect.left + x + 100; // Décalage à droite
|
|
popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
|
|
}
|
|
|
|
// Calculer la position Y (décalée légèrement en hauteur)
|
|
popupY = rect.top + y - 0; // Ajustement vertical avec un léger offset
|
|
|
|
// Empêcher le popup de dépasser les bords gauche et droite de l'écran
|
|
const viewportWidth = window.innerWidth;
|
|
|
|
// Vérifier si le popup dépasse à droite de l'écran
|
|
if (popupX + popupWidth > viewportWidth) {
|
|
popupX = viewportWidth - popupWidth - 10; // Ajustement à droite pour éviter de dépasser
|
|
}
|
|
|
|
// Vérifier si le popup dépasse à gauche de l'écran
|
|
if (popupX < 0) {
|
|
popupX = 10; // Ajustement à gauche pour ne pas dépasser
|
|
}
|
|
|
|
// Empêcher le popup de dépasser en haut ou en bas
|
|
const viewportHeight = window.innerHeight;
|
|
|
|
// Vérifier si le popup dépasse en bas de l'écran
|
|
if (popupY + popupHeight > viewportHeight) {
|
|
popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
|
|
}
|
|
|
|
// Vérifier si le popup dépasse en haut
|
|
if (popupY < 0) {
|
|
popupY = 10; // Ajustement en haut pour ne pas dépasser
|
|
}
|
|
|
|
// Appliquer les positions calculées au popup
|
|
popup.style.left = `${popupX}px`;
|
|
popup.style.top = `${popupY}px`;
|
|
|
|
// Afficher le popup et le fond de modal
|
|
popup.style.display = 'block';
|
|
modalBackground.style.display = 'block';
|
|
|
|
console.log(`Popup affiché à x: ${popupX}, y: ${popupY}`);
|
|
}
|
|
|
|
|
|
// 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
|
|
}
|
|
|
|
// 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');
|
|
|
|
// Récupérer la position et les dimensions du SVG
|
|
const rect = svgElement.getBoundingClientRect();
|
|
|
|
// Calculer la position relative du cercle
|
|
const circleX = event.clientX - rect.left;
|
|
const circleY = event.clientY - rect.top;
|
|
|
|
// Calculer la moitié du SVG
|
|
const svgHalfWidth = rect.width / 2;
|
|
|
|
// Déterminer si le cercle est sur la moitié gauche ou droite du SVG
|
|
const isLeftHalf = circleX < svgHalfWidth;
|
|
|
|
// Afficher le popup avec la position et l'alignement adaptés
|
|
showPopup(content, circleX, circleY, isLeftHalf);
|
|
}
|
|
});
|
|
|
|
// Fermer le popup lorsque la souris quitte le cercle
|
|
svgElement.addEventListener('mouseout', function(event) {
|
|
if (event.target.classList.contains('site-link')) {
|
|
closePopup();
|
|
}
|
|
});
|