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

taille path

This commit is contained in:
ouidade 2024-10-04 14:21:09 +02:00
parent f115c87ad3
commit 23d8823a45
7 changed files with 57 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

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

@ -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();
}
});

4
web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php
View File

@ -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"

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -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;

11
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -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: [

18
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@ -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;