From 6c78ad2d8b71fb556f43a9f749b70b9740850d42 Mon Sep 17 00:00:00 2001
From: ache <ache@ache.one>
Date: Tue, 6 Apr 2021 13:34:29 +0200
Subject: New Zen mode

---
 left.m4             |  4 +++-
 s/img/lt.svg        | 30 +++++++++++++++++++++++++++++
 s/imgM/lt.svg       |  1 +
 src/css/design.scss | 24 +++++++++++++++++++++++
 src/js/zen.js       | 55 ++++++++++++++++++++++++++++++++++++++++-------------
 5 files changed, 100 insertions(+), 14 deletions(-)
 create mode 100644 s/img/lt.svg
 create mode 100644 s/imgM/lt.svg

diff --git a/left.m4 b/left.m4
index 0689480..df7b063 100644
--- a/left.m4
+++ b/left.m4
@@ -1,3 +1,6 @@
+<nav tabindex="0" id="harr" class="hide_arrow">
+include(s/imgM/lt.svg)
+</nav>
 <aside id="side-bar">
 include(s/imgM/acheLogo.svg)
   <h2> Ache </h2>
@@ -15,7 +18,6 @@ include(s/imgM/acheLogo.svg)
     </a>
     🚧 En cours 🚧
   </div>
-
   <nav id="ontheweb">
     <ul>
       <li class="about_bar"><a href="https://twitter.com/arobase_che" title="Mon twitter abandonné">
diff --git a/s/img/lt.svg b/s/img/lt.svg
new file mode 100644
index 0000000..253bca5
--- /dev/null
+++ b/s/img/lt.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 -256 1792 1792"
+   version="1.1"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   width="70px"
+   height="70px"
+   sodipodi:docname="lt.svg">
+    <g id="glob">
+    <path
+       fill="orange"
+       opacity="0.4"
+       stroke="orange"
+       stroke-width="5"
+       d="m 627,992 q 0,-13 -10,-23 L 224,576 617,183 q 10,-10 10,-23 0,-13 -10,-23 L 567,87 Q 557,77 544,77 531,77 521,87 L 55,553 q -10,10 -10,23 0,13 10,23 l 466,466 q 10,10 23,10 13,0 23,-10 l 50,-50 q 10,-10 10,-23 z"
+       id="lt"
+       inkscape:connector-curvature="0">
+
+    <animate id="grow" attributeName="stroke-width" values="5;75;5" dur="0.5s" begin="0s;wait.end"/>
+    <animate id="wait" attributeName="stroke-width" values="5;5" dur="1.5s" begin="grow.end"/>
+       </path>
+       </g>
+</svg>
diff --git a/s/imgM/lt.svg b/s/imgM/lt.svg
new file mode 100644
index 0000000..7178909
--- /dev/null
+++ b/s/imgM/lt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792" width="70" height="70"><g id="glob"><path fill="orange" opacity=".4" stroke="orange" stroke-width="5" d="M627 992q0-13-10-23L224 576l393-393q10-10 10-23t-10-23l-50-50q-10-10-23-10t-23 10L55 553q-10 10-10 23t10 23l466 466q10 10 23 10t23-10l50-50q10-10 10-23z" id="lt"><animate id="grow" attributeName="stroke-width" values="5;75;5" dur="0.5s" begin="0s;wait.end"/><animate id="wait" attributeName="stroke-width" values="5;5" dur="1.5s" begin="grow.end"/></path></g></svg>
\ No newline at end of file
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');
+  }
 });
-- 
cgit v1.2.3