117 lines
4.1 KiB
JavaScript
117 lines
4.1 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');
|
|
|
|
|
|
// Fonction pour afficher le popup
|
|
function showPopup(content, x, y, isLeftHalf) {
|
|
// Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
|
|
if (isSitePage) return;
|
|
|
|
popupContent.innerHTML = content;
|
|
|
|
|
|
// Afficher le popup et le fond de modal
|
|
popup.style.display = 'block';
|
|
modalBackground.style.display = 'block';
|
|
|
|
}
|
|
|
|
// 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');
|
|
|
|
// Afficher le popup avec la position et l'alignement adaptés
|
|
showPopup(content);
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
});
|
|
|
|
// 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 et de toucher sur le SVG
|
|
svgElement.addEventListener('click', function(event) {
|
|
if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
|
|
const content = event.target.getAttribute('data-content');
|
|
handleCircleClick(content);
|
|
}
|
|
});
|
|
|
|
|
|
///////////////////// page site point rouge quand sur page ///////////////////////
|
|
|
|
// Récupérer l'ID de la page depuis la classe du body
|
|
const body = document.querySelector('body');
|
|
const pageId = body.className.match(/node-id-(\d+)/)[1]; // Extraire l'ID de la page
|
|
|
|
// Sélectionner le groupe SVG qui a l'ID correspondant
|
|
const matchingGroup = document.querySelector(`#site-${pageId}`);
|
|
|
|
// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
|
|
if (matchingGroup) {
|
|
const circle = matchingGroup.querySelector('circle'); // Sélectionner le cercle à l'intérieur du groupe
|
|
if (circle) {
|
|
circle.setAttribute('fill', 'red'); // Changer la couleur du cercle
|
|
}
|
|
}
|
|
|
|
|
|
|