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

// import { createApp } from 'vue'
import '../scss/main.scss'

import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";
import Splitting from "splitting";

// import Content from './vuejs/Content.vue'

// import REST from './api/rest-axios'

// import LocomotiveScroll from 'locomotive-scroll';
// const scroll = new LocomotiveScroll();


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

//   'use strict';

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

// } (Drupal));

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


    //  ___      _ _
    // |_ _|_ _ (_) |_
    //  | || ' \| |  _|
    // |___|_||_|_|\__|
    function init () {
      console.log('LeShedTheme init()')
      initTitles();
      initBurgerMenu();
      // initVues()
    }


    function onWindowResize() {
      _cardsForms.forEach(({card, forme, formepos}) => {
        // console.log(`card`, card, 'forme', forme, 'formepos', formepos);
        forme.style.top = `${card.offsetTop + formepos.top}px`;
        forme.style.left = `${card.offsetLeft + formepos.left}px`;
      })
    }

    function randomInt(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    }

    function initTitles(){
      let titles = document.querySelectorAll('#block-leshed-identitedusite>a, article.node-type-projet>h2');

      for (const txt of titles) {
        console.log(txt.innerText, '- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -');
        let splitted = Splitting({ target: txt, by: 'chars'});
        console.log("splitted", splitted);

        for (const word of splitted[0].words) {
          let chars = word.getElementsByClassName('char');
          console.log("chars", chars);

          for (const char of chars) {
            console.log(char.innerText);

            // Weight
            let wght = randomInt(150, 600);//200 + Math.random() * 800;

            // Ital
            let ital = Math.random() > 0.7 ? 1 : 0;
            // char.style.fontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${ital}`;
            char.style.fontVariationSettings = `'wght' ${wght}`;
            char.style.fontStyle = ital ? 'italic' : 'normal';

            // // Letter spacing
            // let wdth_wght_ratio = wdth*wght / 10000;
            // console.log('wdth_wght_ratio',wdth_wght_ratio);

            // char.style.letterSpacing = wdth_wght_ratio < 1 ? "0.5em" : ital ? "0.05em" : 0;
            // if (ital) {
            //   let prev_char = char.previousSibling;
            //   if (prev_char) {
            //     char.style.letterSpacing = prev_char.style.letterSpacing = "0.03em";
            //   }
            // }
          }
        }



      }
    }

    function initBurgerMenu() {
      let header_right = document.getElementById('burger-btn');
      header_right.parentElement.addEventListener('click', function(e){
        // console.log('click header_right', this);
        this.firstElementChild.toggleAttribute('opened');
        this.firstElementChild.nextElementSibling.toggleAttribute('opened');
      })
    }

    // function initVues(){
    //   console.log('initVues');

    //   // initVueContent();


    // }

    // function initVueContent(){
    //   createApp(Content).mount('main[role="main"]');

    //   // processEtapeLinks();
    // }


    // function onClickEtapeLink(e){
    //   e.preventDefault();

    //   let a = e.currentTarget;
    //   let nid = a.dataset.nodeNid;
    //   console.log(nid);

    //   getNodeData(nid);

    //   return null;
    // }


    // function processEtapeLinks(){
    //   let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
    //   etape_link_fields.forEach((field, index) => {
    //     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', onClickEtapeLink);
    //     }


    //   })
    // }

    // function getNodeData(nid){
    //   const params = {
    //   }
    //   REST.get(`/node/${nid}?_format=json`, params)
    //   .then((data) => {
    //     console.log('user REST getUser data', data)
    //   })
    //   .catch(error => {
    //     console.warn('Issue with getNodedata', error)
    //     Promise.reject(error)
    //   })
    // }

    init()
  } // end LeShedTheme()

  LeShedTheme()
})(Drupal, drupalSettings)