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

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import '../scss/main.scss'
import Modale from './vuejs/Modale.vue'

import VueImageZoomer from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';

import { useContentStore } from './stores/content';
import router from './router/router';

// Working with the history API
// https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API

// /**
//  * @file
//  * reha behaviors.
//  * https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview
//  */
// (function (Drupal) {

//   'use strict';

//   Drupal.behaviors.reha = {
//     attach: function (context, settings) {
//       console.log('It works!');
//     }
//   };

// } (Drupal));

(function ($, Drupal, drupalSettings) {
  const CaravaneTheme = function () {
    const _is_front = drupalSettings.path.isFront
    console.log('drupalSettings', drupalSettings)

    // let _I18n

    //  ___      _ _
    // |_ _|_ _ (_) |_
    //  | || ' \| |  _|
    // |___|_||_|_|\__|
    function init () {
      console.log('CaravaneTheme init()')
      initVues()
      toggleMenu()
    }

    function initVues(){
      initVueContentModale();
    }

    function initVueContentModale(){
      const app = createApp(Modale)
        .use(createPinia()).use(router)
        .use(VueImageZoomer);
      const store = useContentStore();
      app.mount('#content-modale');

      processEtapeLinks(store);
      processStaticLinks(store);

      setupEtapeMapPopup(store);
    }


    function onClickContentLink(e, store, category){
      e.preventDefault();
      let a;

      const li = e.target.closest('li');
      a = li.querySelector('a');
    
      let nid = a.dataset.nodeNid;

      if (category === 'etape') {
        store.fetchEtapeData(nid);
      } else if (category === 'static') {
        store.fetchStaticData(nid);
      }

      return null;
    }

    function processStaticLinks(store){
      let general_link_fields = document.querySelectorAll('#menu > ul > li:not(:first-of-type) > a');
      for (let field of general_link_fields) {
        let general_link_href = field.getAttribute('href');
        const nid = general_link_href.charAt(general_link_href.length-1);
        field.setAttribute('data-node-nid', nid);
        field.addEventListener('click', (e) => onClickContentLink(e, store, 'static'));
      }
    }


    function processEtapeLinks(store){
      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) => {
          let reg = /data-node-(\d+)/;
          let result = classe.match(reg);
          if (result) {
            nid = result[1];
          }
        })
        
        if (nid) {
          let a = field.querySelector('a');
          a.setAttribute('data-node-nid', nid);
          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;
        }

      })
    }

    function toggleMenu() {
      const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
      const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
      const menuTitle = document.querySelector('#menu-title');
      const menuBurger = document.querySelector('#hamburger');
      const menuH2 = document.querySelector('#menu > h2');
      menuButton.addEventListener('click', (e) => { 
        setTimeout(() => {
          menuContainer.classList.toggle('open');
          menuTitle.classList.toggle('open');
          menuBurger.classList.toggle('open');
          menuH2.classList.toggle('open');
        }, 50);
      })
      document.addEventListener('click', (e) => {
        if (!menuContainer.contains(e.target) && !menuBurger.contains(e.target)) {
          menuContainer.classList.remove('open');
          menuTitle.classList.remove('open');
          menuBurger.classList.remove('open');
          menuH2.classList.remove('open');  
        }
      })
    }

    function setupEtapeMapPopup(store) {
      Drupal.behaviors.customLeafletInteraction = {
        attach: function(context, settings) {
          $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
            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();
              console.log(color);
              

              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];
              })
            }

          });
        }
      }
    }
    
    init()
  } // end CaravaneTheme()

  CaravaneTheme()
})(jQuery, Drupal, drupalSettings)