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

mobile position popup

This commit is contained in:
ouidade 2024-10-08 21:10:45 +02:00
parent 3fc1580186
commit caa62e7692
3 changed files with 99 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,9 @@
max-width: 800px; /* Optionnel : Limiter la largeur maximale */ max-width: 800px; /* Optionnel : Limiter la largeur maximale */
margin: 0 auto; /* Centrer le conteneur */ margin: 0 auto; /* Centrer le conteneur */
height: auto; /* Permet à la hauteur de s'ajuster automatiquement */ height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
@media (max-width: 810px) {
height: 550px;
}
} }
@ -21,13 +24,16 @@
/* Styles du popup (caché par défaut) */ /* Styles du popup (caché par défaut) */
#sites-map-container #popup { #sites-map-container #popup {
font-family: 'gilroy-semibold'; font-family: 'gilroy-regular';
display: none; display: none;
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
text-align: left; text-align: left;
padding-left: 1rem; padding-left: 1rem;
pointer-events: none; pointer-events: none;
@media (max-width: 810px) {
bottom: 20px;
}
} }
@ -62,9 +68,10 @@
font-size: 0.7rem; font-size: 0.7rem;
} }
@media (max-width : 810px) { @media (max-width : 810px) {
width: 250px; width: 300px;
background-color: white; background-color: white;
border-radius: 5px; border-radius: 5px;
padding: 0.5rem; padding: 0.5rem;
padding-left: 1rem;
} }
} }

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

@ -1,4 +1,4 @@
// Sélection des éléments principaux // // Sélection des éléments principaux
const svgElement = document.querySelector('#sites-map-container svg'); const svgElement = document.querySelector('#sites-map-container svg');
const popup = document.querySelector('#sites-map-container #popup'); const popup = document.querySelector('#sites-map-container #popup');
const popupContent = document.querySelector('#sites-map-container #popup-content'); const popupContent = document.querySelector('#sites-map-container #popup-content');
@ -8,90 +8,90 @@ const modalBackground = document.querySelector('#sites-map-container #modal-back
function showPopup(content, x, y, isLeftHalf) { function showPopup(content, x, y, isLeftHalf) {
popupContent.innerHTML = content; popupContent.innerHTML = content;
// 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 // // Récupérer la position de défilement (scroll) de la page
const scrollX = window.scrollX; // const scrollX = window.scrollX;
const scrollY = window.scrollY; // const scrollY = window.scrollY;
// Variables pour stocker les positions calculées du popup // // Variables pour stocker les positions calculées du popup
let popupX, popupY; // 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;
// 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 -scrollX - popupWidth - 800; // Ajuster ici si nécessaire // // popupX = rect.left + x -scrollX - popupWidth - 800; // 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 + scrollX - popupWidth - 20; // popupX = rect.left + x + scrollX - popupWidth ;
popupContent.style.textAlign = 'left'; // Alignement du texte à gauche // popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
} // // }
// Calculer la position Y avec un ajustement pour éviter qu'il soit trop bas // // // 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 // const offsetY = - popupHeight - 10; // Ajuster la position vers le haut avec un décalage
popupY = rect.top + offsetY; // Centrer verticalement, puis ajuster // popupY = rect.top + offsetY; // Centrer verticalement, puis ajuster
console.log('rect.top:', rect.top); // // console.log('rect.top:', rect.top);
console.log('y:', y); // // console.log('y:', y);
console.log('scrollY:', scrollY); // // console.log('scrollY:', scrollY);
console.log('popupHeight:', popupHeight); // // console.log('popupHeight:', popupHeight);
console.log('offsetY:', offsetY); // // 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;
const viewportHeight = window.innerHeight; // // const viewportHeight = window.innerHeight;
// Vérifier si le popup dépasse à droite de l'écran // // // Vérifier si le popup dépasse à droite de l'écran
if (popupX + popupWidth > viewportWidth) { // // if (popupX + popupWidth > viewportWidth) {
popupX = viewportWidth - popupWidth - 10; // Ajustement à droite // // popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
} // // }
// Vérifier si le popup dépasse à gauche // // // Vérifier si le popup dépasse à gauche
if (popupX < 10) { // // if (popupX < 10) {
popupX = 10; // Ajustement à gauche // // popupX = 10; // Ajustement à gauche
} // // }
// Vérifier si le popup dépasse en bas // // // Vérifier si le popup dépasse en bas
if (popupY + popupHeight > viewportHeight) { // // if (popupY + popupHeight > viewportHeight) {
popupY = viewportHeight - popupHeight - 10; // Ajustement en bas // // popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
} // // }
// Vérifier si le popup dépasse en haut // // // Vérifier si le popup dépasse en haut
if (popupY < 10) { // // if (popupY < 10) {
popupY = 10; // Ajustement en haut // // popupY = 10; // Ajustement en haut
} // // }
// Appliquer les positions calculées au popup // // Appliquer les positions calculées au popup
popup.style.left = `${popupX}px`; // popup.style.left = `${popupX}px`;
popup.style.top = `${popupY}px`; // popup.style.top = `${popupY}px`;
// Afficher le popup et le fond de modal // Afficher le popup et le fond de modal
popup.style.display = 'block'; popup.style.display = 'block';
modalBackground.style.display = 'block'; modalBackground.style.display = 'block';
console.log(`Popup affiché à x: ${popupX}, y: ${popupY}`); // console.log(`Popup affiché à x: ${popupX}, y: ${popupY}`);
} }
// 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') {
const currentPopupRect = popup.getBoundingClientRect(); // const currentPopupRect = popup.getBoundingClientRect();
const rect = svgElement.getBoundingClientRect(); // const rect = svgElement.getBoundingClientRect();
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top); // showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
} // }
}); // });
// Fonction pour fermer le popup // Fonction pour fermer le popup
function closePopup() { function closePopup() {
@ -104,21 +104,21 @@ svgElement.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('site-link')) { if (event.target.classList.contains('site-link')) {
const content = event.target.getAttribute('data-content'); const content = event.target.getAttribute('data-content');
// Récupérer la position et les dimensions du SVG // // Récupérer la position et les dimensions du SVG
const rect = svgElement.getBoundingClientRect(); // const rect = svgElement.getBoundingClientRect();
// Calculer la position relative du cercle // // Calculer la position relative du cercle
const circleX = event.clientX - rect.left; // const circleX = event.clientX - rect.left;
const circleY = event.clientY - rect.top; // const circleY = event.clientY - rect.top;
// Calculer la moitié du SVG // // // Calculer la moitié du SVG
const svgHalfWidth = rect.width / 2; // // const svgHalfWidth = rect.width / 2;
// Déterminer si le cercle est sur la moitié gauche ou droite du SVG // // // Déterminer si le cercle est sur la moitié gauche ou droite du SVG
const isLeftHalf = circleX < svgHalfWidth; // // const isLeftHalf = circleX < svgHalfWidth;
// Afficher le popup avec la position et l'alignement adaptés // Afficher le popup avec la position et l'alignement adaptés
showPopup(content, circleX, circleY, isLeftHalf); showPopup(content);
} }
// Gestion du changement de couleur sur le cercle // Gestion du changement de couleur sur le cercle
@ -177,3 +177,7 @@ svgElement.addEventListener('click', function(event) {
handleCircleClick(content); handleCircleClick(content);
} }
}); });

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

@ -3075,6 +3075,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
margin: 0 auto; /* Centrer le conteneur */ margin: 0 auto; /* Centrer le conteneur */
height: auto; /* Permet à la hauteur de s'ajuster automatiquement */ height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
} }
@media (max-width: 810px) {
#sites-map-container {
height: 550px;
}
}
/* Changer la couleur au survol (hover) */ /* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover { #sites-map-container .site-link:hover {
@ -3083,7 +3088,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
/* Styles du popup (caché par défaut) */ /* Styles du popup (caché par défaut) */
#sites-map-container #popup { #sites-map-container #popup {
font-family: "gilroy-semibold"; font-family: "gilroy-regular";
display: none; display: none;
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
@ -3091,6 +3096,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
padding-left: 1rem; padding-left: 1rem;
pointer-events: none; pointer-events: none;
} }
@media (max-width: 810px) {
#sites-map-container #popup {
bottom: 20px;
}
}
#sites-map-container strong { #sites-map-container strong {
color: #f7002b; color: #f7002b;
@ -3125,9 +3135,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
@media (max-width: 810px) { @media (max-width: 810px) {
#popup-content { #popup-content {
width: 250px; width: 300px;
background-color: white; background-color: white;
border-radius: 5px; border-radius: 5px;
padding: 0.5rem; padding: 0.5rem;
padding-left: 1rem;
} }
} }