1 files changed, 70 insertions, 0 deletions
diff --git a/src/js/sidenotes.js b/src/js/sidenotes.js
new file mode 100644
index 0000000..00c9367
--- /dev/null
+++ b/src/js/sidenotes.js
@@ -0,0 +1,70 @@
+'use strict';
+
+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,
+  };
+}
+
+const getTop = element => element.offsetTop + (element.offsetParent && getTop(element.offsetParent));
+
+const resize = () => {
+  const sidenotes = document.querySelectorAll('.sidenotes');
+
+  console.log('Sidenote width: ' + sidenotes.offsetWidth);
+  for (const sidenote of sidenotes) {
+    if (sidenote.offsetWidth < 100 || window.screen.width < 1400) {
+      sidenote.innerHTML = '';
+      return;
+    }
+
+    const articleRef = sidenote.attributes.for.value;
+    const article = document.querySelector(`#${articleRef}`);
+    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('resize', resize);
+
+window.addEventListener('DOMContentLoaded', resize);
+window.addEventListener('DOMContentLoaded', () => {
+  if(document.querySelectorAll('.math-display').length > 0) {
+    document.head.innerHTML += '<link href="/s/css/katex.css" rel="stylesheet"/>';
+  }
+});