Add multiple file/directory deletion in the filemanager (#544)

* Add deletion of multiple selected files
* Adjust success/failure text to properly represent multiple files
* Actually update the minimized versions with the new code
* Use let instead of var and seperate items into seperate code tags
* Deleting the selected items now supports the new endpoint
* Replaced the select buttons with checkboxes
* Selections is now handled by find all the selected checkboxes
* Add a warning if no files/folders are selected when pressing delete
* Add a select all files/folders checkbox
* Move mass delete button into a mass actions dropdown
* Move style to css file
* Actually update the minimized files (again)
* Mass actions button is now disabled by default
* Clicking on a row selects the checkbox and enables the actions button
* Fix clicking anything else but the row or checkbox triggering selection

public/themes/pterodactyl/js/frontend/files/src/index.js

@@ -45,6 +45,10 @@ class FileManager {
                 ContextMenu.run();
                 this.reloadFilesButton();
                 this.addFolderButton();
+                this.selectItem();
+                this.selectAll();
+                this.selectiveDeletion();
+                this.selectRow();
                 if (_.isFunction(next)) {
                     return next();
                 }
@@ -83,12 +87,42 @@ class FileManager {
         });
     }
 
+    selectItem() {
+        $('[data-action="addSelection"]').on('click', event => {
+            event.preventDefault();
+        });
+    }
+
+    selectAll() {
+        $('[data-action="selectAll"]').on('click', event => {
+            event.preventDefault();
+        });
+    }
+
+    selectiveDeletion() {
+        $('[data-action="selective-deletion"]').on('mousedown', event => {
+            new ActionsClass().deleteSelected();
+        });
+    }
+
     addFolderButton() {
         $('[data-action="add-folder"]').unbind().on('click', () => {
             new ActionsClass().folder($('#file_listing').data('current-dir') || '/');
         })
     }
 
+    selectRow() {
+      $('#file_listing tr').on('mousedown', event => {
+          if($(event.target).is('th') || $(event.target).is('input[data-action="selectAll"]')) {
+              new ActionsClass().highlightAll(event);
+          } else if($(event.target).is('td') || $(event.target).is('input[data-action="addSelection"]')) {
+              new ActionsClass().toggleHighlight(event);
+          }
+
+          new ActionsClass().toggleMassActions();
+      });
+    }
+
     decodeHash() {
         return decodeURIComponent(window.location.hash.substring(1));
     }