blob: 8ab99f98320a65eb74244a6dc14f521ada5eb125 (
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
|
function getPos(element) {
/* Element.getBoundingClientRect()
* Return box of the element relatively to viewport.
*/
const rect = element.getBoundingClientRect();
/* The properties window.scrollX and window.scrollY
* return the viewport position relatively to the document
*/
return {
x: rect.left + window.scrollX,
y: rect.top + window.scrollY,
};
}
// Use this if needed :
// const getTop = element => element.offsetTop + (element.offsetParent && getTop(element.offsetParent));
let articles;
const resize = () => {
for (const [article, sidenote] of articles) {
if (sidenote.offsetWidth < 200 || window.screen.width < 1400) {
sidenote.innerHTML = '';
return;
}
const notes = Array.from(article.querySelectorAll('li'))
.filter(element => element.id.startsWith('user-content-fn'));
const newSidenotes = notes.map(sidenoteLi => {
const div = document.createElement('div');
const refName = sidenoteLi.querySelector('.data-footnote-backref').attributes.href.value;
const refSideNode = article.querySelector(refName);
const sup = document.createElement('sup');
sup.textContent = refSideNode.textContent + ' ';
for (const element of sidenoteLi.children) {
const child = element.cloneNode(true);
div.append(child);
}
div.children[0].prepend(sup);
div.style.top = `${getPos(refSideNode).y}px`;
div.classList.add('sidenote');
return div;
});
sidenote.replaceChildren(...newSidenotes);
if (sidenote.offsetWidth < 100 || window.screen.width < 1400) {
sidenote.innerHTML = '';
return;
}
}
};
window.addEventListener('DOMContentLoaded', () => {
articles = Array.from(document.querySelectorAll('article'));
if (articles.length > 0) {
articles = articles.map(x => [x, x.parentElement.querySelector('.sidenotes')]);
new ResizeObserver(resize).observe(articles[0][1]);
}
if (document.querySelectorAll('.math-display').length > 0) {
document.head.innerHTML += '<link href="/s/css/katex.css" rel="stylesheet"/>';
}
});
|