better capsule (aka footnotes) positionning

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

@@ -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`;
+        // console.log(`mouse_pos.x=${mouse_pos.x} | window.innerWidth/2=${window.innerWidth/2}`);
-        let componsed_mouse_posy = mouse_pos.y - rect.top;
+        let compensed_mouse_pos = {
-        // if (componsed_mouse_posy > window.innerHeight) {
+          x: mouse_pos.x - rect.left,
-          fn_modale.style.top = `${componsed_mouse_posy - fn_modale.clientHeight + 60}px`;
+          y: mouse_pos.y - rect.top + cont.offsetTop
-        // } else{
+        }
-        //   fn_modale.style.top = `${componsed_mouse_posy - fn_modale.clientHeight * 0.7}px`;
+        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);
 

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

@@ -750,21 +750,69 @@ footer[role="contentinfo"]{
 //  | |_ / _ \ / _ \| __| '_ \ / _ \| __/ _ \/ __|
 //  |  _| (_) | (_) | |_| | | | (_) | ||  __/\__ \
 //  |_|  \___/ \___/ \__|_| |_|\___/ \__\___||___/
+div.footnote__citations-wrapper{
+  display: inline;
+  .footnote__citation{
+    display: inline;
+    text-decoration: underline;
+    text-decoration-style: dashed;
+    cursor: pointer;
 
-.footnote__citation{
+    span.footnote-link{
-  text-decoration: underline;
+      display: inline-block;
-  text-decoration-style: dashed;
+      $icon_wh:1em;
-  cursor: pointer;
+      width: $icon_wh; height: $icon_wh;
-}
+      text-indent: $icon_wh * 2;
+      overflow: hidden;
+      vertical-align:baseline;
 
-aside.footnote-content{
+      background-color: $rose;
-  display:none;
+      // border: 1px solid red;
+      mask-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg');
+      mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      &.forme-pyramide{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg');
+      }
+      &.forme-prct{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg');
+      }
+      &.forme-pi{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg');
+      }
+      &.forme-infinite{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg');
+      }
+      &.forme-supeg{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg');
+      }
+      &.forme-cone{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg');
+      }
+      &.forme-croissant{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg');
+      }
+      &.forme-cube{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg');
+      }
+      &.forme-diamant{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg');
+      }
+      &.forme-cylindre{
+        mask-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg');
+      }
+    }
+  }
+
+  // template.footnote-content{
+  //   display:none;
+  // }
 }
 
 .fn-modale{
   @include card;
   // display: none;
-  opacity: 0;
   transition: opacity 0.25s ease-in-out;
   // transition-delay: ;
   position: absolute;
@@ -773,6 +821,9 @@ aside.footnote-content{
   max-width: 40em;
   padding:1em 1.5em 1em 1em;
   border:  1px dashed $bleu_site;
+  margin: 0;
+
+  opacity: 0;
   &.visible{
     // display: block;
     opacity: 1;

web_main/themes/custom/mathallo/templates/footnote-link.html.twig

@@ -1,7 +1,7 @@
 {% apply footnotes_spaceless %}
   {# footnotes/footnote-link.html.twig #}
   <div class="footnote__citation js-footnote-citation" id="{{ fn.ref_id }}">
-    {{ fn.value|render|trim }}
+    <span class="footnote-link">{{ fn.value|render|trim }}</span>
-    <aside class="footnote-content">{{ fn.text }}</aside>
+    <template class="footnote-content">{{ fn.text }}</template>
   </div>
 {% endapply %}

web_main/themes/custom/mathallo/templates/footnote-links.html.twig

@@ -1,13 +1,13 @@
 {% apply footnotes_spaceless %}
   {# footnotes/footnote-links.html.twig #}
   {%- if footnote_links -%}
-    <span class="footnote__citations-wrapper">
+    <div class="footnote__citations-wrapper">
       {%- for footnote_link in footnote_links -%}
         {% if not loop.first %}
           <span class="footnote__citation-separator">, </span>
         {% endif %}
         {{ footnote_link }}
       {%- endfor -%}
-    </span>
+    </div>
   {%- endif -%}
 {% endapply %}