From 62b91135095f37b9e05a0f916807ea5bb038d2ce Mon Sep 17 00:00:00 2001
From: Dominic Ferrando <dominicf2001@gmail.com>
Date: Sat, 19 Apr 2025 19:21:06 -0400
Subject: [PATCH] Img full/thumb toggling. Small tweaks

---
 web/static/index.css   |  4 +--
 web/static/thread.js   | 69 ++++++++++++++++++++++++++----------------
 web/views/thread.templ | 14 +++++++--
 3 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/web/static/index.css b/web/static/index.css
index cfa397e..e0a62d9 100644
--- a/web/static/index.css
+++ b/web/static/index.css
@@ -192,9 +192,9 @@ body {
 }
 
 .post-img {
+    cursor: pointer;
     height: auto;
-    max-width: 400px;
-    margin-bottom: 10px;
+    max-width: 100%;
 }
 
 .post-body {
diff --git a/web/static/thread.js b/web/static/thread.js
index 7252f2a..0f5d91b 100644
--- a/web/static/thread.js
+++ b/web/static/thread.js
@@ -1,34 +1,51 @@
-const posts = Array.from(document.querySelectorAll("article"));
+function insertHeaderReplies() {
+    const posts = Array.from(document.querySelectorAll("article"));
+    const replies = {};
 
-const replies = {};
+    for (const post of posts) {
+        const postId = +post.id.split("-")[1];
+        const postBody = post.querySelector("p").textContent;
 
-for (const post of posts) {
-    const postId = +post.id.split("-")[1];
-    const postBody = post.querySelector("p").textContent;
+        const replyLinkIds = [...postBody.matchAll(/(?:^|\s)>>(\d+)\b/g)].map(m => parseInt(m[1]));
+        for (const replyLinkId of replyLinkIds) {
+            replies[replyLinkId] = replies[replyLinkId] ?
+                replies[replyLinkId].add(postId) :
+                replies[replyLinkId] = new Set([postId]);
+        }
+    }
 
-    const replyLinkIds = [...postBody.matchAll(/(?:^|\s)>>(\d+)\b/g)].map(m => parseInt(m[1]));
-    for (const replyLinkId of replyLinkIds) {
-        replies[replyLinkId] = replies[replyLinkId] ?
-            replies[replyLinkId].add(postId) :
-            replies[replyLinkId] = new Set([postId]);
+    for (const postId in replies) {
+        const post = $(`post-${postId}`);
+        if (!post) break;
+
+        const postRepliesContainer = post.querySelector(".post-replies");
+
+        const replyIds = Array.from(replies[postId]);
+        for (const replyId of replyIds) {
+            const replyLink = document.createElement("a");
+            replyLink.textContent = `>>${replyId}`;
+            replyLink.classList.add("reply-link-header");
+            replyLink.setAttribute("href", `#post-${replyId}`);
+
+            replyLink.onmouseover = (e) => highlightPost(+replyId, e);
+            replyLink.onmouseleave = (e) => highlightPost(+replyId, e, false);
+            replyLink.onclick = onReplyLinkClick;
+
+            postRepliesContainer.append(replyLink);
+        }
     }
 }
 
-for (const postId in replies) {
-    const post = $(`post-${postId}`);
-    const postRepliesContainer = post.querySelector(".post-replies");
-
-    const replyIds = Array.from(replies[postId]);
-    for (const replyId of replyIds) {
-        const replyLink = document.createElement("a");
-        replyLink.textContent = `>>${replyId}`;
-        replyLink.classList.add("reply-link-header");
-        replyLink.setAttribute("href", `#post-${replyId}`);
-
-        replyLink.onmouseover = (e) => highlightPost(+replyId, e);
-        replyLink.onmouseleave = (e) => highlightPost(+replyId, e, false);
-        replyLink.onclick = onReplyLinkClick;
-
-        postRepliesContainer.append(replyLink);
+function togglePostImage(img) {
+    const filename = img.src.split("/").at(-1);
+    if (img.classList.contains("post-img-full")) {
+        img.classList.remove("post-img-full");
+        img.src = "/static/img/posts/thumb/" + filename;
+    }
+    else {
+        img.classList.add("post-img-full");
+        img.src = "/static/img/posts/full/" + filename;
     }
 }
+
+insertHeaderReplies()
diff --git a/web/views/thread.templ b/web/views/thread.templ
index 8d56fa2..0aa5536 100644
--- a/web/views/thread.templ
+++ b/web/views/thread.templ
@@ -20,7 +20,13 @@ templ ThreadPost(post database.Post, thread *database.Thread) {
 	<article id={ fmt.Sprintf("post-%d", post.Id) } class={ getPostClass(isOp) }>
 		if post.MediaPath != "" {
 			<div class="post-img-container">
-				<img loading="lazy" src={ fmt.Sprintf("/static/img/posts/thumb/%s", post.MediaPath) } class="post-img"/>
+				<img
+					onclick="togglePostImage(this)"
+					loading="lazy"
+					src={ fmt.Sprintf("/static/img/posts/thumb/%s",
+			post.MediaPath) }
+					class="post-img"
+				/>
 			</div>
 		}
 		<header class="post-header">
@@ -84,7 +90,11 @@ templ Thread(board database.Board, thread database.Thread, posts []database.Post
 		</div>
 		<div class="thread">
 			@ThreadPost(posts[0], &thread)
-			<div hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", board.Slug, thread.Id) } hx-trigger="refreshPosts from:body">
+			<div
+				hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", board.Slug, thread.Id) }
+				hx-trigger="refreshPosts from:body"
+				_="on htmx:afterSwap call insertHeaderReplies()"
+			>
 				@ThreadPosts(posts[1:])
 			</div>
 		</div>