Saphire/quest-reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix lazyloading height for suggestion post's images

Browse Source
This commit is contained in:
Saphire 2022-02-21 16:57:28 +07:00
parent fc8bf49ad9
commit b37fc309f9
Signed by: Saphire
GPG Key ID: B26EB7A1F07044C4
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/main.ts
View File

@ -4,9 +4,10 @@ class VisitAnalytics {
lastWidth: number = 0; lastWidth: number = 0;
resizeTimeout: number | null = null; resizeTimeout: number | null = null;
images: HTMLImageElement[] = []; images: HTMLImageElement[] = [];
suggestionImages: HTMLImageElement[] = [];
constructor() { constructor() {
window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); }; (window as any).plausible = (window as any).plausible || function () { ((window as any).plausible.q = (window as any).plausible.q || []).push(arguments); };
// Hopefull this won't miss anything // Hopefull this won't miss anything
if (document.readyState == "interactive") if (document.readyState == "interactive")
@ -40,11 +41,16 @@ class VisitAnalytics {
} }
{ {
var all = document.querySelectorAll(".image-post"); var all = document.querySelectorAll(".image-post:not(.suggestion-post)");
all.forEach(elem => { all.forEach(elem => {
this.lazyloadObserver.observe(elem); this.lazyloadObserver.observe(elem);
this.images.push(elem.querySelector(".post-image > img")); this.images.push(elem.querySelector(".post-image > img"));
}); });
var suggestions = document.querySelectorAll(".image-post.suggestion-post");
all.forEach(elem => {
this.lazyloadObserver.observe(elem);
this.suggestionImages.push(elem.querySelector(".post-image > img"));
});
this.resizeTimeout = setTimeout(() => this.resizeDebounced(), 200); this.resizeTimeout = setTimeout(() => this.resizeDebounced(), 200);
window.addEventListener("resize", (event) => this.handleResize(event)); window.addEventListener("resize", (event) => this.handleResize(event));
@ -59,7 +65,8 @@ class VisitAnalytics {
if (announcingPost != null && !e.target.parentElement.querySelector<HTMLImageElement>(`#post-${announcingPost} img`).complete) if (announcingPost != null && !e.target.parentElement.querySelector<HTMLImageElement>(`#post-${announcingPost} img`).complete)
return; return;
window.plausible("landmark", {props: {id: e.target.id ? e.target.id : e.target.tagName}}); if (window['plausible'])
(window as any).plausible("landmark", {props: {id: e.target.id ? e.target.id : e.target.tagName}});
observer.unobserve(e.target); observer.unobserve(e.target);
console.log("Reached landmark " + e.target.id ? e.target.id : e.target.tagName); console.log("Reached landmark " + e.target.id ? e.target.id : e.target.tagName);
} }
@ -74,6 +81,9 @@ class VisitAnalytics {
// Note: depends on main.css // Note: depends on main.css
const elemWidth = Math.floor(elem.clientWidth * 0.95); const elemWidth = Math.floor(elem.clientWidth * 0.95);
const elemSuggestion = document.querySelector(".suggestion-post .post-content");
const elemSuggestionWidth = Math.floor((elemSuggestion?.clientWidth ?? 0) * 0.95);
if (elemWidth != this.lastWidth) { if (elemWidth != this.lastWidth) {
this.lastWidth = elemWidth; this.lastWidth = elemWidth;
this.images.forEach(img => { this.images.forEach(img => {
@ -81,6 +91,11 @@ class VisitAnalytics {
const naturalWidth = +img.getAttribute("data-width"); const naturalWidth = +img.getAttribute("data-width");
img.height = Math.floor(naturalHeight * Math.min(1, elemWidth / naturalWidth)); img.height = Math.floor(naturalHeight * Math.min(1, elemWidth / naturalWidth));
}) })
this.suggestionImages.forEach(img => {
const naturalHeight = +img.getAttribute("data-height");
const naturalWidth = +img.getAttribute("data-width");
img.height = Math.floor(naturalHeight * Math.min(1, elemSuggestionWidth / naturalWidth));
})
} }
} }