From fc574e64544db2f7b56443a827e17d58c7561804 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Mon, 13 Aug 2018 13:13:26 +0200 Subject: Add a button to toggle all checkboxes of displayed links Related to #1160 --- assets/default/js/base.js | 27 +++++++++++++++++++++++---- assets/default/scss/shaarli.scss | 2 +- tpl/default/linklist.html | 2 +- tpl/default/linklist.paging.html | 3 +++ 4 files changed, 28 insertions(+), 6 deletions(-) diff --git a/assets/default/js/base.js b/assets/default/js/base.js index 8bf79d3e..951e3f4d 100644 --- a/assets/default/js/base.js +++ b/assets/default/js/base.js @@ -422,12 +422,12 @@ function init(description) { /** * Bulk actions */ - const linkCheckboxes = document.querySelectorAll('.delete-checkbox'); + const linkCheckboxes = document.querySelectorAll('.link-checkbox'); const bar = document.getElementById('actions'); [...linkCheckboxes].forEach((checkbox) => { checkbox.style.display = 'inline-block'; - checkbox.addEventListener('click', () => { - const linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked'); + checkbox.addEventListener('change', () => { + const linkCheckedCheckboxes = document.querySelectorAll('.link-checkbox:checked'); const count = [...linkCheckedCheckboxes].length; if (count === 0 && bar.classList.contains('open')) { bar.classList.toggle('open'); @@ -444,7 +444,7 @@ function init(description) { event.preventDefault(); const links = []; - const linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked'); + const linkCheckedCheckboxes = document.querySelectorAll('.link-checkbox:checked'); [...linkCheckedCheckboxes].forEach((checkbox) => { links.push({ id: checkbox.value, @@ -466,6 +466,25 @@ function init(description) { }); } + /** + * Select all button + */ + const selectAllButtons = document.querySelectorAll('.select-all-button'); + [...selectAllButtons].forEach((selectAllButton) => { + selectAllButton.addEventListener('click', (e) => { + e.preventDefault(); + const checked = selectAllButton.classList.contains('filter-off'); + [...selectAllButtons].forEach((selectAllButton2) => { + selectAllButton2.classList.toggle('filter-off'); + selectAllButton2.classList.toggle('filter-on'); + }); + [...linkCheckboxes].forEach((linkCheckbox) => { + linkCheckbox.checked = checked; + linkCheckbox.dispatchEvent(new Event('change')); + }); + }); + }); + /** * Tag list operations * diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index b8578ea6..7e7302fa 100644 --- a/assets/default/scss/shaarli.scss +++ b/assets/default/scss/shaarli.scss @@ -740,7 +740,7 @@ body, font-size: 1em; } - .delete-checkbox { + .link-checkbox { display: none; } } diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html index 8ea2ce66..97730c29 100644 --- a/tpl/default/linklist.html +++ b/tpl/default/linklist.html @@ -190,7 +190,7 @@ {if="$is_logged_in"}