capsule modale click (not over)

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

@@ -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('mouseenter', onMouseEnterFN);
-        fn.addEventListener('mouseleave', onMouseLeaveFN);
+        // fn.addEventListener('mouseleave', onMouseLeaveFN);
         // fn.addEventListener('mousemove', onMouseMove);
+        fn.addEventListener('click', onClickFootnote);
       }
-      window.addEventListener('mousemove', onMouseMove);
+      // window.addEventListener('mousemove', onMouseMove);
 
     }
 
-    function onMouseEnterFN(event){
+    // function onMouseEnterFN(event){
-      console.log('onMouseEnterFN, event:', event);
+    //   console.log('onMouseEnterFN, event:', event);
-      fn_modale.innerHTML = event.target.querySelector('.footnote-content').innerHTML;
+    //   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');
 
-
+      container.addEventListener('click', onClickFNParent);
-      // 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 onMouseMove(event){
+    function onClickFNParent(event) {
-      // console.log('onMouseMove, event:', event);
+      console.log('onClickFNParent, event:', event);
-      mouse_pos = {
+      removeModals();
-        x:event.clientX,
+      event.target.removeEventListener('click', onClickFNParent);
-        y:event.clientY
-      }
-      updateFnModalePos();
     }
 
-    function updateFnModalePos(){
+    function removeModals(){
-      if (smoother) {
+      let fn_modales = document.querySelectorAll('div.fn-modale');
-        let cont = smoother.content();
+      for (const fnm of fn_modales) {
-        console.log('cont', cont);
+        fnm.remove();
-
-        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;
-
-        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`;
     }
+    // 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);
+
+    //     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;
+
+    //     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;
+    //     // let componsed_mouse_posy = mouse_pos.y - rect.top + 370;
-        if (mouse_pos.y < window.innerHeight / 2) {
+    //     if (mouse_pos.y < window.innerHeight / 2) {
-          // fn_modale.style.top = `${componsed_mouse_posy - fn_modale.clientHeight + 60}px`;
+    //       // fn_modale.style.top = `${componsed_mouse_posy - fn_modale.clientHeight + 60}px`;
-          fn_modale.style.top = `${compensed_mouse_pos.y + decalage}px`
+    //       fn_modale.style.top = `${compensed_mouse_pos.y + decalage}px`
-        } else{
+    //     } else{
-          // fn_modale.style.top = `${componsed_mouse_posy - 60}px`;
+    //       // fn_modale.style.top = `${componsed_mouse_posy - 60}px`;
-          fn_modale.style.top = `${compensed_mouse_pos.y - fn_modale.clientHeight - decalage}px`
+    //       fn_modale.style.top = `${compensed_mouse_pos.y - fn_modale.clientHeight - decalage}px`
-        }
+    //     }
 
 
-        console.log('window', window);
+    //     console.log('window', window);
 
-      } else{
+    //   } else{
-        console.warn('no smoother');
+    //     console.warn('no smoother');
 
-      }
+    //   }
 
-    }
+    // }
 
     // function initVues(){
     //   console.log('initVues');

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

@@ -824,6 +824,7 @@ div.footnote__citations-wrapper{
     cursor: pointer;
 
     span.footnote-link{
+      pointer-events: none;
       display: inline-block;
       $icon_wh:1em;
       width: $icon_wh; height: $icon_wh;