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 { useMapStore } from './stores/mapState';
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);

    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();
      const mapStore = useMapStore();
      app.mount('#content-modale');

      setHamburgerWhenLogged();

      Drupal.behaviors.customLeafletInteraction = {
        attach: function(context, settings) {
          $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) { 
            mapStore.defaultMapCenter = map.getCenter();
            mapStore.maxZoom = settings.settings.maxZoom;
            mapStore.defaultZoom = settings.settings.minZoom;
            

            initFirstLoadRouting(store, map);
            processEtapeLinks(store, map);
            processStaticLinks(store, map);
            processHeaderLogo(store, map);
            setupEtapeMapPopup(store, map);
          });
        }
      }
    }

    function initFirstLoadRouting(store, map){
      var decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));
      console.log('decoupled_origin', decoupled_origin);


      if(decoupled_origin && decoupled_origin.entity_id){
        // Si c'était moi je ne ferais qu'une seule function fetchdata capable de dealer avec les différent type de contenus
        switch (decoupled_origin.entity_bundle) {
          case 'etape':
            store.fetchEtapeData(decoupled_origin.entity_id, map);
            break;
          case 'static':
            store.fetchEtapeData(decoupled_origin.entity_id, map);
            break;
        }

        router.push({
          // name: decoupled_origin.entity_bundle,
          path: decoupled_origin.url,
          // params: {
          //   title: decoupled_origin.entity_uuid
          // },
          // props: {
          //   nid: decoupled_origin.entity_id
          // }
        });

        // reset the storage
        window.localStorage.removeItem("decoupled_origin");
      }
    }

    function onClickContentLink(e, store, map, category){
      e.preventDefault();
      let a;
      
      if (e.target.tagName !== 'IMG') {
        const li = e.target.closest('li');
        a = li.querySelector('a');
      } else {
        a = e.target.closest('a');
      }
    
      let nid = a.dataset.nid;

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

      return null;
    }

    function processStaticLinks(store, map) {
      let general_link_fields = document.querySelectorAll('#menu > ul > li > a');
      for (let i =1; i <  general_link_fields.length; i ++) {
        let general_link_path = general_link_fields[i].getAttribute('data-drupal-link-system-path');
        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) => onClickContentLink(e, store, map, 'static'));
        }
      }
    }

    function processHeaderLogo(store, map) {
      const logo = document.querySelector('#block-caravane-logocaravane a');
      logo.addEventListener('click', (e) => onClickContentLink(e, store, map, 'static'));
    }

    function processEtapeLinks(store, map) {
      let etape_li = document.querySelectorAll('#etapes-liste li');
      etape_li.forEach((li) => {
        let etape_link = li.querySelector('a.etape-link');
        let nid = etape_link.dataset.nid;
        
        if (nid) {
          li.addEventListener('click', (e) => onClickContentLink(e, store, map, 'etape'));
        }
        let couleur = etape_link.dataset.couleur;
        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 setHamburgerWhenLogged() {
      if (drupalSettings.user.uid != 0) {
        const menuBurger = document.querySelector('#hamburger');
        const menuTitle = document.querySelector('#menu-title');
        const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
        const header = document.querySelector('.dialog-off-canvas-main-canvas');
        const headerTop = header.getBoundingClientRect().top;

        menuTitle.style.top = `${headerTop}px`;        
        menuBurger.style.top = `${headerTop}px`;
        menuContainer.style.paddingTop = `${headerTop}px`;
      }
    }

    function setupEtapeMapPopup(store, map) {
      const icons = document.querySelectorAll('.leaflet-map-divicon');
      for (let icon of icons) {
        const colorContainer = icon.querySelector('.couleur');
        let colorDivs = colorContainer.querySelectorAll('.separated-content');
        let color;
        colorDivs.forEach((div) => {
          if (div.innerText.startsWith('<div class="snippets-description">')) {
            color = div.innerText;
          }
        });              
        color = color.substring(color.indexOf('>') + 1, color.indexOf('<', color.indexOf('>') + 1)).trim();

        const nid = icon.querySelector('.nid');
        const nidValue = nid.querySelector('.separated-content').innerText;

        icon.addEventListener('click', function(event) {                
          store.fetchEtapeData(nidValue, map);
        });
        
        colorContainer.style.display = "none";
        nid.style.display = "none";
        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)