started titles splitted textes

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

@@ -1,5 +1,10 @@
 // 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'
@@ -36,6 +41,7 @@ import '../scss/main.scss'
     // |___|_||_|_|\__|
     function init () {
       console.log('LeShedTheme init()')
+      initTitles();
       initBurgerMenu();
       // initVues()
     }
@@ -49,6 +55,53 @@ import '../scss/main.scss'
       })
     }
 
+    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){