From b37fc309f99ed34a4c69d783e8a4d14958418dca Mon Sep 17 00:00:00 2001
From: Saphire <lattice@saphi.re>
Date: Mon, 21 Feb 2022 16:57:28 +0700
Subject: [PATCH] Fix lazyloading height for suggestion post's images

---
 web/main.ts | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/web/main.ts b/web/main.ts
index 7403e3d..e8168d0 100644
--- a/web/main.ts
+++ b/web/main.ts
@@ -4,9 +4,10 @@ class VisitAnalytics {
     lastWidth: number = 0;
     resizeTimeout: number | null = null;
     images: HTMLImageElement[] = [];
+    suggestionImages: HTMLImageElement[] = [];
 
     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
         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 => {
                 this.lazyloadObserver.observe(elem);
                 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);
             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)
                     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);
                 console.log("Reached landmark " + e.target.id ? e.target.id : e.target.tagName);
             }
@@ -74,6 +81,9 @@ class VisitAnalytics {
         // Note: depends on main.css
         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) {
             this.lastWidth = elemWidth;
             this.images.forEach(img => {
@@ -81,6 +91,11 @@ class VisitAnalytics {
                 const naturalWidth = +img.getAttribute("data-width");
                 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));
+            })
         }
     }