diff --git a/fotogalleri/gallery/static/css/components/toolbar.css b/fotogalleri/gallery/static/css/components/toolbar.css index 2097e36..594df00 100644 --- a/fotogalleri/gallery/static/css/components/toolbar.css +++ b/fotogalleri/gallery/static/css/components/toolbar.css @@ -13,6 +13,10 @@ font-weight: 600; } +#select-all-objects-button { + display: none; +} + #delete-button { display: none; } diff --git a/fotogalleri/gallery/static/javascript/select.js b/fotogalleri/gallery/static/javascript/select.js index c6010e5..40bc15a 100644 --- a/fotogalleri/gallery/static/javascript/select.js +++ b/fotogalleri/gallery/static/javascript/select.js @@ -28,10 +28,35 @@ function selectFolderLink(component) { } $(function() { + const selectAllButton = $('#select-all-objects-button'); + selectAllButton.click(function() { + const isPressed = selectAllButton.attr('pressed'); + + $('[selectable="true"]').each(function(index, selectable) { + const classNames = selectable.className.split(' '); + const filteredNames = classNames.filter(function(className) { + return className !== 'selectable'; + }); + + filteredNames.forEach(function() { + const checkbox = $(selectable).children('[type="checkbox"]'); + checkbox.prop('checked', !isPressed); + }); + }); + + selectAllButton.attr('pressed', !!isPressed ? '' : 'true') + selectAllButton.find('button').text( + !!isPressed + ? 'Select all' + : 'Deselect all' + ); + }); + const selectButton = $('#select-objects-button') selectButton.click(function() { const deleteButton = $('#delete-button'); deleteButton.toggle(); + selectAllButton.toggle(); selectButton.find("button").toggleClass("styled-button-admin-selected") $('[selectable="true"]').each(function(index, selectable) { diff --git a/fotogalleri/gallery/templates/components/toolbar.html b/fotogalleri/gallery/templates/components/toolbar.html index 58eabf3..444fb0f 100644 --- a/fotogalleri/gallery/templates/components/toolbar.html +++ b/fotogalleri/gallery/templates/components/toolbar.html @@ -12,33 +12,35 @@