New Zen mode

2 files changed, 66 insertions, 13 deletions

diff --git a/src/css/design.scss b/src/css/design.scss
index 930059c..43f4798 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -19,6 +19,30 @@ body {
   word-wrap: break-word;
   font-size: 16px;
 }
+#harr {
+  cursor: pointer;
+}
+.hide_arrow {
+  position: fixed;
+  display: none;
+  top: 30%;
+  left: 303px;
+}
+.hide_arrow_show {
+  @media #{$gt-gsm} {
+    display: block;
+  }
+}
+.hide_arrow_off {
+  top: 30%;
+  left: 3px;
+
+
+  -moz-transform:    scaleX(-1); /* Gecko */
+  -o-transform:      scaleX(-1); /* Opera */
+  -webkit-transform: scaleX(-1); /* Webkit */
+  transform:         scaleX(-1); /* Standard */
+}
 #body_c {
   background-repeat: no-repeat;
   background-position: top left;
diff --git a/src/js/zen.js b/src/js/zen.js
index b3177bc..e2e7035 100644
--- a/src/js/zen.js
+++ b/src/js/zen.js
@@ -1,31 +1,60 @@
 'use strict';
 
-window.addEventListener('scroll', () => {
-  const articles = document.getElementsByTagName('article');
-  const header = document.getElementById('side-bar');
+const articles = document.getElementsByTagName('article');
+const header = document.getElementById('side-bar');
+const toggleArrow = document.getElementById('harr');
 
-  if (window.pageYOffset >= 500) {
-    if (header && !header.classList.contains('hidden')) {
-      header.classList.add('hidden');
+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();
+  }
+});
 
-      if (articles) {
-        [...articles].forEach(e => {
-          e.classList.add('zen-mode');
-        });
-      }
+function hideAbout() {
+  if (header && !header.classList.contains('hidden')) {
+    header.classList.add('hidden');
+
+    if (articles) {
+      [...articles].forEach(e => {
+        e.classList.add('zen-mode');
+      });
     }
-  } else if (header && header.classList.contains('hidden')) {
+  }
+}
+
+function showAbout() {
+  if (header && header.classList.contains('hidden')) {
     header.classList.remove('hidden');
     if (articles) {
       [...articles].forEach(e => {
         e.classList.remove('zen-mode');
         e.classList.add('zen-mode-disabling');
       });
-      setTimeout(function() { 
+      setTimeout(() => {
         [...articles].forEach(e => {
           e.classList.remove('zen-mode-disabling');
         });
       }, 1000);
     }
   }
+}
+
+window.addEventListener('scroll', () => {
+  const toggleArrow = document.getElementById('harr');
+
+  if (window.pageYOffset >= 800) {
+    if (toggleArrow) {
+      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');
+  }
 });