modif settings backend style map et ajout field étape couleurs

web/themes/custom/caravane/assets/js/main.js

@@ -53,27 +53,24 @@ import router from './router/router';
       app.mount('#content-modale');
 
       processEtapeLinks(store);
-      processStaticLinks(store)
+      processStaticLinks(store);
+
+      setupEtapeMapPopup(store);
     }
 
 
     function onClickContentLink(e, store, category){
       e.preventDefault();
-      
-      let a = e.currentTarget;
-      let nid = a.dataset.nodeNid;
-      // console.log(nid);
+      let a;
+
+      const li = e.target.closest('li');
+      a = li.querySelector('a');
+    
+      let nid = a.dataset.nodeNid;
 
-      let general_link_fields = document.querySelectorAll('#menu > ul > li > a');
-      for (let field of general_link_fields) {
-        if (field.classList.contains('is-active')) {
-          field.classList.remove('is-active');
-        }
-      }
       if (category === 'etape') {
         store.fetchEtapeData(nid);
       } else if (category === 'static') {
-        e.currentTarget.classList.add('is-active');
         store.fetchStaticData(nid);
       }
 
@@ -92,8 +89,9 @@ import router from './router/router';
 
 
     function processEtapeLinks(store){
-      let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
-      etape_link_fields.forEach((field) => {
+      let etape_li = document.querySelectorAll('#etapes-liste li');
+      etape_li.forEach((li) => {
+        let field = li.querySelector('div.views-field-title');
         let nid = null;
         let classList = field.classList;
         classList.forEach((classe) => {
@@ -101,18 +99,20 @@ import router from './router/router';
           let result = classe.match(reg);
           if (result) {
             nid = result[1];
-            console.log(nid);
           }
         })
         
         if (nid) {
           let a = field.querySelector('a');
           a.setAttribute('data-node-nid', nid);
-          a.addEventListener('click', (e) => onClickContentLink(e, store, 'etape'));
+          li.addEventListener('click', (e) => onClickContentLink(e, store, 'etape'));
         }
-        
-        
-        
+        let couleur = li.querySelector('.views-field-field-couleur .snippets-description').innerText;
+        let iconElements = li.querySelectorAll('.icone-arret > div');
+        for (let element of iconElements) {
+          element.style.backgroundColor = couleur;
+        }
+
       })
     }
 
@@ -123,7 +123,6 @@ import router from './router/router';
       const menuBurger = document.querySelector('#hamburger');
       const menuH2 = document.querySelector('#menu > h2');
       menuButton.addEventListener('click', (e) => { 
-        // e.preventDefault();
         setTimeout(() => {
           menuContainer.classList.toggle('open');
           menuTitle.classList.toggle('open');
@@ -140,6 +139,42 @@ import router from './router/router';
         }
       })
     }
+
+    function setupEtapeMapPopup(store) {
+      setTimeout(() => {
+        const icons = document.querySelectorAll('.leaflet-map-divicon');
+        for (let icon of icons) {
+          const colorContainer = icon.querySelector('.couleur');
+          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 nid = icon.querySelector('.nid');
+          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];
+          })
+        }
+      }, 500);
+    }
     
     init()
   } // end CaravaneTheme()