From 34768d0ace96008583a1dfb3185d4e45afff76f6 Mon Sep 17 00:00:00 2001
From: ache <ache@ache.one>
Date: Tue, 3 May 2022 18:30:40 +0200
Subject: Sidenot when width > 200

---
 src/js/sidenotes.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/js/sidenotes.js b/src/js/sidenotes.js
index 00c9367..f31bef7 100644
--- a/src/js/sidenotes.js
+++ b/src/js/sidenotes.js
@@ -16,19 +16,18 @@ function getPos(element) {
 }
 
 const getTop = element => element.offsetTop + (element.offsetParent && getTop(element.offsetParent));
-
+let sidenotes = undefined;
 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) {
+    if (sidenote.offsetWidth < 200 || window.screen.width < 1400) {
       sidenote.innerHTML = '';
       return;
     }
 
     const articleRef = sidenote.attributes.for.value;
     const article = document.querySelector(`#${articleRef}`);
+    console.log(article, articleRef);
     const notes = Array.from(article.querySelectorAll('li'))
       .filter(element => element.id.startsWith('user-content-fn'));
     const newSidenotes = notes.map(sidenoteLi => {
@@ -60,9 +59,14 @@ const resize = () => {
   }
 };
 
-window.addEventListener('resize', resize);
+if (sidenotes.length > 0) {
+  new ResizeObserver(resize).observe(sidenotes[0])
+}
 
-window.addEventListener('DOMContentLoaded', resize);
+// window.addEventListener('resize', resize);
+window.addEventListener('DOMContentLoaded') () => {
+
+};
 window.addEventListener('DOMContentLoaded', () => {
   if(document.querySelectorAll('.math-display').length > 0) {
     document.head.innerHTML += '<link href="/s/css/katex.css" rel="stylesheet"/>';
-- 
cgit v1.2.3