capsules

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

@@ -33,7 +33,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
   const MathalloTheme = function () {
     const _is_front = drupalSettings.path.isFront
     console.log('drupalSettings', drupalSettings)
-    
+
     // liste forme file names
     const _formesclasses = [
       'pyramide',
@@ -52,6 +52,12 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
     let _cardsForms = [];
 
+    let smoother = null;
+
+    let fn_modale;
+
+    let mouse_pos = {x:0,y:0};
+
     //  ___      _ _
     // |_ _|_ _ (_) |_
     //  | || ' \| |  _|
@@ -62,6 +68,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       initPartieFrontBackCardSwitch();
       initBgFormes();
       initBgAnime();
+      initFootnotes();
       // initVues()
     }
 
@@ -91,7 +98,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
           })
         }
       }
-      
+
     }
 
     function onWindowResize() {
@@ -147,7 +154,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
         // register cards and formes
         _cardsForms.push(cardFormObject);
         // console.log('_cardsForms', _cardsForms);
-        
+
         // create GSAP animations
         createGsapAnims(card, forme, oddeven);
 
@@ -250,7 +257,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
         let forme = document.createElement('div');
         forme.classList.add('bg-forme');
 
-        
+
         // forme.classList.add(_formesclasses[n]);
 
         // inject svg from file
@@ -261,13 +268,13 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
         // get the svg ode
         const svgNode = forme.querySelector('svg');
-        
+
         // random size
         let wh = 200 + Math.random()*300;
         // OR
         // pic a size
         // let wh = _sizes.splice(Math.floor(Math.random() * _sizes.length), 1)[0];
-        // record the original scale for stroke width rescalling  
+        // record the original scale for stroke width rescalling
         const init_wh = svgNode.getAttribute('width');
         // set the new size
         forme.style.width = forme.style.height = `${wh}px`;
@@ -284,13 +291,13 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
         //   path.setAttribute('stroke-width', `${new_SW}px`);
         //   path.style.strokeWidth = `${new_SW}px`;
         // });
-        
+
 
         // random position
         // top
         let top = card.offsetTop + card.clientHeight/2 - wh/2;
         if (card.clientHeight < 300) {
-          top = Math.random() > 0.5 
+          top = Math.random() > 0.5
             ? card.offsetTop - wh/2 // on top
             : card.offsetTop + card.clientHeight  - wh/2; // on bottom
         }
@@ -306,26 +313,29 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
           forme.style.left = `${card.offsetLeft + card.clientWidth - randoffset}px`;
         } else {
           // random
-          forme.style.left = Math.random() > 0.5 
-            ? `${card.offsetLeft - wh + randoffset}px` 
+          forme.style.left = Math.random() > 0.5
+            ? `${card.offsetLeft - wh + randoffset}px`
             : `${card.offsetLeft + card.clientWidth - randoffset}px`;
         }
         return forme;
     }
 
     function initBgAnime(){
-      gsap.to('body', {
-        scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport
-        backgroundPositionY: 10
-      });
+      // gsap.to('body', {
+      //   scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport
+      //   backgroundPositionY: 10
+      // });
 
-      ScrollSmoother.create({
+      smoother = ScrollSmoother.create({
         smooth: 3, // how long (in seconds) it takes to "catch up" to the native scroll position
         effects: true, // looks for data-speed and data-lag attributes on elements
         smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
         wrapper: 'main[role="main"]',
-        content: 'main[role="main"]>.layout-content'
+        content: 'main[role="main"]>.layout-content',
+        onUpdate: onUpdateSmoother
       });
+      console.log('smoother', smoother);
+
 
       gsap.to('#parallax-bg', {
         y: (i, target) => -(ScrollTrigger.maxScroll(window) * 1.2),
@@ -339,13 +349,88 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
         }
       });
 
-      
-      
+
+
+    }
+
+    function onUpdateSmoother(sm){
+      // console.log('onUpdateSmoother', sm);
+      // let content = sm.content();
+      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);
+      for (const fn of fns) {
+        console.log('fn', fn);
+        fn.addEventListener('mouseenter', onMouseEnterFN);
+        fn.addEventListener('mouseleave', onMouseLeaveFN);
+        // fn.addEventListener('mousemove', onMouseMove);
+      }
+      window.addEventListener('mousemove', onMouseMove);
+
+    }
+
+    function onMouseEnterFN(event){
+      console.log('onMouseEnterFN, event:', event);
+      fn_modale.innerHTML = event.target.dataset.content;
+      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.innerHTML = event.target.dataset.content;
+      fn_modale.classList.remove('visible');
+
+
+      // fn_modale.style.left = `${event.clientX}px`;
+      // fn_modale.style.top = `${event.clientY}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();
+        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('window', window);
+
+      } else{
+        console.warn('no smoother');
+
+      }
+
     }
 
     // function initVues(){
     //   console.log('initVues');
-      
+
     //   // initVueContent();
 
 
@@ -360,7 +445,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
     // function onClickEtapeLink(e){
     //   e.preventDefault();
-      
+
     //   let a = e.currentTarget;
     //   let nid = a.dataset.nodeNid;
     //   console.log(nid);
@@ -384,17 +469,17 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
     //         console.log(nid);
     //       }
     //     })
-        
+
     //     if (nid) {
     //       let a = field.querySelector('a');
     //       a.setAttribute('data-node-nid', nid);
     //       a.addEventListener('click', onClickEtapeLink);
     //     }
-        
-        
+
+
     //   })
     // }
-    
+
     // function getNodeData(nid){
     //   const params = {
     //   }
@@ -412,4 +497,4 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
   } // end MathalloTheme()
 
   MathalloTheme()
-})(Drupal, drupalSettings)
+})(Drupal, drupalSettings)

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

@@ -651,3 +651,40 @@ footer[role="contentinfo"]{
   }
 
 }
+
+
+//   _____           _               _
+//  |  ___|__   ___ | |_ _ __   ___ | |_ ___  ___
+//  | |_ / _ \ / _ \| __| '_ \ / _ \| __/ _ \/ __|
+//  |  _| (_) | (_) | |_| | | | (_) | ||  __/\__ \
+//  |_|  \___/ \___/ \__|_| |_|\___/ \__\___||___/
+
+.footnote__citation{
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  cursor: pointer;
+}
+
+aside.footnote-content{
+  display:none;
+}
+
+.fn-modale{
+  @include card;
+  // display: none;
+  opacity: 0;
+  transition: opacity 0.25s ease-in-out;
+  // transition-delay: ;
+  position: absolute;
+  // top:50%; left:50%;
+  z-index: 200;
+  max-width: 100em;
+  padding:1em 1.5em 1em 1em;
+  border:  1px dashed $bleu_site;
+  &.visible{
+    // display: block;
+    opacity: 1;
+    transition: opacity 0.25s ease-in-out;
+  }
+
+}

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

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

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

@@ -0,0 +1,13 @@
+{% apply footnotes_spaceless %}
+  {# footnotes/footnote-links.html.twig #}
+  {%- if footnote_links -%}
+    <span 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>
+  {%- endif -%}
+{% endapply %}