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

nouvelles cartes projet + quelques corrections

Browse Source
This commit is contained in:
Valentin Le Moign
2025-02-03 23:23:52 +01:00
parent d912155cd0
commit 1a22f4c4c3
16 changed files with 241 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
web/themes/erabletheme/js/erabletheme.js
View File

@@ -335,10 +335,10 @@
//
document.querySelectorAll('p, li, h1, h2, h3, h4, h5, h6').forEach((content) => {
content.innerHTML = content.innerHTML.replaceAll(' ;', ' ');
content.innerHTML = content.innerHTML.replaceAll(' :', ' ');
content.innerHTML = content.innerHTML.replaceAll(' ?', ' ');
content.innerHTML = content.innerHTML.replaceAll(' !', ' ');
content.innerHTML = content.innerHTML.replaceAll(' ;', ' ;');
content.innerHTML = content.innerHTML.replaceAll(' :', ' :');
content.innerHTML = content.innerHTML.replaceAll(' ?', ' ?');
content.innerHTML = content.innerHTML.replaceAll(' !', ' !');
content.innerHTML = content.innerHTML.replaceAll('« ', '« ');
content.innerHTML = content.innerHTML.replaceAll(' »', ' »');
content.innerHTML = content.innerHTML.replaceAll('(« ', '(« ');
@@ -393,58 +393,114 @@
}
}
let firstMap = null;
Drupal.behaviors.customLeafletInteraction = {
attach: function (context, settings) {
$(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
//
// on projects pages, replace leaflet icons with erable leafs
//
const leafletIcons = document.querySelectorAll('.leaflet-marker-pane img');
for (let icon of leafletIcons) {
icon.setAttribute('src', '/themes/erabletheme/assets/leaf.svg');
}
//
// set hover on leaflet marker and zones
//
if (document.querySelector('.projet_full')) {
// map on the projects page
const leafletPlaces = document.querySelectorAll('.leaflet-marker-pane img, .leaflet-overlay-pane path');
const libelles = document.querySelectorAll('.libelles-carte > div > div > div');
let customIcon = L.icon({
iconUrl: '/themes/erabletheme/assets/leaf.svg',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [0, -20]
});
for (let i = 0; i < leafletPlaces.length; i++) {
const carte = document.querySelector('.carte');
let initiatedMap = document.querySelector(`#${mapid}`);
const currentLibelle = initiatedMap.parentElement.nextElementSibling.innerText;
initiatedMap.parentElement.nextElementSibling.remove();
if (document.querySelectorAll('.leaflet-container').length <= 1) {
firstMap = map;
let bounds = L.latLngBounds();
map.eachLayer(function (layer) {
if (layer instanceof L.Marker && !layer._popup) {
layer.bindPopup(currentLibelle, { closeButton: false, className: 'popup' })
.setIcon(customIcon)
.on('mouseover', function () {
this.openPopup();
})
.on('mouseout', function () {
this.closePopup();
});
leafletPlaces[i].addEventListener('mouseenter', () => {
let div = document.createElement('div');
div.setAttribute('id', 'leaflet-popup');
div.style.zIndex = '100';
const x = leafletPlaces[i].getBoundingClientRect().left + leafletPlaces[i].getBoundingClientRect().width / 2;
const y = leafletPlaces[i].getBoundingClientRect().top;
setTimeout(() => {
div.style.opacity = 1;
const divHeight = div.getBoundingClientRect().height;
const divWidth = div.getBoundingClientRect().width;
bounds.extend(layer.getLatLng());
map.fitBounds(bounds, { padding: [30, 30], maxZoom: 18 });
}
});
} else {
// map on the projects index
document.querySelector(`#${mapid}`).parentElement.parentElement.parentElement.remove();
const firstMarker = Object.values(markers)[0];
let newMarker = L.marker([firstMarker._latlng.lat, firstMarker._latlng.lng], { icon: customIcon })
.addTo(firstMap)
.bindPopup(currentLibelle, { closeButton: false, className: 'popup' })
.on('mouseover', function () {
this.openPopup();
})
.on('mouseout', function () {
this.closePopup();
});
firstMap.fitBounds(
firstMap.getBounds().extend(newMarker.getLatLng()),
{ padding: [30, 30], maxZoom: 18 }
);
}
} else {
//
// on projects pages, replace leaflet icons with erable leafs
//
const currentMap = document.querySelector('.leaflet-container');
const leafletIcons = document.querySelectorAll('.leaflet-marker-pane img');
for (let icon of leafletIcons) {
icon.setAttribute('src', '/themes/erabletheme/assets/leaf.svg');
}
//
// set hover on leaflet marker and zones
//
const leafletPlaces = document.querySelectorAll('.leaflet-marker-pane img, .leaflet-overlay-pane path');
const libelles = document.querySelectorAll('.libelles-carte > div > div > div');
for (let i = 0; i < leafletPlaces.length; i++) {
const carte = document.querySelector('.carte');
leafletPlaces[i].addEventListener('mouseenter', () => {
let div = document.createElement('div');
div.setAttribute('id', 'leaflet-popup');
div.style.zIndex = '100';
const x = leafletPlaces[i].getBoundingClientRect().left + leafletPlaces[i].getBoundingClientRect().width / 2;
const y = leafletPlaces[i].getBoundingClientRect().top;
setTimeout(() => {
div.style.left = `${x - divWidth / 2}px`;
div.style.top = `${y - divHeight}px`;
div.style.opacity = 1;
const divHeight = div.getBoundingClientRect().height;
const divWidth = div.getBoundingClientRect().width;
setTimeout(() => {
div.style.left = `${x - divWidth / 2}px`;
div.style.top = `${y - divHeight}px`;
}, 10);
}, 10);
}, 10);
div.innerText = libelles[i].innerText;
carte.appendChild(div);
});
leafletPlaces[i].addEventListener('mouseleave', () => {
let divs = document.querySelectorAll('#leaflet-popup');
for (let div of divs) {
div.style.opacity = 0;
setTimeout(() => {
div.remove();
}, 300);
}
});
div.innerText = libelles[i].innerText;
carte.appendChild(div);
});
leafletPlaces[i].addEventListener('mouseleave', () => {
let divs = document.querySelectorAll('#leaflet-popup');
for (let div of divs) {
div.style.opacity = 0;
setTimeout(() => {
div.remove();
}, 300);
}
});
}
}
});
}
}