Thoughts

public/js/footnotes.js

@@ -0,0 +1,81 @@
+// 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;
+});