static/js/pager: Run on cache persistence

Run a limited seek interval

2 files changed, 43 insertions, 13 deletions

diff --git a/assets/js/index.js b/assets/js/index.js
index a766e4a..b0f2f84 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -5,6 +5,7 @@
         document.cookie.indexOf("disabled");
         return console.log("Pager is disabled due to cookie restrictions.");
     }
+    let seek;
     let settings = {
         pager: {}
     };
@@ -14,8 +15,9 @@
     const scrollRestore = function(url) {
         if (history.scrollRestoration) history.scrollRestoration = "manual";
         settings = JSON.parse(localStorage[key]);
-        const fragment = self.location.hash.slice(1) && document.getElementById(self.location.hash.slice(1));
-        const fragmentInURL = self.location.hash.length > 0;
+        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);
@@ -25,7 +27,16 @@
             });
         }
         if (settings["pager"][url] > 0) {
-            return self.scrollTo(0, settings["pager"][url]);
+            self.scrollTo(0, settings["pager"][url]);
+            let i1 = 0;
+            return seek = setInterval(function(position) {
+                i1++;
+                if (i1 > 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);
@@ -48,15 +59,23 @@
         }
     };
     self.addEventListener("DOMContentLoaded", function() {
-        scrollRestore(url);
         self.addEventListener("click", function(event) {
             const up = document.getElementById("top");
             const back = document.getElementById("back");
             reverseTrack(back, up, event);
         });
     });
-    self.addEventListener("hashchange", function() {
-        scrollRestore(url);
+    [
+        "DOMContentLoaded",
+        "pageshow",
+        "hashchange"
+    ].forEach(function(event) {
+        self.addEventListener(event, function(event) {
+            if (event.type === "pageshow") {
+                return event.persisted && self.scrollTo(0, settings["pager"][url]);
+            }
+            scrollRestore(url);
+        });
     });
     [
         "click",
diff --git a/static/js/pager.ts b/static/js/pager.ts
index 3f9beaf..6133f21 100644
--- a/static/js/pager.ts
+++ b/static/js/pager.ts
@@ -7,6 +7,7 @@
     return console.log("Pager is disabled due to cookie restrictions.");
   }
 
+  let seek;
   let settings = { pager: {} };
 
   const key = "settings";
@@ -17,9 +18,9 @@
   const scrollRestore = function (url) {
     if (history.scrollRestoration) history.scrollRestoration = "manual";
     settings = JSON.parse(localStorage[key]);
-    const fragment = self.location.hash.slice(1) &&
-      document.getElementById(self.location.hash.slice(1));
-    const fragmentInURL = self.location.hash.length > 0;
+    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);
@@ -29,7 +30,13 @@
       });
     }
     if (settings["pager"][url] > 0) {
-      return self.scrollTo(0, settings["pager"][url]);
+      self.scrollTo(0, settings["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);
@@ -55,7 +62,6 @@
   };
 
   self.addEventListener("DOMContentLoaded", function () {
-    scrollRestore(url);
     self.addEventListener("click", function (event) {
       const up = document.getElementById("top");
       const back = document.getElementById("back");
@@ -63,8 +69,13 @@
     });
   });
 
-  self.addEventListener("hashchange", function () {
-    scrollRestore(url);
+  ["DOMContentLoaded", "pageshow", "hashchange"].forEach(function (event) {
+    self.addEventListener(event, function (event) {
+      if (event.type === "pageshow") {
+        return event.persisted && self.scrollTo(0, settings["pager"][url]);
+      }
+      scrollRestore(url);
+    });
   });
 
   ["click", "touchstart", "scroll"].forEach(function (event) {