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

better capsule (aka footnotes) positionning

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2026-07-08 14:47:55 +02:00
parent 015e3654fe
commit e2f4c717e6
4 changed files with 103 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -382,8 +382,19 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
let fns = document.querySelectorAll('.footnote__citation');
// console.log('fns', fns);
let used_n = [];
for (const fn of fns) {
console.log('fn', fn);
// set a random class for icone
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);
fn.querySelector('span.footnote-link').classList.add(`forme-${_formesclasses[n]}`);
// events
fn.addEventListener('mouseenter', onMouseEnterFN);
fn.addEventListener('mouseleave', onMouseLeaveFN);
// fn.addEventListener('mousemove', onMouseMove);
@@ -403,9 +414,11 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
}
function onMouseLeaveFN(event){
console.log('onMouseLeaveFN, event:', event);
// fn_modale.innerHTML = event.target.dataset.content;
fn_modale.classList.remove('visible');
fn_modale.classList.remove('visible');
setTimeout(function(){
fn_modale.innerHTML = "";
}, 1000);
// fn_modale.style.left = `${event.clientX}px`;
// fn_modale.style.top = `${event.clientY}px`;
@@ -423,15 +436,33 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
function updateFnModalePos(){
if (smoother) {
let cont = smoother.content();
console.log('cont', cont);
let rect = cont.getBoundingClientRect();
fn_modale.style.left = `${mouse_pos.x - rect.left}px`;
let componsed_mouse_posy = mouse_pos.y - rect.top;
// if (componsed_mouse_posy > window.innerHeight) {
fn_modale.style.top = `${componsed_mouse_posy - fn_modale.clientHeight + 60}px`;
// } else{
// fn_modale.style.top = `${componsed_mouse_posy - fn_modale.clientHeight * 0.7}px`;
// }
// console.log(`mouse_pos.x=${mouse_pos.x} | window.innerWidth/2=${window.innerWidth/2}`);
let compensed_mouse_pos = {
x: mouse_pos.x - rect.left,
y: mouse_pos.y - rect.top + cont.offsetTop
}
let decalage = 20;
if (mouse_pos.x < window.innerWidth/2) {
fn_modale.style.left = `${compensed_mouse_pos.x + decalage}px`;
}else{
fn_modale.style.left = `${compensed_mouse_pos.x - fn_modale.clientWidth - decalage}px`;
}
// let componsed_mouse_posy = mouse_pos.y - rect.top + 370;
if (mouse_pos.y < window.innerHeight / 2) {
// fn_modale.style.top = `${componsed_mouse_posy - fn_modale.clientHeight + 60}px`;
fn_modale.style.top = `${compensed_mouse_pos.y + decalage}px`
} else{
// fn_modale.style.top = `${componsed_mouse_posy - 60}px`;
fn_modale.style.top = `${compensed_mouse_pos.y - fn_modale.clientHeight - decalage}px`
}
console.log('window', window);