diff --git a/manage.html b/manage.html index 748aa1f5..2c78bc49 100644 --- a/manage.html +++ b/manage.html @@ -320,6 +320,7 @@ + diff --git a/manage/manage-actions.js b/manage/manage-actions.js index 75d26c08..942fd64c 100644 --- a/manage/manage-actions.js +++ b/manage/manage-actions.js @@ -86,6 +86,8 @@ function initGlobalEvents() { } }); + document.addEventListener('change', updateBulkFilters); + $$('[data-toggle-on-click]').forEach(el => { // dataset on SVG doesn't work in Chrome 49-??, works in 57+ const target = $(el.getAttribute('data-toggle-on-click')); @@ -419,6 +421,34 @@ function onVisibilityChange() { } } +function updateBulkFilters({target}) { + // total is undefined until initialized + if (!installed.dataset.total) return; + // ignore filter checkboxes + if (target.type === 'checkbox' && !target.dataset.filter) { + $('#manage-bulk-actions').classList.remove('hidden'); + const bulk = $('#toggle-all-filters'); + const state = target.checked; + const visibleEntries = $$('.entry-filter-toggle') + .filter(entry => !entry.closest('.entry').classList.contains('hidden')); + bulk.indeterminate = false; + if (target === bulk) { + visibleEntries.forEach(entry => { + entry.checked = state; + }); + } else { + if (visibleEntries.length === visibleEntries.filter(entry => entry.checked === state).length) { + bulk.checked = state; + } else { + bulk.checked = false; + bulk.indeterminate = true; + } + } + const count = $$('.entry-filter-toggle').filter(entry => entry.checked).length; + $('#bulk-filter-count').textContent = count || ''; + } +} + function lazyLoad() { setTimeout(() => { $$('link[data-href]').forEach(link => { diff --git a/manage/manage.css b/manage/manage.css index 0b14907b..405e4314 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -538,7 +538,7 @@ details.applies-to-extra[open] { } #filters, -.toggle-all { +#bulk-filter-count { margin-right: 20px; } @@ -593,9 +593,11 @@ details.applies-to-extra[open] { border: 1px solid transparent; } -.active #filters-stats { +.active #filters-stats, +#bulk-filter-count:not(:empty) { background-color: darkcyan; border-color: darkcyan; + border-radius: 2px; color: white; font-size: 0.7rem; font-weight: normal;