bachir/drupal-mathallo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2026-02-20 11:52:03 +01:00
parent c8c5901a6a
commit 207f12052e
2 changed files with 111 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web_main/themes/custom/mathallo/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

56
web_main/themes/custom/mathallo/assets/js/main.js
View File

@@ -35,7 +35,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
console.log('drupalSettings', drupalSettings)
// liste forme file names
const formesclasses = [
const _formesclasses = [
'pyramide',
'prct',
'infinite',
@@ -48,9 +48,9 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
'cylindre'
]
let sizes = [];
// let _sizes = [];
let cardsForms = [];
let _cardsForms = [];
// ___ _ _
// |_ _|_ _ (_) |_
@@ -95,7 +95,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
}
function onWindowResize() {
cardsForms.forEach(({card, forme, formepos}) => {
_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`;
@@ -106,13 +106,13 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
// console.log('container', container);
// listes all available sizes
// listes all available _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)
// 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);
// console.log('_sizes', _sizes);
let cards = document.querySelectorAll('article[role="home-presentation"], .field-card, .node-type-chapitre, .node-type-partie');
// console.log('cards', cards);
@@ -126,29 +126,40 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
// random forme
// avoid duplicated formes
let n = Math.round(Math.random() * (formesclasses.length -1));
let n = Math.round(Math.random() * (_formesclasses.length -1));
while (used_n.includes(n)) {
n = Math.round(Math.random() * (formesclasses.length -1));
n = Math.round(Math.random() * (_formesclasses.length -1));
}
used_n.push(n);
// console.log('n',n, 'class', formesclasses[n]);
// console.log('n',n, 'class', _formesclasses[n]);
let forme = await createForme(card, n);
container.prepend(forme);
// register forme
cardFormObject.forme = forme;
// register relative position of forme against card
cardFormObject.formepos = {
left: forme.offsetLeft - card.offsetLeft,
top: forme.offsetTop - card.offsetTop
}
// register cards and formes
cardsForms.push(cardFormObject);
// console.log('cardsForms', cardsForms);
_cardsForms.push(cardFormObject);
// console.log('_cardsForms', _cardsForms);
// create GSAP animations
createGsapAnims(card, forme, oddeven);
// inverse oddeven
oddeven*=-1;
}
window.addEventListener('resize', onWindowResize);
}
function createGsapAnims(card, forme, oddeven){
// Snap au centre de la fenêtre pour la card en utilisant le plugin Snap de GSAP
// ScrollTrigger.create({
@@ -233,24 +244,17 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
duration: 0.1
}, 0.7); // Juste après le centre
// inverse oddeven
oddeven*=-1;
}
window.addEventListener('resize', onWindowResize);
}
async function createForme(card, n){
let forme = document.createElement('div');
forme.classList.add('bg-forme');
// forme.classList.add(formesclasses[n]);
// forme.classList.add(_formesclasses[n]);
// inject svg from file
const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${formesclasses[n]}.svg`)
const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${_formesclasses[n]}.svg`)
const svgText = await response.text();
forme.innerHTML = svgText;
@@ -261,7 +265,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
let wh = 200 + Math.random()*300;
// OR
// pic a size
// let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];
// let wh = _sizes.splice(Math.floor(Math.random() * _sizes.length), 1)[0];
// record the original scale for stroke width rescalling
const init_wh = svgNode.getAttribute('width');
// set the new size