From 8f3c9d30798b71e90a1d34e49e333560b836652f Mon Sep 17 00:00:00 2001
From: tdro <tdro@noreply.example.com>
Date: Sun, 17 Mar 2024 18:59:31 -0400
Subject: static/js/update: Handle more drift

Make a bit smarter
---
 assets/js/index.js  | 38 ++++++++++++++++++++++++++++----------
 static/js/update.ts | 33 ++++++++++++++++++++++-----------
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/assets/js/index.js b/assets/js/index.js
index 4268a24..3a0bdf6 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -109,21 +109,20 @@
     }
     function update() {
         const url = self.location.href.split("#")[0].split("?")[0];
+        const indicator = document.querySelector("a[data-update]");
+        if (indicator.dataset.update === "refresh" || indicator === null) return;
+        indicator.cloneNode();
         fetch(url, "HEAD", function(request) {
-            const local = document.querySelector('meta[name="last-modified"]').content;
-            const remote = request.getResponseHeader("last-modified") || '';
-            const modified = Date.parse(document.lastModified) !== Date.parse(remote);
-            const drift = Date.parse(remote || local) - Date.parse(local);
-            let indicator = document.querySelector("a[data-update]");
-            if (indicator === null) return;
-            indicator.cloneNode();
-            if (drift === 0) return;
+            const local = document.querySelector('meta[name="last-modified"]').content || document.lastModified;
+            const remote = request.getResponseHeader("last-modified") || document.lastModified;
+            const modified = Date.parse(remote) > Date.parse(local);
+            const drift = Date.parse(remote) - Date.parse(local);
+            if (drift < 3000) return;
             if (remote && modified) {
                 fetch(url, "GET");
                 indicator.href = url;
                 indicator.removeAttribute("id");
                 indicator.dataset.update = "refresh";
-                self.removeEventListener("blur", update);
                 console.log("INFO: R: " + remote);
                 console.log("INFO: L: " + local);
                 console.log("INFO: D: " + drift);
@@ -131,7 +130,26 @@
             }
         });
     }
-    self.addEventListener("blur", update);
+    let scrolled;
+    let delay = 1000;
+    let delayed = 0;
+    self.addEventListener("scroll", function() {
+        if (scrolled) clearTimeout(scrolled);
+        scrolled = setTimeout(function() {
+            update();
+            delay = delay + delayed;
+            delayed = delay - delayed;
+        }, delay);
+    });
+    [
+        "focus",
+        "load",
+        "URLChangedCustomEvent"
+    ].forEach(function(event) {
+        self.addEventListener(event, function() {
+            update();
+        });
+    });
 })();
 (function() {
     const options = "targetWindow,width=700,height=500,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes";
diff --git a/static/js/update.ts b/static/js/update.ts
index 27b13b5..38d5925 100644
--- a/static/js/update.ts
+++ b/static/js/update.ts
@@ -15,15 +15,18 @@
 
   function update() {
     const url = self.location.href.split("#")[0].split("?")[0];
+
+    const indicator = document.querySelector("a[data-update]");
+    if (indicator.dataset.update === "refresh" || indicator === null) return;
+    const anchor = indicator.cloneNode();
+
     fetch(url, "HEAD", function (request) {
-      const local = document.querySelector('meta[name="last-modified"]').content;
-      const remote = request.getResponseHeader("last-modified") || '';
-      const modified = Date.parse(document.lastModified) !== Date.parse(remote);
-      const drift = Date.parse(remote || local) - Date.parse(local);
+      const local = document.querySelector('meta[name="last-modified"]').content || document.lastModified;
+      const remote = request.getResponseHeader("last-modified") || document.lastModified;
+      const modified = Date.parse(remote) > Date.parse(local);
+      const drift = Date.parse(remote) - Date.parse(local);
 
-      let indicator = document.querySelector("a[data-update]");
-      if (indicator === null) return;
-      const anchor = indicator.cloneNode();
+      if (drift < 3000) return;
 
       function reset() {
         indicator.href = anchor.href;
@@ -31,14 +34,11 @@
         indicator.dataset.update = anchor.dataset.update;
       }
 
-      if (drift === 0) return;
-
       if (remote && modified) {
         fetch(url, "GET");
         indicator.href = url;
         indicator.removeAttribute("id");
         indicator.dataset.update = "refresh";
-        self.removeEventListener("blur", update);
         console.log("INFO: R: " + remote);
         console.log("INFO: L: " + local);
         console.log("INFO: D: " + drift);
@@ -47,5 +47,16 @@
     });
   }
 
-  self.addEventListener("blur", update);
+  let scrolled;
+  let delay = 1000;
+  let delayed = 0;
+
+  self.addEventListener("scroll", function () {
+    if (scrolled) clearTimeout(scrolled);
+    scrolled = setTimeout(function () { update(); delay = delay + delayed; delayed = delay - delayed; }, delay);
+  });
+
+  ["focus", "load", "URLChangedCustomEvent"].forEach(function (event) {
+    self.addEventListener(event, function () { update(); });
+  });
 })();
-- 
cgit v1.2.3