skorotkiewicz/yosup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: only expand thread one message at a time

Browse source
This commit is contained in:
William Casarin 2022-11-18 13:44:20 -08:00
parent ef1c2ca525
commit bd03976544
3 changed files with 51 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/index.html
View file

@ -8,11 +8,11 @@
<link rel="stylesheet" href="css/responsive.css?v=10"> <link rel="stylesheet" href="css/responsive.css?v=10">
<link rel="stylesheet" href="css/fontawesome.css?v=2"> <link rel="stylesheet" href="css/fontawesome.css?v=2">
<script defer src="js/ui/util.js?v=6"></script> <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/noble-secp256k1.js?v=1"></script>
<script defer src="js/bech32.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/nostr.js?v=6"></script>
<script defer src="js/damus.js?v=90"></script> <script defer src="js/damus.js?v=91"></script>
</head> </head>
<body> <body>
<script> <script>

52
web/js/damus.js
View file

@ -44,6 +44,7 @@ function init_timeline(name) {
name, name,
events: [], events: [],
rendered: new Set(), rendered: new Set(),
depths: {},
expanded: new Set(), expanded: new Set(),
} }
} }
@ -52,6 +53,7 @@ function init_home_model() {
return { return {
done_init: {}, done_init: {},
notifications: 0, notifications: 0,
max_depth: 2,
all_events: {}, all_events: {},
reactions_to: {}, reactions_to: {},
chatrooms: {}, chatrooms: {},
@ -194,11 +196,11 @@ async function damus_web_init_ready()
pool.on('eose', async (relay, sub_id) => { pool.on('eose', async (relay, sub_id) => {
if (sub_id === ids.home) { 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 const events = model.views.home.events
handle_comments_loaded(ids, model, events, relay) handle_comments_loaded(ids, model, events, relay)
} else if (sub_id === ids.profiles) { } 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() const view = get_current_view()
handle_profiles_loaded(ids, model, view, relay) handle_profiles_loaded(ids, model, view, relay)
} }
@ -951,10 +953,12 @@ function determine_event_refs(tags) {
for (const tag of tags) { for (const tag of tags) {
if (tag.length >= 4 && tag[0] == "e") { if (tag.length >= 4 && tag[0] == "e") {
if (tag[3] === "root") positional_ids.push(tag[1])
if (tag[3] === "root") {
root = tag[1] root = tag[1]
else if (tag[3] === "reply") } else if (tag[3] === "reply") {
reply = tag[1] reply = tag[1]
}
} else if (tag.length >= 2 && tag[0] == "e") { } else if (tag.length >= 2 && tag[0] == "e") {
positional_ids.push(tag[1]) positional_ids.push(tag[1])
} else if (tag.length >= 2 && tag[0] == "p") { } else if (tag.length >= 2 && tag[0] == "p") {
@ -964,9 +968,14 @@ function determine_event_refs(tags) {
i++ i++
} }
if (!root && !reply && positional_ids.length > 0) if (!(root && reply) && positional_ids.length > 0)
return determine_event_refs_positionally(pubkeys, positional_ids) return determine_event_refs_positionally(pubkeys, positional_ids)
/*
if (reply && !root)
root = reply
*/
return {root, reply, pubkeys} return {root, reply, pubkeys}
} }
@ -988,18 +997,37 @@ function* yield_etags(tags)
} }
function expand_thread(id) { function expand_thread(id) {
const ev = DAMUS.all_events[id]
const view = get_current_view() const view = get_current_view()
if (ev) { const root_id = get_thread_root_id(DAMUS, id)
for (const tag of yield_etags(ev.tags)) if (!root_id) {
view.expanded.add(tag[1]) log_debug("could not get root_id for", DAMUS.all_events[id])
} else { return
log_debug("expand_thread, id not found?", id)
} }
view.expanded.add(id)
view.depths[root_id] = get_thread_max_depth(DAMUS, view, root_id) + 1
redraw_events(DAMUS, view) 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) { function delete_post_confirm(evid) {
if (!confirm("Are you sure you want to delete this post?")) if (!confirm("Are you sure you want to delete this post?"))
return return

17
web/js/ui/render.js
View file

@ -4,7 +4,9 @@
function render_timeline_event(damus, view, ev) 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)) if (ev.refs && ev.refs.root && view.expanded.has(ev.refs.root))
max_depth = null max_depth = null
@ -26,13 +28,13 @@ function render_reply_line_bot() {
return `<div class="line-bot"></div>` 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) if (opts.is_composing)
return "" return ""
return `<div onclick="expand_thread('${reply_ev.id}')" class="thread-collapsed"> return `<div onclick="expand_thread('${ev.id}')" class="thread-collapsed">
<div class="thread-summary clickable event-message"> <div class="thread-summary clickable">
More messages in thread available. Click to expand. ⮝ More
</div> </div>
</div>` </div>`
} }
@ -47,9 +49,8 @@ function render_replied_events(damus, view, ev, opts)
return "" return ""
opts.replies = opts.replies == null ? 1 : opts.replies + 1 opts.replies = opts.replies == null ? 1 : opts.replies + 1
const expanded = view.expanded.has(reply_ev.id) if (!(opts.max_depth == null || opts.replies < opts.max_depth))
if (!expanded && !(opts.max_depth == null || opts.replies < opts.max_depth)) return render_thread_collapsed(damus, ev, opts)
return render_thread_collapsed(damus, reply_ev, opts)
opts.is_reply = true opts.is_reply = true
return render_event(damus, view, reply_ev, opts) return render_event(damus, view, reply_ev, opts)