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

smooth apparition carte

This commit is contained in:
ouidade 2024-11-07 09:20:04 +01:00
parent 8210db2c5c
commit 1ef82845c9
3 changed files with 38 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,16 +6,12 @@ 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
const isLessitesPage = document.querySelector('#lessites') !== null;
// Fonction pour afficher le popup
function showPopup(content, x, y, isLeftHalf) {
// 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';
}
@ -23,26 +19,18 @@ function showPopup(content, x, y, isLeftHalf) {
// Fonction pour fermer le popup
function closePopup() {
popup.style.display = 'none';
modalBackground.style.display = 'none'; // Désactiver le fond modal
modalBackground.style.display = 'none';
}
// 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 dataId = event.target.getAttribute('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';
if (correspondingRow) correspondingRow.style.border = '2px solid red';
}
}
// Gestion du changement de couleur sur le cercle
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'red');
}
@ -52,34 +40,24 @@ svgElement.addEventListener('mouseover', function(event) {
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';
if (correspondingRow) correspondingRow.style.border = 'none';
}
}
// Réinitialiser la couleur du cercle au survol de la souris
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'black'); // Remettre en noir
event.target.setAttribute('fill', 'black');
}
});
// Mettre à jour la logique de calcul des positions
// Fonction pour recalculer les positions des sites
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
allSites.forEach((site) => {
const geofield = site.getAttribute('data-geofield');
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);
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})`);
});
}
@ -98,25 +76,28 @@ 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
// Écouter les événements de clic sur le SVG
svgElement.addEventListener('click', function(event) {
if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
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
}
}
});
// Récupérer l'ID de la page depuis la classe du body
// Mise en évidence du point rouge correspondant à la page courante
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
}
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');
}

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

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

@ -232,6 +232,10 @@
chapeau : document.querySelectorAll('.field_body'),
paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),
mapHome : document.querySelectorAll('.field_field_map_block #block-sitesmapblock'),
mapSite : document.querySelectorAll('#sites-map-container'),
lienDoc : document.querySelectorAll('.field_field_documents'),
lienURL : document.querySelectorAll('.field_field_liens_site'),
}
const showUp = {
@ -254,6 +258,11 @@
ScrollReveal().reveal(nodes.chapeau, showUp);
ScrollReveal().reveal(nodes.paragraph, showUp);
ScrollReveal().reveal(nodes.enjeux, showUp);
ScrollReveal().reveal(nodes.mapHome, showUp);
ScrollReveal().reveal(nodes.mapSite, showUp);
ScrollReveal().reveal(nodes.lienDoc, showUp);
ScrollReveal().reveal(nodes.lienURL, showUp);
}