static/js/pager: Add fragment intersection observer

To release URL fragments

1 files changed, 30 insertions, 4 deletions

diff --git a/static/js/pager.ts b/static/js/pager.ts
index 0de2ec1..68708cc 100644
--- a/static/js/pager.ts
+++ b/static/js/pager.ts
@@ -9,19 +9,21 @@
 
   const settings = { pager: {} };
 
-  const url = self.location.href.split("#")[0];
+  const url = self.location.href.split("#")[0].split("?")[0];
 
   const scrollRestore = (settings, url) => {
     if (history.scrollRestoration) history.scrollRestoration = "manual";
     if (localStorage["settings"]) {
       settings = JSON.parse(localStorage["settings"]);
     }
-    if (self.location.hash.length > 0) {
+    const fragment = document.getElementById(location.hash.slice(1));
+    const fragmentInURL = self.location.hash.length > 0;
+    if (fragmentInURL && document.body.contains(fragment)) {
       settings["pager"][url] = self.pageYOffset;
       localStorage["settings"] = JSON.stringify(settings);
-      document.getElementById(location.hash.slice(1)).scrollIntoView();
+      fragment.scrollIntoView();
       self.addEventListener("load", function () {
-        document.getElementById(location.hash.slice(1)).scrollIntoView();
+        fragment.scrollIntoView();
       });
       return;
     }
@@ -51,8 +53,32 @@
     }
   };
 
+  const fragmentClear = (entries) => {
+    for (let entry = 0; entry < entries.length; entry++) {
+      if (self.location.hash) {
+        self.history.pushState(null, "", url);
+      }
+    }
+  };
+
+  const fragmentRelease = (fragmentCallback) => {
+    try {
+      const fragmentObserver = new IntersectionObserver(fragmentCallback, {
+        threshold: 1.0,
+      });
+      const fragments = document.querySelectorAll("[id]");
+
+      for (let fragment = 0; fragment < fragments.length; fragment++) {
+        fragmentObserver.observe(fragments[fragment]);
+      }
+    } catch (error) {
+      console.log("The intersection observer is not supported", error);
+    }
+  };
+
   self.addEventListener("DOMContentLoaded", function () {
     scrollRestore(settings, url);
+    fragmentRelease(fragmentClear);
     self.addEventListener("click", function (event) {
       const up = document.getElementById("top");
       const back = document.getElementById("back");