From 681fb0398ea3768e42ebf51f5949ebb764631ad9 Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 8 Oct 2024 13:12:55 +0200 Subject: [PATCH] =?UTF-8?q?pointer=20events=20croix,=20facilit=C3=A9=20mou?= =?UTF-8?q?seover?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/css/carte-interactive-qdd.scss | 16 +++- .../assets/js/carte-interactive-qdd.js | 83 +++++++++---------- .../q2d_mod/src/Plugin/Block/SitesMap.php | 4 +- .../dist/assets/css/bundle.css | 4 +- 4 files changed, 53 insertions(+), 54 deletions(-) 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;