drupal-quartiersdedemain/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js

167 lines
6.0 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();
// Récupérer la position de défilement (scroll) de la page
const scrollX = window.scrollX;
const scrollY = window.scrollY;
// 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');
// Aligner le popup à gauche du cercle
popupX = rect.left + x + scrollX - popupWidth - 200; // Ajuster ici si nécessaire
popupContent.style.textAlign = 'right'; // Alignement du texte à droite
} else {
console.log('Le point est dans la moitié droite');
// Aligner le popup à droite du cercle
popupX = rect.left + x + scrollX + 20;
popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
}
// Calculer la position Y avec un ajustement pour éviter qu'il soit trop bas
const offsetY = - popupHeight - 10; // Ajuster la position vers le haut avec un décalage
popupY = rect.top + offsetY; // Centrer verticalement, puis ajuster
console.log('rect.top:', rect.top);
console.log('y:', y);
console.log('scrollY:', scrollY);
console.log('popupHeight:', popupHeight);
console.log('offsetY:', offsetY);
// Empêcher le popup de dépasser les bords de l'écran
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Vérifier si le popup dépasse à droite de l'écran
if (popupX + popupWidth > viewportWidth) {
popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
}
// Vérifier si le popup dépasse à gauche
if (popupX < 10) {
popupX = 10; // Ajustement à gauche
}
// Vérifier si le popup dépasse en bas
if (popupY + popupHeight > viewportHeight) {
popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
}
// Vérifier si le popup dépasse en haut
if (popupY < 10) {
popupY = 10; // Ajustement en haut
}
// 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();
const rect = svgElement.getBoundingClientRect();
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.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);
}
// Gestion du changement de couleur sur le cercle
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'red');
}
});
// Fermer le popup lorsque la souris quitte le cercle
svgElement.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('site-link')) {
closePopup();
}
// Réinitialiser la couleur du cercle au survol de la souris
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'black'); // Remettre en noir
}
});
// Mettre à jour la logique de calcul des positions
function recalculateSitePositions() {
const allSites = document.querySelectorAll('.site-link');
allSites.forEach((site, index) => {
const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
const lon = parseFloat(geofield.split(',')[0]);
const lat = parseFloat(geofield.split(',')[1]);
const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
const y = 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);
}
});