Applications/comfychan
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 3 Activity

Img full/thumb toggling. Small tweaks

Browse Source
This commit is contained in:
Dominic Ferrando
2025-04-19 19:21:06 -04:00
parent 9096c00db5
commit 62b9113509
3 changed files with 57 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/index.css
+2 -2
View File
@@ -192,9 +192,9 @@ body {
}
.post-img {
cursor: pointer;
height: auto;
max-width: 400px;
margin-bottom: 10px;
max-width: 100%;
}
.post-body {
web/static/thread.js
+43 -26
View File
@@ -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()
web/views/thread.templ
+12 -2
View File
@@ -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>