better capsule (aka footnotes) positionning
This commit is contained in:
@@ -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);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 }}
|
||||
<aside class="footnote-content">{{ fn.text }}</aside>
|
||||
<span class="footnote-link">{{ fn.value|render|trim }}</span>
|
||||
<template class="footnote-content">{{ fn.text }}</template>
|
||||
</div>
|
||||
{% endapply %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user