taille path
This commit is contained in:
ouidade
parent
f115c87ad3
commit
23d8823a45
|
|
@ -3,7 +3,7 @@
|
|||
src: url('fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
|
||||
}
|
||||
#sites-map-container {
|
||||
background-color: #c3cef2;
|
||||
background-color: #cecfcc;
|
||||
text-align: center;
|
||||
}
|
||||
/* #sites-map-container .circle {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,19 @@
|
|||
// Sélection des éléments au préalable pour éviter de les rechercher plusieurs fois
|
||||
// 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');
|
||||
const modalBackground = document.querySelector('#sites-map-container #modal-background');
|
||||
console.log('svgElement', svgElement);
|
||||
|
||||
// Fonction pour afficher le popup
|
||||
function showPopup(content, x, y) {
|
||||
console.log('showPopup', content, x, y);
|
||||
|
||||
popupContent.innerHTML = content;
|
||||
|
||||
// Récupérer la position de l'élément SVG seulement une fois
|
||||
const rect = svgElement.getBoundingClientRect();
|
||||
|
||||
// Calculer la position du popup par rapport à l'élément SVG
|
||||
const popupX = rect.left + x + 120; // Décalage de 120px à droite
|
||||
const popupY = rect.top + y + 20; // Décalage de 20px en dessous
|
||||
|
||||
// Calcul de la position du popup
|
||||
let popupX = rect.left + x + 120;
|
||||
let popupY = rect.top + y + 20;
|
||||
|
||||
// Dimensions de la fenêtre et du popup
|
||||
const viewportWidth = window.innerWidth;
|
||||
|
|
@ -24,32 +21,20 @@ function showPopup(content, x, y) {
|
|||
const popupWidth = popup.offsetWidth;
|
||||
const popupHeight = popup.offsetHeight;
|
||||
|
||||
// Vérification des bordures droite et gauche
|
||||
if (popupX + popupWidth > viewportWidth) {
|
||||
popupX = viewportWidth - popupWidth - 10; // Ajuster pour qu'il ne dépasse pas à droite
|
||||
}
|
||||
if (popupX < 0) {
|
||||
popupX = 10; // S'assurer que le popup ne dépasse pas à gauche
|
||||
}
|
||||
|
||||
// Vérification des bordures inférieure et supérieure
|
||||
if (popupY + popupHeight > viewportHeight) {
|
||||
popupY = viewportHeight - popupHeight - 10; // Ajuster pour qu'il ne dépasse pas en bas
|
||||
}
|
||||
if (popupY < 0) {
|
||||
popupY = 10; // S'assurer que le popup ne dépasse pas en haut
|
||||
}
|
||||
// Ajuster les positions pour éviter les dépassements
|
||||
popupX = Math.max(10, Math.min(popupX, viewportWidth - popupWidth - 10));
|
||||
popupY = Math.max(10, Math.min(popupY, viewportHeight - popupHeight - 10));
|
||||
|
||||
// Affichage du popup et du fond modal
|
||||
popup.style.left = `${popupX}px`;
|
||||
popup.style.top = `${popupY}px`;
|
||||
popup.style.display = 'block';
|
||||
modalBackground.style.display = 'block'; // Activer le fond modal si nécessaire
|
||||
modalBackground.style.display = 'block';
|
||||
}
|
||||
|
||||
// Recalculer la position du popup lors du redimensionnement de la fenêtre
|
||||
window.addEventListener('resize', function() {
|
||||
if (popup.style.display === 'block') {
|
||||
// Recalculer les coordonnées et ajuster la position
|
||||
const currentPopupRect = popup.getBoundingClientRect();
|
||||
showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.top);
|
||||
}
|
||||
|
|
@ -61,31 +46,24 @@ function closePopup() {
|
|||
modalBackground.style.display = 'none'; // Désactiver le fond modal
|
||||
}
|
||||
|
||||
// Ajout d'un écouteur d'événement sur l'élément SVG pour tous les cercles
|
||||
// Délégation d'événement pour gérer les clics sur les cercles et paths
|
||||
svgElement.addEventListener('click', function(event) {
|
||||
console.log('svgElement click', event.target);
|
||||
|
||||
// Gérer le clic sur les cercles associés aux points d'intérêt
|
||||
if (event.target.classList.contains('site-link')) {
|
||||
// Récupérer le contenu personnalisé de l'attribut data-content
|
||||
const content = event.target.getAttribute('data-content');
|
||||
|
||||
// Récupérer la position du cercle cliqué par rapport à l'élément SVG
|
||||
const rect = svgElement.getBoundingClientRect();
|
||||
const circleX = event.clientX - rect.left;
|
||||
const circleY = event.clientY - rect.top;
|
||||
|
||||
// Afficher le popup avec le contenu spécifique
|
||||
showPopup(content, circleX, circleY);
|
||||
|
||||
// Empêcher la propagation de l'événement pour éviter la fermeture immédiate
|
||||
event.stopPropagation();
|
||||
event.stopPropagation(); // Empêche la propagation de l'événement pour éviter une fermeture accidentelle
|
||||
}
|
||||
});
|
||||
|
||||
// Ferme le popup quand on clique n'importe où sur la page, sauf sur le popup
|
||||
// Fermer le popup en cliquant à l'extérieur de celui-ci
|
||||
document.addEventListener('click', function(event) {
|
||||
// Vérifier si le clic s'est produit en dehors du popup
|
||||
if (popup.style.display === 'block' && !popup.contains(event.target)) {
|
||||
closePopup();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -56,8 +56,8 @@ class SitesMap extends BlockBase {
|
|||
$y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
|
||||
|
||||
$r = 10;
|
||||
$m = -$r+2;
|
||||
$l = $r*2-4;
|
||||
$m = -$r+4;
|
||||
$l = $r*2-8;
|
||||
$sites_paths .= <<<SVGSITEPATH
|
||||
<g
|
||||
id="site-$index"
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1636,13 +1636,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
|
|||
#home .config_pages--type--diaporama-home .diaporama .slick-list {
|
||||
padding: 0 !important;
|
||||
}
|
||||
#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom {
|
||||
#home .config_pages--type--diaporama-home .diaporama .slick-list .slick-track {
|
||||
max-height: 1281px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img {
|
||||
#home .config_pages--type--diaporama-home .diaporama .slick-list .slick-track img {
|
||||
width: 100%;
|
||||
height: 960px;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
#home .config_pages--type--diaporama-home .diaporama .slick-list blockquote {
|
||||
|
|
@ -1768,6 +1768,16 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
|
|||
font-family: "gilroy-bold";
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
#home article.node-type-static .field_field_map_block #block-sitesmapblock {
|
||||
background-color: #cecfcc;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
#home article.node-type-static .field_field_map_block #block-sitesmapblock h2 {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
font-size: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
#home article.node-type-static #paragraph-id--1 {
|
||||
background-color: #edefe8;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -369,6 +369,8 @@
|
|||
|
||||
//////////// slideshow home //////////////////////////
|
||||
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
let actuview = $('.content-actus .view')
|
||||
if (actuview) {
|
||||
|
|
@ -400,6 +402,9 @@
|
|||
console.log('salut slick home');
|
||||
|
||||
}
|
||||
$('.slick-carousel').slick({
|
||||
lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -415,11 +420,11 @@
|
|||
slidesToShow: 1,
|
||||
dots: false,
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
adaptiveHeight: false,
|
||||
// centerMode: true,
|
||||
adaptiveHeight: true,
|
||||
autoplay: true, // Activer l'autoplay
|
||||
autoplaySpeed: 4000, // Changement de slide toutes les 4 secondes
|
||||
infinite: true,
|
||||
// infinite: true,
|
||||
pauseOnHover: false, // Ne pas arrêter l'autoplay lors du survol
|
||||
pauseOnFocus: false,
|
||||
responsive: [
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@
|
|||
.diaporama{
|
||||
.slick-list{
|
||||
padding: 0 !important;
|
||||
.cadre-img-zoom{
|
||||
.slick-track{
|
||||
max-height: 1281px;
|
||||
overflow:hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 960px;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
// transform: scale(1.2);
|
||||
// // // animation: zoomOut infinite 4.3s ease-in-out;
|
||||
|
|
@ -158,6 +158,20 @@
|
|||
font-family: 'gilroy-bold';
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.field_field_map_block{
|
||||
#block-sitesmapblock{
|
||||
background-color: #cecfcc;
|
||||
padding-top: 3rem;
|
||||
|
||||
h2{
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
font-size: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#paragraph-id--1{ ///// Les enjeux 1
|
||||
background-color: #edefe8;
|
||||
position: relative;
|
||||
|
|
|
|||
Loading…
Reference in New Issue