From 3bab7db0232337fea693e5d5fd3e4c85963bdbec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@lyska.io>
Date: Mon, 15 Feb 2021 21:09:03 +0100
Subject: [PATCH] Enhance delete links with inline confirmation (#74)

---
 bookmarks/styles/bookmarks.scss               |  7 ++++
 .../templates/bookmarks/bookmark_list.html    | 38 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/bookmarks/styles/bookmarks.scss b/bookmarks/styles/bookmarks.scss
index feb1fb7..3fe88e9 100644
--- a/bookmarks/styles/bookmarks.scss
+++ b/bookmarks/styles/bookmarks.scss
@@ -56,6 +56,13 @@ ul.bookmark-list {
       color: darken($gray-color, 10%);
     }
   }
+
+  .actions .btn-link.bm-remove-confirm {
+    color: $error-color;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .bookmark-pagination {
diff --git a/bookmarks/templates/bookmarks/bookmark_list.html b/bookmarks/templates/bookmarks/bookmark_list.html
index 606f757..b1510e4 100644
--- a/bookmarks/templates/bookmarks/bookmark_list.html
+++ b/bookmarks/templates/bookmarks/bookmark_list.html
@@ -32,8 +32,7 @@
                        class="btn btn-link btn-sm">Archive</a>
                 {% endif %}
                 <a href="{% url 'bookmarks:remove' bookmark.id %}?return_url={{ return_url }}"
-                   class="btn btn-link btn-sm"
-                   onclick="return confirm('Do you really want to delete this bookmark?')">Remove</a>
+                   class="btn btn-link btn-sm bm-remove">Remove</a>
             </div>
         </li>
     {% endfor %}
@@ -42,3 +41,38 @@
 <div class="bookmark-pagination">
     {% pagination bookmarks %}
 </div>
+
+{# Enhance delete links to show inline confirmation #}
+<script type="application/javascript">
+    window.addEventListener("load", function () {
+        const linkEls = document.querySelectorAll('.bookmark-list a.bm-remove');
+
+        function showConfirmation(linkEl) {
+            const cancelEl = document.createElement('span');
+            cancelEl.innerText = 'Cancel';
+            cancelEl.className = 'btn btn-link btn-sm bm-remove-confirm mr-1';
+            cancelEl.addEventListener('click', function() {
+                container.remove();
+                linkEl.style = '';
+            });
+
+            const confirmEl = document.createElement('a');
+            confirmEl.innerText = 'Confirm';
+            confirmEl.className = 'btn btn-link btn-delete btn-sm bm-remove-confirm';
+            confirmEl.href = linkEl.href;
+
+            const container = document.createElement('span');
+            container.appendChild(cancelEl);
+            container.appendChild(confirmEl);
+            linkEl.parentElement.appendChild(container);
+            linkEl.style = 'display: none';
+        }
+
+        linkEls.forEach(function (linkEl) {
+            linkEl.addEventListener('click', function (e) {
+                e.preventDefault();
+                showConfirmation(linkEl);
+            });
+        });
+    });
+</script>
\ No newline at end of file