static/js/timeago: Constrain to viewport

1 files changed, 17 insertions, 4 deletions

diff --git a/assets/js/index.js b/assets/js/index.js
index 89bc1c8..8329e09 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -542,9 +542,18 @@
         numeric: "always",
         style: "long"
     });
-    const date = function() {
+    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;
+    }
+    const date = function(update) {
         const elements = document.querySelectorAll("time");
         for(let i = 0; i < elements.length; ++i){
+            const offscreen = !viewport(elements[i]);
+            const hidden = elements[i].offsetParent === null;
+            if (update === "viewport" && (offscreen || hidden)) continue;
             (function(element) {
                 try {
                     const time = new Date(element.dateTime) || new Date();
@@ -553,7 +562,9 @@
                     const minutes = Math.floor(seconds / 60);
                     const hours = Math.floor(minutes / 60);
                     const days = Math.floor(hours / 24);
-                    if (Math.sign(seconds) === 1) {
+                    const past = Math.sign(seconds) === 1;
+                    const future = Math.sign(seconds) === -1;
+                    if (past) {
                         if (seconds <= 60) {
                             return element.textContent = relative.format(-1 * seconds, "second");
                         }
@@ -567,7 +578,7 @@
                             return element.textContent = relative.format(-1 * days, "day");
                         }
                     }
-                    if (Math.sign(seconds) === -1) {
+                    if (future) {
                         if (-1 * days >= 60) {
                             return element.textContent = relative.format(-1 * days, "day");
                         }
@@ -591,7 +602,9 @@
     self.addEventListener("DOMContentLoaded", function() {
         setTimeout(function() {
             clearInterval(substitution);
-            setInterval(date, 1000);
+            setInterval(function() {
+                date("viewport");
+            }, 1000);
         }, 1000);
     });
 })();