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

---
 layouts/partials/comment-utterances.html |  6 ++++
 layouts/partials/scripts.html            | 52 +++++++++++++++++++++++++++++---
 2 files changed, 54 insertions(+), 4 deletions(-)

(limited to 'layouts/partials')

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