damus.io

commit 25206b59642f07341a05f01e97a46ca9ed625cc2
parent 20a0be49431f8c61b64684e1f19c1b5dbc028818
Author: William Casarin <jb55@jb55.com>
Date:   Sun, 30 Oct 2022 11:16:51 -0700

add clickable reaction replies

Diffstat:
M
webv2/damus.css
 | 
4
++++
M
webv2/damus.js
 | 
36
++++++++++++++++++++++++++----------
M
webv2/index.html
 | 
4
++--

3 files changed, 32 insertions(+), 12 deletions(-)
diff --git a/webv2/damus.css b/webv2/damus.css
@@ -73,6 +73,10 @@ textarea, input {
 	width: 80%;
 }
 
+.can-react {
+	cursor: pointer;
+}
+
 .reaction-group {
 	display: inline-flex;
 	background-color: rgba(255,255,255,0.15);
diff --git a/webv2/damus.js b/webv2/damus.js
@@ -597,10 +597,18 @@ function get_reaction_emoji(ev) {
 	return ev.content
 }
 
-function render_reaction_group(model, emoji, reactions) {
+function render_reaction_group(model, emoji, reactions, reacting_to) {
 	const pfps = Object.keys(reactions).map((pk) => render_reaction(model, reactions[pk]))
+
+	let onclick = ""
+	let classes = ""
+	if (!reactions[model.pubkey]) {
+		onclick = `onclick="send_reply('${emoji}', '${reacting_to.id}')"`
+		classes = "can-react"
+	}
+
 	return `
-	<span class="reaction-group">
+	<span ${onclick} class="reaction-group ${classes}">
 	  <span class="reaction-emoji">
 	  ${emoji}
 	  </span>
@@ -640,7 +648,7 @@ function render_reactions(model, ev) {
 	}, {})
 
 	for (const emoji of Object.keys(groups)) {
-		str += render_reaction_group(model, emoji, groups[emoji])
+		str += render_reaction_group(model, emoji, groups[emoji], ev)
 	}
 
 	return `
@@ -688,19 +696,27 @@ async function create_reply(pubkey, content, from) {
 	return reply
 }
 
-async function send_reply() {
+async function send_reply(content, replying_to)
+{
+	const ev = DSTATE.all_events[replying_to]
+	if (!ev)
+		return
+
+	const pubkey = await get_pubkey()
+	let reply = await create_reply(pubkey, content, ev)
+	DSTATE.pool.send(["EVENT", reply])
+}
+
+async function do_send_reply() {
 	const modal = document.querySelector("#reply-modal")
 	const replying_to = modal.querySelector("#replying-to")
-	const evid = replying_to.dataset.evid
-	const ev = DSTATE.all_events[evid]
 
-	const { pool } = DSTATE
+	const evid = replying_to.dataset.evid
 	const reply_content_el = document.querySelector("#reply-content")
 	const content = reply_content_el.value
-	const pubkey = await get_pubkey()
 
-	let reply = await create_reply(pubkey, content, ev)
-	pool.send(["EVENT", reply])
+	await send_reply(content, evid)
+
 	reply_content_el.value = ""
 
 	close_reply()
diff --git a/webv2/index.html b/webv2/index.html
@@ -34,14 +34,14 @@
 		    </div>
 
 		    <div style="float:right">
-			    <button onclick="send_reply()" id="reply-button">Reply</button>
+			    <button onclick="do_send_reply()" id="reply-button">Reply</button>
 		    </div>
 	    </div>
 	    </div>
     <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=33"></script>
+    <script src="damus.js?v=34"></script>
     <script>
 	// I have to delay loading to wait for nos2x
 	const relay = setTimeout(damus_web_init, 100)