diff --git a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
index 36d1f40..9bee661 100644
--- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
+++ b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
@@ -29,9 +29,10 @@
font-family: 'gilroy-semibold';
display: none;
position: absolute;
- left: 50%;
- top: -20%;
- transform: translate(-50%, -50%);
+ // left: 50%;
+ // top: -20%;
+ // transform: translate(-50%, -50%);
+ transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 1000;
text-align: left;
padding-left: 1rem;
@@ -68,3 +69,12 @@
width: 300px;
}
+// .popup {
+// transition: opacity 0.3s ease, transform 0.3s ease;
+// opacity: 0;
+// transform: translateY(10px);
+// }
+// .popup.show {
+// opacity: 1;
+// transform: translateY(0);
+// }
\ No newline at end of file
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 4ed7271..9565c9f 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
@@ -11,55 +11,53 @@ function showPopup(content, x, y, isLeftHalf) {
// Récupérer la position et les dimensions du conteneur SVG
const rect = svgElement.getBoundingClientRect();
- // 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;
+ // Variables pour stocker les positions calculées du popup
+ let popupX, popupY;
+
// 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');
- // Si le point est dans la moitié gauche, aligner le côté droit du popup avec le point
- popupX = rect.left + x - popupWidth - 20; // Décalage à gauche
+ // Aligner le popup à gauche du cercle
+ popupX = rect.left + x - popupWidth - 20; // Ajuster ici si nécessaire
popupContent.style.textAlign = 'right'; // Alignement du texte à droite
} else {
console.log('Le point est dans la moitié droite');
- // Si le point est dans la moitié droite, afficher le popup à droite du point
- popupX = rect.left + x + 100; // Décalage à droite
+ // Aligner le popup à droite du cercle
+ popupX = rect.left + x + 20;
popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
}
- // Calculer la position Y (décalée légèrement en hauteur)
- popupY = rect.top + y - 400; // Ajustement vertical avec un léger offset
+ // Calculer la position Y (centrée verticalement par rapport au cercle)
+ popupY = rect.top + y - popupHeight / 2;
- // Empêcher le popup de dépasser les bords gauche et droite de l'écran
- // const viewportWidth = window.innerWidth;
+ // 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 pour éviter de dépasser
- // }
+ if (popupX + popupWidth > viewportWidth) {
+ popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
+ }
- // Vérifier si le popup dépasse à gauche de l'écran
- // if (popupX < 0) {
- // popupX = 10; // Ajustement à gauche pour ne pas dépasser
- // }
+ // Vérifier si le popup dépasse à gauche
+ if (popupX < 10) {
+ popupX = 10; // Ajustement à gauche
+ }
- // Empêcher le popup de dépasser en haut ou en bas
- // const viewportHeight = window.innerHeight;
-
- // Vérifier si le popup dépasse en bas de l'écran
- // if (popupY + popupHeight > viewportHeight) {
- // popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
- // }
+ // 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 < 0) {
- // popupY = 10; // Ajustement en haut pour ne pas dépasser
- // }
+ if (popupY < 10) {
+ popupY = 10; // Ajustement en haut
+ }
// Appliquer les positions calculées au popup
popup.style.left = `${popupX}px`;
@@ -72,12 +70,12 @@ function showPopup(content, x, y, isLeftHalf) {
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();
- showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.top);
+ const rect = svgElement.getBoundingClientRect();
+ showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
}
});
@@ -91,17 +89,17 @@ function closePopup() {
svgElement.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('site-link')) {
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;
@@ -109,15 +107,10 @@ svgElement.addEventListener('mouseover', function(event) {
showPopup(content, circleX, circleY, isLeftHalf);
}
- const isCircle = event.target.tagName === 'circle';
- console.log(isCircle);
-
- if (isCircle === true) {
- // Change la couleur en rouge
+ // Gestion du changement de couleur sur le cercle
+ if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'red');
}
-
- // circle.style.fill = 'red';
});
// Fermer le popup lorsque la souris quitte le cercle
@@ -125,11 +118,9 @@ svgElement.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('site-link')) {
closePopup();
}
- const isCircle = event.target.tagName === 'circle';
- console.log(isCircle);
-
- if (isCircle === true) {
- // Change la couleur en rouge
- event.target.setAttribute('fill', 'black');
+
+ // Réinitialiser la couleur du cercle au survol de la souris
+ if (event.target.tagName === 'circle') {
+ event.target.setAttribute('fill', 'black'); // Remettre en noir
}
});
diff --git a/web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php b/web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php
index 20ec4aa..394e34e 100644
--- a/web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php
+++ b/web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php
@@ -71,11 +71,11 @@ class SitesMap extends BlockBase {
+ style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
+ style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
SVGSITEPATH;
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 b2c1e51..637ce3f 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
@@ -3084,9 +3084,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
font-family: "gilroy-semibold";
display: none;
position: absolute;
- left: 50%;
- top: -20%;
- transform: translate(-50%, -50%);
+ transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 1000;
text-align: left;
padding-left: 1rem;