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 @@
- Adminverktyg
-
- {% include 'components/image_upload_form.html' %} -
- {% include 'components/styled_button.html' with button_text="Upload" style="admin" sizes="is-size-6" only %} +
+ {% include 'components/image_upload_form.html' %} +
+ {% include 'components/styled_button.html' with button_text="Upload" style="admin" sizes="is-size-6" only %} +
+ + {% with 'create-path' as modal_id %} +
+ {% include 'components/styled_button.html' with button_text="New folder" style="admin" sizes="is-size-6" only %}
- {% with 'create-path' as modal_id %} -
- {% include 'components/styled_button.html' with button_text="New folder" style="admin" sizes="is-size-6" only %} -
+ {% include "modals/create_path.html" with modalname=modal_id only %} + {% endwith %} - {% include "modals/create_path.html" with modalname=modal_id only %} - {% endwith %} +
+ {% include 'components/styled_button.html' with button_text="Select & Delete" style="admin" sizes="is-size-6" only %} +
-
- {% include 'components/styled_button.html' with button_text="Select & Delete" style="admin" sizes="is-size-6" only %} -
+
+ {% include 'components/styled_button.html' with button_text="Select all" style="secondary" sizes="is-size-6" only %} +
-
- {% include 'components/styled_button.html' with button_text="DELETE" style="secondary" sizes="is-size-6" only %} -
- +
+ {% include 'components/styled_button.html' with button_text="DELETE" style="secondary" sizes="is-size-6" only %} +
{% endif %}