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

capsule modale click (not over)

Browse Source
This commit is contained in:
bachir
2026-09-15 11:25:50 +02:00
parent f0ac0ded56
commit b78b71691e
5 changed files with 147 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_main/themes/custom/mathallo/assets/js/main.js
+139 -63
View File
@@ -54,9 +54,9 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
let smoother = null;
let fn_modale;
// let fn_modale;
let mouse_pos = {x:0,y:0};
// let mouse_pos = {x:0,y:0};
// ___ _ _
// |_ _|_ _ (_) |_
@@ -370,15 +370,10 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
function onUpdateSmoother(sm){
// console.log('onUpdateSmoother', sm);
// let content = sm.content();
updateFnModalePos();
// updateFnModalePos();
}
function initFootnotes(){
// let container = document.querySelector('main[role="main"]>div.layout-content>.wrapper');
let container = document.body;
fn_modale = document.createElement('div');
fn_modale.classList.add('fn-modale');
container.append(fn_modale);
let fns = document.querySelectorAll('.footnote__citation');
// console.log('fns', fns);
@@ -395,83 +390,164 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
fn.querySelector('span.footnote-link').classList.add(`forme-${_formesclasses[n]}`);
// events
fn.addEventListener('mouseenter', onMouseEnterFN);
fn.addEventListener('mouseleave', onMouseLeaveFN);
// fn.addEventListener('mouseenter', onMouseEnterFN);
// fn.addEventListener('mouseleave', onMouseLeaveFN);
// fn.addEventListener('mousemove', onMouseMove);
fn.addEventListener('click', onClickFootnote);
}
window.addEventListener('mousemove', onMouseMove);
// window.addEventListener('mousemove', onMouseMove);
}
function onMouseEnterFN(event){
console.log('onMouseEnterFN, event:', event);
fn_modale.innerHTML = event.target.querySelector('.footnote-content').innerHTML;
// function onMouseEnterFN(event){
// console.log('onMouseEnterFN, event:', event);
// fn_modale.innerHTML = event.target.querySelector('.footnote-content').innerHTML;
// fn_modale.classList.add('visible');
// // fn_modale.style.left = `${event.clientX}px`;
// // fn_modale.style.top = `${event.clientY}px`;
// }
// function onMouseLeaveFN(event){
// console.log('onMouseLeaveFN, event:', event);
// 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`;
// }
function onClickFootnote(event){
event.preventDefault();
event.stopPropagation();
console.log('onClickFN, event:', event);
let fn = event.currentTarget;
let container = fn.offsetParent;
removeModals();
let fn_modale = document.createElement('div');
fn_modale.classList.add('fn-modale');
container.append(fn_modale);
fn_modale.innerHTML = fn.querySelector('.footnote-content').innerHTML;
// contraintes de taille
let decalage = 20;
let maxW = container.clientWidth * 2 / 3;
let maxH = window.innerHeight * 0.3;
fn_modale.style.maxWidth = `${maxW}px`;
fn_modale.style.maxHeight = `${maxH}px`;
fn_modale.style.overflowY = 'auto';
// mesurer la modale (offsetWidth/Height force le layout)
let modW = fn_modale.offsetWidth;
let modH = fn_modale.offsetHeight;
// position de la footnote dans le container
let fnL = fn.offsetLeft;
let fnT = fn.offsetTop;
let fnW = fn.offsetWidth;
let fnH = fn.offsetHeight;
let contW = container.clientWidth;
let contH = container.clientHeight;
let left, top;
// horizontal : droite si on est a gauche, gauche si on est a droite
if (fnL + fnW / 2 > contW / 2) {
// cote droit → modale a gauche de la footnote
left = fnL - modW - decalage;
if (left < decalage) left = decalage;
} else {
// cote gauche → modale a droite de la footnote
left = fnL + fnW + decalage;
if (left + modW > contW - decalage) left = contW - modW - decalage;
}
// vertical : bas si on est en haut, haut si on est en bas
if (fnT + fnH / 2 > contH / 2) {
// bas → modale au-dessus de la footnote
top = fnT - modH - decalage;
if (top < decalage) top = decalage;
} else {
// haut → modale en-dessous de la footnote
top = fnT + fnH + decalage;
if (top + modH > contH - decalage) top = contH - modH - decalage;
}
fn_modale.style.left = `${left}px`;
fn_modale.style.top = `${top}px`;
fn_modale.classList.add('visible');
// fn_modale.style.left = `${event.clientX}px`;
// fn_modale.style.top = `${event.clientY}px`;
}
function onMouseLeaveFN(event){
console.log('onMouseLeaveFN, event:', event);
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`;
container.addEventListener('click', onClickFNParent);
}
function onMouseMove(event){
// console.log('onMouseMove, event:', event);
mouse_pos = {
x:event.clientX,
y:event.clientY
function onClickFNParent(event) {
console.log('onClickFNParent, event:', event);
removeModals();
event.target.removeEventListener('click', onClickFNParent);
}
function removeModals(){
let fn_modales = document.querySelectorAll('div.fn-modale');
for (const fnm of fn_modales) {
fnm.remove();
}
updateFnModalePos();
}
// function onMouseMove(event){
// // console.log('onMouseMove, event:', event);
// mouse_pos = {
// x:event.clientX,
// y:event.clientY
// }
// // updateFnModalePos();
// }
function updateFnModalePos(){
if (smoother) {
let cont = smoother.content();
console.log('cont', cont);
// function updateFnModalePos(){
// if (smoother) {
// let cont = smoother.content();
// console.log('cont', cont);
let rect = cont.getBoundingClientRect();
// let rect = cont.getBoundingClientRect();
// 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;
// // 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`;
}
// 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`
}
// // 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);
// console.log('window', window);
} else{
console.warn('no smoother');
// } else{
// console.warn('no smoother');
}
// }
}
// }
// function initVues(){
// console.log('initVues');