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

css page site mobiel

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-11-05 21:45:42 +01:00
parent d516369a78
commit 52b22009fc
3 changed files with 68 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
// // Sélection des éléments principaux
// 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');
@ -6,20 +6,18 @@ const modalBackground = document.querySelector('#sites-map-container #modal-back
// 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 avec ID #lessites
// 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;
// Si on est sur la page #lessites ou une page avec la classe 'node-type-site', ne pas afficher le popup
if (isSitePage || isLessitesPage) 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
@ -28,13 +26,20 @@ function closePopup() {
modalBackground.style.display = 'none'; // Désactiver le fond modal
}
// Gérer le survol des cercles (au lieu du clic)
// Gérer le survol des cercles
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'); // Récupérer l'attribut data-id
const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
// Afficher le popup avec la position et l'alignement adaptés
showPopup(content);
// Ajouter une bordure rouge au .views-row correspondant
if (correspondingRow) {
correspondingRow.style.border = '2px solid red';
}
}
// Gestion du changement de couleur sur le cercle
@ -43,10 +48,18 @@ svgElement.addEventListener('mouseover', function(event) {
}
});
// Fermer le popup lorsque la souris quitte le cercle
// Fermer le popup et retirer la bordure rouge lorsque la souris quitte le cercle
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}"]`);
// Retirer la bordure rouge
if (correspondingRow) {
correspondingRow.style.border = 'none';
}
}
// Réinitialiser la couleur du cercle au survol de la souris
@ -55,7 +68,6 @@ svgElement.addEventListener('mouseout', function(event) {
}
});
// Mettre à jour la logique de calcul des positions
function recalculateSitePositions() {
const allSites = document.querySelectorAll('.site-link');
@ -94,9 +106,6 @@ svgElement.addEventListener('click', function(event) {
}
});
///////////////////// 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
@ -111,6 +120,3 @@ if (matchingGroup) {
circle.setAttribute('fill', 'red'); // Changer la couleur du cercle
}
}