From 971f9bd9155eccdeefe563a3608dc46d2132abab Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Tue, 14 Apr 2020 15:46:26 +0800
Subject: Add progess bar

---
 assets/sass/_sidebar.scss     | 15 +++++++++++++--
 exampleSite/config.toml       |  1 +
 layouts/_default/single.html  |  3 +++
 layouts/index.html            |  3 +++
 layouts/partials/head.html    |  3 ++-
 layouts/partials/scripts.html | 33 +++++++++++++++++++++++++++++++++
 layouts/tags/list.html        |  3 +++
 7 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/assets/sass/_sidebar.scss b/assets/sass/_sidebar.scss
index 4d2b854..9053ac1 100644
--- a/assets/sass/_sidebar.scss
+++ b/assets/sass/_sidebar.scss
@@ -17,8 +17,12 @@
 
     @include link-secondary();
 
-    #widget-pages, #widget-tags, #widget-links {
-        div, ul {
+    #widget-pages,
+    #widget-tags,
+    #widget-links {
+
+        div,
+        ul {
             margin: 0.5em 0em 0.5em 0em;
         }
     }
@@ -33,4 +37,11 @@
             width: 50%;
         }
     }
+}
+
+#container-progress {
+    position: fixed;
+    width: 3em;
+    right: 1em;
+    bottom: 1em;
 }
\ No newline at end of file
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 6ba90df..66bc4c3 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -33,6 +33,7 @@ paginate = 10
   cdnLazyloadSRC = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr/lazyload/dsr_loading.svg"
   # 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"
 
 [markup]
   [markup.highlight]
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 0d564b0..506127b 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -29,6 +29,9 @@
         <div class="col-md-3 col-12 float-left" id="sidebar">
             {{ partial "sidebar.html" . }}
         </div>
+        <div id="container-progress">
+            <div id="progress"></div>
+        </div>
     </div>
 </main>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index d20006b..158c982 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -31,6 +31,9 @@
         <div class="col-md-3 col-12 float-left" id="sidebar">
             {{ partial "sidebar.html" . }}
         </div>
+        <div id="container-progress">
+            <div id="progress"></div>
+        </div>
     </div>
 </main>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 8d035ce..749c213 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -17,7 +17,8 @@
 {{ $style := $sass | resources.ToCSS }}
 <link rel="stylesheet" href="{{ $style.Permalink }}">
 <script src="{{ .Site.Params.cdnVanillaLazyloadJS }}"></script>
-
+<script src="{{ .Site.Params.cdnJQueryJS }}"></script>
+<script src="{{ .Site.Params.cdnProgessJS }}"></script>
 {{ if or .Params.math .Site.Params.math }}
 {{ partial "math.html" . }}
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 4caf7ba..c5efc63 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,3 +1,36 @@
+<script>
+    $(function () {
+        var bar = new ProgressBar.Circle('#progress', {
+            color: '#8AA2D3',
+            strokeWidth: 15,
+            trailColor: '#E5E2E4',
+            trailWidth: 15,
+            text: {
+                autoStyleContainer: false
+            },
+            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);
+        $(window).scroll(function () {
+            scrolled = ($(window).scrollTop() / ($(document).height() - $(window).height() - 1));
+            if (scrolled < 0.0005) {
+                scrolled = 0;
+            } else if (scrolled > 1) {
+                scrolled = 1;
+            }
+            bar.set(scrolled);
+        });
+    });
+</script>
 <script>
     var lazyLoadInstance = new LazyLoad({
         elements_selector: ".lazy"
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
index 9fa241d..30cca51 100644
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -37,6 +37,9 @@
         <div class="col-md-3 col-12 float-left" id="sidebar">
             {{ partial "sidebar.html" . }}
         </div>
+        <div id="container-progress">
+            <div id="progress"></div>
+        </div>
     </div>
 </main>
 {{ end }}
\ No newline at end of file
-- 
cgit v1.2.3