diff options
author | tdro <tdro@noreply.example.com> | 2024-01-13 20:33:21 -0500 |
---|---|---|
committer | tdro <tdro@noreply.example.com> | 2024-01-13 20:33:21 -0500 |
commit | 30d33a9eedca8ae4b2e6082b915579c309f8b52c (patch) | |
tree | 3ade16a8c0ff1fa5d701d8bb8f0ad10701142b2d /static/js | |
parent | 0e7a8c8c1984f5394fd825ac9405679648c88e99 (diff) | |
download | canory-30d33a9eedca8ae4b2e6082b915579c309f8b52c.tar.gz canory-30d33a9eedca8ae4b2e6082b915579c309f8b52c.tar.bz2 canory-30d33a9eedca8ae4b2e6082b915579c309f8b52c.zip |
static/js: Prepare custom URL changed event
Set key on pager and always clear interval
Diffstat (limited to 'static/js')
-rw-r--r-- | static/js/fixedsearch.ts | 30 | ||||
-rw-r--r-- | static/js/pager.ts | 49 | ||||
-rw-r--r-- | static/js/timeago.ts | 15 |
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 () { |