From c4fec2bf9701ecee798df37bff1b6f285763213b Mon Sep 17 00:00:00 2001
From: mrilyew <99399973+mrilyew@users.noreply.github.com>
Date: Sat, 2 Nov 2024 13:02:34 +0300
Subject: [PATCH] rework to up button

---
 Web/Presenters/templates/@layout.xml |  9 +++++++-
 Web/static/css/main.css              | 29 ++++++++++++++++++++++++--
 Web/static/js/scroll.js              | 31 +++++++++++++++++++++++-----
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/Web/Presenters/templates/@layout.xml b/Web/Presenters/templates/@layout.xml
index b54ef44c..5e095508 100644
--- a/Web/Presenters/templates/@layout.xml
+++ b/Web/Presenters/templates/@layout.xml
@@ -82,7 +82,14 @@
         {/if}
 
         <div class="toTop">
-            ⬆ {_to_top}
+            <div id='to_up'>
+                <svg id="to_up_icon" viewBox="0 0 10 6"><polygon points="0 6 5 0 10 6 0 6"/></svg>
+                <span>{_to_top}</span>
+            </div>
+            
+            <div id='to_back'>
+                <svg id="to_back_icon" viewBox="0 0 10 6"><polygon points="0 0 5 6 10 0 0 0"/></svg>
+            </div>
         </div>
 
         <div class="layout">
diff --git a/Web/static/css/main.css b/Web/static/css/main.css
index cb633d0a..e649df4e 100644
--- a/Web/static/css/main.css
+++ b/Web/static/css/main.css
@@ -1381,7 +1381,7 @@ textarea {
 
 .toTop {
     position: fixed;
-    padding: 20px;
+    padding: 12px;
     width: 100px;
     height: 100%;
     background-color: #f3f3f3;
@@ -1391,9 +1391,34 @@ textarea {
     opacity: 0;
     transition: .1s all;
     z-index: 129;
+    user-select: none;
 }
 
-body.scrolled .toTop:hover {
+.toTop > div svg {
+    display: inline-block;
+    margin-right: 2px;
+    width: 8px;
+    height: 7px;
+    fill: #3f3f3f;
+}
+
+.toTop > div span {
+    font-weight: bold;
+}
+
+.toTop.has_down #to_up, .toTop #to_back {
+    display: none;
+}
+
+.toTop.has_down #to_back {
+    display: block;
+}
+
+.toTop.has_down {
+    opacity: .3;
+}
+
+body.scrolled .toTop:hover, .toTop.has_down:hover {
     opacity: .5;
     cursor: pointer;
 }
diff --git a/Web/static/js/scroll.js b/Web/static/js/scroll.js
index 3b652afd..dff0ca4b 100644
--- a/Web/static/js/scroll.js
+++ b/Web/static/js/scroll.js
@@ -1,14 +1,35 @@
 window.addEventListener("scroll", function(e) {
     if(window.scrollY < 100) {
+        if(window.temp_y_scroll) {
+            u('.toTop').addClass('has_down')
+        }
         document.body.classList.toggle("scrolled", false);
     } else {
         document.body.classList.toggle("scrolled", true);
+        u('.toTop').removeClass('has_down')
     }
 });
 
 u(".toTop").on("click", function(e) {
-    window.scrollTo({
-        top: 0,
-        behavior: "smooth"
-    });
-});
\ No newline at end of file
+    const y_scroll = window.scrollY
+    const scroll_margin = 20
+
+    if(y_scroll > 100) {
+        window.temp_y_scroll = y_scroll
+        window.scrollTo(0, scroll_margin)
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        })
+    } else {
+        if(window.temp_y_scroll) {
+            window.scrollTo(0, window.temp_y_scroll - scroll_margin)
+            window.scrollTo({
+                top: window.temp_y_scroll,
+                behavior: "smooth"
+            })
+        }
+    }
+
+    u(document).trigger('scroll')
+})