diff src/thread.html.luan @ 19:da006d1c1eba

use contentEditable
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 13 Jul 2022 08:47:13 -0600
parents 94e26bffd4fb
children 3ea49246d6a7
line wrap: on
line diff
--- a/src/thread.html.luan	Mon Jul 11 12:14:05 2022 -0600
+++ b/src/thread.html.luan	Wed Jul 13 08:47:13 2022 -0600
@@ -56,21 +56,24 @@
 			[message] {
 				white-space: pre-wrap;
 			}
-			textarea {
-				width: 100%;
-				max-width: 450px;
-				height: 100px;
-			}
 		</style>
 		<script>
-			function cancelEdit(post) {
-				let postDiv = document.querySelector('[post="'+post+'"]');
+			function getPostDiv(node) {
+				do {
+					if( node.getAttribute('post') )
+						return node;
+				} while( node = node.parentNode );
+			}
+
+			function cancelEdit(a) {
+				let postDiv = getPostDiv(a);
 				postDiv.querySelector('[output]').style.display = 'block';
 				postDiv.querySelector('[edit]').innerHTML = '';
 			}
-			function saveEdit(post) {
-				let postDiv = document.querySelector('[post="'+post+'"]');
-				let text = postDiv.querySelector('textarea').value;
+			function saveEdit(a) {
+				let postDiv = getPostDiv(a);
+				let post = postDiv.getAttribute('post');
+				let text = postDiv.querySelector('[contentEditable]').textContent;
 				let postData = 'post=' + post + '&text=' + encodeURIComponent(text);
 				ajax("save_edit.js",postData);
 			}
@@ -82,7 +85,7 @@
 				span.innerHTML = document.querySelector('[hidden][undelete]').innerHTML;
 			}
 			function deleteYes(span) {
-				let post = span.getAttribute('delete');
+				let post = getPostDiv(span).getAttribute('post');
 				ajax( '/delete.js?post=' + post );
 			}
 
@@ -119,7 +122,7 @@
 						<a href="/reply.html?parent=<%=post.id%>">reply</a>
 <%	if post.author_name == user_name then %>
 						- <a href="javascript:ajax('/edit.js?post=<%=post.id%>')">edit</a>
-						- <span delete="<%=post.id%>"><%deletePost()%></span>
+						- <span delete><%deletePost()%></span>
 <%	end %>
 					</p>
 				</div>
@@ -130,6 +133,13 @@
 <%		footer() %>
 		<span hidden delete>Delete? <a href="javascript:" onclick="deleteYes(parentNode)">yes</a> / <a href="javascript:" onclick="deleteNo(parentNode)">no</a></span>
 		<span hidden undelete><%deletePost()%></span>
+		<div hidden edit>
+			<div contentEditable></div>
+			<p>
+				<button onclick="saveEdit(this)">save</button>
+				<button onclick="cancelEdit(this)">cancel</button>
+			</p>
+		</div>
 	</body>
 </html>
 <%