Merge pull request #81 from Teknologforeningen/admin-select-all

Admin select all
Teknologforeningen · Jan 28, 2020 · a286601 · a286601
2 parents ec9875d + 1b13b60
commit a286601
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 18 deletions.
diff --git 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
@@ -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
@@ -12,33 +12,35 @@
 
   <div class="content toolbar-outer">
     <div class="toolbar-title is-size-5">
-
       <i class="vertical-line line-is-admin"></i>
       Adminverktyg
     </div>
-    <div class="buttons">
 
-        {% include 'components/image_upload_form.html' %}
-        <div id="js-upload-photos">
-          {% include 'components/styled_button.html' with button_text="Upload" style="admin" sizes="is-size-6" only %}
+    <div class="buttons">
+      {% include 'components/image_upload_form.html' %}
+      <div id="js-upload-photos">
+        {% include 'components/styled_button.html' with button_text="Upload" style="admin" sizes="is-size-6" only %}
+      </div>
+
+      {% with 'create-path' as modal_id %}
+        <div data-toggle="modal" data-target="{{ modal_id }}">
+          {% include 'components/styled_button.html' with button_text="New folder" style="admin" sizes="is-size-6" only %}
         </div>
 
-        {% with 'create-path' as modal_id %}
-          <div data-toggle="modal" data-target="{{ modal_id }}">
-            {% include 'components/styled_button.html' with button_text="New folder" style="admin" sizes="is-size-6" only %}
-          </div>
+        {% include "modals/create_path.html" with modalname=modal_id only %}
+      {% endwith %}
 
-          {% include "modals/create_path.html" with modalname=modal_id only %}
-        {% endwith %}
+      <div id="select-objects-button">
+        {% include 'components/styled_button.html' with button_text="Select & Delete" style="admin" sizes="is-size-6" only %}
+      </div>
 
-        <div id="select-objects-button">
-          {% include 'components/styled_button.html' with button_text="Select & Delete" style="admin" sizes="is-size-6" only %}
-        </div>
+      <div id="select-all-objects-button" pressed="">
+        {% include 'components/styled_button.html' with button_text="Select all" style="secondary" sizes="is-size-6" only %}
+      </div>
 
-        <div id="delete-button">
-          {% include 'components/styled_button.html' with button_text="DELETE" style="secondary" sizes="is-size-6" only %}
-        </div>
-
+      <div id="delete-button">
+        {% include 'components/styled_button.html' with button_text="DELETE" style="secondary" sizes="is-size-6" only %}
+      </div>
     </div>
   </div>
 {% endif %}