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

position popup

This commit is contained in:
ouidade 2024-10-07 15:37:04 +02:00
parent 2835aecb23
commit fb72032d08
3 changed files with 10 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,14 +16,11 @@
/* Changer la couleur au survol (hover) */ /* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover{ #sites-map-container .site-link:hover{
cursor: pointer; cursor: pointer;
fill: #f7002b!important;
} }
// #sites-map-container circle:hover { #sites-map-container circle.circle {
// cursor: pointer; fill: #f7002b!important;
// fill: #f7002b!important; }
// }
/* Styles du popup (caché par défaut) */ /* Styles du popup (caché par défaut) */
#sites-map-container #popup { #sites-map-container #popup {

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

@ -23,21 +23,17 @@ function showPopup(content, x, y, isLeftHalf) {
if (isLeftHalf) { if (isLeftHalf) {
console.log('Le point est dans la moitié gauche'); 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 // Si le point est dans la moitié gauche, aligner le côté droit du popup avec le point
popupX = rect.left + x - popupWidth - 10; // Décalage à gauche popupX = rect.left + x - popupWidth - 20; // Décalage à gauche
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');
// Si le point est dans la moitié droite, afficher le popup à droite du point // Si le point est dans la moitié droite, afficher le popup à droite du point
popupX = rect.left + x + 10; // Décalage à droite popupX = rect.left + x + 100; // Décalage à droite
popupContent.style.textAlign = 'left'; // Alignement du texte à gauche popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
} }
// Centrer verticalement le popup par rapport au point // Calculer la position Y (décalée légèrement en hauteur)
popupY = rect.top + y - (popupHeight / 2); // Centrage vertical popupY = rect.top + y - 0; // Ajustement vertical avec un léger offset
// Ajustement pour éviter que le popup soit trop bas
// On peut ajouter un décalage supplémentaire vers le haut pour compenser
popupY -= 300; // Ajuster vers le haut si nécessaire
// Empêcher le popup de dépasser les bords gauche et droite de l'écran // Empêcher le popup de dépasser les bords gauche et droite de l'écran
const viewportWidth = window.innerWidth; const viewportWidth = window.innerWidth;
@ -77,10 +73,6 @@ function showPopup(content, x, y, isLeftHalf) {
} }
// Recalculer la position du popup lors du redimensionnement de la fenêtre // Recalculer la position du popup lors du redimensionnement de la fenêtre
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
if (popup.style.display === 'block') { if (popup.style.display === 'block') {

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

@ -3075,6 +3075,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
/* Changer la couleur au survol (hover) */ /* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover { #sites-map-container .site-link:hover {
cursor: pointer; cursor: pointer;
}
#sites-map-container circle.circle {
fill: #f7002b !important; fill: #f7002b !important;
} }