Enhance delete links with inline confirmation (#74)

This commit is contained in:
Sascha Ißbrücker 2021-02-15 21:09:03 +01:00 committed by GitHub
parent b6b7d3f662
commit 3bab7db023
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 2 deletions

View file

@ -56,6 +56,13 @@ ul.bookmark-list {
color: darken($gray-color, 10%); color: darken($gray-color, 10%);
} }
} }
.actions .btn-link.bm-remove-confirm {
color: $error-color;
&:hover {
text-decoration: underline;
}
}
} }
.bookmark-pagination { .bookmark-pagination {

View file

@ -32,8 +32,7 @@
class="btn btn-link btn-sm">Archive</a> class="btn btn-link btn-sm">Archive</a>
{% endif %} {% endif %}
<a href="{% url 'bookmarks:remove' bookmark.id %}?return_url={{ return_url }}" <a href="{% url 'bookmarks:remove' bookmark.id %}?return_url={{ return_url }}"
class="btn btn-link btn-sm" class="btn btn-link btn-sm bm-remove">Remove</a>
onclick="return confirm('Do you really want to delete this bookmark?')">Remove</a>
</div> </div>
</li> </li>
{% endfor %} {% endfor %}
@ -42,3 +41,38 @@
<div class="bookmark-pagination"> <div class="bookmark-pagination">
{% pagination bookmarks %} {% pagination bookmarks %}
</div> </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>