static/js/infinitescroll: Add to bundle

Default this '2 minutes of code' to an off state

3 files changed, 65 insertions, 2 deletions

diff --git a/assets/js/index.js b/assets/js/index.js
index c230a42..1c7626c 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -803,6 +803,66 @@
     });
 })();
 (function() {
+    const cookiesDisabled = !navigator.cookieEnabled;
+    if (cookiesDisabled) {
+        document.cookie = "disabled";
+        document.cookie.indexOf("disabled");
+        return console.warn("WARNING: Native pagination fallback due to cookie restrictions");
+    }
+    function fetch(url, method, callback, fallback) {
+        const http = new XMLHttpRequest();
+        http.onreadystatechange = function() {
+            if (callback && http.readyState === 4) {
+                if (http.status === 200) callback(http);
+                else fallback(http);
+            }
+        };
+        http.open(method, url);
+        http.send();
+        return http;
+    }
+    let abort = false;
+    const state = "off";
+    const key = "config.scroll.infinite";
+    if (!localStorage[key]) localStorage[key] = state;
+    [
+        "scroll",
+        "DOMContentLoaded"
+    ].forEach(function(event) {
+        self.addEventListener(event, function() {
+            if (abort || localStorage[key] === state) return;
+            const remaining = Math.abs(document.documentElement.scrollHeight - document.documentElement.clientHeight - self.pageYOffset);
+            const traversed = self.pageYOffset;
+            const journey = remaining + traversed;
+            const ratio = traversed / journey * 100;
+            const threshold = ratio >= 50;
+            const pagination = document.querySelector('[data-type="pagination"]');
+            if (!pagination) return;
+            const main = document.querySelector("main");
+            const count = main.childNodes.length;
+            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() === undefined) {
+                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 i1 = 0; i1 < items.length; i1++)main.appendChild(items[i1]);
+                    main.after(paginate);
+                    console.log("INFO: Fetch", next.href, items);
+                }, function(http) {
+                    console.warn("WARNING: Switching to native pagination", http);
+                    main.insertAdjacentElement("afterend", pagination);
+                    abort = true;
+                });
+            }
+            console.log("INFO:", "r:", remaining, "t:", traversed, "j:", journey, "%:", ratio, "c:", count);
+        });
+    });
+})();
+(function() {
     const relative = new Intl.RelativeTimeFormat("en", {
         localeMatcher: "best fit",
         numeric: "always",
diff --git a/static/js/index.ts b/static/js/index.ts
index 517445c..a280ca4 100644
--- a/static/js/index.ts
+++ b/static/js/index.ts
@@ -8,6 +8,7 @@ import "./autoplay.ts";
 import "./hoverfix.ts";
 import "./forms.ts";
 import "./domfilter.ts";
+import "./infinitescroll.ts";
 import "./timeago.ts";
 
 console.log("INFO: Surface Control Complete");
diff --git a/static/js/infinitescroll.ts b/static/js/infinitescroll.ts
index bef477b..63077a5 100644
--- a/static/js/infinitescroll.ts
+++ b/static/js/infinitescroll.ts
@@ -24,13 +24,14 @@
 
   let abort = false;
 
+  const state = "off";
   const key = "config.scroll.infinite";
 
-  if (!localStorage[key]) localStorage[key] = "";
+  if (!localStorage[key]) localStorage[key] = state;
 
   ["scroll", "DOMContentLoaded"].forEach(function (event) {
     self.addEventListener(event, function () {
-      if (abort) return;
+      if (abort || localStorage[key] === state) return;
 
       const remaining = Math.abs(
           document.documentElement.scrollHeight
@@ -55,6 +56,7 @@
       if (end || asynchronous) return pagination.remove();
 
       if (threshold && (pagination.remove() === undefined)) {
+
         fetch(next.href, "GET", function (http) {
           const page = (new DOMParser()).parseFromString(http.responseText, "text/html");
           const items = page.querySelector("main").childNodes;