commit fb543919a73e0a40e5f14a7d48d2b377857a2edd
parent c35f8410897275ff280955f148208462e16664bd
Author: William Casarin <jb55@jb55.com>
Date: Fri, 11 Nov 2022 16:35:30 -0800
fix up reaction groups and liking stuff
Diffstat:
3 files changed, 52 insertions(+), 22 deletions(-)
diff --git a/web/damus.js b/web/damus.js
@@ -837,8 +837,8 @@ function render_deleted_pfp() {
}
function render_comment_body(model, ev, opts) {
- const canDelete = !(model.pubkey !== ev.pubkey)
- const bar = !can_reply(ev) || opts.nobar? "" : render_action_bar(ev, canDelete)
+ const can_delete = model.pubkey === ev.pubkey;
+ const bar = !can_reply(ev) || opts.nobar? "" : render_action_bar(ev, can_delete)
const show_media = !opts.is_composing
return `
@@ -952,16 +952,19 @@ function get_reaction_emoji(ev) {
return ev.content
}
-function render_reaction_group(model, emoji, reactions, reacting_to) {
- const pfps = Object.keys(reactions).map((pk) => render_reaction(model, reactions[pk]))
-
- let onclick = ""
- const reaction = reactions[model.pubkey]
+function render_react_onclick(our_pubkey, reacting_to, emoji, reactions) {
+ const reaction = reactions[our_pubkey]
if (!reaction) {
- onclick = `onclick="send_reply('${emoji}', '${reacting_to.id}')"`
+ return `onclick="send_reply('${emoji}', '${reacting_to}')"`
} else {
- onclick = `onclick="delete_post('${reaction.id}')"`
+ return `onclick="delete_post('${reaction.id}')"`
}
+}
+
+function render_reaction_group(model, emoji, reactions, reacting_to) {
+ const pfps = Object.keys(reactions).map((pk) => render_reaction(model, reactions[pk]))
+
+ let onclick = render_react_onclick(model.pubkey, reacting_to.id, emoji, reactions)
return `
<span ${onclick} class="reaction-group clickable">
@@ -994,8 +997,9 @@ function render_reaction(model, reaction) {
return render_pfp(reaction.pubkey, profile, "small")
}
-function render_reactions(model, ev) {
- const reactions_set = model.reactions_to[ev.id]
+function get_reactions(model, evid)
+{
+ const reactions_set = model.reactions_to[evid]
if (!reactions_set)
return ""
@@ -1009,7 +1013,6 @@ function render_reactions(model, ev) {
reactions.push(reaction)
}
- let str = ""
const groups = reactions.reduce((grp, r) => {
const e = get_reaction_emoji(r)
grp[e] = grp[e] || {}
@@ -1017,6 +1020,13 @@ function render_reactions(model, ev) {
return grp
}, {})
+ return groups
+}
+
+function render_reactions(model, ev) {
+ const groups = get_reactions(model, ev.id)
+ let str = ""
+
for (const emoji of Object.keys(groups)) {
str += render_reaction_group(model, emoji, groups[emoji], ev)
}
@@ -1229,17 +1239,21 @@ function reply_to(evid) {
modal.style.display = replying? "block" : "none";
}
-function render_action_bar(ev, canDelete=false) {
- let deleteHTML = ""
- if (canDelete) {
- deleteHTML = `<button class="icon" title="Delete" onclick="like('${ev.id}')"><i class="fa fa-fw fa-trash"></i></a>`
- }
+function render_action_bar(ev, can_delete) {
+ let delete_html = ""
+ if (can_delete)
+ delete_html = `<button class="icon" title="Delete" onclick="like('${ev.id}')"><i class="fa fa-fw fa-trash"></i></a>`
+
+ const groups = get_reactions(DSTATE, ev.id)
+ const like = "❤️"
+ const likes = groups[like] || {}
+ const react_onclick = render_react_onclick(DSTATE.pubkey, ev.id, like, likes)
return `
<div class="action-bar">
<button class="icon" title="Reply" onclick="reply_to('${ev.id}')"><i class="fa fa-fw fa-comment"></i></a>
- <button class="icon react heart" title="Like" onclick=""><i class="fa fa-fw fa-heart"></i></a>
+ <button class="icon react heart" ${react_onclick} title="Like"><i class="fa fa-fw fa-heart"></i></a>
<button class="icon" title="Share" onclick=""><i class="fa fa-fw fa-link"></i></a>
- ${deleteHTML}
+ ${delete_html}
<button class="icon" title="View raw Nostr event." onclick=""><i class="fa-solid fa-fw fa-code"></i></a>
</div>
`
diff --git a/web/index.html b/web/index.html
@@ -4,8 +4,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Damus</title>
- <link rel="stylesheet" href="styles.css?v=17">
- <link rel="stylesheet" href="damus.css?v=20">
+ <link rel="stylesheet" href="styles.css?v=18">
+ <link rel="stylesheet" href="damus.css?v=21">
<link rel="stylesheet" href="fontawesome.css?v=2">
</head>
<body>
@@ -63,7 +63,7 @@
<script src="noble-secp256k1.js?v=1"></script>
<script src="bech32.js?v=1"></script>
<script src="nostr.js?v=6"></script>
- <script src="damus.js?v=57"></script>
+ <script src="damus.js?v=58"></script>
<script>
// I have to delay loading to wait for nos2x
const relay = setTimeout(damus_web_init, 100)
diff --git a/web/styles.css b/web/styles.css
@@ -174,6 +174,15 @@ button.nav {
.reactions {
padding-bottom: 15px;
}
+
+.reaction-group {
+ display: inline-flex;
+ align-items: center;
+ border: 2px solid var(--clrBorder);
+ padding: 4px;
+ border-radius: 5px;
+}
+
.reaction-group img {
width: 18px;
height: 18px;
@@ -182,11 +191,15 @@ button.nav {
margin-left: -8px;
vertical-align: top;
}
+
.reaction-group img:first-of-type {
margin-left: 0px;
}
+
.reaction-emoji {
+ margin-right: 4px;
}
+
.action-bar button.icon {
transition: color 0.3s linear;
}
@@ -299,3 +312,6 @@ input[type="text"].cw {
font-size: var(--fsReduced);
}
+.clickable {
+ cursor: pointer;
+}
