comparison 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
comparison
equal deleted inserted replaced
18:94e26bffd4fb 19:da006d1c1eba
54 color: #888; 54 color: #888;
55 } 55 }
56 [message] { 56 [message] {
57 white-space: pre-wrap; 57 white-space: pre-wrap;
58 } 58 }
59 textarea {
60 width: 100%;
61 max-width: 450px;
62 height: 100px;
63 }
64 </style> 59 </style>
65 <script> 60 <script>
66 function cancelEdit(post) { 61 function getPostDiv(node) {
67 let postDiv = document.querySelector('[post="'+post+'"]'); 62 do {
63 if( node.getAttribute('post') )
64 return node;
65 } while( node = node.parentNode );
66 }
67
68 function cancelEdit(a) {
69 let postDiv = getPostDiv(a);
68 postDiv.querySelector('[output]').style.display = 'block'; 70 postDiv.querySelector('[output]').style.display = 'block';
69 postDiv.querySelector('[edit]').innerHTML = ''; 71 postDiv.querySelector('[edit]').innerHTML = '';
70 } 72 }
71 function saveEdit(post) { 73 function saveEdit(a) {
72 let postDiv = document.querySelector('[post="'+post+'"]'); 74 let postDiv = getPostDiv(a);
73 let text = postDiv.querySelector('textarea').value; 75 let post = postDiv.getAttribute('post');
76 let text = postDiv.querySelector('[contentEditable]').textContent;
74 let postData = 'post=' + post + '&text=' + encodeURIComponent(text); 77 let postData = 'post=' + post + '&text=' + encodeURIComponent(text);
75 ajax("save_edit.js",postData); 78 ajax("save_edit.js",postData);
76 } 79 }
77 80
78 function deletePost(span) { 81 function deletePost(span) {
80 } 83 }
81 function deleteNo(span) { 84 function deleteNo(span) {
82 span.innerHTML = document.querySelector('[hidden][undelete]').innerHTML; 85 span.innerHTML = document.querySelector('[hidden][undelete]').innerHTML;
83 } 86 }
84 function deleteYes(span) { 87 function deleteYes(span) {
85 let post = span.getAttribute('delete'); 88 let post = getPostDiv(span).getAttribute('post');
86 ajax( '/delete.js?post=' + post ); 89 ajax( '/delete.js?post=' + post );
87 } 90 }
88 91
89 function init() { 92 function init() {
90 let spans = document.querySelectorAll('span[ago]'); 93 let spans = document.querySelectorAll('span[ago]');
117 <% bbcode_to_html(post.content) %> 120 <% bbcode_to_html(post.content) %>
118 <p> 121 <p>
119 <a href="/reply.html?parent=<%=post.id%>">reply</a> 122 <a href="/reply.html?parent=<%=post.id%>">reply</a>
120 <% if post.author_name == user_name then %> 123 <% if post.author_name == user_name then %>
121 - <a href="javascript:ajax('/edit.js?post=<%=post.id%>')">edit</a> 124 - <a href="javascript:ajax('/edit.js?post=<%=post.id%>')">edit</a>
122 - <span delete="<%=post.id%>"><%deletePost()%></span> 125 - <span delete><%deletePost()%></span>
123 <% end %> 126 <% end %>
124 </p> 127 </p>
125 </div> 128 </div>
126 <div edit></div> 129 <div edit></div>
127 </div> 130 </div>
128 <% end %> 131 <% end %>
129 </div> 132 </div>
130 <% footer() %> 133 <% footer() %>
131 <span hidden delete>Delete? <a href="javascript:" onclick="deleteYes(parentNode)">yes</a> / <a href="javascript:" onclick="deleteNo(parentNode)">no</a></span> 134 <span hidden delete>Delete? <a href="javascript:" onclick="deleteYes(parentNode)">yes</a> / <a href="javascript:" onclick="deleteNo(parentNode)">no</a></span>
132 <span hidden undelete><%deletePost()%></span> 135 <span hidden undelete><%deletePost()%></span>
136 <div hidden edit>
137 <div contentEditable></div>
138 <p>
139 <button onclick="saveEdit(this)">save</button>
140 <button onclick="cancelEdit(this)">cancel</button>
141 </p>
142 </div>
133 </body> 143 </body>
134 </html> 144 </html>
135 <% 145 <%
136 end 146 end