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

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

import { useEtapeStore } from './stores/etape';

// 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(){
      initVueEtapeModale();
    }

    function initVueEtapeModale(){
      const app = createApp(Etape).use(createPinia());
      const store = useEtapeStore();
      app.mount('#etape-modale');

      processEtapeLinks(store);
    }


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

      store.fetchEtapeData(nid);

      return null;
    }


    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) => onClickEtapeLink(e, store));
        }
        
        
        
      })
    }

    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)