damus.io

commit 2ab552f5f8e8b4bce698fb8278f982b1d8101a50
parent 0a78307336aec3853a8f1578dfbe5394938694f8
Author: William Casarin <jb55@jb55.com>
Date:   Wed,  9 Nov 2022 12:19:44 -0800

render event deletion

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

3 files changed, 64 insertions(+), 16 deletions(-)
diff --git a/webv2/damus.css b/webv2/damus.css
@@ -16,6 +16,12 @@
     width: 60px;
 }
 
+.deleted-comment {
+	border: 2px dashed white;
+	border-radius: 10px;
+	padding: 10px;
+}
+
 .clickable {
 	cursor: pointer;
 }
@@ -202,6 +208,7 @@ html {
 	margin: 0 15px 0 15px;
 	width: 60px;
 	height: 60px;
+	font-size: 2.4em;
 }
 
 
diff --git a/webv2/damus.js b/webv2/damus.js
@@ -732,12 +732,30 @@ function render_replying_to(model, ev) {
 	const names = ev.refs.pubkeys.map(pk => render_mentioned_name(pk, model.profiles[pk])).join(", ")
 
 	return `
-	<div class="replying-to small-txt">
+	<span class="replying-to small-txt">
 		replying to ${names}
-	</div>
+	</span>
+	`
+}
+
+function render_delete_post(model, ev) {
+	if (model.pubkey !== ev.pubkey)
+		return ""
+
+	return `
+	<span onclick="delete_post_confirm('${ev.id}')" class="clickable" style="float: right">
+	✕
+	</span>
 	`
 }
 
+function delete_post_confirm(evid) {
+	if (!confirm("Are you sure you want to delete this post?"))
+		return
+
+	delete_post(evid)
+}
+
 function render_unknown_event(model, ev) {
 	return "Unknown event"
 }
@@ -761,9 +779,38 @@ function shouldnt_render_event(model, ev, opts) {
 	return !opts.is_boost_event && !opts.is_composing && !model.expanded.has(ev.id) && model.rendered[ev.id]
 }
 
+function render_deleted_name() {
+	return "???"
+}
+
+function render_deleted_pfp() {
+	return `<div class="pfp pfp-normal">😵</div>`
+}
+
+function render_comment_body(model, ev, opts) {
+	const bar = !can_reply(ev) || opts.nobar? "" : render_action_bar(ev)
+	const show_media = !opts.is_composing
+
+	return `
+	<div>
+	${render_replying_to(model, ev)}
+	${render_delete_post(model, ev)}
+	</div>
+	<p>
+	${format_content(ev, show_media)}
+	</p>
+	${render_reactions(model, ev)}
+	${bar}
+	`
+}
+
+function render_deleted_comment_body() {
+	return `
+	<div class="deleted-comment">This comment was deleted</div>
+	`
+}
+
 function render_event(model, ev, opts={}) {
-	if (is_deleted(model, ev.id))
-		return "Deleted :("
 	if (ev.kind === 6)
 		return render_boost(model, ev, opts)
 	if (shouldnt_render_event(model, ev, opts))
@@ -772,7 +819,6 @@ function render_event(model, ev, opts={}) {
 	model.rendered[ev.id] = true
 	const profile = model.profiles[ev.pubkey] || DEFAULT_PROFILE
 	const delta = time_delta(new Date().getTime(), ev.created_at*1000)
-	const bar = !can_reply(ev) || opts.nobar? "" : render_action_bar(ev)
 
 	const has_bot_line = opts.is_reply
 	const reply_line_bot = (has_bot_line && render_reply_line_bot()) || ""
@@ -780,27 +826,22 @@ function render_event(model, ev, opts={}) {
 	const replied_events = render_replied_events(model, ev, opts)
 	const reply_line_top = replied_events === "" ? "" : render_reply_line_top()
 
-	const show_media = !opts.is_composing
+	const deleted = is_deleted(model, ev.id)
 
 	return `
 	${replied_events}
 	<div id="ev${ev.id}" class="comment">
 		<div class="info">
-			${render_name(ev.pubkey, profile)}
+			${deleted ? render_deleted_name() : render_name(ev.pubkey, profile)}
 			<span class="timestamp">${delta}</span>
 		</div>
 		<div class="pfpbox">
 			${reply_line_top}
-			${render_pfp(ev.pubkey, profile)}
+			${deleted ? render_deleted_pfp() : render_pfp(ev.pubkey, profile)}
 			${reply_line_bot}
 		</div>
 		<div class="comment-body">
-			${render_replying_to(model, ev)}
-			<p>
-			${format_content(ev, show_media)}
-			</p>
-			${render_reactions(model, ev)}
-			${bar}
+			${deleted ? render_deleted_comment_body() : render_comment_body(model, ev, opts)}
 		</div>
 	</div>
 	`
diff --git a/webv2/index.html b/webv2/index.html
@@ -6,7 +6,7 @@
 
         <title>Damus</title>
 
-        <link rel="stylesheet" href="damus.css?v=16">
+        <link rel="stylesheet" href="damus.css?v=17">
     </head>
     <body>
 	<section class="header">
@@ -41,7 +41,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=51"></script>
+    <script src="damus.js?v=52"></script>
     <script>
 	// I have to delay loading to wait for nos2x
 	const relay = setTimeout(damus_web_init, 100)