diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index eb625eb..a85a954 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -20,6 +20,7 @@
--gallery-padding-right: var(--gallery-padding-horizontal);
--gallery-image-scroll-margin: calc(2 * var(--gallery-current-image-border));
--gallery-scrollbar-width: 0.5em;
+ --gallery-empty-height: 20em;
--lightbox-frame: 5vmin;
--lightbox-image-margin-top: 0.75;
@@ -95,6 +96,19 @@ body {
align-content: flex-start;
flex-flow: row wrap;
}
+.gallery .images:empty {
+ height: var(--gallery-empty-height);
+ border: dashed 1px black;
+}
+.gallery .images:empty:after {
+ content: "Empty...";
+ position: absolute;
+ width: 100%;
+ left: 0;
+ top: 0;
+ padding: calc((var(--gallery-empty-height) - 1em) / 2) 0;
+ text-align: center;
+}
.gallery .images img {
height: 300px;
width: auto;
diff --git a/grid-n-view.html b/grid-n-view.html
index 64388a8..eb8eb77 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -96,8 +96,11 @@ var restoreScroll = function(){
- Gallery: drag-n-drop
- drop files/images -- add loading indicator
- drag to sort
+ - drag marked
- styling...
- Gallery: remove image
+ - basic delete
+ - delete marked
- UI: mark images for deletion + delete marked
- Gallery: serialize / deserialize
- Lightbox: navigation (keyboard / mouse)
diff --git a/grid-n-view.js b/grid-n-view.js
index 441c8ba..25e0546 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -171,14 +171,15 @@ var keyboard = {
: gallery.unmark_current ?
(gallery.current = null)
: null },
+ // XXX change to mark -> delete workflow...
Delete: function(evt){
if(gallery.current){
- var remove = gallery.current
+ var to_remove = gallery.current
gallery.next()
// XXX this is a bit crude...
- gallery.current === remove
+ gallery.current === to_remove
&& gallery.prev()
- gallery.remove(remove) } },
+ gallery.remove(to_remove) } },
// selection...
' ': function(evt){
gallery.current
@@ -740,6 +741,7 @@ var Gallery = {
&& img.remove())
: null }
return this
+ .updateMarkers()
.update() },
clear: function(){
this.dom.querySelector('.images').innerHTML = ''