diff --git a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
index 2ecdc8d..d7a0cb0 100644
--- a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
+++ b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
@@ -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');
+ }
+}
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
index b8a41d2..5aa3932 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -3019,10 +3019,6 @@ body {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) h2, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .visually-hidden, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field--label-above, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) span:not(.file) {
display: none;
}
-.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site {
- background: black;
- padding-left: 0.5rem;
-}
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site {
max-width: 50%;
@@ -3033,6 +3029,8 @@ body {
display: inline-flex;
align-items: center;
color: white;
+ background: black;
+ padding-left: 0.5rem;
text-transform: uppercase;
font-size: 0.6rem;
}
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png
new file mode 100644
index 0000000..e6e842e
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/noun-arrow-to-right.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/noun-arrow-to-right.svg
index 05d69b4..3084e74 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/img/noun-arrow-to-right.svg
+++ b/web/themes/custom/quartiers_de_demain/src/assets/img/noun-arrow-to-right.svg
@@ -2,8 +2,8 @@