now can add to current list by dragging...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

css/grid-n-view.css

@@ -109,10 +109,15 @@ body {
 	cursor: pointer;
 }
 
-/* dragging */
+/* dragged image... */
-.gallery .images img.dragging {
+.gallery .images img.dragged {
 }
-.gallery .images:has(.dragging) img:not(.dragging) {
+.gallery .images:has(.dragged) img:not(.dragged) {
+}
+
+/* image dragged over... */
+.gallery .images img.dragged-over {
+	filter: saturate(0);
 }
 
 /* selection marker... */

grid-n-view.js

@@ -666,7 +666,7 @@ var Gallery = {
 		if(index == null){
 			this.clear() }
 		if(index == null 
-				|| this.length > 0){
+				&& this.length == 0){
 			this.dom.querySelector('.images')
 				.append(...elems) 
 		} else {
@@ -772,7 +772,7 @@ var Gallery = {
 				var i = that.images.indexOf(evt.target)
 				if(i >= 0){
 					dragged = evt.target 
-					dragged.classList.add('dragging') } })
+					dragged.classList.add('dragged') } })
 		var skip_dragover = false
 		// XXX do we .__update_grid_size() live (current) or after the 
 		// 		drag is over???
@@ -785,7 +785,8 @@ var Gallery = {
 					return }
 				var target = evt.target
 				var i = that.images.indexOf(target)
-				if(dragged && i >= 0){
+				if(dragged 
+						&& i >= 0){
 					evt.offsetX < target.offsetWidth / 2 ?
 						target.after(dragged)
 						: target.before(dragged) 
@@ -840,67 +841,88 @@ var Gallery = {
 								|| next.offsetTop != target.offsetTop){
 							target.after(dragged)
 							that.updateMarkers() } } } })
+		var dragged_over
 		this.dom
 			.addEventListener('dragover', function(evt){
 				evt.preventDefault()
 				evt.stopPropagation()
-				evt.dataTransfer.dropEffect = 'copy' }, false)
+				evt.dataTransfer.dropEffect = 'copy' 
+				var target = evt.target
+				var i = that.images.indexOf(target)
+				if(!dragged 
+						&& i >= 0){
+					dragged_over
+						&& dragged_over.classList.remove('dragged-over') 
+					dragged_over = target
+					dragged_over.classList.add('dragged-over') } }, false)
 		// drag/drop: files...
+		// NOTE: if shift is pressed then this will add files to the 
+		// 		loaded list, otherwise it will replace the list...
 		// XXX handle serilized data...
 		this.dom
 			.addEventListener('drop', function(evt){
 				evt.preventDefault()
 				evt.stopPropagation()
-				var files = 
-					evt.dataTransfer.items ?
-						[...evt.dataTransfer.items]
-							.map(function(elem){
-								return elem.kind == 'file' ?
-									[elem.getAsFile()]
-									: [] })
-							.flat()
-						: [...evt.dataTransfer.files]
 
-				Promise.all(files
+				// non-local drag...
-						.map(function(file){
+				if(!dragged){
-							// XXX handle serilized data...
+					var expand = (evt.shiftKey && dragged_over) ?
-							// XXX
+						that.images.indexOf(dragged_over)
+						: undefined
 
-							// images...
+					var files = 
-							if(file.type.match('image.*')){
+						evt.dataTransfer.items ?
-								// XXX TEST...
+							[...evt.dataTransfer.items]
-								if(file.path){
+								.map(function(elem){
-									return {
+									return elem.kind == 'file' ?
-										url: file.path,
+										[elem.getAsFile()]
-										filename: file.name,
+										: [] })
-									}
+								.flat()
-								} else {
+							: [...evt.dataTransfer.files]
-									return new Promise(function(resolve, reject){
+
-										var reader = new FileReader()
+					Promise.all(files
-										reader.onload = function(f){
+							.map(function(file){
-											resolve({
+								// XXX handle serilized data...
-												url: f.target.result,
+								// XXX
-												filename: file.name,
+
-												// XXX any other metadata to include???
+								// images...
-											}) }
+								if(file.type.match('image.*')){
-										reader.readAsDataURL(file) }) } } 
+									// XXX TEST...
-							// other files...
+									if(file.path){
-							return [] })
+										return {
-						.flat())
+											url: file.path,
-					.then(
+											filename: file.name,
-						function(images){
+										}
-							// no images...
+									} else {
-							if(images.length == 0){
+										return new Promise(function(resolve, reject){
-								return }
+											var reader = new FileReader()
-							return that.load(images) }, 
+											reader.onload = function(f){
-						function(err){
+												resolve({
-							// XXX handle errors...
+													url: f.target.result,
-						}) 
+													filename: file.name,
+													// XXX any other metadata to include???
+												}) }
+											reader.readAsDataURL(file) }) } } 
+								// other files...
+								return [] })
+							.flat())
+						.then(
+							function(images){
+								// no images...
+								if(images.length == 0){
+									return }
+								return that.load(images, expand) }, 
+							function(err){
+								// XXX handle errors...
+							}) }
 				dragged
-					&& dragged.classList.remove('dragging')
+					&& dragged.classList.remove('dragged')
+				dragged_over
+					&& dragged_over.classList.remove('dragged-over')
 				// XXX if this is used in the promise, move to the point 
 				// 		after we nned this...
-				dragged = undefined }, false)
+				dragged = undefined 
+				dragged_over = undefined }, false)
 
 		// XXX
 		for(var img of this.images){