From 6c176d20643de268faa432adfa3e95b2b8217cb0 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Wed, 15 Apr 2020 15:17:09 +0800
Subject: Add utterances loading indicator

---
 assets/sass/_list.scss                   | 17 +++++++++++
 exampleSite/config.toml                  | 12 +++++---
 layouts/_default/single.html             |  4 +--
 layouts/partials/comment-utterances.html |  6 ++++
 layouts/partials/scripts.html            | 52 +++++++++++++++++++++++++++++---
 5 files changed, 80 insertions(+), 11 deletions(-)

diff --git a/assets/sass/_list.scss b/assets/sass/_list.scss
index 1394f76..b4c660b 100644
--- a/assets/sass/_list.scss
+++ b/assets/sass/_list.scss
@@ -61,6 +61,23 @@ article {
     margin-bottom: 1.5em;
 }
 
+#post-loading {
+    border-top: $spliter;
+    margin: 0 0 1.5em 0;
+    padding-top: 1.5em;
+
+    #container-loading-bar {
+        width: 2em;
+        margin: 0 auto;
+    }
+
+    p {
+        text-align: center;
+        margin: 0.5em 0 0 0;
+    }
+}
+
+
 // not show while iframe not loaded
 #post-comment .utterances-frame {
     border-top: $spliter;
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index b6d882f..9e7c4d5 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -30,13 +30,15 @@ paginate = 10
 
   # Comments
   # utterances, see: https://utteranc.es/
-  # cdnUtterancesJS = "https://utteranc.es/client.js"
-  # utterancesRepo = "[ENTER REPO HERE]"
-  # utterancesIssueTerm = "pathname"
-  # utterancesTheme = "github-light"
+  utterancesComment = false
+  cdnUtterancesJS = "https://utteranc.es/client.js"
+  utterancesRepo = "[ENTER REPO HERE]"
+  utterancesIssueTerm = "pathname"
+  utterancesTheme = "github-light"
 
   # Disqus, see: https://disqus.com/admin/install/platforms/universalcode/
-  # disqusShortname = "[ENTER YOUR DISQUS SHORTNAME HERE]"
+  disqusComment = false
+  disqusShortname = "[ENTER YOUR DISQUS SHORTNAME HERE]"
 
   # Custom lazyload thumbnail
   cdnLazyloadSRC = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr/lazyload/dsr_loading.svg"
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 78a9148..edd7c70 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -21,10 +21,10 @@
                 </blockquote>
             </div>
             {{ end }}
-            {{ if .Site.Params.cdnUtterancesJS }}
+            {{ if .Site.Params.utterancesComment }}
             {{ partial "comment-utterances.html" . }}
             {{ end }}
-            {{ if .Site.Params.disqusShortname }}
+            {{ if .Site.Params.disqusComment }}
             {{ partial "comment-disqus.html" . }}
             {{ end }}
         </div>
diff --git a/layouts/partials/comment-utterances.html b/layouts/partials/comment-utterances.html
index 6653661..05b5ba0 100644
--- a/layouts/partials/comment-utterances.html
+++ b/layouts/partials/comment-utterances.html
@@ -1,3 +1,9 @@
+<div id="post-loading">
+    <div id="container-loading-bar">
+        <div id="loading-bar"></div>
+    </div>
+    <p>正在加载评论区</p>
+</div>
 <div id="post-comment">
     <script src="{{ .Site.Params.cdnUtterancesJS }}" repo="{{ .Site.Params.utterancesRepo }}" issue-term="{{ .Site.Params.utterancesIssueTerm }}" theme="{{ .Site.Params.utterancesTheme }}"
             crossorigin="anonymous" async></script>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index de2e018..db67ca5 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,3 +1,45 @@
+<!-- Comment loading indicator -->
+{{ if and (.IsPage) (.Site.Params.utterancesComment) }}
+<script>
+    $(function () {
+        var loadingBar = new ProgressBar.Circle('#loading-bar', {
+            color: '#8AA2D3',
+            strokeWidth: 15,
+            trailColor: '#E5E2E4',
+            trailWidth: 15,
+            fill: '#E5E2E4'
+        });
+        loadingBar.animate(1.0, {
+            duration: 10000
+        });
+
+        var commentStatus;
+        var commentLoadingTime = 0;
+        var commentCheckInterval = self.setInterval(checkUtterances, 500);
+
+        function checkUtterances() {
+            commentStatus = $('#post-comment .utterances').attr('style');
+            if (commentStatus === undefined) {
+                commentLoadingTime += 1;
+                if (commentLoadingTime > 16) {
+                    clearInterval(commentCheckInterval);
+                    $('#post-comment').hide();
+                    $('#post-loading p').text('评论区加载失败');
+                }
+                return;
+            } else {
+                clearInterval(commentCheckInterval);
+                loadingBar.animate(1.0, {
+                    duration: 500
+                }, function () {
+                    $('#post-loading').hide();
+                });
+            }
+        }
+    });
+</script>
+{{ end }}
+<!-- Scroll to top button -->
 {{ if .Site.Params.scrollTop }}
 <script>
     $(function () {
@@ -7,11 +49,11 @@
             trailColor: '#E5E2E4',
             trailWidth: 12,
             text: {
-                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>',
+                value: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-up" class="svg-inline--fa fa-angle-up fa-w-10" role="img" 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',
+            fill: '#E5E2E4'
         });
         var scrolled = ($(window).scrollTop() / ($(document).height() - $(window).height() - 1));
         bar.animate(scrolled);
@@ -35,7 +77,9 @@
 {{ end }}
 <!-- Vanilla LazyLoad -->
 <script>
-    var lazyLoadInstance = new LazyLoad({
-        elements_selector: ".lazy"
+    $(function () {
+        var lazyLoadInstance = new LazyLoad({
+            elements_selector: ".lazy"
+        });
     });
 </script>
\ No newline at end of file
-- 
cgit v1.2.3