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

Add scroll to buttons

Browse Source
This commit is contained in:
Dominic Ferrando
2025-04-23 22:15:44 -04:00
parent f04db77087
commit a08a9a69d2
2 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/index.js
+7 -2
View File
@@ -13,8 +13,13 @@ function isOffScreen(el) {
); );
} }
function scrollToBottom() { function smoothScrollTo(loc) {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); if (loc === "top") {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
else if (loc === "bottom") {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}
} }
function isHttpWarningStatus(code) { function isHttpWarningStatus(code) {
web/views/thread.templ
+11 -6
View File
@@ -185,11 +185,16 @@ type ThreadContext struct {
IsAdmin bool IsAdmin bool
} }
templ ThreadActionBar(thread database.Thread) { templ ThreadActionBar(thread database.Thread, pos string) {
<hr/> <hr/>
<div style="margin-left: 25px;"> <div style="margin-left: 25px;">
<a href={ templ.URL("/" + thread.BoardSlug) } style="margin-right: 5px;" class="link-button">[Catalog]</a> if pos == "top" {
<a _="on click trigger refreshPosts on body" class="link-button">[Refresh]</a> <a onclick="smoothScrollTo('bottom')" class="link-button">[Scroll to bottom]</a>
} else {
<a onclick="smoothScrollTo('top')" class="link-button">[Scroll to top]</a>
}
<a href={ templ.URL("/" + thread.BoardSlug) } style="margin-left: 5px;" class="link-button">[Catalog]</a>
<a _="on click trigger refreshPosts on body" style="margin-left: 5px;" class="link-button">[Refresh]</a>
</div> </div>
<hr/> <hr/>
} }
@@ -201,15 +206,15 @@ templ Thread(board database.Board, thread database.Thread, posts []database.Post
<div class="new-post-container"> <div class="new-post-container">
@shared.NewPostForm(board, fmt.Sprintf("/%s/threads/%d", board.Slug, thread.Id), false) @shared.NewPostForm(board, fmt.Sprintf("/%s/threads/%d", board.Slug, thread.Id), false)
</div> </div>
@ThreadActionBar(thread) @ThreadActionBar(thread, "top")
<div <div
class="thread" class="thread"
hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", thread.BoardSlug, thread.Id) } hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", thread.BoardSlug, thread.Id) }
hx-trigger="refreshPosts from:body" hx-trigger="refreshPosts from:body"
_="on htmx:afterSwap call insertHeaderReplies() then scrollToBottom()" _="on htmx:afterSwap call insertHeaderReplies() then smoothScrollTo('bottom')"
> >
@Posts(posts, thread, threadContext) @Posts(posts, thread, threadContext)
</div> </div>
@ThreadActionBar(thread) @ThreadActionBar(thread, "bottom")
} }
} }