Merge pull request #1208 from ArthurHoaro/feature/select-all

Add a button to toggle all checkboxes of displayed links

diff --combined assets/default/js/base.js
index 1b8d8c36fa33d603a78232495e6e612d92eb6879,951e3f4d3d71e580f7d05fc3113939721cd13df8..99e03370a763c0bdd8214ce43a18a6eccaab394c
--- 1/assets/default/js/base.js
--- 2/assets/default/js/base.js
+++ b/assets/default/js/base.js
@@@ -422,12 -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 +444,7 @@@
        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 +466,25 @@@
      });
    }
  
+   /**
+    * 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
     *
@@@ -548,7 -567,7 +567,7 @@@
        event.preventDefault();
        const block = findParent(event.target, 'div', { class: 'tag-list-item' });
        const tag = block.getAttribute('data-tag');
 -      const refreshedToken = document.getElementById('token');
 +      const refreshedToken = document.getElementById('token').value;
  
        if (confirm(`Are you sure you want to delete the tag "${tag}"?`)) {
          const xhr = new XMLHttpRequest();

diff --combined assets/default/scss/shaarli.scss
index 55f9f0a1cd7f140b5c7467653924659399ee649d,7e7302fa7af566152144183b49d60d199977992d..760d8d6ab7272a5d8c929ccb8425fc5a8f7f054d
--- 1/assets/default/scss/shaarli.scss
--- 2/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@@ -740,7 -740,7 +740,7 @@@ body
      font-size: 1em;
    }
  
-   .delete-checkbox {
+   .link-checkbox {
      display: none;
    }
  }
@@@ -755,14 -755,6 +755,14 @@@
    font-size: 1.3em;
  }
  
 +.pin-link {
 +  font-size: 1.3em;
 +}
 +
 +.pinned-link {
 +  color: $blue !important;
 +}
 +
  .linklist-item-description {
    position: relative;
    padding: 0 10px;
@@@ -856,10 -848,6 +856,10 @@@
    margin: 0 7px;
  }
  
 +.ctrl-delete {
 +  margin: 0 7px 0 0;
 +}
 +
  // 64em -> lg
  @media screen and (max-width: 64em) {
    .linklist-item-infos-url {

diff --combined tpl/default/linklist.html
index aabb53ac6764095b26486c2683f0e89ee7b8d446,97730c291b5fe561ce305f54339ec0ed0cfcb0c3..ed78f40a7502f625e60659a92738ef91fc669226
--- 1/tpl/default/linklist.html
--- 2/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@@ -125,8 -125,6 +125,8 @@@
        {$strPermalink=t('Permalink')}
        {$strPermalinkLc=t('permalink')}
        {$strAddTag=t('Add tag')}
 +      {$strToggleSticky=t('Toggle sticky')}
 +      {$strSticky=t('Sticky')}
        {ignore}End of translations{/ignore}
        {loop="links"}
          <div class="anchor" id="{$value.shorturl}"></div>
@@@ -139,7 -137,7 +139,7 @@@
                    <a href="{$value.real_url}">
                    {ignore}RainTPL hack: put the 2 src on two different line to avoid path replace bug{/ignore}
                    <img data-src="{$value.thumbnail}#" class="b-lazy"
 -                    src="#"
 +                    src=""
                      alt="thumbnail" width="{$thumbnails_width}" height="{$thumbnails_height}" />
                    </a>
                  </div>
@@@ -192,7 -190,7 +192,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>
@@@ -203,23 -201,7 +203,23 @@@
                          <i class="fa fa-trash"></i>
                        </a>
                      </span>
 +                    <span class="linklist-item-infos-controls-item ctrl-pin">
 +                      <a href="?do=pin&amp;id={$value.id}&amp;token={$token}"
 +                         title="{$strToggleSticky}" class="pin-link {if="$value.sticky"}pinned-link{/if} pure-u-0 pure-u-lg-visible">
 +                        <i class="fa fa-thumb-tack"></i>
 +                      </a>
 +                    </span>
                    </div>
 +                {else}
 +                  {if="$value.sticky"}
 +                    <div class="linklist-item-infos-controls-group pure-u-0 pure-u-lg-visible">
 +                      <span class="linklist-item-infos-controls-item ctrl-pin">
 +                        <span title="{$strSticky}" class="pin-link pinned-link pure-u-0 pure-u-lg-visible">
 +                          <i class="fa fa-thumb-tack"></i>
 +                        </span>
 +                      </span>
 +                    </div>
 +                  {/if}
                  {/if}
                  <a href="?{$value.shorturl}" title="{$strPermalink}">
                    {if="!$hide_timestamps || $is_logged_in"}