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

index page projets

Browse Source
This commit is contained in:
Valentin
2024-11-05 01:44:18 +01:00
parent 018960837d
commit bd1b450a45
34 changed files with 1084 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
#sites-map-container {
position: relative;
margin: 0 auto;
max-width: 40vw;
width: 100%;
}
#map_base {

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

@@ -1,91 +0,0 @@
#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;
}
}

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

@@ -186,7 +186,7 @@ function placeProjectsIcons(projectsIcons) {
const territory = findTerritory(lat, lon);
console.log(icon.dataset.title, territory);
// console.log(icon.dataset.title, territory);
if (territory && localisationMapPlacements[territory]) {
@@ -261,8 +261,11 @@ function hidePopup(){
placeProjectsIcons(projectsIcons);
// debugMapPlacement();
window.addEventListener('resize', placeProjectsIcons(projectsIcons));
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('resize', () => {
placeProjectsIcons(projectsIcons)
});
});
function debugMapPlacement() {
const container = document.querySelector('#sites-map-container');

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

@@ -1,115 +0,0 @@
// // 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
}
}