blog/static/js/footnoter.js

28 lines
1.3 KiB
JavaScript
Raw Normal View History

2023-01-21 23:53:58 +00:00
// The DOMContentLoaded event fires when the initial HTML
// document has been completely loaded and parsed, without
// waiting for stylesheets, images, and subframes to finish loading.
document.addEventListener('DOMContentLoaded', (_event) => {
const references = document.getElementsByClassName('footnote-reference')
// For each footnote reference, set an id so we can refer to it from the definition.
// If the definition had an id of 'some_id', then the reference has id `some_id_ref`.
for (const reference of references) {
const link = reference.firstChild
const id = link.getAttribute('href').slice(1) // skip the '#'
link.setAttribute('id', `${id}_ref`)
}
const footnotes = document.getElementsByClassName('footnote-definition-label')
// For each footnote-definition, add an anchor element with an href to its corresponding reference.
// The text used for the added anchor is 'Leftwards Arrow with Hook' (U+21A9).
for (const footnote of footnotes) {
const pid = footnote.parentElement.getAttribute('id')
const num = footnote.textContent;
footnote.textContent = '';
const backReference = document.createElement('a')
backReference.setAttribute('href', `#${pid}_ref`)
backReference.textContent = `${num}`
footnote.append(backReference)
}
});