diff options
author | tdro <tdro@noreply.example.com> | 2023-11-22 15:06:15 -0500 |
---|---|---|
committer | tdro <tdro@noreply.example.com> | 2023-11-22 15:06:15 -0500 |
commit | 35f491efb88c9e35e87b719a9e8b1be90c3c5918 (patch) | |
tree | 434e039282d384bf308a9393f7bd1b2d6c38d268 | |
parent | 9a38bf790011a771a753ef6e01bf7c2b5d5635c8 (diff) | |
download | canory-35f491efb88c9e35e87b719a9e8b1be90c3c5918.tar.gz canory-35f491efb88c9e35e87b719a9e8b1be90c3c5918.tar.bz2 canory-35f491efb88c9e35e87b719a9e8b1be90c3c5918.zip |
static/js: Ensure correct width and height references
-rw-r--r-- | assets/js/index.js | 50 | ||||
-rw-r--r-- | static/js/autoplay.ts | 4 | ||||
-rw-r--r-- | static/js/index.ts | 1 | ||||
-rw-r--r-- | static/js/infinitescroll.ts | 60 | ||||
-rw-r--r-- | static/js/timeago.ts | 7 |
5 files changed, 115 insertions, 7 deletions
diff --git a/assets/js/index.js b/assets/js/index.js index 8a47f5a..543b5a1 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -573,7 +573,7 @@ } }; const view = element.getBoundingClientRect(); - return view.top >= -options.offset.top && view.left >= -options.offset.left && view.bottom <= (window.innerHeight || self.documentElement.clientHeight) + options.offset.bottom && view.right <= (window.innerWidth || self.documentElement.clientWidth) + options.offset.right; + return view.top >= -options.offset.top && view.left >= -options.offset.left && view.bottom <= (self.innerHeight || document.documentElement.clientHeight) + options.offset.bottom && view.right <= (self.innerWidth || document.documentElement.clientWidth) + options.offset.right; } [ "scroll", @@ -600,6 +600,52 @@ }); })(); (function() { + function fetch(url, method, callback) { + const http = new XMLHttpRequest(); + http.onreadystatechange = function() { + if (callback && http.readyState === 4 && http.status === 200) { + callback(http); + } + }; + http.open(method, url); + http.send(); + return http; + } + [ + "scroll", + "DOMContentLoaded" + ].forEach(function(event) { + self.addEventListener(event, function() { + const remaining = Math.abs(document.documentElement.scrollHeight - document.documentElement.clientHeight - document.documentElement.scrollTop); + const traversed = self.pageYOffset; + const journey = remaining + traversed; + const ratio = traversed / journey * 100; + const threshold = ratio >= 50; + const pagination = document.querySelector('[data-type="pagination"]'); + if (!pagination) return; + const main = document.querySelector("main"); + const next = pagination.querySelector('[rel="next"]'); + const end = pagination.querySelector('[rel="last"]').title === "hidden"; + const asynchronous = document.querySelectorAll("[data-type='pagination']").length !== 1; + if (end || asynchronous) return pagination.remove(); + if (threshold) { + pagination.remove(); + fetch(next.href, "GET", function(http) { + const page = new DOMParser().parseFromString(http.responseText, "text/html"); + const items = page.querySelector("main").childNodes; + const paginate = page.querySelector('[data-type="pagination"]'); + for(let i1 = 0; i1 < items.length; i1++){ + main.appendChild(items[i1]); + } + main.after(paginate); + console.log("Fetch:", next.href, items); + }); + } + console.log("r:", remaining, "t:", traversed, "j:", journey, "%:", ratio); + }); + }); +})(); +(function() { const relative = new Intl.RelativeTimeFormat("en", { localeMatcher: "best fit", numeric: "always", @@ -609,7 +655,7 @@ offset: 100 }) { const view = element.getBoundingClientRect(); - return view.top >= -options.offset && view.left >= -options.offset && view.bottom <= (window.innerHeight || self.documentElement.clientHeight) + options.offset && view.right <= (window.innerWidth || self.documentElement.clientWidth) + options.offset; + return view.top >= -options.offset && view.left >= -options.offset && view.bottom <= (self.innerHeight || document.documentElement.clientHeight) + options.offset && view.right <= (self.innerWidth || document.documentElement.clientWidth) + options.offset; } const date = function(update) { const elements = document.querySelectorAll("time"); diff --git a/static/js/autoplay.ts b/static/js/autoplay.ts index efa55e9..70f372a 100644 --- a/static/js/autoplay.ts +++ b/static/js/autoplay.ts @@ -6,8 +6,8 @@ const view = element.getBoundingClientRect(); return view.top >= -options.offset.top && view.left >= -options.offset.left - && view.bottom <= (window.innerHeight || self.documentElement.clientHeight) + options.offset.bottom - && view.right <= (window.innerWidth || self.documentElement.clientWidth) + options.offset.right; + && view.bottom <= (self.innerHeight || document.documentElement.clientHeight) + options.offset.bottom + && view.right <= (self.innerWidth || document.documentElement.clientWidth) + options.offset.right; }; ["scroll", "DOMContentLoaded"].forEach(function (event) { diff --git a/static/js/index.ts b/static/js/index.ts index da4defa..8bad1cd 100644 --- a/static/js/index.ts +++ b/static/js/index.ts @@ -5,6 +5,7 @@ import "./instantpage.ts"; import "./contextmenu.ts"; import "./fixedsearch.ts"; import "./autoplay.ts"; +import "./infinitescroll.ts"; import "./timeago.ts"; console.log("Surface Control: Complete"); diff --git a/static/js/infinitescroll.ts b/static/js/infinitescroll.ts new file mode 100644 index 0000000..c366619 --- /dev/null +++ b/static/js/infinitescroll.ts @@ -0,0 +1,60 @@ +(function () { + type percent = number; + + function fetch(url, method, callback) { + const http = new XMLHttpRequest(); + http.onreadystatechange = function () { + if (callback && http.readyState === 4 && http.status === 200) { + callback(http); + } + }; + http.open(method, url); + http.send(); + return http; + } + + ["scroll", "DOMContentLoaded"].forEach(function (event) { + self.addEventListener(event, function () { + const remaining = Math.abs( + document.documentElement.scrollHeight + - document.documentElement.clientHeight + - document.documentElement.scrollTop + ); + + const traversed = self.pageYOffset; + const journey = remaining + traversed; + const ratio: percent = traversed / journey * 100; + const threshold = ratio >= 50; + const pagination = document.querySelector('[data-type="pagination"]'); + + if (!pagination) return; + + const main = document.querySelector("main"); + const next = pagination.querySelector('[rel="next"]'); + const end = pagination.querySelector('[rel="last"]').title === "hidden"; + const asynchronous = document.querySelectorAll("[data-type='pagination']").length !== 1; + + if (end || asynchronous) return pagination.remove(); + + if (threshold) { + + pagination.remove(); + + fetch(next.href, "GET", function (http) { + const page = (new DOMParser()).parseFromString(http.responseText, "text/html"); + const items = page.querySelector("main").childNodes; + const paginate = page.querySelector('[data-type="pagination"]'); + + for (let i = 0; i < items.length; i++) { + main.appendChild(items[i]); + } + + main.after(paginate); + console.log("Fetch:", next.href, items); + }); + } + + console.log("r:", remaining, "t:", traversed, "j:", journey, "%:", ratio); + }); + }); +})(); diff --git a/static/js/timeago.ts b/static/js/timeago.ts index f794c4a..10206e3 100644 --- a/static/js/timeago.ts +++ b/static/js/timeago.ts @@ -10,9 +10,10 @@ function viewport(element, options = { offset: 100 }) { const view = element.getBoundingClientRect(); - return view.top >= -options.offset && view.left >= -options.offset && - view.bottom <= (window.innerHeight || self.documentElement.clientHeight) + options.offset && - view.right <= (window.innerWidth || self.documentElement.clientWidth) + options.offset; + return view.top >= -options.offset + && view.left >= -options.offset + && view.bottom <= (self.innerHeight || document.documentElement.clientHeight) + options.offset + && view.right <= (self.innerWidth || document.documentElement.clientWidth) + options.offset; } const date = function (update) { |