Merge pull request #1208 from ArthurHoaro/feature/select-all
Add a button to toggle all checkboxes of displayed links
This commit is contained in:
commit
a062416918
4 changed files with 28 additions and 6 deletions
|
@ -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
|
||||
*
|
||||
|
|
|
@ -740,7 +740,7 @@ body,
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
.delete-checkbox {
|
||||
.link-checkbox {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -192,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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue