From f0cbdec755e91fc3f02e96b03e1fc200b135815e Mon Sep 17 00:00:00 2001 From: tdro Date: Sat, 8 Apr 2023 14:35:37 -0400 Subject: static/js: Add update check In the case of heavy caching attempt a naive site update check with voluntary refresh. Not fully idempotent? --- assets/css/default.css | 23 ++++++++++++++++++----- assets/js/index.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 5 deletions(-) (limited to 'assets') 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 @@ -63,6 +63,49 @@ scrollRestore(url); }); })(); +(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) { -- cgit v1.2.3