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

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
}
}