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

correction map loaded trigger to display map icons

Browse Source
This commit is contained in:
Valentin 2024-10-01 11:40:10 +02:00
parent 1d7dfe72c2
commit bd07a046de
1 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/themes/custom/caravane/assets/js/main.js
View File

@ -29,7 +29,7 @@ import router from './router/router';
// } (Drupal)); // } (Drupal));
(function (Drupal, drupalSettings) { (function ($, Drupal, drupalSettings) {
const CaravaneTheme = function () { const CaravaneTheme = function () {
const _is_front = drupalSettings.path.isFront const _is_front = drupalSettings.path.isFront
console.log('drupalSettings', drupalSettings) console.log('drupalSettings', drupalSettings)
@ -146,48 +146,50 @@ import router from './router/router';
} }
function setupEtapeMapPopup(store) { function setupEtapeMapPopup(store) {
jQuery(document).bind('leaflet.map', function(event, map, lMap) { Drupal.behaviors.customLeafletInteraction = {
attach: function(context, settings) {
//setTimeout(() => { $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
const icons = document.querySelectorAll('.leaflet-map-divicon'); const icons = document.querySelectorAll('.leaflet-map-divicon');
for (let icon of icons) { for (let icon of icons) {
const colorContainer = icon.querySelector('.couleur'); const colorContainer = icon.querySelector('.couleur');
const colorDiv = colorContainer.querySelector('div > div:nth-of-type(4)'); const colorDiv = colorContainer.querySelector('div > div:nth-of-type(4)');
const color = colorDiv.innerText.substring(colorDiv.innerText.indexOf('>') + 1, colorDiv.innerText.indexOf('<', colorDiv.innerText.indexOf('>') + 1)).trim(); const color = colorDiv.innerText.substring(colorDiv.innerText.indexOf('>') + 1, colorDiv.innerText.indexOf('<', colorDiv.innerText.indexOf('>') + 1)).trim();
console.log(color); console.log(color);
const nid = icon.querySelector('.nid'); const nid = icon.querySelector('.nid');
const nidValue = nid.querySelector('div > div').innerText; const nidValue = nid.querySelector('div > div').innerText;
icon.addEventListener('click', function(event) {
store.fetchEtapeData(nidValue);
});
colorContainer.remove();
nid.remove();
const iconElements = icon.querySelectorAll('div');
for (let iconElement of iconElements) {
iconElement.style.backgroundColor = color;
}
icon.removeAttribute('title');
icon.addEventListener('mouseenter', function (event) {
icon.style.transform = `${icon.style.transform} scale(1.1)`;
const popup = document.querySelector('.leaflet-tooltip-center > div');
popup.style.opacity = "1";
});
icon.addEventListener('mouseleave', function (event) {
icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2];
})
}
icon.addEventListener('click', function(event) {
store.fetchEtapeData(nidValue);
}); });
colorContainer.remove();
nid.remove();
const iconElements = icon.querySelectorAll('div');
for (let iconElement of iconElements) {
iconElement.style.backgroundColor = color;
}
icon.removeAttribute('title');
icon.addEventListener('mouseenter', function (event) {
icon.style.transform = `${icon.style.transform} scale(1.1)`;
const popup = document.querySelector('.leaflet-tooltip-center > div');
popup.style.opacity = "1";
});
icon.addEventListener('mouseleave', function (event) {
icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2];
})
} }
// }, 500); }
});
} }
init() init()
} // end CaravaneTheme() } // end CaravaneTheme()
CaravaneTheme() CaravaneTheme()
})(Drupal, drupalSettings) })(jQuery, Drupal, drupalSettings)