hidden reply form

2 files changed, 25 insertions, 3 deletions

diff --git a/views/index.erb b/views/index.erb
index 269c495..0021ec9 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -18,4 +18,22 @@
       </form>
     <% end %>
   </body>
+  <script>
+    const reply_buttons = document.querySelectorAll(".reply");
+    for (const button of reply_buttons) {
+      button.addEventListener('click', function() {
+        const form = document.getElementById('form' + button.getAttribute('data-index'));
+        button.style.display = 'none';
+        form.style.display = 'block';
+      });
+    };
+    const cancel_buttons = document.querySelectorAll(".cancel");
+    for (const button of cancel_buttons) {
+      button.addEventListener('click', function() {
+        const form = document.getElementById('form' + button.getAttribute('data-index'));
+        button.style.display = 'block';
+        form.style.display = 'none';
+      });
+    };
+  </script>
 </html>
diff --git a/views/item.erb b/views/item.erb
index 287054e..ebc632e 100644
--- a/views/item.erb
+++ b/views/item.erb
@@ -35,12 +35,16 @@
       <% end %>
     <% end %>
   <% end %>
-  <form action='/outbox' method='post'>
+  <p>
+  <button class="reply" data-index='<%= @item[:nr] %>'>Reply</button>
+  <form action='/outbox' method='post' id='form<%= @item[:nr] %>' style='display:none;' >
     <input type='hidden' name='to' value='<%= @item[:actor_url] %>' />
     <input type='hidden' name='inReplyTo' value='<%= @item[:id] %>' />
     <input type='hidden' name='redirect' value='/<%= @dir.sub('inbox','') %>#<%= @item[:nr] %>' />
-    <textarea name="content"></textarea>
-    <input type="submit" value="Reply">
+    <textarea name='content'></textarea>
+    <br>
+    <button class="cancel" data-index='<%= @item[:nr] %>'>Cancel</button>
+    <input type='submit' value='Send'>
   </form>
 </div>
 <% @item[:replies].each do |reply| %>