refactor du système de routing (EXPORTS DES SETTINGS DRUPAL)

web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js

@@ -0,0 +1,80 @@
+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;
+}