commit bd039765448ea086e31998582d0e1ee79822cc66
parent ef1c2ca525088f07828b330f6db1d7f2379db1ab
Author: William Casarin <jb55@jb55.com>
Date: Fri, 18 Nov 2022 13:44:20 -0800
web: only expand thread one message at a time
Diffstat:
3 files changed, 51 insertions(+), 22 deletions(-)
diff --git a/web/index.html b/web/index.html
@@ -8,11 +8,11 @@
<link rel="stylesheet" href="css/responsive.css?v=10">
<link rel="stylesheet" href="css/fontawesome.css?v=2">
<script defer src="js/ui/util.js?v=6"></script>
- <script defer src="js/ui/render.js?v=11"></script>
+ <script defer src="js/ui/render.js?v=12"></script>
<script defer src="js/noble-secp256k1.js?v=1"></script>
<script defer src="js/bech32.js?v=1"></script>
<script defer src="js/nostr.js?v=6"></script>
- <script defer src="js/damus.js?v=90"></script>
+ <script defer src="js/damus.js?v=91"></script>
</head>
<body>
<script>
diff --git a/web/js/damus.js b/web/js/damus.js
@@ -44,6 +44,7 @@ function init_timeline(name) {
name,
events: [],
rendered: new Set(),
+ depths: {},
expanded: new Set(),
}
}
@@ -52,6 +53,7 @@ function init_home_model() {
return {
done_init: {},
notifications: 0,
+ max_depth: 2,
all_events: {},
reactions_to: {},
chatrooms: {},
@@ -194,11 +196,11 @@ async function damus_web_init_ready()
pool.on('eose', async (relay, sub_id) => {
if (sub_id === ids.home) {
- log_debug("got home EOSE from %s", relay.url)
+ //log_debug("got home EOSE from %s", relay.url)
const events = model.views.home.events
handle_comments_loaded(ids, model, events, relay)
} else if (sub_id === ids.profiles) {
- log_debug("got profiles EOSE from %s", relay.url)
+ //log_debug("got profiles EOSE from %s", relay.url)
const view = get_current_view()
handle_profiles_loaded(ids, model, view, relay)
}
@@ -951,10 +953,12 @@ function determine_event_refs(tags) {
for (const tag of tags) {
if (tag.length >= 4 && tag[0] == "e") {
- if (tag[3] === "root")
+ positional_ids.push(tag[1])
+ if (tag[3] === "root") {
root = tag[1]
- else if (tag[3] === "reply")
+ } else if (tag[3] === "reply") {
reply = tag[1]
+ }
} else if (tag.length >= 2 && tag[0] == "e") {
positional_ids.push(tag[1])
} else if (tag.length >= 2 && tag[0] == "p") {
@@ -964,9 +968,14 @@ function determine_event_refs(tags) {
i++
}
- if (!root && !reply && positional_ids.length > 0)
+ if (!(root && reply) && positional_ids.length > 0)
return determine_event_refs_positionally(pubkeys, positional_ids)
+ /*
+ if (reply && !root)
+ root = reply
+ */
+
return {root, reply, pubkeys}
}
@@ -988,18 +997,37 @@ function* yield_etags(tags)
}
function expand_thread(id) {
- const ev = DAMUS.all_events[id]
const view = get_current_view()
- if (ev) {
- for (const tag of yield_etags(ev.tags))
- view.expanded.add(tag[1])
- } else {
- log_debug("expand_thread, id not found?", id)
+ const root_id = get_thread_root_id(DAMUS, id)
+ if (!root_id) {
+ log_debug("could not get root_id for", DAMUS.all_events[id])
+ return
}
- view.expanded.add(id)
+
+ view.depths[root_id] = get_thread_max_depth(DAMUS, view, root_id) + 1
+
redraw_events(DAMUS, view)
}
+function get_thread_root_id(damus, id)
+{
+ const ev = damus.all_events[id]
+ if (!ev) {
+ log_debug("expand_thread: no event found?", id)
+ return null
+ }
+
+ return ev.refs && ev.refs.root
+}
+
+function get_thread_max_depth(damus, view, root_id)
+{
+ if (!view.depths[root_id])
+ return damus.max_depth
+
+ return view.depths[root_id]
+}
+
function delete_post_confirm(evid) {
if (!confirm("Are you sure you want to delete this post?"))
return
diff --git a/web/js/ui/render.js b/web/js/ui/render.js
@@ -4,7 +4,9 @@
function render_timeline_event(damus, view, ev)
{
- let max_depth = 3
+ const root_id = get_thread_root_id(damus, ev.id)
+ const max_depth = root_id ? get_thread_max_depth(damus, view, root_id) : damus.max_depth
+
if (ev.refs && ev.refs.root && view.expanded.has(ev.refs.root))
max_depth = null
@@ -26,13 +28,13 @@ function render_reply_line_bot() {
return `<div class="line-bot"></div>`
}
-function render_thread_collapsed(model, reply_ev, opts)
+function render_thread_collapsed(model, ev, opts)
{
if (opts.is_composing)
return ""
- return `<div onclick="expand_thread('${reply_ev.id}')" class="thread-collapsed">
- <div class="thread-summary clickable event-message">
- More messages in thread available. Click to expand.
+ return `<div onclick="expand_thread('${ev.id}')" class="thread-collapsed">
+ <div class="thread-summary clickable">
+ ⮝ More
</div>
</div>`
}
@@ -47,9 +49,8 @@ function render_replied_events(damus, view, ev, opts)
return ""
opts.replies = opts.replies == null ? 1 : opts.replies + 1
- const expanded = view.expanded.has(reply_ev.id)
- if (!expanded && !(opts.max_depth == null || opts.replies < opts.max_depth))
- return render_thread_collapsed(damus, reply_ev, opts)
+ if (!(opts.max_depth == null || opts.replies < opts.max_depth))
+ return render_thread_collapsed(damus, ev, opts)
opts.is_reply = true
return render_event(damus, view, reply_ev, opts)
