From 155f1af30d94b8d3312804b00fbf51668338b634 Mon Sep 17 00:00:00 2001
From: Zhao Zuohong <1040110848@qq.com>
Date: Thu, 20 Oct 2022 19:11:46 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Infinite=20scrolling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/_default/baseof.html           |  6 +++
 layouts/index.html                     |  5 ++-
 layouts/partials/after-content-js.html | 47 ++++++++++++++++++++
 layouts/partials/head.html             |  5 +++
 layouts/partials/loading.html          |  8 ++++
 static/style/loading.css               | 60 ++++++++++++++++++++++++++
 6 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 layouts/partials/loading.html
 create mode 100644 static/style/loading.css

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index f9ee8a3..c716e0b 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -12,10 +12,16 @@
         
             <!-- Pagination -->
             <div class="center">
+
+                {{ if not .Site.Params.infiniteScroll }}
+
                 <div class="pagination">
                     {{ block "pagination" . }}
                     {{ end }}
                 </div>
+
+                {{ end }}
+
             </div>
 
             {{ partial "footer.html" . }}
diff --git a/layouts/index.html b/layouts/index.html
index afea4e7..f6cfa39 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,6 +5,9 @@
             {{ partial "row.html" . }}
         {{ end }}
     </div>
+    {{ if .Site.Params.infiniteScroll }}
+        {{ partial "loading.html" . }}
+    {{ end }}
 {{ end }}
 
 
@@ -34,4 +37,4 @@
     {{ else }}
         <div class="page-item disabled">Next ></div>
     {{ end }}
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/layouts/partials/after-content-js.html b/layouts/partials/after-content-js.html
index 211ec72..6f1f4d7 100644
--- a/layouts/partials/after-content-js.html
+++ b/layouts/partials/after-content-js.html
@@ -47,3 +47,50 @@
     });
 </script>
 
+
+{{ if .Site.Params.infiniteScroll }}
+<script>
+var throttle_pause = false;
+var fetching = false;
+var page_number = {{ $.Paginator.PageNumber }};
+const total_pages = {{ $.Paginator.TotalPages }};
+
+const throttle = (func, timeout) => {
+    if (throttle_pause || fetching) return;
+    throttle_pause = true;
+    setTimeout(() => {
+        func();
+        throttle_pause = false;
+    }, timeout);
+};
+
+const loading_wrapper = document.querySelector(".loading-wrapper");
+
+document.addEventListener("scroll", () => {
+    throttle(() => {
+        const last_moment = document.querySelector(".page > .container .moment-row:last-child");
+        const page_end = window.innerHeight + window.pageYOffset + 100 + last_moment.offsetHeight >= document.body.offsetHeight;
+        if (page_end && page_number < total_pages) {
+            fetching = true;
+            loading_wrapper.style.display = "flex";
+            fetch(`/${++page_number}`).then((response) => {
+                return response.text();
+            }).then((html_string) => {
+                const parser = new DOMParser();
+                const next_page = parser.parseFromString(html_string, "text/html");
+                const rows = next_page.querySelectorAll(".moment-row");
+                const container = document.querySelector(".page > .container");
+                rows.forEach((r) => {
+                    container.appendChild(r);
+                });
+            }).catch((err) => {
+                console.log(err);
+            }).then(() => {
+                fetching = false;
+            loading_wrapper.style.display = "none";
+            });
+        }
+    }, 250);
+})
+</script>
+{{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 6196c21..795f670 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -44,6 +44,11 @@
 <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-min.css">
 <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css">
 
+<!-- CSS for loading animation -->
+{{ if .Site.Params.infiniteScroll }}
+<link rel="stylesheet" href="/style/loading.css">
+{{ end }}
+
 {{/* pangu support: js in the end before the body closing tag */}}
 {{ if .Site.Params.features.pangu }}
 <!-- pangu support -->
diff --git a/layouts/partials/loading.html b/layouts/partials/loading.html
new file mode 100644
index 0000000..e54d4f4
--- /dev/null
+++ b/layouts/partials/loading.html
@@ -0,0 +1,8 @@
+<div class="loading-wrapper">
+  <div class="lds-ellipsis">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
diff --git a/static/style/loading.css b/static/style/loading.css
new file mode 100644
index 0000000..12904b3
--- /dev/null
+++ b/static/style/loading.css
@@ -0,0 +1,60 @@
+.loading-wrapper {
+  display: none;
+  justify-content: center;
+}
+
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #ccc;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}