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 */
margin: 0 auto; /* Centrer le conteneur */
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) */
#sites-map-container #popup {
font-family: 'gilroy-semibold';
font-family: 'gilroy-regular';
display: none;
position: absolute;
z-index: 1000;
text-align: left;
padding-left: 1rem;
pointer-events: none;
@media (max-width: 810px) {
bottom: 20px;
}
}
@ -62,9 +68,10 @@
font-size: 0.7rem;
}
@media (max-width : 810px) {
width: 250px;
width: 300px;
background-color: white;
border-radius: 5px;
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 popup = document.querySelector('#sites-map-container #popup');
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) {
popupContent.innerHTML = content;
// Récupérer la position et les dimensions du conteneur SVG
const rect = svgElement.getBoundingClientRect();
// // 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;
// // 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;
// // 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;
// // Afficher temporairement le popup pour mesurer ses dimensions
// popup.style.display = 'block';
// const popupWidth = popup.offsetWidth;
// const popupHeight = popup.offsetHeight;
// 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 -scrollX - popupWidth - 800; // 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 + scrollX - popupWidth - 20;
popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
}
// // // 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 -scrollX - popupWidth - 800; // 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 + scrollX - popupWidth ;
// popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
// // }
// 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
// // // 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);
// // 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;
const viewportHeight = window.innerHeight;
// // // 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
}
// // // Vérifier si le popup dépasse à droite de l'écran
// // if (popupX + popupWidth > viewportWidth) {
// // popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
// // }
// Vérifier si le popup dépasse à gauche
if (popupX < 10) {
popupX = 10; // Ajustement à gauche
}
// // // Vérifier si le popup dépasse à gauche
// // if (popupX < 10) {
// // popupX = 10; // Ajustement à gauche
// // }
// 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 bas
// // if (popupY + popupHeight > viewportHeight) {
// // popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
// // }
// Vérifier si le popup dépasse en haut
if (popupY < 10) {
popupY = 10; // Ajustement en haut
}
// // // Vérifier si le popup dépasse en haut
// // if (popupY < 10) {
// // popupY = 10; // Ajustement en haut
// // }
// Appliquer les positions calculées au popup
popup.style.left = `${popupX}px`;
popup.style.top = `${popupY}px`;
// // Appliquer les positions calculées au popup
// popup.style.left = `${popupX}px`;
// popup.style.top = `${popupY}px`;
// Afficher le popup et le fond de modal
popup.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
window.addEventListener('resize', function() {
if (popup.style.display === 'block') {
const currentPopupRect = popup.getBoundingClientRect();
const rect = svgElement.getBoundingClientRect();
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
}
});
// // 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();
// const rect = svgElement.getBoundingClientRect();
// showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
// }
// });
// Fonction pour fermer le popup
function closePopup() {
@ -104,21 +104,21 @@ 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();
// // 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 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;
// // // 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;
// // // Déterminer si le cercle est sur la moitié gauche ou droite du SVG
// // const isLeftHalf = circleX < svgHalfWidth;
// 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
@ -177,3 +177,7 @@ svgElement.addEventListener('click', function(event) {
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 */
height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
}
@media (max-width: 810px) {
#sites-map-container {
height: 550px;
}
}
/* Changer la couleur au survol (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) */
#sites-map-container #popup {
font-family: "gilroy-semibold";
font-family: "gilroy-regular";
display: none;
position: absolute;
z-index: 1000;
@ -3091,6 +3096,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
padding-left: 1rem;
pointer-events: none;
}
@media (max-width: 810px) {
#sites-map-container #popup {
bottom: 20px;
}
}
#sites-map-container strong {
color: #f7002b;
@ -3125,9 +3135,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
}
@media (max-width: 810px) {
#popup-content {
width: 250px;
width: 300px;
background-color: white;
border-radius: 5px;
padding: 0.5rem;
padding-left: 1rem;
}
}