feat(multi-select): Multi-select delete with select all

Joxit · Apr 24, 2019 · 22080a3 · 22080a3
1 parent 021cddf
commit 22080a3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   "devDependencies": {
     "del": "^3.0.0",
     "gulp": "^4.0.1",
-    "gulp-clean-css": "^4.0.0",
+    "gulp-clean-css": "^4.2.0",
     "gulp-concat": "^2.6.0",
     "gulp-filter": "^5.1.0",
     "gulp-htmlmin": "^5.0.1",

diff --git a/src/tags/remove-image.tag b/src/tags/remove-image.tag
@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image." hide="{ opts.multiDelete }">
     <i class="material-icons">delete</i>
   </material-button>
-  <material-checkbox show="{ opts.multiDelete }"></material-checkbox>
+  <material-checkbox show="{ opts.multiDelete }" title="Select this tag to delete it."></material-checkbox>
   <script type="text/javascript">
     const self = this;
 

diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
@@ -42,7 +42,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         onclick="registryUI.taglist.reverse();">Tag
         </th>
         <th class="show-tag-history">History</th>
-        <th class={ 'remove-tag': true, delete: this.parent.toDelete > 0 } show="{ registryUI.isImageRemoveActivated }"><material-checkbox ref="remove-tag-checkbox" class="indeterminate" show={ this.toDelete === 0}></material-checkbox>
+        <th class={ 'remove-tag': true, delete: this.parent.toDelete > 0 } show="{ registryUI.isImageRemoveActivated }">
+          <material-checkbox ref="remove-tag-checkbox" class="indeterminate" show={ this.toDelete === 0} title="Toggle multi-delete. Alt+Click to select all tags."></material-checkbox>
           <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete selected images." onclick={ registryUI.taglist.bulkDelete } show={ this.toDelete > 0 }>
             <i class="material-icons">delete</i>
           </material-button></th>
@@ -102,23 +103,38 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       if (this.toDelete <= 1) {
         this.update();
       }
-    })
+    });
+
+    this._getRemoveImageTags = function() {
+      var images = self.refs['taglist-tag'].tags['remove-image'];
+      if (!(images instanceof Array)) {
+        images = [images];
+      }
+      return images;
+    };
 
     registryUI.taglist.bulkDelete = function() {
       if (self.multiDelete && self.toDelete > 0) {
-        var images = self.refs['taglist-tag'].tags['remove-image'];
-        if (!(images instanceof Array)) {
-          images = [images];
-        }
-        images.filter(function(img) {
+        self._getRemoveImageTags().filter(function(img) {
           return img.tags['material-checkbox'].checked;
         }).forEach(function(img) {
           img.delete(true);
         });
       }
-    }
+    };
 
     this.on('mount', function() {
+      var toggle = this.tags['material-card'].refs['remove-tag-checkbox'].toggle;
+      this.tags['material-card'].refs['remove-tag-checkbox'].toggle = function(e) {
+        if (e.altKey) {
+          self._getRemoveImageTags()
+            .filter(function(img) { return !img.tags['material-checkbox'].checked; })
+            .forEach(function(img) { img.tags['material-checkbox'].toggle() });
+        } else {
+          toggle();
+        }
+      };
+
       this.tags['material-card'].refs['remove-tag-checkbox'].on('toggle', function() {
         registryUI.taglist.instance.multiDelete = this.checked;
         registryUI.taglist.instance.update();