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%;
// top: -20%;
// transform: translate(-50%, -50%);
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 1000;
text-align: left;
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
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
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');
// 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
} else {
console.log('Le point est dans la moitié droite');
// 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
}
// Calculer la position Y (centrée verticalement par rapport au cercle)
popupY = rect.top + y - popupHeight / 2;
// Calculer la position Y avec un ajustement pour éviter qu'il soit trop bas
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
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";
display: none;
position: absolute;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 1000;
text-align: left;
padding-left: 1rem;