80 lines
2.8 KiB
JavaScript
80 lines
2.8 KiB
JavaScript
|
export function processClickableElements() {
|
||
|
|
return {
|
||
|
|
etapeListLinks: processEtapeLinks(),
|
||
|
|
generalListLinks: processStaticLinks(),
|
||
|
|
logoLink: processLogoLink(),
|
||
|
|
mapIcons: processMapIcons(),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function processEtapeLinks() {
|
||
|
|
const etape_li = document.querySelectorAll('#etapes-liste li');
|
||
|
|
etape_li.forEach((li) => {
|
||
|
|
const etape_link = li.querySelector('a.etape-link');
|
||
|
|
etape_link.addEventListener('click', (e) => e.preventDefault());
|
||
|
|
const couleur = etape_link.dataset.couleur;
|
||
|
|
li.dataset.href = etape_link.attributes.href.value;
|
||
|
|
const iconElements = li.querySelectorAll('.icone-arret > div');
|
||
|
|
for (let element of iconElements) {
|
||
|
|
element.style.backgroundColor = couleur;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return etape_li;
|
||
|
|
}
|
||
|
|
|
||
|
|
function processStaticLinks() {
|
||
|
|
const general_link_fields = document.querySelectorAll('#menu > ul > li > a');
|
||
|
|
for (let i = 0; i < general_link_fields.length; i ++) {
|
||
|
|
let general_link_path = general_link_fields[i].getAttribute('data-drupal-link-system-path');
|
||
|
|
if (general_link_path && general_link_path !== '<front>') {
|
||
|
|
const match = [...general_link_path.match(/^node\/(\d+)$/)];
|
||
|
|
if (match) {
|
||
|
|
const nid = match[1];
|
||
|
|
general_link_fields[i].setAttribute('data-nid', parseInt(nid));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
general_link_fields[i].addEventListener('click', (e) => e.preventDefault());
|
||
|
|
}
|
||
|
|
|
||
|
|
return general_link_fields;
|
||
|
|
}
|
||
|
|
|
||
|
|
function processLogoLink() {
|
||
|
|
const logo = document.querySelector('#block-caravane-logocaravane a');
|
||
|
|
logo.addEventListener('click', (e) => e.preventDefault());
|
||
|
|
|
||
|
|
return logo;
|
||
|
|
}
|
||
|
|
|
||
|
|
function processMapIcons() {
|
||
|
|
const icons = document.querySelectorAll('.leaflet-map-divicon');
|
||
|
|
for (let icon of icons) {
|
||
|
|
icon.setAttribute('title', '');
|
||
|
|
|
||
|
|
const hrefContainer = icon.querySelector('.url');
|
||
|
|
icon.dataset.href = hrefContainer.innerText;
|
||
|
|
hrefContainer.style.display = "none";
|
||
|
|
|
||
|
|
const colorContainer = icon.querySelector('.couleur');
|
||
|
|
let color = colorContainer.innerText;
|
||
|
|
colorContainer.style.display = "none";
|
||
|
|
|
||
|
|
const iconElements = icon.querySelectorAll('div');
|
||
|
|
for (let iconElement of iconElements) {
|
||
|
|
iconElement.style.backgroundColor = color;
|
||
|
|
}
|
||
|
|
|
||
|
|
icon.addEventListener('mouseenter', () => {
|
||
|
|
icon.style.transform = `${icon.style.transform} scale(1.1)`;
|
||
|
|
const popup = document.querySelector('.leaflet-tooltip-center > div');
|
||
|
|
popup.style.opacity = "1";
|
||
|
|
});
|
||
|
|
|
||
|
|
icon.addEventListener('mouseleave', () => {
|
||
|
|
icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return icons;
|
||
|
|
}
|