blob: 1d2700a8fc9830bc6fa50fdf3d3631a02dcb213d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
/**
* Footnotes - Sistema de notas flutuantes (floater)
*/
let activeFloater = null;
document.addEventListener('click', (e) => {
const fn = e.target.closest('a[href^="#fn:"]');
const close = e.target.closest('.f-close');
if (close) {
closeFloater();
return;
}
if (fn) {
e.preventDefault();
e.stopPropagation();
closeFloater();
const el = document.getElementById(fn.getAttribute('href').slice(1));
if (!el) return;
const clone = el.cloneNode(true);
clone.querySelector('.footnote-backref')?.remove();
const parent = fn.closest('p, li');
const quote = parent ? parent.innerText.slice(0, 40) + '…' : 'Nota';
openFloater(fn, quote, clone.innerHTML);
fn.classList.add('active');
} else if (activeFloater && !e.target.closest('.floater')) {
closeFloater();
}
});
function openFloater(target, quote, html) {
const f = document.createElement('div');
f.className = 'floater';
f.innerHTML = `<div class="f-label"><span>comentário</span><span class="f-close" role="button" tabindex="0" aria-label="Fechar nota">×</span></div><div class="f-quote">${quote}</div><div>${html}</div>`;
document.body.appendChild(f);
const r = target.getBoundingClientRect();
const top = window.scrollY + r.bottom + 8;
const padding = 20;
let left = window.scrollX + r.left;
const maxLeft = window.innerWidth - f.offsetWidth - padding;
if (left > maxLeft) left = Math.max(padding, maxLeft);
f.style.top = top + 'px';
f.style.left = left + 'px';
activeFloater = f;
// Permitir fechar com Enter ou Space
f.querySelector('.f-close').addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
closeFloater();
}
});
}
function closeFloater() {
if (activeFloater) {
activeFloater.remove();
activeFloater = null;
}
document.querySelectorAll('a[href^="#fn:"]').forEach((a) => a.classList.remove('active'));
}
// Fechar com Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeFloater();
});
|
