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