diff options
author | tdro <tdro@noreply.example.com> | 2022-09-02 04:15:06 -0400 |
---|---|---|
committer | tdro <tdro@noreply.example.com> | 2022-09-02 04:15:06 -0400 |
commit | 9f9a5d6aa541437a2459de1bf12f7bd9e8ef37ab (patch) | |
tree | 25b2405299e4ae76c051a4591c042e1acb09dd95 /assets/js | |
parent | bfbd644613e5371a07c738fc94c48d07d4d815c5 (diff) | |
download | canory-9f9a5d6aa541437a2459de1bf12f7bd9e8ef37ab.tar.gz canory-9f9a5d6aa541437a2459de1bf12f7bd9e8ef37ab.tar.bz2 canory-9f9a5d6aa541437a2459de1bf12f7bd9e8ef37ab.zip |
static/js/pager: Add fragment intersection observer
To release URL fragments
Diffstat (limited to 'assets/js')
-rw-r--r-- | assets/js/index.js | 35 |
1 files changed, 29 insertions, 6 deletions
diff --git a/assets/js/index.js b/assets/js/index.js index a0c608f..b4f0bcb 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -12,18 +12,20 @@ const settings1 = { pager: {} }; - const url1 = self.location.href.split("#")[0]; + const url1 = 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; } @@ -50,8 +52,29 @@ history.go(-1); } }; + const fragmentClear = (entries)=>{ + for(let entry = 0; entry < entries.length; entry++){ + if (self.location.hash) { + self.history.pushState(null, "", url1); + } + } + }; + 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(settings1, url1); + fragmentRelease(fragmentClear); self.addEventListener("click", function(event) { const up = document.getElementById("top"); const back = document.getElementById("back"); @@ -498,8 +521,8 @@ if (days <= 60) { return element.textContent = relative.format(-1 * days, "day"); } - } catch (err) { - console.error("Error: Unable to resolve relative time format!", err); + } catch (error) { + console.error("Error: Unable to resolve relative time format!", error); } }); }; |