✨ Infinite scrolling

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" . }}

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 }}
+{{ end }}

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 }}

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 -->

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>

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);
+  }
+}