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

modifs pas finies de la carte interactive + clean des scss

Browse Source
This commit is contained in:
Valentin
2024-11-02 04:12:25 +01:00
parent c56dadee02
commit e6d39d0dc3
24 changed files with 943 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
web/modules/custom/erable_mod/assets/css/carte-interactive.css
View File

@@ -1,98 +1,30 @@
@font-face {
font-family: 'gilroy-semibold';
src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
}
#sites-map-container {
background-color: transparent;
text-align: center;
position: relative;
width: 100%; /* Prend toute la largeur du conteneur parent */
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) {
width: 80%; /* Prend toute la largeur du conteneur parent */
}
@media (max-width: 530px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 485px;
}
@media (max-width: 400px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 430px;
}
margin: 0 auto;
max-width: 40vw;
}
/* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover{
cursor: pointer;
#map_base {
width: 100%;
}
#projects_icons {
position: absolute;
left: 0;
top: 0;
}
/* Styles du popup (caché par défaut) */
#sites-map-container #popup {
font-family: 'gilroy-light';
#popup {
background-color: white;
display: none;
position: absolute;
z-index: 1000;
text-align: left;
padding-left: 1rem;
pointer-events: none;
@media (max-width: 1090px) {
bottom: 20px;
}
padding: 0.5rem 1rem;
transition: opacity 0.3s ease;
opacity: 0;
}
/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
@media (min-width: 1090px) {
#sites-map-container #popup {
top: 50%; /* Centrer verticalement */
left: 80%; /* Placer le popup à droite de la carte */
transform: translateY(-50%); /* Ajuster pour centrer verticalement */
width: 300px;
}
}
#sites-map-container strong{
color: #f7002b;
font-family: 'gilroy-bold';
}
#sites-map-container a{
display: none;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.8rem;
padding-left: 0.5rem;
text-decoration: none;
margin-top: 0.7rem;
height: 1.3rem;
}
#sites-map-container a:after{
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#popup-content{
width: 300px;
padding-right: 30px;
p{
font-size: 0.7rem;
}
@media (max-width : 810px) {
width: 300px;
background-color: white;
border-radius: 5px;
padding: 0.5rem;
padding-left: 1rem;
}
#popup h3,
#popup p {
text-align: center;
margin: 0;
}

91
web/modules/custom/erable_mod/assets/css/carte-interactive.old.css Normal file
View File

@@ -0,0 +1,91 @@
#sites-map-container {
text-align: center;
position: relative;
width: 100%; /* Prend toute la largeur du conteneur parent */
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) {
width: 80%; /* Prend toute la largeur du conteneur parent */
}
@media (max-width: 530px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 485px;
}
@media (max-width: 400px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 430px;
}
}
/* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover{
cursor: pointer;
}
/* Styles du popup (caché par défaut) */
#sites-map-container #popup {
display: none;
position: absolute;
z-index: 1000;
text-align: left;
padding-left: 1rem;
pointer-events: none;
@media (max-width: 1090px) {
bottom: 20px;
}
}
/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
@media (min-width: 1090px) {
#sites-map-container #popup {
top: 50%; /* Centrer verticalement */
left: 80%; /* Placer le popup à droite de la carte */
transform: translateY(-50%); /* Ajuster pour centrer verticalement */
width: 300px;
}
}
#sites-map-container strong{
color: #f7002b;
}
#sites-map-container a{
display: none;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.8rem;
padding-left: 0.5rem;
text-decoration: none;
margin-top: 0.7rem;
height: 1.3rem;
}
#sites-map-container a:after{
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#popup-content{
width: 300px;
padding-right: 30px;
p{
font-size: 0.7rem;
}
@media (max-width : 810px) {
width: 300px;
background-color: white;
border-radius: 5px;
padding: 0.5rem;
padding-left: 1rem;
}
}

BIN
web/modules/custom/erable_mod/assets/css/fonts/Gilroy/gilroy-semibold-webfont.woff
View File

Binary file not shown.

341
web/modules/custom/erable_mod/assets/js/carte-interactive.js
View File

@@ -1,116 +1,243 @@
// // 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');
const franceCoordinates = {
metropole: {
latTop: 52.0, // Nord-Ouest (coin supérieur gauche)
lonLeft: -5,
latBottom: 40.0, // Sud-Est (coin inférieur droit)
lonRight: 11.0,
},
guadeloupe: {
latTop: 16.5,
lonLeft: -62,
latBottom: 15.8,
lonRight: -60.8,
},
martinique: {
latTop: 14.9,
lonLeft: -61.3,
latBottom: 14.3,
lonRight: -60.7,
},
guyanne: {
latTop: 6,
lonLeft: -54.8,
latBottom: 1.8,
lonRight: -51.2,
},
reunion: {
latTop: -20.8,
lonLeft: 55.1,
latBottom: -21.4,
lonRight: 55.9,
},
saintPierreEtMiquelon: {
latTop: 47.1,
lonLeft: -56.4,
latBottom: 46.7,
lonRight: -56.1,
},
mayotte: {
latTop: -12.6,
lonLeft: 44.9,
latBottom: -13,
lonRight: 45.3,
},
saintBarthelemy: {
latTop: 17.9,
lonLeft: -62.9,
latBottom: 17.8,
lonRight: -62.7,
},
saintMartin: {
latTop: 18.1,
lonLeft: -63.1,
latBottom: 17.9,
lonRight: -62.9,
},
wallisEtFutuna: {
latTop: -13.1,
lonLeft: -176.2,
latBottom: -13.3,
lonRight: -176.1,
},
polynesieFrancaise: {
latTop: -17.4,
lonLeft: -149.9,
latBottom: -17.1,
lonRight: -149,
},
nouvelleCaledonie: {
latTop: -19.3,
lonLeft: 163.3,
latBottom: -22.9,
lonRight: 168.4,
},
};
// Vérifiez si la page contient la classe '.node-type-site'
const isSitePage = document.body.classList.contains('node-type-site');
const localisationMapPlacements = {
// en pourcentage de la largeur et hauteur du fond de carte
metropole: {
top: 0,
left: 12.9,
bottom: 63.48,
right: 87.14,
},
guadeloupe: {
top: 88.44,
left: 33.01,
bottom: 98.77,
right: 46.25,
},
martinique: {
top: 88.96,
left: 53.26,
bottom: 98.24,
right: 61.99,
},
guyanne: {
top: 88.09,
left: 69.09,
bottom: 99.21,
right: 79.07,
},
reunion: {
top: 75.48,
left: 89.82,
bottom: 82.04,
right: 97.88,
},
saintPierreEtMiquelon: {
top: 75.03,
left: 12.85,
bottom: 81.61,
right: 17.85,
},
mayotte: {
top: 88.61,
left: 17.08,
bottom: 98.68,
right: 26.19,
},
saintBarthelemy: {
top: 74.95,
left: 44.81,
bottom: 82.74,
right: 57.58,
},
saintMartin: {
top: 74.78,
left: 23.12,
bottom: 82.92,
right: 36.08,
},
wallisEtFutuna: {
top: 74.95,
left: 0,
bottom: 79.50,
right: 7.58,
},
polynesieFrancaise: {
top: 90.19,
left: 85.12,
bottom: 97.02,
right: 100,
},
nouvelleCaledonie: {
top: 73.73,
left: 66.21,
bottom: 83.80,
right: 81.09,
},
};
const projectsIcons = document.querySelectorAll('#projects_icons > svg');
for (let icon of projectsIcons) {
icon.addEventListener('mouseenter', function() {
console.log("mouse over");
displayPopup(icon);
});
icon.addEventListener('mouseleave', function() {
console.log("mouse out");
// Fonction pour afficher le popup
function showPopup(content, x, y, isLeftHalf) {
// Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
if (isSitePage) return;
popupContent.innerHTML = content;
// Afficher le popup et le fond de modal
popup.style.display = 'block';
modalBackground.style.display = 'block';
hidePopup();
});
}
// Fonction pour fermer le popup
function closePopup() {
function placeProjectsIcons(projectsIcons) {
const container = document.querySelector('#map_base');
const containerWidth = container.getBoundingClientRect().width;
const containerHeight = container.getBoundingClientRect().height;
projectsIcons.forEach(icon => {
const iconWidth = icon.getBoundingClientRect().width;
const lat = parseFloat(icon.dataset.geofieldlat);
const lon = parseFloat(icon.dataset.geofieldlon);
const territory = findTerritory(lat, lon);
if (territory && localisationMapPlacements[territory]) {
const territoryBounds = localisationMapPlacements[territory];
const territoryCoords = franceCoordinates[territory];
const xPercentage = ((lon - territoryCoords.lonLeft) / (territoryCoords.lonRight - territoryCoords.lonLeft)) * 100;
const yPercentage = ((territoryCoords.latTop - lat) / (territoryCoords.latTop - territoryCoords.latBottom)) * 100;
const finalX = containerWidth * (territoryBounds.left / 100 + (xPercentage / 100) * (territoryBounds.right - territoryBounds.left) / 100) - iconWidth / 2;
const finalY = containerHeight * (territoryBounds.top / 100 + (yPercentage / 100) * (territoryBounds.bottom - territoryBounds.top) / 100) - iconWidth / 2;
icon.setAttribute('transform', `translate(${finalX}, ${finalY})`);
} else {
console.warn(`Territory not found for lat: ${lat}, lon: ${lon}`);
}
});
}
function findTerritory(lat, lon) {
for (const [territory, coords] of Object.entries(franceCoordinates)) {
if (
lat <= Math.max(coords.latTop, coords.latBottom) &&
lat >= Math.min(coords.latTop, coords.latBottom) &&
lon >= Math.min(coords.lonLeft, coords.lonRight) &&
lon <= Math.max(coords.lonLeft, coords.lonRight)
) {
return territory;
}
}
return "Unknown territory";
}
function displayPopup(icon) {
const container = document.querySelector('#sites-map-container');
const x = icon.getBoundingClientRect().left - container.getBoundingClientRect().left;
const y = icon.getBoundingClientRect().top - container.getBoundingClientRect().top;
const popup = document.querySelector('#sites-map-container #popup');
popup.querySelector('h3').innerText = icon.dataset.title;
popup.querySelector('p').innerText = icon.dataset.place;
popup.style.top = 0;
popup.style.left = 0;
popup.style.display = 'block';
popup.style.left = `${x - popup.getBoundingClientRect().width / 2 + icon.getBoundingClientRect().width / 2}px`;
popup.style.top = `${y - popup.getBoundingClientRect().height - icon.getBoundingClientRect().height}px`;
setTimeout(() => {
popup.style.opacity = 1;
}, 10);
}
function hidePopup(){
const popup = document.querySelector('#sites-map-container #popup');
popup.style.opacity = 0;
setTimeout(() => {
popup.style.display = 'none';
modalBackground.style.display = 'none'; // Désactiver le fond modal
}, 300);
}
// Gérer le survol des cercles (au lieu du clic)
svgElement.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('site-link')) {
const content = event.target.getAttribute('data-content');
// Afficher le popup avec la position et l'alignement adaptés
showPopup(content);
}
// Gestion du changement de couleur sur le cercle
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'red');
}
});
// Fermer le popup lorsque la souris quitte le cercle
svgElement.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('site-link')) {
closePopup();
}
// Réinitialiser la couleur du cercle au survol de la souris
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'black'); // Remettre en noir
}
});
// Mettre à jour la logique de calcul des positions
function recalculateSitePositions() {
const allSites = document.querySelectorAll('.site-link');
allSites.forEach((site, index) => {
const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
const lon = parseFloat(geofield.split(',')[0]);
const lat = parseFloat(geofield.split(',')[1]);
const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
const y = round((latTop - lat) / (latTop - latBottom) * vp_h);
site.setAttribute('transform', `translate(${x}, ${y})`);
});
}
window.addEventListener('resize', function() {
recalculateSitePositions();
if (popup.style.display === 'block') {
const currentPopupRect = popup.getBoundingClientRect();
const rect = svgElement.getBoundingClientRect();
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
}
});
// Gérer le clic ou le toucher des cercles
function handleCircleClick(content) {
showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
}
// Écouter les événements de clic et de toucher sur le SVG
svgElement.addEventListener('click', function(event) {
if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
const content = event.target.getAttribute('data-content');
handleCircleClick(content);
}
});
///////////////////// page site point rouge quand sur page ///////////////////////
// Récupérer l'ID de la page depuis la classe du body
const body = document.querySelector('body');
const pageId = body.className.match(/node-id-(\d+)/)[1]; // Extraire l'ID de la page
// Sélectionner le groupe SVG qui a l'ID correspondant
const matchingGroup = document.querySelector(`#site-${pageId}`);
// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
if (matchingGroup) {
const circle = matchingGroup.querySelector('circle'); // Sélectionner le cercle à l'intérieur du groupe
if (circle) {
circle.setAttribute('fill', 'red'); // Changer la couleur du cercle
}
}
placeProjectsIcons(projectsIcons);
window.addEventListener('resize', placeProjectsIcons(projectsIcons));

115
web/modules/custom/erable_mod/assets/js/carte-interactive.js.old Normal file
View File

@@ -0,0 +1,115 @@
// // 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');
// Vérifiez si la page contient la classe '.node-type-site'
const isSitePage = document.body.classList.contains('node-type-site');
console.log(isSitePage);
// Fonction pour afficher le popup
function showPopup(content, x, y, isLeftHalf) {
// Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
if (isSitePage) return;
popupContent.innerHTML = content;
// Afficher le popup et le fond de modal
popup.style.display = 'block';
modalBackground.style.display = 'block';
}
// Fonction pour fermer le popup
function closePopup() {
popup.style.display = 'none';
modalBackground.style.display = 'none'; // Désactiver le fond modal
}
// Gérer le survol des cercles (au lieu du clic)
svgElement.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('site-link')) {
const content = event.target.getAttribute('data-content');
// Afficher le popup avec la position et l'alignement adaptés
showPopup(content);
}
// Gestion du changement de couleur sur le cercle
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'red');
}
});
// Fermer le popup lorsque la souris quitte le cercle
svgElement.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('site-link')) {
closePopup();
}
// Réinitialiser la couleur du cercle au survol de la souris
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'black'); // Remettre en noir
}
});
// Mettre à jour la logique de calcul des positions
function recalculateSitePositions() {
const allSites = document.querySelectorAll('.site-link');
allSites.forEach((site, index) => {
const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
const lon = parseFloat(geofield.split(',')[0]);
const lat = parseFloat(geofield.split(',')[1]);
const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
const y = round((latTop - lat) / (latTop - latBottom) * vp_h);
site.setAttribute('transform', `translate(${x}, ${y})`);
});
}
window.addEventListener('resize', function() {
recalculateSitePositions();
if (popup.style.display === 'block') {
const currentPopupRect = popup.getBoundingClientRect();
const rect = svgElement.getBoundingClientRect();
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
}
});
// Gérer le clic ou le toucher des cercles
function handleCircleClick(content) {
showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
}
// Écouter les événements de clic et de toucher sur le SVG
svgElement.addEventListener('click', function(event) {
if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
const content = event.target.getAttribute('data-content');
handleCircleClick(content);
}
});
///////////////////// page site point rouge quand sur page ///////////////////////
// Récupérer l'ID de la page depuis la classe du body
const body = document.querySelector('body');
const pageId = body.className.match(/node-id-(\d+)/)[1]; // Extraire l'ID de la page
// Sélectionner le groupe SVG qui a l'ID correspondant
const matchingGroup = document.querySelector(`#site-${pageId}`);
// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
if (matchingGroup) {
const circle = matchingGroup.querySelector('circle'); // Sélectionner le cercle à l'intérieur du groupe
if (circle) {
circle.setAttribute('fill', 'red'); // Changer la couleur du cercle
}
}

1
web/modules/custom/erable_mod/assets/svg/carte.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

25
web/modules/custom/erable_mod/assets/svg/feuille.svg Normal file
View File

@@ -0,0 +1,25 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="2933 3781 107.091 110.044"
fill="none"
id="projet-$index"
data-geofieldlon="$lon"
data-geofieldlat="$lat"
data-title="$title"
data-place="$place"
>
<a href="$href">
<path
d="M2948.852 3798.42c-3.606 3.667-2.847 11.102-1.479 17.824 1.619 7.951 5.315 16.118 12.339 24.491 3.456 4.205 9.513 6.379 14.08 9.238-10.249-1.658-21.843 3.107-29.852 9.438-5.7 4.488-11.197 10.188-10.931 15.125.261 4.757 5.974 8.041 11.591 10.646 7.669 3.555 17.089 5.343 29.989 3.293 18.866-3.004 36.608-14.662 40.31-24.59 0 0 16.971 18.409 13.637 26.71 1.459.976 4.253.403 4.516-2.138.92-8.85-15.986-26.562-15.986-26.562 10.111-3.235 19.484-19.744 22.323-39.307 2.031-14.005-.579-24.218-4.883-31.774-2.606-4.576-5.279-9.628-9.507-9.809-4.109-.171-9.189 4.422-13.021 8.545-5.631 6.058-10.313 13.829-12.151 25.629-.431 2.766-.094 7.971-.201 8.514-1.077-3.802-.253-6.156-5.417-12.196-9.426-8.649-18.53-12.964-27.384-14.735-6.814-1.364-14.321-2.055-17.973 1.658Z"
style="
cursor: pointer;
fill-rule: evenodd;
stroke: none;
fill: rgb(3, 135, 136);
fill-opacity: 1;
"
class="fills"/>
</a>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB