better capsule (aka footnotes) positionning

.gitignore

@@ -30,7 +30,7 @@
 # npm
 node_modules/
 
-*.patch
+#*.patch
 /.csslintrc
 /.eslintrc.json
 /.ht.router.php
@@ -47,4 +47,4 @@ node_modules/
 /web_main/.vscode/*
 .vscode/*
 
-/log
+/log

composer.json

@@ -121,6 +121,9 @@
           },
           "drupal/core": {
             "CKEDITOR for summary https://www.drupal.org/project/drupal/issues/2671162":"https://www.drupal.org/files/issues/2025-08-23/2671162-158.patch"
+          },
+          "drupal/footnotes": {
+            "leave paragraphs tags in place":"./patches/footnotes-leave-paragraphs.patch"
           }
         }
     }

config/sync/editor.editor.footnote.yml

@@ -16,13 +16,22 @@ settings:
       - bold
       - italic
       - underline
-      - link
       - bulletedList
+      - drupalInsertImage
+      - showBlocks
   plugins:
+    ckeditor5_imageResize:
+      allow_resize: true
     ckeditor5_list:
       properties:
         reversed: false
         startIndex: false
       multiBlock: false
 image_upload:
-  status: false
+  status: true
+  scheme: public
+  directory: inline-images
+  max_size: null
+  max_dimensions:
+    width: 1080
+    height: null

config/sync/filter.format.footnote.yml

@@ -3,6 +3,10 @@ langcode: en
 status: true
 dependencies:
   module:
+    - editor
+    - footnotes
+    - linkit
+    - media
     - pathologic
 _core:
   default_config_hash: SYAah-i4HbJnc3ZnKC9NmY4M0UAFYpfobYzxg0eMunM
@@ -10,23 +14,108 @@ name: Footnote
 format: footnote
 weight: 0
 filters:
+  editor_file_reference:
+    id: editor_file_reference
+    provider: editor
+    status: true
+    weight: -48
+    settings: {  }
+  filter_align:
+    id: filter_align
+    provider: filter
+    status: false
+    weight: -47
+    settings: {  }
+  filter_autop:
+    id: filter_autop
+    provider: filter
+    status: true
+    weight: -43
+    settings: {  }
+  filter_caption:
+    id: filter_caption
+    provider: filter
+    status: false
+    weight: -46
+    settings: {  }
+  filter_footnotes:
+    id: filter_footnotes
+    provider: footnotes
+    status: false
+    weight: -44
+    settings:
+      footnotes_collapse: false
+      footnotes_css: true
+      footnotes_dialog: false
+      footnotes_dialog_prevent_bubbling: false
+      footnotes_footer_disable: false
+      footnotes_preview_show_text: true
+      footnotes_preview_character: ''
   filter_html:
     id: filter_html
     provider: filter
     status: true
-    weight: -10
+    weight: -50
     settings:
-      allowed_html: '<br> <p> <strong> <em> <u> <a href> <ul> <ol reversed start> <li>'
-      filter_html_help: true
+      allowed_html: '<br> <p> <strong> <em> <u> <ul> <ol> <li> <img src alt height width data-entity-uuid data-entity-type>'
+      filter_html_help: false
       filter_html_nofollow: false
+  filter_html_escape:
+    id: filter_html_escape
+    provider: filter
+    status: false
+    weight: -49
+    settings: {  }
+  filter_html_image_secure:
+    id: filter_html_image_secure
+    provider: filter
+    status: false
+    weight: -41
+    settings: {  }
+  filter_htmlcorrector:
+    id: filter_htmlcorrector
+    provider: filter
+    status: false
+    weight: -40
+    settings: {  }
+  filter_image_lazy_load:
+    id: filter_image_lazy_load
+    provider: filter
+    status: false
+    weight: -39
+    settings: {  }
   filter_pathologic:
     id: filter_pathologic
     provider: pathologic
     status: false
-    weight: 50
+    weight: -38
     settings:
       settings_source: global
       local_settings:
         protocol_style: full
         local_paths: ''
         keep_language_prefix: true
+  filter_url:
+    id: filter_url
+    provider: filter
+    status: false
+    weight: -45
+    settings:
+      filter_url_length: 72
+  linkit:
+    id: linkit
+    provider: linkit
+    status: false
+    weight: -42
+    settings:
+      title: true
+      media_substitution: metadata
+  media_embed:
+    id: media_embed
+    provider: media
+    status: false
+    weight: -37
+    settings:
+      default_view_mode: default
+      allowed_view_modes: {  }
+      allowed_media_types: {  }

config/sync/filter.format.wysiwyg.yml

@@ -5,6 +5,8 @@ dependencies:
   module:
     - editor
     - footnotes
+    - linkit
+    - media
     - pathologic
 _core:
   default_config_hash: a0dSxrd1nnzeSvKpvFmtoLpxDd3Nj6E7dQN-MZUi20g
@@ -22,38 +24,38 @@ filters:
     id: filter_align
     provider: filter
     status: false
-    weight: -41
+    weight: -42
     settings: {  }
   filter_autop:
     id: filter_autop
     provider: filter
     status: true
-    weight: -49
+    weight: -45
     settings: {  }
   filter_caption:
     id: filter_caption
     provider: filter
     status: false
-    weight: -40
+    weight: -41
     settings: {  }
   filter_footnotes:
     id: filter_footnotes
     provider: footnotes
     status: true
-    weight: 0
+    weight: -47
     settings:
       footnotes_collapse: false
       footnotes_css: false
       footnotes_dialog: false
       footnotes_dialog_prevent_bubbling: true
       footnotes_footer_disable: true
-      footnotes_preview_show_text: true
+      footnotes_preview_show_text: false
       footnotes_preview_character: ''
   filter_html:
     id: filter_html
     provider: filter
     status: false
-    weight: -43
+    weight: -44
     settings:
       allowed_html: ''
       filter_html_help: true
@@ -62,25 +64,31 @@ filters:
     id: filter_html_escape
     provider: filter
     status: false
-    weight: -42
+    weight: -43
     settings: {  }
   filter_html_image_secure:
     id: filter_html_image_secure
     provider: filter
     status: true
-    weight: -48
+    weight: -49
     settings: {  }
   filter_htmlcorrector:
     id: filter_htmlcorrector
     provider: filter
     status: true
-    weight: -47
+    weight: -46
+    settings: {  }
+  filter_image_lazy_load:
+    id: filter_image_lazy_load
+    provider: filter
+    status: false
+    weight: -39
     settings: {  }
   filter_pathologic:
     id: filter_pathologic
     provider: pathologic
     status: false
-    weight: 50
+    weight: -38
     settings:
       settings_source: global
       local_settings:
@@ -91,6 +99,23 @@ filters:
     id: filter_url
     provider: filter
     status: true
-    weight: -45
+    weight: -48
     settings:
       filter_url_length: 72
+  linkit:
+    id: linkit
+    provider: linkit
+    status: false
+    weight: -40
+    settings:
+      title: true
+      media_substitution: metadata
+  media_embed:
+    id: media_embed
+    provider: media
+    status: false
+    weight: -37
+    settings:
+      default_view_mode: default
+      allowed_view_modes: {  }
+      allowed_media_types: {  }

patches/footnotes-leave-paragraphs.patch

@@ -0,0 +1,13 @@
+diff --git a/src/Plugin/Filter/FootnotesFilter.php b/src/Plugin/Filter/FootnotesFilter.php
+index 03bff31..8189be0 100644
+--- a/src/Plugin/Filter/FootnotesFilter.php
++++ b/src/Plugin/Filter/FootnotesFilter.php
+@@ -168,7 +168,7 @@ class FootnotesFilter extends FilterBase implements ContainerFactoryPluginInterf
+       // Citations should not contain paragraph tags as they should be inline
+       // content. This attempts to remove them; however, if the 'Convert line
+       // breaks filter' runs after this filter, it will still be an issue.
+-      $markup = str_replace(['<p>', '</p>'], '', $markup);
++      // $markup = str_replace(['<p>', '</p>'], '', $markup);
+       static::replaceNodeContent($node, $markup);
+     }
+ 

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);
@@ -394,7 +405,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
     function onMouseEnterFN(event){
       console.log('onMouseEnterFN, event:', event);
-      fn_modale.innerHTML = event.target.dataset.content;
+      fn_modale.innerHTML = event.target.querySelector('.footnote-content').innerHTML;
       fn_modale.classList.add('visible');
 
 
@@ -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);
 

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

@@ -750,33 +750,87 @@ footer[role="contentinfo"]{
 //  | |_ / _ \ / _ \| __| '_ \ / _ \| __/ _ \/ __|
 //  |  _| (_) | (_) | |_| | | | (_) | ||  __/\__ \
 //  |_|  \___/ \___/ \__|_| |_|\___/ \__\___||___/
+div.footnote__citations-wrapper{
+  display: inline;
+  .footnote__citation{
+    display: inline;
+    text-decoration: underline;
+    text-decoration-style: dashed;
+    cursor: pointer;
 
-.footnote__citation{
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  cursor: pointer;
-}
+    span.footnote-link{
+      display: inline-block;
+      $icon_wh:1em;
+      width: $icon_wh; height: $icon_wh;
+      text-indent: $icon_wh * 2;
+      overflow: hidden;
+      vertical-align:baseline;
 
-aside.footnote-content{
-  display:none;
+      background-color: $rose;
+      // 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;
   // top:50%; left:50%;
   z-index: 200;
-  max-width: 100em;
+  max-width: 40em;
   padding:1em 1.5em 1em 1em;
   border:  1px dashed $bleu_site;
+  margin: 0;
+
+  opacity: 0;
   &.visible{
     // display: block;
     opacity: 1;
     transition: opacity 0.25s ease-in-out;
   }
-
+  img{
+    max-width: 100%;
+    height: auto;
+  }
 }

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

@@ -1,7 +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>
+  <div class="footnote__citation js-footnote-citation" id="{{ fn.ref_id }}">
+    <span class="footnote-link">{{ fn.value|render|trim }}</span>
+    <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 %}
+{% endapply %}