From: ArthurHoaro <arthur@hoa.ro>
Date: Sat, 6 Oct 2018 11:30:29 +0000 (+0200)
Subject: Merge pull request #1208 from ArthurHoaro/feature/select-all
X-Git-Tag: v0.10.3~2^2~12
X-Git-Url: https://git.immae.eu/?p=github%2Fshaarli%2FShaarli.git;a=commitdiff_plain;h=a062416918c964e7551137c08b5b5671e6e2bb7e;hp=-c

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

Add a button to toggle all checkboxes of displayed links
---

a062416918c964e7551137c08b5b5671e6e2bb7e
diff --combined assets/default/js/base.js
index 1b8d8c36,951e3f4d..99e03370
--- a/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 55f9f0a1,7e7302fa..760d8d6a
--- a/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 aabb53ac,97730c29..ed78f40a
--- a/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"}