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

better capsule (aka footnotes) positionning

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2026-07-08 14:47:55 +02:00
parent 015e3654fe
commit e2f4c717e6
4 changed files with 103 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web_main/themes/custom/mathallo/assets/js/main.js
View File

@@ -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`;
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);

67
web_main/themes/custom/mathallo/assets/scss/main.scss
View File

@@ -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{
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;
@@ -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;