From f78c71572b2bc7f408aca5a5b2843a2cd7e93524 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Tue, 14 Apr 2020 16:56:25 +0800
Subject: Add scroll to top button

---
 assets/sass/_sidebar.scss     | 14 ++++++++++++++
 exampleSite/config.toml       |  4 ++++
 layouts/_default/single.html  |  4 +++-
 layouts/index.html            |  4 +++-
 layouts/partials/footer.html  |  2 +-
 layouts/partials/scripts.html | 25 ++++++++++++++-----------
 layouts/tags/list.html        |  4 +++-
 7 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/assets/sass/_sidebar.scss b/assets/sass/_sidebar.scss
index 9053ac1..88a39d8 100644
--- a/assets/sass/_sidebar.scss
+++ b/assets/sass/_sidebar.scss
@@ -44,4 +44,18 @@
     width: 3em;
     right: 1em;
     bottom: 1em;
+
+    @include link-primary();
+
+    .progressbar-text {
+        svg {
+            width: 24px;
+            vertical-align: middle;
+        }
+
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
 }
\ No newline at end of file
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 66bc4c3..57c75cb 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -18,6 +18,9 @@ paginate = 10
   # Bangumi image chart id
   # bgmImageChart = "000000"
 
+  # Show scroll to top button
+  scrollTop = true
+
   # License
   license = "知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 (CC BY-NC-SA 4.0)"
   licenseLink = "http://creativecommons.org/licenses/by-nc-sa/4.0/"
@@ -34,6 +37,7 @@ paginate = 10
   # Custom css & js CDN
   cdnVanillaLazyloadJS = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"
   cdnJQueryJS = "https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"
+  cdnProgessJS = "https://cdn.jsdelivr.net/npm/progressbar.js@1.1.0/dist/progressbar.min.js"
 
 [markup]
   [markup.highlight]
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 506127b..49e70df 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -30,7 +30,9 @@
             {{ partial "sidebar.html" . }}
         </div>
         <div id="container-progress">
-            <div id="progress"></div>
+            <a href="javascript:void(0)">
+                <div id="progress"></div>
+            </a>
         </div>
     </div>
 </main>
diff --git a/layouts/index.html b/layouts/index.html
index 158c982..ddc93f1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -32,7 +32,9 @@
             {{ partial "sidebar.html" . }}
         </div>
         <div id="container-progress">
-            <div id="progress"></div>
+            <a href="javascript:void(0)">
+                <div id="progress"></div>
+            </a>
         </div>
     </div>
 </main>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 31dd791..9b2c461 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -2,7 +2,7 @@
     <div class="container-lg text-center">
         <p>
             &copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> |
-            Powered by <a href="https://gohugo.io/" target="_blank">Hugo {{ hugo.Version }}</a>
+            Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a>
             & <a href="https://github.com/amzrk2/hugo-theme-fuji/" target="_blank">Fuji</a>
         </p>
     </div>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index c5efc63..de2e018 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,22 +1,17 @@
+{{ if .Site.Params.scrollTop }}
 <script>
     $(function () {
         var bar = new ProgressBar.Circle('#progress', {
             color: '#8AA2D3',
-            strokeWidth: 15,
+            strokeWidth: 12,
             trailColor: '#E5E2E4',
-            trailWidth: 15,
+            trailWidth: 12,
             text: {
-                autoStyleContainer: false
+                value: '<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"></path></svg>',
+                autoStyleContainer: false,
+                style: null
             },
             fill: '#E5E2E4',
-            step: function (state, circle) {
-                var value = Math.round(circle.value() * 100);
-                if (value == 0 || value == 100) {
-                    circle.setText('');
-                } else {
-                    circle.setText(value);
-                }
-            }
         });
         var scrolled = ($(window).scrollTop() / ($(document).height() - $(window).height() - 1));
         bar.animate(scrolled);
@@ -30,7 +25,15 @@
             bar.set(scrolled);
         });
     });
+    $('#container-progress').click(function () {
+        $('html, body').animate({
+            scrollTop: 0
+        }, 'slow');
+        return false;
+    });
 </script>
+{{ end }}
+<!-- Vanilla LazyLoad -->
 <script>
     var lazyLoadInstance = new LazyLoad({
         elements_selector: ".lazy"
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
index 30cca51..0b58a6d 100644
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -38,7 +38,9 @@
             {{ partial "sidebar.html" . }}
         </div>
         <div id="container-progress">
-            <div id="progress"></div>
+            <a href="javascript:void(0)">
+                <div id="progress"></div>
+            </a>
         </div>
     </div>
 </main>
-- 
cgit v1.2.3