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

carte points en rouge quand sur page site correspondant

This commit is contained in:
ouidade 2024-10-17 14:08:20 +02:00
parent 4de6c5623c
commit 6d5ca756b0
3 changed files with 77 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,95 +4,24 @@ const popup = document.querySelector('#sites-map-container #popup');
const popupContent = document.querySelector('#sites-map-container #popup-content'); const popupContent = document.querySelector('#sites-map-container #popup-content');
const modalBackground = document.querySelector('#sites-map-container #modal-background'); 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 // Fonction pour afficher le popup
function showPopup(content, x, y, isLeftHalf) { 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; 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 - 800; // 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 - popupWidth ;
// 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 // Afficher le popup et le fond de modal
popup.style.display = 'block'; popup.style.display = 'block';
modalBackground.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 // Fonction pour fermer le popup
function closePopup() { function closePopup() {
popup.style.display = 'none'; popup.style.display = 'none';
@ -104,19 +33,6 @@ svgElement.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('site-link')) { if (event.target.classList.contains('site-link')) {
const content = event.target.getAttribute('data-content'); 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 // Afficher le popup avec la position et l'alignement adaptés
showPopup(content); showPopup(content);
} }
@ -179,5 +95,22 @@ svgElement.addEventListener('click', function(event) {
}); });
///////////////////// page site point rouge ///////////////////////
// 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
}
}

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

123
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -202,7 +202,7 @@
}); });
//////// end header //////////// //////// end header ////////////
@ -444,88 +444,69 @@
}); });
///////////// carte sticky node site ///////////////////
// window.addEventListener('scroll', function() {
// const mapContainer = document.getElementById('sites-map-container');
// const header = document.querySelector('header'); // Sélectionnez votre header
// const headerHeight = header.offsetHeight; // Calculer la hauteur du header
// const scrollPosition = window.scrollY; // Obtenir la position actuelle du scroll
// console.log('Hauteur dynamique du header:', headerHeight);
// if (scrollPosition >= headerHeight - 350 ) {
// mapContainer.classList.add('fixed');
// mapContainer.style.position = 'fixed';
// mapContainer.style.top = headerHeight + 350 ; // Fixé en haut une fois passé le header
// } else {
// mapContainer.classList.remove('fixed');
// mapContainer.style.position = 'static'; // Retour à la position initiale
// }
// });
//////////////// lightbox galerie image page site//////////////////////// //////////////// lightbox galerie image page site////////////////////////
// Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo' // Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo'
// Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo' let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger'); let currentIndex;
let currentIndex;
// Créer le lightbox et ses éléments // Créer le lightbox et ses éléments
const lightbox = document.createElement('div'); const lightbox = document.createElement('div');
lightbox.id = 'lightbox'; lightbox.id = 'lightbox';
lightbox.classList.add('lightbox'); lightbox.classList.add('lightbox');
document.body.appendChild(lightbox); document.body.appendChild(lightbox);
const img = document.createElement('img'); const img = document.createElement('img');
lightbox.appendChild(img); lightbox.appendChild(img);
const closeBtn = document.createElement('span'); const closeBtn = document.createElement('span');
closeBtn.classList.add('close'); closeBtn.classList.add('close');
closeBtn.innerHTML = '&times;'; closeBtn.innerHTML = '&times;';
lightbox.appendChild(closeBtn); lightbox.appendChild(closeBtn);
const prevBtn = document.createElement('a'); const prevBtn = document.createElement('a');
prevBtn.classList.add('prev'); prevBtn.classList.add('prev');
prevBtn.innerHTML = '&#10094;'; prevBtn.innerHTML = '&#10094;';
lightbox.appendChild(prevBtn); lightbox.appendChild(prevBtn);
const nextBtn = document.createElement('a'); const nextBtn = document.createElement('a');
nextBtn.classList.add('next'); nextBtn.classList.add('next');
nextBtn.innerHTML = '&#10095;'; nextBtn.innerHTML = '&#10095;';
lightbox.appendChild(nextBtn); lightbox.appendChild(nextBtn);
// Ajouter un écouteur d'événement sur chaque image pour ouvrir le lightbox // Ajouter un écouteur d'événement sur chaque image pour ouvrir le lightbox
images.forEach((image, index) => { images.forEach((image, index) => {
image.addEventListener('click', () => { image.addEventListener('click', () => {
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
img.src = image.src; img.src = image.src;
currentIndex = index; currentIndex = index;
});
}); });
});
// Fermer le lightbox // Fermer le lightbox
closeBtn.addEventListener('click', () => { closeBtn.addEventListener('click', () => {
lightbox.style.display = 'none';
});
// Naviguer vers l'image précédente
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
img.src = images[currentIndex].src;
});
// Naviguer vers l'image suivante
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
img.src = images[currentIndex].src;
});
// Fermer le lightbox quand on clique en dehors de l'image
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.style.display = 'none'; lightbox.style.display = 'none';
} });
});
// Naviguer vers l'image précédente
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
img.src = images[currentIndex].src;
});
// Naviguer vers l'image suivante
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
img.src = images[currentIndex].src;
});
// Fermer le lightbox quand on clique en dehors de l'image
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.style.display = 'none';
}
});