1 files changed, 60 insertions, 0 deletions
diff --git a/static/js/infinitescroll.ts b/static/js/infinitescroll.ts
new file mode 100644
index 0000000..c366619
--- /dev/null
+++ b/static/js/infinitescroll.ts
@@ -0,0 +1,60 @@
+(function () {
+  type percent = number;
+
+  function fetch(url, method, callback) {
+    const http = new XMLHttpRequest();
+    http.onreadystatechange = function () {
+      if (callback && http.readyState === 4 && http.status === 200) {
+        callback(http);
+      }
+    };
+    http.open(method, url);
+    http.send();
+    return http;
+  }
+
+  ["scroll", "DOMContentLoaded"].forEach(function (event) {
+    self.addEventListener(event, function () {
+      const remaining = Math.abs(
+          document.documentElement.scrollHeight
+        - document.documentElement.clientHeight
+        - document.documentElement.scrollTop
+      );
+
+      const traversed = self.pageYOffset;
+      const journey = remaining + traversed;
+      const ratio: percent = traversed / journey * 100;
+      const threshold = ratio >= 50;
+      const pagination = document.querySelector('[data-type="pagination"]');
+
+      if (!pagination) return;
+
+      const main = document.querySelector("main");
+      const next = pagination.querySelector('[rel="next"]');
+      const end = pagination.querySelector('[rel="last"]').title === "hidden";
+      const asynchronous = document.querySelectorAll("[data-type='pagination']").length !== 1;
+
+      if (end || asynchronous) return pagination.remove();
+
+      if (threshold) {
+
+        pagination.remove();
+
+        fetch(next.href, "GET", function (http) {
+          const page = (new DOMParser()).parseFromString(http.responseText, "text/html");
+          const items = page.querySelector("main").childNodes;
+          const paginate =  page.querySelector('[data-type="pagination"]');
+
+          for (let i = 0; i < items.length; i++) {
+            main.appendChild(items[i]);
+          }
+
+          main.after(paginate);
+          console.log("Fetch:", next.href, items);
+        });
+      }
+
+      console.log("r:", remaining, "t:", traversed, "j:", journey, "%:", ratio);
+    });
+  });
+})();