static/js/timeago: Constrain to viewport

1 files changed, 18 insertions, 5 deletions

diff --git a/static/js/timeago.ts b/static/js/timeago.ts
index 81ae579..178bdf4 100644
--- a/static/js/timeago.ts
+++ b/static/js/timeago.ts
@@ -8,9 +8,20 @@
     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: millisecond = new Date(element.dateTime) || new Date();
@@ -21,20 +32,22 @@
           const hours:   number = Math.floor(minutes / 60);
           const days:    number = 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",); }
             if (minutes <= 120) { return element.textContent = relative.format(-1 * minutes, "minute",); }
             if (hours   <= 48)  { return element.textContent = relative.format(-1 * hours,   "hour",);   }
             if (days    <= 60)  { 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",);    }
             if (-1 * hours   >= 48)  { return element.textContent = relative.format(-1 * hours,   "hour",);   }
             if (-1 * minutes >= 120) { return element.textContent = relative.format(-1 * minutes, "minute",); }
             if (-1 * seconds >= 0)   { return element.textContent = relative.format(-1 * seconds, "second",); }
           }
-
         } catch (error) {
           console.error(
             "Error: Unable to resolve relative time format!",
@@ -50,7 +63,7 @@
   self.addEventListener("DOMContentLoaded", function () {
     setTimeout(function () {
       clearInterval(substitution);
-      setInterval(date, 1000);
+      setInterval(function () { date("viewport"); }, 1000);
     }, 1000);
   });
 })();