bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

divers css

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-11-07 23:26:33 +01:00
parent ea811fccb5
commit 69d8e216cf
5 changed files with 80 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
View File

@ -4,13 +4,13 @@ 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;
// Vérification de la page courante
const isHomePage = document.querySelector('#home') !== null;
const isLessitesPage = document.querySelector('main#lessites') !== null;
const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
// Fonction pour afficher le popup
function showPopup(content, x, y, isLeftHalf) {
if (isSitePage || isLessitesPage) return;
function showPopup(content) {
popupContent.innerHTML = content;
popup.style.display = 'block';
modalBackground.style.display = 'block';
@ -22,93 +22,72 @@ function closePopup() {
modalBackground.style.display = 'none';
}
// Gérer le survol des cercles
// Gérer le survol des cercles en fonction de la page
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';
// Interaction pour la page d'accueil
if (isHomePage) {
showPopup(content); // Affiche le popup
}
// Interaction pour la page #lessites
if (isLessitesPage && correspondingRow) {
correspondingRow.style.border = '2px solid red'; // Bordure rouge autour du .views-row correspondant
}
}
// Applique une couleur rouge au cercle au survol
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'red');
}
});
// Fermer le popup et retirer la bordure rouge lorsque la souris quitte le cercle
// Gérer la sortie de survol des cercles en fonction de la page
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';
// Ferme le popup pour la page d'accueil
if (isHomePage) {
closePopup();
}
// Supprime la bordure rouge autour du .views-row pour la page #lessites
if (isLessitesPage && correspondingRow) {
correspondingRow.style.border = 'none';
}
}
// Remet la couleur noire au cercle lorsqu'on quitte le survol
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
// Gérer les clics pour la page node-type-site
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');
}
// Écouter les événements de clic sur le SVG
svgElement.addEventListener('click', function(event) {
if (event.target.tagName === 'circle' && event.target.classList.contains('site-link')) {
const targetUrl = event.target.getAttribute('data-url'); // Récupérer l'URL de redirection
if (targetUrl) {
window.location.href = targetUrl; // Rediriger vers l'URL cible
if (isNodeTypeSitePage) {
if (event.target.classList.contains('site-link')) {
const targetUrl = event.target.getAttribute('data-url');
if (targetUrl) {
window.location.href = targetUrl; // Redirige vers le data-url correspondant
}
}
}
});
// Mise en évidence du cercle correspondant à la page courante pour node-type-site
if (isNodeTypeSitePage) {
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');
}
}