static/js: Ensure correct width and height references

4 files changed, 67 insertions, 5 deletions

diff --git a/static/js/autoplay.ts b/static/js/autoplay.ts
index efa55e9..70f372a 100644
--- a/static/js/autoplay.ts
+++ b/static/js/autoplay.ts
@@ -6,8 +6,8 @@
       const view = element.getBoundingClientRect();
       return view.top    >= -options.offset.top
           && view.left   >= -options.offset.left
-          && view.bottom <= (window.innerHeight || self.documentElement.clientHeight) + options.offset.bottom
-          && view.right  <= (window.innerWidth  || self.documentElement.clientWidth)  + options.offset.right;
+          && view.bottom <= (self.innerHeight || document.documentElement.clientHeight) + options.offset.bottom
+          && view.right  <= (self.innerWidth  || document.documentElement.clientWidth)  + options.offset.right;
   };
 
   ["scroll", "DOMContentLoaded"].forEach(function (event) {
diff --git a/static/js/index.ts b/static/js/index.ts
index da4defa..8bad1cd 100644
--- a/static/js/index.ts
+++ b/static/js/index.ts
@@ -5,6 +5,7 @@ import "./instantpage.ts";
 import "./contextmenu.ts";
 import "./fixedsearch.ts";
 import "./autoplay.ts";
+import "./infinitescroll.ts";
 import "./timeago.ts";
 
 console.log("Surface Control: Complete");
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);
+    });
+  });
+})();
diff --git a/static/js/timeago.ts b/static/js/timeago.ts
index f794c4a..10206e3 100644
--- a/static/js/timeago.ts
+++ b/static/js/timeago.ts
@@ -10,9 +10,10 @@
 
   function viewport(element, options = { offset: 100 }) {
     const view = element.getBoundingClientRect();
-    return view.top >= -options.offset && view.left >= -options.offset &&
-      view.bottom <= (window.innerHeight || self.documentElement.clientHeight) + options.offset &&
-      view.right <= (window.innerWidth || self.documentElement.clientWidth) + options.offset;
+    return view.top    >= -options.offset
+        && view.left   >= -options.offset
+        && view.bottom <= (self.innerHeight || document.documentElement.clientHeight) + options.offset
+        && view.right  <= (self.innerWidth  || document.documentElement.clientWidth)  + options.offset;
   }
 
   const date = function (update) {