From eb60dc268024b0716b5eb3cdfd4dfc3a179207ff Mon Sep 17 00:00:00 2001
From: ache <ache@ache.one>
Date: Tue, 3 May 2022 19:31:21 +0200
Subject: Event review

---
 src/js/sidenotes.js | 26 ++++++++-------------
 src/js/zen.js       | 66 ++++++++++++++++++++++++++++-------------------------
 2 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/src/js/sidenotes.js b/src/js/sidenotes.js
index f31bef7..db2781f 100644
--- a/src/js/sidenotes.js
+++ b/src/js/sidenotes.js
@@ -1,5 +1,3 @@
-'use strict';
-
 function getPos(element) {
   /* Element.getBoundingClientRect()
    * Return box of the element relatively to viewport.
@@ -15,10 +13,10 @@ function getPos(element) {
   };
 }
 
-const getTop = element => element.offsetTop + (element.offsetParent && getTop(element.offsetParent));
-let sidenotes = undefined;
+// Use this if needed :
+// const getTop = element => element.offsetTop + (element.offsetParent && getTop(element.offsetParent));
+let sidenotes;
 const resize = () => {
-
   for (const sidenote of sidenotes) {
     if (sidenote.offsetWidth < 200 || window.screen.width < 1400) {
       sidenote.innerHTML = '';
@@ -26,8 +24,7 @@ const resize = () => {
     }
 
     const articleRef = sidenote.attributes.for.value;
-    const article = document.querySelector(`#${articleRef}`);
-    console.log(article, articleRef);
+    const article = document.querySelector(`#${CSS.escape(articleRef)}`);
     const notes = Array.from(article.querySelectorAll('li'))
       .filter(element => element.id.startsWith('user-content-fn'));
     const newSidenotes = notes.map(sidenoteLi => {
@@ -59,16 +56,13 @@ const resize = () => {
   }
 };
 
-if (sidenotes.length > 0) {
-  new ResizeObserver(resize).observe(sidenotes[0])
-}
-
-// window.addEventListener('resize', resize);
-window.addEventListener('DOMContentLoaded') () => {
-
-};
 window.addEventListener('DOMContentLoaded', () => {
-  if(document.querySelectorAll('.math-display').length > 0) {
+  sidenotes = document.querySelectorAll('.sidenotes');
+  if (sidenotes.length > 0) {
+    new ResizeObserver(resize).observe(sidenotes[0]);
+  }
+
+  if (document.querySelectorAll('.math-display').length > 0) {
     document.head.innerHTML += '<link href="/s/css/katex.css" rel="stylesheet"/>';
   }
 });
diff --git a/src/js/zen.js b/src/js/zen.js
index 05ec6b3..301e21b 100644
--- a/src/js/zen.js
+++ b/src/js/zen.js
@@ -1,38 +1,42 @@
-'use strict';
+window.addEventListener('DOMContentLoaded', () => {
+  let firstTime = window.location.pathname != '/';
+  const toggleArrow = document.querySelector('#harr');
+  const initValue = document.body.style.getPropertyValue('--width_panel_bis');
 
-const toggleArrow = document.getElementById('harr');
-const initValue = document.body.style.getPropertyValue('--width_panel_bis');
+  toggleArrow.addEventListener('click', () => {
+    if (toggleArrow.classList.contains('hide_arrow_off')) {
+      showAbout();
+      setTimeout(() => {
+        toggleArrow.classList.remove('hide_arrow_off');
+      }, 1000);
+    } else {
+      toggleArrow.classList.add('hide_arrow_off');
+      hideAbout();
+    }
+  });
 
-toggleArrow.addEventListener('click', () => {
-  if (toggleArrow.classList.contains('hide_arrow_off')) {
-    showAbout();
-    setTimeout(() => {
-      toggleArrow.classList.remove('hide_arrow_off');
-    }, 1000);
-  } else {
-    toggleArrow.classList.add('hide_arrow_off');
-    hideAbout();
+  function hideAbout() {
+    document.body.style.setProperty('--width_panel_bis', '0px');
   }
-});
-
-function hideAbout() {
-  document.body.style.setProperty('--width_panel_bis', '0px');
-}
 
-function showAbout() {
-  document.body.style.setProperty('--width_panel_bis', initValue);
-}
-
-window.addEventListener('scroll', () => {
-  const toggleArrow = document.getElementById('harr');
+  function showAbout() {
+    document.body.style.setProperty('--width_panel_bis', initValue);
+  }
 
-  if (window.pageYOffset >= 800) {
-    if (toggleArrow) {
-      toggleArrow.classList.add('hide_arrow_show');
+  window.addEventListener('scroll', () => {
+    if (window.pageYOffset >= 800) {
+      if (toggleArrow) {
+        if (firstTime) {
+          toggleArrow.click();
+          firstTime = false;
+        } else {
+          toggleArrow.classList.add('hide_arrow_show');
+        }
+      }
+      // A hideAbout(header, articles);
+    } else if (toggleArrow && !toggleArrow.classList.contains('hide_arrow_off')) {
+      // A showAbout(header, articles);
+      toggleArrow.classList.remove('hide_arrow_show');
     }
-    // A hideAbout(header, articles);
-  } else if (toggleArrow && !toggleArrow.classList.contains('hide_arrow_off')) {
-    // A showAbout(header, articles);
-    toggleArrow.classList.remove('hide_arrow_show');
-  }
+  });
 });
-- 
cgit v1.2.3