modifs pas finies de la carte interactive + clean des scss
This commit is contained in:
Valentin
@@ -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
115
web/modules/custom/erable_mod/assets/js/carte-interactive.js.old
Normal 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
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user