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 { useContentStore } from './stores/content';

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

      processEtapeLinks(store);
      processStaticLinks(store)
    }


    function onClickContentLink(e, store, category){
      e.preventDefault();
      
      let a = e.currentTarget;
      let nid = a.dataset.nodeNid;
      console.log(nid);

      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 > 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_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
      etape_link_fields.forEach((field) => {
        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];
            console.log(nid);
          }
        })
        
        if (nid) {
          let a = field.querySelector('a');
          a.setAttribute('data-node-nid', nid);
          a.addEventListener('click', (e) => onClickContentLink(e, store, 'etape'));
        }
        
        
        
      })
    }

    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) => {
        // e.preventDefault();
        menuContainer.classList.toggle('open');
        menuTitle.classList.toggle('open');
        menuBurger.classList.toggle('open');
        menuH2.classList.toggle('open');
      })
    }
    
    init()
  } // end CaravaneTheme()

  CaravaneTheme()
})(Drupal, drupalSettings)