From d1e8e2b27cc7d9a6112fee8de8b6a927eb7f0ab1 Mon Sep 17 00:00:00 2001
From: trisua <me@trisua.com>
Date: Mon, 12 May 2025 21:31:33 -0400
Subject: [PATCH] fix: image lightbox loading

---
 crates/app/src/public/css/style.css  |  7 +++++++
 crates/app/src/public/html/root.html |  4 +++-
 crates/app/src/public/js/atto.js     | 18 +++++++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/crates/app/src/public/css/style.css b/crates/app/src/public/css/style.css
index f992b29..4453525 100644
--- a/crates/app/src/public/css/style.css
+++ b/crates/app/src/public/css/style.css
@@ -375,10 +375,17 @@ img.emoji {
 }
 
 .lightbox img {
+    --padding: 2rem;
     box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
         var(--color-shadow);
     border-radius: var(--radius);
     animation: popin ease-in-out 1 0.15s forwards running;
+    max-height: calc(100dvh - var(--padding));
+    max-width: calc(100dvh - var(--padding));
+}
+
+.lightbox a {
+    cursor: zoom-in;
 }
 
 /* avatar/banner */
diff --git a/crates/app/src/public/html/root.html b/crates/app/src/public/html/root.html
index d58266d..a426e20 100644
--- a/crates/app/src/public/html/root.html
+++ b/crates/app/src/public/html/root.html
@@ -289,7 +289,9 @@ macros -%}
                 {{ icon "x" }}
             </button>
 
-            <img src="" alt="Image" id="lightbox_img" />
+            <a href="" id="lightbox_img_a" target="_blank">
+                <img src="" alt="Image" id="lightbox_img" />
+            </a>
         </div>
 
         {% if user %}
diff --git a/crates/app/src/public/js/atto.js b/crates/app/src/public/js/atto.js
index 35eae31..ce3fae5 100644
--- a/crates/app/src/public/js/atto.js
+++ b/crates/app/src/public/js/atto.js
@@ -1030,8 +1030,24 @@ ${option.input_element_type === "textarea" ? `${option.value}</textarea>` : ""}
     );
 
     // lightbox
-    self.define("lightbox_open", (_, src) => {
+    self.define("lightbox_open", async (_, src) => {
         document.getElementById("lightbox_img").src = src;
+        document.getElementById("lightbox_img_a").href = src;
+
+        await (async () => {
+            return new Promise((resolve, reject) => {
+                let idx = 0;
+                const inter = setInterval(() => {
+                    idx += 1;
+                    if (document.getElementById("lightbox_img").complete) {
+                        console.log(`img loaded (took ${idx})`);
+                        clearInterval(inter);
+                        return resolve();
+                    }
+                }, 25);
+            });
+        })();
+
         document.getElementById("lightbox").classList.remove("hidden");
     });