static/js: Add update check

In the case of heavy caching attempt a naive site update check with voluntary
refresh. Not fully idempotent?

2 files changed, 61 insertions, 5 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index a093b9b..e5eaa16 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -661,7 +661,8 @@ self-embed iframe {
 img {
   height: auto;
   max-width: 100%;
-  border: 1px solid;
+  border-width: 1px;
+  border-style: solid;
   border-color: #ccc;
   border-color: var(--border-darker);
   border-radius: 0.5rem;
@@ -1359,6 +1360,11 @@ column-middle main > footer {
   margin: 1rem 0;
 }
 
+icon-button,
+icon-navigator {
+  height: 4rem;
+}
+
 icon-button a {
   color: inherit;
   display: flex;
@@ -1371,9 +1377,16 @@ icon-button a {
   padding: 0.5rem 0;
 }
 
-icon-button,
-icon-navigator {
-  height: 4rem;
+icon-button a svg:nth-of-type(2),
+icon-button a small:nth-of-type(2),
+icon-button a[data-update="refresh"] svg:nth-of-type(1),
+icon-button a[data-update="refresh"] small:nth-of-type(1) {
+  display: none;
+}
+
+icon-button a[data-update="refresh"] svg:nth-of-type(2),
+icon-button a[data-update="refresh"] small:nth-of-type(2) {
+  display: initial;
 }
 
 icon-button a:hover {
@@ -1578,7 +1591,7 @@ following-list aside footer {
 }
 
 author-list h1 a {
- color: inherit;
+  color: inherit;
 }
 
 author-list aside {
diff --git a/assets/js/index.js b/assets/js/index.js
index cc61f84..67331da 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -64,6 +64,49 @@
     });
 })();
 (function() {
+    function check(url, method, callback) {
+        const http = new XMLHttpRequest();
+        http.onreadystatechange = function() {
+            if (http.readyState === 4 && http.status === 200) {
+                if (callback) callback(http);
+            }
+        };
+        http.open(method, url);
+        http.setRequestHeader("Pragma", "no-cache");
+        http.setRequestHeader("Cache-Control", "no-cache");
+        http.send();
+    }
+    function update(id) {
+        const url = self.location.href;
+        check(url, "HEAD", function(request) {
+            const local = document.querySelector('meta[name="last-modified"]').content;
+            const remote = request.getResponseHeader("last-modified") || local;
+            const localHour = local.substring(0, local.length - 9);
+            const remoteHour = remote.substring(0, remote.length - 9);
+            const modified = localHour !== remoteHour;
+            if (modified) {
+                const indicator = document.querySelector("a[data-update]");
+                check(url, "GET");
+                indicator.href = url;
+                indicator.removeAttribute("id");
+                indicator.dataset.update = "refresh";
+                clearInterval(id);
+            }
+            console.log("R: " + remote);
+            console.log("L: " + local);
+            console.log("M: " + modified);
+        });
+    }
+    self.addEventListener("load", function() {
+        let meta = document.querySelector('meta[name="refresh"]');
+        if (meta) meta = document.querySelector('meta[name="refresh"]').content;
+        const interval = meta || 3600000;
+        const monitor = setInterval(function() {
+            if (navigator.onLine) update(monitor);
+        }, interval);
+    });
+})();
+(function() {
     const options = "targetWindow,width=700,height=500,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes";
     self.addEventListener("keydown", function(event) {
         if (event.repeat && event.key === "d") {