82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
// Create a modal background and element.
|
|
const modal = document.createElement('div');
|
|
modal.classList.add('modal');
|
|
modal.innerHTML = '<aside><h3></h3><q></q></aside>';
|
|
const aside = modal.querySelector('aside');
|
|
const header = modal.querySelector('h3');
|
|
const content = modal.querySelector('q');
|
|
|
|
function closeModal() {
|
|
modal.classList.remove('active');
|
|
header.innerHTML = '';
|
|
content.innerHTML = '';
|
|
}
|
|
|
|
// Allow clicking outside or hitting escape to close the modal.
|
|
modal.onclick = (e) => {
|
|
if (e.target.classList.contains('modal')) {
|
|
e.preventDefault();
|
|
closeModal();
|
|
}
|
|
};
|
|
document.onkeydown = (e) => {
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
closeModal();
|
|
}
|
|
};
|
|
|
|
// Append modal to body.
|
|
document.querySelector('main').appendChild(modal);
|
|
|
|
// Collect all of the footnotes and hide the static display.
|
|
try {
|
|
document.querySelector('.footnotes').style.display = 'none';
|
|
} catch(e) {
|
|
const fakeFootnotes = document.createElement('div');
|
|
fakeFootnotes.classList.add('footnotes');
|
|
document.querySelector('main').appendChild(fakeFootnotes);
|
|
}
|
|
let footnotes = {};
|
|
document.querySelectorAll('.footnotes li').forEach((fn) => {
|
|
footnotes[fn.getAttribute('id')] = fn.innerHTML;
|
|
})
|
|
|
|
// For each ref link, set up an event that populates the modal.
|
|
function fnClick(e) {
|
|
e.preventDefault();
|
|
const id = e.target.getAttribute('href').substring(1);
|
|
content.innerHTML = footnotes[id];
|
|
header.innerText = id.split(':')[1];
|
|
modal.classList.add('active');
|
|
aside.style.top = `max(calc(50vh - 1rem - ${aside.clientHeight}px / 2), 0px)`;
|
|
|
|
// Block the usual action of clicking the backref link, just close the modal
|
|
content.querySelector('.footnote-backref').onclick = (ee) => {
|
|
ee.preventDefault();
|
|
closeModal();
|
|
};
|
|
|
|
// Allow nested footnotes
|
|
content.querySelectorAll('.footnote-ref').forEach((fnRefNested) => {
|
|
fnRefNested.onclick = fnClick;
|
|
});
|
|
content.querySelectorAll('.cite').forEach((citeNested) => {
|
|
citeNested.onclick = citeClick;
|
|
});
|
|
}
|
|
document.querySelectorAll('.footnote-ref').forEach((fnRef) => {
|
|
fnRef.onclick = fnClick;
|
|
});
|
|
|
|
// Do the same for citation references.
|
|
function citeClick(e) {
|
|
header.innerText = e.target.childNodes[0].textContent;
|
|
content.innerHTML = e.target.querySelector('.cite-ref').innerHTML;
|
|
modal.classList.add('active');
|
|
aside.style.top = `max(calc(50vh - 1rem - ${aside.clientHeight}px / 2), 0px)`;
|
|
}
|
|
document.querySelectorAll('.cite').forEach((cite) => {
|
|
cite.onclick = citeClick;
|
|
});
|