diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index a85a954..795aabb 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -134,6 +134,12 @@ body {
filter: saturate(0);
}
+/* image marked for removal... */
+.gallery .images img.to-remove {
+ opacity: 0.3;
+ filter: saturate(0);
+}
+
/* selection marker... */
.gallery .images img.current {
z-index: 10;
diff --git a/grid-n-view.html b/grid-n-view.html
index eb8eb77..5d5ebf6 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -100,8 +100,9 @@ var restoreScroll = function(){
- styling...
- Gallery: remove image
- basic delete
- - delete marked
- - UI: mark images for deletion + delete marked
+ - delete marked
+ - mark images for deletion + delete marked
+ - UI/toolbar
- Gallery: serialize / deserialize
- Lightbox: navigation (keyboard / mouse)
- Lightbox: fullscreen mode
diff --git a/grid-n-view.js b/grid-n-view.js
index 25e0546..15340ec 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -171,15 +171,42 @@ var keyboard = {
: gallery.unmark_current ?
(gallery.current = null)
: null },
- // XXX change to mark -> delete workflow...
+ // del (image) -> mark current for deletion
+ // del (marked) -> toggle marked for deletion all marked
+ // shift-del (none marked for deletion) -> delete current
+ // shift-del (1+ marked for deletion) -> delete marked for deletion
Delete: function(evt){
- if(gallery.current){
- var to_remove = gallery.current
- gallery.next()
- // XXX this is a bit crude...
- gallery.current === to_remove
- && gallery.prev()
- gallery.remove(to_remove) } },
+ // remove...
+ if(evt.shiftKey){
+ // XXX focus crrect image...
+ to_remove = [...gallery.dom.querySelectorAll('.images img.to-remove')]
+ // remove marked...
+ if(to_remove.length > 0){
+ gallery.remove(...to_remove)
+ // remove current...
+ } else if(gallery.current){
+ var to_remove = gallery.current
+ if(gallery.marked.includes(to_remove)){
+ gallery.remove(...gallery.marked)
+ } else {
+ gallery.next()
+ // XXX this is a bit crude...
+ gallery.current === to_remove
+ && gallery.prev()
+ gallery.remove(to_remove) } }
+ // mark for removal...
+ } else if(gallery.current){
+ var cur = gallery.current
+ // toggle marked...
+ if(gallery.marked.includes(cur)){
+ var toggle_remove = !cur.classList.contains('to-remove')
+ for(var img of gallery.marked){
+ toggle_remove ?
+ img.classList.add('to-remove')
+ : img.classList.remove('to-remove') }
+ // toggle current...
+ } else {
+ gallery.current.classList.toggle('to-remove') } } },
// selection...
' ': function(evt){
gallery.current