From: ArthurHoaro <arthur@hoa.ro>
Date: Mon, 13 Aug 2018 11:13:26 +0000 (+0200)
Subject: Add a button to toggle all checkboxes of displayed links
X-Git-Tag: v0.10.3~2^2~12^2
X-Git-Url: https://git.immae.eu/?p=github%2Fshaarli%2FShaarli.git;a=commitdiff_plain;h=refs%2Fpull%2F1208%2Fhead

Add a button to toggle all checkboxes of displayed links

Related to #1160
---

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"}
                   <div class="linklist-item-infos-controls-group pure-u-0 pure-u-lg-visible">
                     <span class="linklist-item-infos-controls-item ctrl-checkbox">
-                      <input type="checkbox" class="delete-checkbox" value="{$value.id}">
+                      <input type="checkbox" class="link-checkbox" value="{$value.id}">
                     </span>
                     <span class="linklist-item-infos-controls-item ctrl-edit">
                       <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index 5309e348..fe665a84 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -16,6 +16,9 @@
         <a href="?untaggedonly" title="{'Filter untagged links'|t}"
            class={if="$untaggedonly"}"filter-on"{else}"filter-off"{/if}
         ><i class="fa fa-tag"></i></a>
+        <a href="#" title="{'Select all'|t}"
+           class="filter-off select-all-button"
+        ><i class="fa fa-check-square-o"></i></a>
         <a href="#" class="filter-off fold-all pure-u-lg-0" title="{'Fold all'|t}">
           <i class="fa fa-chevron-up"></i>
         </a>