edded experimental drag and drop images to UI -- needs more thought...

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

ui (gen4)/imagegrid/images.js

@@ -311,7 +311,9 @@ module.ImagesClassPrototype = {
 		var base_pattern = base ? RegExp('^' + RegExp.quoteRegExp(base)) : null 
 		data.forEach(function(path){
 			// XXX need to normalize path...
-			var p = (base_pattern ? path.replace(base_pattern, './') : path)
+			var p = path.startsWith('data') ? 
+				path 
+				: (base_pattern ? path.replace(base_pattern, './') : path)
 					.replace(/([\/\\])\1+/g, '/')
 			// XXXX
 			var gid = hash('I'+i+':'+p)

ui (gen4)/lib/util.js

@@ -175,7 +175,7 @@ var path2url =
 module.path2url =
 function(path){
 	// test if we have a schema, and if yes return as-is...
-	if(/^(http|https|file|[\w-]*):[\\\/]{2}/.test(path)){
+	if(/^(data|http|https|file|[\w-]*):[\\\/]{2}/.test(path)){
 		return path
 	}
 	// skip encoding windows drives...

ui (gen4)/ui.js

@@ -93,6 +93,62 @@ var viewer = require('imagegrid/viewer')
 
 
 
+/*********************************************************************/
+
+
+// XXX would be nice to load a directory tree as ribbons...
+// XXX get the real URLs from node/nw version...
+// XXX HACK-ish...
+function handleDrop(evt){
+	event.stopPropagation()
+	event.preventDefault()
+
+	var files = event.dataTransfer.files
+	var lst = {}
+
+	// files is a FileList of File objects. List some properties.
+	var output = []
+	for (var i = 0, f; f = files[i]; i++) {
+		// only images...
+		if (!f.type.match('image.*')) {
+			continue
+		}
+
+		lst[f.name] = {
+			// XXX get the metadata...
+		}
+
+		var reader = new FileReader()
+
+		reader.onload = (function(f){
+			return function(e){
+				// update the data and reload...
+				var gid = lst[f.name].gid
+				ig.images[gid].path = e.target.result
+				ig.ribbons.updateImage(gid)
+			} })(f)
+
+		reader.readAsDataURL(f)
+	}
+
+	ig.loadURLs(Object.keys(lst))
+
+	// add the generated stuff to the list -- this will help us id the 
+	// images when they are loaded later...
+	ig.images.forEach(function(gid, img){
+		lst[img.path].gid = gid
+		img.name = img.path
+	})
+}
+function handleDragOver(evt) {
+	evt.stopPropagation()
+	evt.preventDefault()
+	// Explicitly show this is a copy...
+	evt.dataTransfer.dropEffect = 'copy'
+}
+
+
+
 /*********************************************************************/
 
 $(function(){
@@ -211,6 +267,13 @@ $(function(){
 	}
 
 
+	// XXX drop files...
+	$('.viewer')[0]
+		.addEventListener('dragover', handleDragOver, false);
+	$('.viewer')[0]
+		.addEventListener('drop', handleDrop, false)
+
+
 	// setup the viewer...
 	ig
 		.load({ viewer: $('.viewer') })