placed cards formes

web_main/themes/custom/mathallo/assets/js/main.js

@@ -44,7 +44,8 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       console.log('MathalloTheme init()')
       initBurgerMenu();
       initPartieFrontBackCardSwitch();
-      initBgAnime()
+      initBgFormes();
+      initBgAnime();
       // initVues()
     }
 
@@ -77,18 +78,115 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       
     }
 
+    async function initBgFormes(){
+      const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
+      console.log('container', container);
+      
+      // liste forme file names
+      const formesclasses = [
+        'pyramide',
+        'prct',
+        'infinite',
+        'pi',
+        'supeg',
+        'cone',
+        'croissant',
+        'cube',
+        'diamant',
+        'cylindre'
+      ]
+
+      // listes all available sizes
+      let sizes = []
+      let min = 150;
+      let increment = Math.round((350 / (formesclasses.length -1)));
+      for (let i = 0; i < formesclasses.length; i++) {
+        sizes.push( min + increment * i)
+      }
+      console.log('sizes', sizes);
+
+      let cards = document.querySelectorAll('.field-card, .node-type-chapitre, .node-type-partie');
+      console.log('cards', cards);
+      let used_n = [];
+      for (const card of cards) {
+        console.log('card', card);
+        
+        let forme = document.createElement('div');
+        forme.classList.add('bg-forme');
+
+        // random forme
+        // avoid duplicated formes
+        let n = Math.round(Math.random() * (formesclasses.length -1));
+        while (used_n.includes(n)) {
+          n = Math.round(Math.random() * (formesclasses.length -1));
+        }
+        used_n.push(n);
+        console.log('n',n, 'class', formesclasses[n]);
+        // forme.classList.add(formesclasses[n]);
+        const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${formesclasses[n]}.svg`)
+        const svgText = await response.text();
+        forme.innerHTML = svgText;
+        const svgNode = forme.querySelector('svg');
+        const init_wh = svgNode.getAttribute('width');
+
+        // random size
+        // let wh = 150 + Math.random()*350;
+
+        // pic a size
+        let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];
+
+        forme.style.width = forme.style.height = `${wh}px`;
+        svgNode.setAttribute('width', wh);
+        svgNode.setAttribute('height', wh);
+
+        // keep stroke width to visualy 1px
+        let scale = wh / init_wh;
+        const paths = svgNode.querySelectorAll('path, line, rect, circle, ellipse, polygon, polyline');
+        console.log('paths', paths);
+        
+        paths.forEach(path => {
+          const init_SW = parseFloat(path.getAttribute('stroke-width')) || 1;
+          let new_SW = init_SW / scale;
+          path.setAttribute('stroke-width', `${new_SW}px`);
+          path.style.strokeWidth = `${new_SW}px`;
+        });
+        
+
+        // random position
+        // top
+        let top = card.offsetTop + card.clientHeight/2 - wh/2;
+        forme.style.top = `${top}px`;
+
+        // left right
+        if (card.classList.contains('field-principes-reflexion')) {
+          // left
+          forme.style.left = `${card.offsetLeft - wh}px`;
+        } else if(card.classList.contains('field-en-pratique')) {
+          // right
+          forme.style.left = `${card.offsetLeft + card.clientWidth}px`;
+        } else {
+          // random
+          forme.style.left = Math.random() > 0.5 ? `${card.offsetLeft - wh}px` : `${card.offsetLeft + card.clientWidth}px`;
+        }
+        
+
+        container.prepend(forme);
+      }
+    }
+
     function initBgAnime(){
-      // gsap.to('body', {
-      //   scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport
-      //   backgroundPositionY: 10
-      // });
-      // ScrollSmoother.create({
-      //   smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
-      //   effects: true, // looks for data-speed and data-lag attributes on elements
-      //   smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
-      //   wrapper: 'main[role="main"]',
-      //   content: 'main[role="main"]>.layout-content'
-      // });
+      gsap.to('body', {
+        scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport
+        backgroundPositionY: 10
+      });
+
+      ScrollSmoother.create({
+        smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
+        effects: true, // looks for data-speed and data-lag attributes on elements
+        smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
+        wrapper: 'main[role="main"]',
+        content: 'main[role="main"]>.layout-content'
+      });
     }
 
     // function initVues(){