static/js: Prepare custom URL changed event

Set key on pager and always clear interval

3 files changed, 49 insertions, 45 deletions

diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts
index 0a7e9da..1e44601 100644
--- a/static/js/fixedsearch.ts
+++ b/static/js/fixedsearch.ts
@@ -4,7 +4,8 @@
 */
 
 (function () {
-  self.addEventListener("DOMContentLoaded", function () {
+  ["DOMContentLoaded", "URLChangedCustomEvent"].forEach(function (event) {
+  self.addEventListener(event, function () {
     const form = document.getElementById("search-form"); // targets <form>
     const query = document.getElementById("search-input"); // targets <input>
     const submit = document.getElementById("search-submit"); // targets <button>
@@ -109,7 +110,7 @@
         if (dropdown && document.activeElement == query) {
           event.preventDefault();
           head.focus();
-          self.window.location = document.activeElement.href;
+          head.click();
         }
       }
     });
@@ -151,14 +152,14 @@
         local.items = local.items.concat(remote.items);
       }
       if (paginated) {
-        fetchJson(remote.next_url, function (request) {
+        fetch(remote.next_url, function (request) {
           appendItemsTo(local, JSON.parse(request.responseText));
         });
       }
       data = local;
     }
 
-    function fetchJson(url, callback) {
+    function fetch(url, callback) {
       const http = new XMLHttpRequest();
       http.onreadystatechange = function () {
         if (http.readyState === 4 && http.status === 200 && callback) {
@@ -171,7 +172,7 @@
 
     /* Load script based on https://stackoverflow.com/a/55451823 */
 
-    function loadScript(url) {
+    function script(url) {
       return new Promise(function (resolve, reject) {
         const script = document.createElement("script");
         script.onerror = reject;
@@ -181,22 +182,20 @@
             script,
             document.currentScript,
           );
-        } else {
-          document.head.appendChild(script);
-        }
+        } else document.head.appendChild(script);
         script.src = url;
       });
     }
 
-    let firstRun = true;
+    let boot = true;
 
     function initialize() {
-      if (firstRun) {
-        loadScript(window.location.origin + "/js/fuzzysort.js")
+      if (boot) {
+        script(window.location.origin + "/js/fuzzysort.js")
           .then(function () {
-            firstRun = false;
+            boot = false;
 
-            fetchJson("/index.json", function (request) {
+            fetch("/index.json", function (request) {
               appendItemsTo({}, JSON.parse(request.responseText));
             });
 
@@ -246,9 +245,7 @@
             "</span>",
           );
 
-          if (highlight === null) {
-            highlight = title;
-          }
+          if (highlight === null) highlight = title;
 
           items = items +
             '\n<li>\n<a href="'.concat(
@@ -260,4 +257,5 @@
       dropdown.innerHTML = items;
     }
   });
+  });
 })();
diff --git a/static/js/pager.ts b/static/js/pager.ts
index 99f88c7..0c512ce 100644
--- a/static/js/pager.ts
+++ b/static/js/pager.ts
@@ -7,49 +7,54 @@
     return console.warn("WARNING: Pager disabled due to cookie restrictions");
   }
 
+  let url;
   let seek;
-  let settings = { pager: {} };
+  let pager = {};
 
-  const key = "settings";
-  const url = self.location.href.split("#")[0].split("?")[0];
+  const key = "config.scroll.pager.urls";
 
-  if (!localStorage[key]) localStorage[key] = JSON.stringify(settings);
+  if (!localStorage[key]) localStorage[key] = JSON.stringify(pager);
+
+  const link = function () {
+    url = self.location.href.split("#")[0].split("?")[0];
+  };
 
   const scrollRestore = function (url) {
     if (history.scrollRestoration) history.scrollRestoration = "manual";
-    settings = JSON.parse(localStorage[key]);
+    pager = JSON.parse(localStorage[key]);
     const hash = self.location.hash;
     const fragment = hash.slice(1) && document.getElementById(hash.slice(1));
     const fragmentInURL = hash.length > 0;
     if (fragmentInURL && document.body.contains(fragment)) {
-      settings["pager"][url] = self.pageYOffset;
-      localStorage[key] = JSON.stringify(settings);
+      pager[url] = self.pageYOffset;
+      localStorage[key] = JSON.stringify(pager);
       fragment.scrollIntoView();
       return self.addEventListener("DOMContentLoaded", function () {
         fragment.scrollIntoView();
       });
     }
-    if (settings["pager"][url] > 0) {
-      self.scrollTo(0, settings["pager"][url]);
+    if (pager[url] > 0) {
+      clearInterval(seek)
+      self.scrollTo(0, pager[url]);
       let i = 0; return seek = setInterval(function (position) {
         i++; if (i > 100) clearInterval(seek);
         if (document.documentElement.scrollHeight >= position + document.documentElement.clientHeight) {
           clearInterval(seek); self.scrollTo(0, position);
         }
-      }, 4, settings["pager"][url]);
-    }
-    settings["pager"][url] = self.pageYOffset;
-    localStorage[key] = JSON.stringify(settings);
+      }, 4, pager[url]);
+    } else self.scrollTo(0, 0);
+    pager[url] = self.pageYOffset;
+    localStorage[key] = JSON.stringify(pager);
   };
 
   const scrollTrack = function (url) {
     const currentPosition = self.pageYOffset;
-    settings = JSON.parse(localStorage[key]);
-    settings["pager"][url] = currentPosition;
-    localStorage[key] = JSON.stringify(settings);
+    pager = JSON.parse(localStorage[key]);
+    pager[url] = currentPosition;
+    localStorage[key] = JSON.stringify(pager);
   };
 
-  const reverseTrack = function (back, up, event) {
+  const scrollReverse = function (back, up, event) {
     if (document.body.contains(up) && up.contains(event.target)) {
       event.preventDefault();
       window.scrollTo(0, 0);
@@ -65,22 +70,22 @@
     self.addEventListener("click", function (event) {
       const up = document.getElementById("top");
       const back = document.getElementById("back");
-      reverseTrack(back, up, event);
+      scrollReverse(back, up, event);
     });
   });
 
-  ["DOMContentLoaded", "pageshow", "hashchange"].forEach(function (event) {
+  ["DOMContentLoaded", "pageshow", "hashchange", "URLChangedCustomEvent"].forEach(function (event) {
     self.addEventListener(event, function (event) {
       if (event.type === "pageshow") {
-        return event.persisted && self.scrollTo(0, settings["pager"][url]);
+        return event.persisted && self.scrollTo(0, pager[url]);
       }
-      scrollRestore(url);
+      link(); scrollRestore(url);
     });
   });
 
   ["click", "touchstart", "scroll"].forEach(function (event) {
     self.addEventListener(event, function () {
-      scrollTrack(url);
+      link(); scrollTrack(url);
     });
   });
 })();
diff --git a/static/js/timeago.ts b/static/js/timeago.ts
index 57eb16e..af8f6f5 100644
--- a/static/js/timeago.ts
+++ b/static/js/timeago.ts
@@ -8,7 +8,7 @@
     style: "long",
   });
 
-  function viewport(element, options = { offset: 100 }) {
+  function viewport(element, options = { offset: 250 }) {
     const view = element.getBoundingClientRect();
     return view.top    >= -options.offset
         && view.left   >= -options.offset
@@ -45,14 +45,13 @@
           if (element.dataset.type === "default") { tiny = function (string) { return string; }; }
 
           if (element.dataset.type === "localDate") {
-            return element.textContent = new Intl.DateTimeFormat([], {
-              dateStyle: "medium",
-            }).format(time).replace(",", "");
+            return element.textContent = new Intl.DateTimeFormat([], { dateStyle: "medium", }).format(time).replace(",", "");
           }
 
           if (element.dataset.type === "localTime") {
             return element.textContent = new Intl.DateTimeFormat([], {
-              hour12: false, timeStyle: "short",
+              hour12: false,
+              timeStyle: "short",
             }).format(time) + " " + new Intl.DateTimeFormat([], { timeZoneName: "short" }).format(time).split(" ")[1];
           }
 
@@ -78,8 +77,10 @@
 
   const substitution = setInterval(date, 4);
 
-  self.addEventListener("scroll", function () {
-    date("viewport");
+  ["scroll", "URLChangedCustomEvent"].forEach(function (event) {
+    self.addEventListener(event, function () {
+      date("viewport");
+    });
   });
 
   self.addEventListener("DOMContentLoaded", function () {