pointer events croix, facilité mouseover
This commit is contained in:
parent
b9f8612f16
commit
681fb0398e
|
@ -29,9 +29,10 @@
|
||||||
font-family: 'gilroy-semibold';
|
font-family: 'gilroy-semibold';
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
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;
|
||||||
|
@ -68,3 +69,12 @@
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// .popup {
|
||||||
|
// transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
// opacity: 0;
|
||||||
|
// transform: translateY(10px);
|
||||||
|
// }
|
||||||
|
// .popup.show {
|
||||||
|
// opacity: 1;
|
||||||
|
// transform: translateY(0);
|
||||||
|
// }
|
|
@ -11,55 +11,53 @@ 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();
|
||||||
|
|
||||||
// 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');
|
||||||
// Si le point est dans la moitié gauche, aligner le côté droit du popup avec le point
|
// Aligner le popup à gauche du cercle
|
||||||
popupX = rect.left + x - popupWidth - 20; // Décalage à gauche
|
popupX = rect.left + x - popupWidth - 20; // 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');
|
||||||
// Si le point est dans la moitié droite, afficher le popup à droite du point
|
// Aligner le popup à droite du cercle
|
||||||
popupX = rect.left + x + 100; // Décalage à droite
|
popupX = rect.left + x + 20;
|
||||||
popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
|
popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculer la position Y (décalée légèrement en hauteur)
|
// Calculer la position Y (centrée verticalement par rapport au cercle)
|
||||||
popupY = rect.top + y - 400; // Ajustement vertical avec un léger offset
|
popupY = rect.top + y - popupHeight / 2;
|
||||||
|
|
||||||
// Empêcher le popup de dépasser les bords gauche et droite 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;
|
||||||
|
|
||||||
// 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 pour éviter de dépasser
|
popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
|
||||||
// }
|
}
|
||||||
|
|
||||||
// Vérifier si le popup dépasse à gauche de l'écran
|
// Vérifier si le popup dépasse à gauche
|
||||||
// if (popupX < 0) {
|
if (popupX < 10) {
|
||||||
// popupX = 10; // Ajustement à gauche pour ne pas dépasser
|
popupX = 10; // Ajustement à gauche
|
||||||
// }
|
}
|
||||||
|
|
||||||
// Empêcher le popup de dépasser en haut ou en bas
|
// Vérifier si le popup dépasse en bas
|
||||||
// const viewportHeight = window.innerHeight;
|
if (popupY + popupHeight > viewportHeight) {
|
||||||
|
popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
|
||||||
// Vérifier si le popup dépasse en bas de l'écran
|
}
|
||||||
// if (popupY + popupHeight > viewportHeight) {
|
|
||||||
// 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 < 0) {
|
if (popupY < 10) {
|
||||||
// popupY = 10; // Ajustement en haut pour ne pas dépasser
|
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`;
|
||||||
|
@ -72,12 +70,12 @@ function showPopup(content, x, y, isLeftHalf) {
|
||||||
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();
|
||||||
showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.top);
|
const rect = svgElement.getBoundingClientRect();
|
||||||
|
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -91,17 +89,17 @@ function closePopup() {
|
||||||
svgElement.addEventListener('mouseover', function(event) {
|
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;
|
||||||
|
|
||||||
|
@ -109,15 +107,10 @@ svgElement.addEventListener('mouseover', function(event) {
|
||||||
showPopup(content, circleX, circleY, isLeftHalf);
|
showPopup(content, circleX, circleY, isLeftHalf);
|
||||||
}
|
}
|
||||||
|
|
||||||
const isCircle = event.target.tagName === 'circle';
|
// Gestion du changement de couleur sur le cercle
|
||||||
console.log(isCircle);
|
if (event.target.tagName === 'circle') {
|
||||||
|
|
||||||
if (isCircle === true) {
|
|
||||||
// Change la couleur en rouge
|
|
||||||
event.target.setAttribute('fill', 'red');
|
event.target.setAttribute('fill', 'red');
|
||||||
}
|
}
|
||||||
|
|
||||||
// circle.style.fill = 'red';
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Fermer le popup lorsque la souris quitte le cercle
|
// Fermer le popup lorsque la souris quitte le cercle
|
||||||
|
@ -125,11 +118,9 @@ svgElement.addEventListener('mouseout', function(event) {
|
||||||
if (event.target.classList.contains('site-link')) {
|
if (event.target.classList.contains('site-link')) {
|
||||||
closePopup();
|
closePopup();
|
||||||
}
|
}
|
||||||
const isCircle = event.target.tagName === 'circle';
|
|
||||||
console.log(isCircle);
|
// Réinitialiser la couleur du cercle au survol de la souris
|
||||||
|
if (event.target.tagName === 'circle') {
|
||||||
if (isCircle === true) {
|
event.target.setAttribute('fill', 'black'); // Remettre en noir
|
||||||
// Change la couleur en rouge
|
|
||||||
event.target.setAttribute('fill', 'black');
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -71,11 +71,11 @@ class SitesMap extends BlockBase {
|
||||||
<path
|
<path
|
||||||
id="path84"
|
id="path84"
|
||||||
d="m 0,$m v $l"
|
d="m 0,$m v $l"
|
||||||
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
|
style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
<path
|
<path
|
||||||
id="path85"
|
id="path85"
|
||||||
d="m $m,0 h $l"
|
d="m $m,0 h $l"
|
||||||
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
|
style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
|
||||||
</g>
|
</g>
|
||||||
SVGSITEPATH;
|
SVGSITEPATH;
|
||||||
|
|
|
@ -3084,9 +3084,7 @@ 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;
|
||||||
left: 50%;
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
top: -20%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
|
|
Loading…
Reference in New Issue