diff --git a/grid-n-view.html b/grid-n-view.html index e8a8a75..c9c211c 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -92,9 +92,10 @@ var restoreScroll = function(){ - crop stack (a-la ImageGrid.Viewer) - actions: - "from selection" -- Gallery: drag-n-drop +- Gallery: drag-n-drop - drop files/images -- add loading indicator - - drag to sort + - drag to sort + - styling... - Gallery: remove image - UI: mark images for deletion + delete marked - Gallery: serialize / deserialize diff --git a/grid-n-view.js b/grid-n-view.js index 4f070df..2fcc7c8 100644 --- a/grid-n-view.js +++ b/grid-n-view.js @@ -752,14 +752,29 @@ var Gallery = { .addEventListener('click', function(evt){ that.unmark_current && (that.current = null) }) - // drag/drop... - // XXX add a local drag mode... + // drag/drop: sort... + // XXX should we support multi-drag??? + var dragged + this.dom + .addEventListener('dragstart', function(evt){ + var i = that.images.indexOf(evt.target) + if(i >= 0){ + dragged = evt.target } }) + this.dom + .addEventListener('dragenter', function(evt){ + var i = that.images.indexOf(evt.target) + if(i >= 0){ + var target = evt.target + evt.offsetX < evt.target.offsetWidth / 2 ? + target.after(dragged) + : target.before(dragged) } }) this.dom .addEventListener('dragover', function(evt){ evt.preventDefault() evt.stopPropagation() - evt.dataTransfer.dropEffect = 'copy' - }, false) + evt.dataTransfer.dropEffect = 'copy' }, false) + // drag/drop: files... + // XXX handle serilized data... this.dom .addEventListener('drop', function(evt){ evt.preventDefault() @@ -776,16 +791,19 @@ var Gallery = { Promise.all(files .map(function(file){ - if(!file.type.match('image.*')){ - return [] } - if(file.path){ - return file.path - } else { - return new Promise(function(resolve, reject){ - var reader = new FileReader() - reader.onload = function(f){ - resolve(f.target.result) } - reader.readAsDataURL(file) }) } }) + // XXX handle serilized data... + // XXX + + // images... + if(file.type.match('image.*')){ + if(file.path){ + return file.path + } else { + return new Promise(function(resolve, reject){ + var reader = new FileReader() + reader.onload = function(f){ + resolve(f.target.result) } + reader.readAsDataURL(file) }) } } }) .flat()) .then( function(images){