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

/lessites js

This commit is contained in:
ouidade 2024-11-08 01:12:49 +01:00
parent 68e19dfabf
commit 4879d1b4e7
1 changed files with 100 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,10 +5,24 @@ const popupContent = document.querySelector('#sites-map-container #popup-content
const modalBackground = document.querySelector('#sites-map-container #modal-background');
// Vérification de la page courante
const isHomePage = document.querySelector('#home') !== null;
const isLessitesPage = document.querySelector('main#lessites') !== null;
const isHomePage = document.querySelector('main#home') !== null;
const isLessitesPage = document.querySelector('div#lessites') !== null;
const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
// Identifier le cercle de la page courante pour node-type-site
let currentPageCircle = null;
if (isNodeTypeSitePage) {
const body = document.querySelector('body');
const pageIdMatch = body.className.match(/node-id-(\d+)/);
if (pageIdMatch) {
const pageId = pageIdMatch[1];
currentPageCircle = document.querySelector(`#site-${pageId} circle`);
if (currentPageCircle) {
currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle correspondant
}
}
}
// Fonction pour afficher le popup
function showPopup(content) {
popupContent.innerHTML = content;
@ -40,14 +54,19 @@ svgElement.addEventListener('mouseover', function(event) {
}
}
// Applique une couleur rouge au cercle au survol
if (event.target.tagName === 'circle') {
// Applique une couleur rouge au cercle au survol, sauf pour le cercle de la page courante
if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
event.target.setAttribute('fill', 'red');
}
});
// Gérer la sortie de survol des cercles en fonction de la page
// Gérer la sortie de survol des cercles en fonction de la page, avec exception pour le cercle de la page courante
svgElement.addEventListener('mouseout', function(event) {
// Ignorer le mouseout pour le cercle correspondant à la page courante dans node-type-site
if (event.target === currentPageCircle) {
return;
}
if (event.target.classList.contains('site-link')) {
const dataId = event.target.getAttribute('data-id');
const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
@ -63,13 +82,13 @@ svgElement.addEventListener('mouseout', function(event) {
}
}
// Remet la couleur noire au cercle lorsqu'on quitte le survol
if (event.target.tagName === 'circle') {
// Remet la couleur noire au cercle lorsqu'on quitte le survol, sauf pour le cercle de la page courante
if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
event.target.setAttribute('fill', 'black');
}
});
// Gérer les clics pour la page node-type-site
// Gérer les clics pour la page node-type-site uniquement
svgElement.addEventListener('click', function(event) {
if (isNodeTypeSitePage) {
if (event.target.classList.contains('site-link')) {
@ -81,13 +100,77 @@ svgElement.addEventListener('click', function(event) {
}
});
// 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');
}
// Fonction pour gérer l'agrandissement de views-row au survol des cercles
if (isLessitesPage) {
const circles = svgElement.querySelectorAll('circle.site-link');
circles.forEach(circle => {
// Récupérer l'URL du projet depuis le `data-url` du cercle
const projectUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
circle.addEventListener('mouseover', function() {
// Sélectionner le .views-row correspondant
const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
const rowLink = row.querySelector('a[href]');
return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
});
// Si un .views-row correspondant est trouvé, on augmente sa taille
if (correspondingRow) {
correspondingRow.style.transform = 'scale(1.2)';
correspondingRow.style.transition = 'transform 0.2s ease'; // Animation fluide
}
});
circle.addEventListener('mouseout', function() {
// Sélectionner le .views-row correspondant
const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
const rowLink = row.querySelector('a[href]');
return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
});
// Remettre la taille d'origine du .views-row
if (correspondingRow) {
correspondingRow.style.transform = 'scale(1)'; // Taille d'origine
}
});
});
// Gérer le survol des .views-row pour surligner le cercle correspondant
const viewsRows = document.querySelectorAll('.views-row');
viewsRows.forEach(row => {
// Récupère l'URL du projet dans le premier lien <a>
const link = row.querySelector('a[href]');
if (!link) return; // Passe si aucun lien n'est trouvé
const projectUrl = new URL(link.getAttribute('href'), window.location.origin).pathname;
row.addEventListener('mouseover', function() {
// Sélectionne le cercle qui a la même URL dans data-url
const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
return circleUrl === projectUrl;
});
// Si un cercle correspondant est trouvé, le mettre en rouge
if (correspondingCircle) {
correspondingCircle.setAttribute('fill', 'red'); // Surligne le cercle correspondant
}
});
row.addEventListener('mouseout', function() {
// Sélectionne le cercle qui a la même URL dans data-url
const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
return circleUrl === projectUrl;
});
// Remettre le cercle à sa couleur initiale
if (correspondingCircle && correspondingCircle !== currentPageCircle) {
correspondingCircle.setAttribute('fill', 'black'); // Remet le cercle à sa couleur initiale
}
});
});
}