From bb74e232a968bc857e80b60e9b72d8b10e6a6c45 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Thu, 3 Sep 2020 15:12:32 +0800
Subject: [PATCH] feat: add page browsing progress at the top of header

---
 layout/page.ejs                        |  5 +++--
 source/css/layout/_partial/header.styl | 11 ++++++++---
 source/css/layout/home-content.styl    |  1 +
 source/js/scroll-to-top.js             | 20 +++++++++++++++-----
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/layout/page.ejs b/layout/page.ejs
index b78c6ef..b7902fb 100644
--- a/layout/page.ejs
+++ b/layout/page.ejs
@@ -55,8 +55,9 @@
             <div class="scroll-to-top">
                 <ul>
                     <li>
-                        <!--<i class="fa fa-caret-up"></i>-->
-                        <span class="scroll-percent"></span>
+                        <span class="scroll-percent">
+                            <i class="fa fa-caret-up"></i>
+                        </span>
                     </li>
                 </ul>
             </div>
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index b7239ce..b55c669 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -2,6 +2,8 @@
 @require "../common/magic-theme.styl";
 @require "../common/animated.styl";
 
+$header-progress-height = 2.8px;
+
 .header-wrapper {
   width: 100%;
   height: 100%;
@@ -10,18 +12,21 @@
   align-items: center;
   justify-content: center;
   background: var(--background-color);
+  padding-top: $header-progress-height;
 
   if (hexo-config('magic.enable') == true) {
     magic-style(1.02, 1.02);
   }
 
   .header-progress {
+    display: none;
     position: absolute;
-    width: 100%;
-    height: 3px;
+    width: 0;
+    height: $header-progress-height;
     top: 0;
     left: 0;
-    background: $primary-color;
+    background: var(--primary-color);
+    transition: all 0.1s ease;
   }
 
 
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 10867aa..fead12b 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -28,6 +28,7 @@
         font-weight: 600;
         color: var(--second-text-color);
         font-size: 1.5em;
+        line-height: 1.5em;
 
         +ils-tablet() {
           font-size: 1.3em;
diff --git a/source/js/scroll-to-top.js b/source/js/scroll-to-top.js
index 77bc3b9..66991e1 100644
--- a/source/js/scroll-to-top.js
+++ b/source/js/scroll-to-top.js
@@ -1,7 +1,8 @@
 (function () {
     const scrollToTopDom = document.querySelector('.scroll-to-top');
+    const headerProgressDom = document.querySelector('.header-progress');
 
-    scrollToTopDom.addEventListener('click', () => {
+    const backToTop = () => {
         let scrollTopTimer = setInterval(function () {
             let top = document.body.scrollTop || document.documentElement.scrollTop;
             let speed = top / 2;
@@ -14,21 +15,30 @@
                 clearInterval(scrollTopTimer);
             }
         }, 30);
+    };
+
+    scrollToTopDom.addEventListener('click', () => {
+        backToTop();
     });
 
     window.addEventListener('scroll', function (_e) {
-        // back to top
-        // show scroll percent
+        // back to top & show scroll percent
         const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
         const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
         const clientHeight = window.innerHeight || document.documentElement.clientHeight;
         const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
+        const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
+
         if (percent === '0') {
             scrollToTopDom.style.display = 'none';
+            headerProgressDom.style.display = 'none';
         } else {
             scrollToTopDom.style.display = 'block';
-            scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent;
+            // scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent;
+
+            headerProgressDom.style.display = 'block';
+            headerProgressDom.style.width = `${ProgressPercent}%`;
         }
     });
 
-})();
\ No newline at end of file
+})();