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

poisiton popup

This commit is contained in:
ouidade 2024-10-08 14:00:26 +02:00
parent 681fb0398e
commit 237abad7e1
3 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
View File

@ -32,7 +32,6 @@
// left: 50%; // left: 50%;
// top: -20%; // top: -20%;
// transform: translate(-50%, -50%); // transform: translate(-50%, -50%);
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 1000; z-index: 1000;
text-align: left; text-align: left;
padding-left: 1rem; padding-left: 1rem;

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

@ -11,29 +11,43 @@ function showPopup(content, x, y, isLeftHalf) {
// Récupérer la position et les dimensions du conteneur SVG // Récupérer la position et les dimensions du conteneur SVG
const rect = svgElement.getBoundingClientRect(); 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 // Afficher temporairement le popup pour mesurer ses dimensions
popup.style.display = 'block'; popup.style.display = 'block';
const popupWidth = popup.offsetWidth; const popupWidth = popup.offsetWidth;
const popupHeight = popup.offsetHeight; 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 // Vérifier si le point est dans la moitié gauche ou droite du SVG
if (isLeftHalf) { if (isLeftHalf) {
console.log('Le point est dans la moitié gauche'); console.log('Le point est dans la moitié gauche');
// Aligner le popup à gauche du cercle // Aligner le popup à gauche du cercle
popupX = rect.left + x - popupWidth - 20; // Ajuster ici si nécessaire popupX = rect.left + x + scrollX - popupWidth - 200; // Ajuster ici si nécessaire
popupContent.style.textAlign = 'right'; // Alignement du texte à droite popupContent.style.textAlign = 'right'; // Alignement du texte à droite
} else { } else {
console.log('Le point est dans la moitié droite'); console.log('Le point est dans la moitié droite');
// Aligner le popup à droite du cercle // Aligner le popup à droite du cercle
popupX = rect.left + x + 20; popupX = rect.left + x + scrollX + 20;
popupContent.style.textAlign = 'left'; // Alignement du texte à gauche popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
} }
// Calculer la position Y (centrée verticalement par rapport au cercle) // Calculer la position Y avec un ajustement pour éviter qu'il soit trop bas
popupY = rect.top + y - popupHeight / 2; 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 // Empêcher le popup de dépasser les bords de l'écran
const viewportWidth = window.innerWidth; const viewportWidth = window.innerWidth;

1
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -3084,7 +3084,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
display: none; display: none;
position: absolute; position: absolute;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 1000; z-index: 1000;
text-align: left; text-align: left;
padding-left: 1rem; padding-left: 1rem;