From 1f0e966d1ca54b1da97801f9059fde3bf2d946aa Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Thu, 16 Sep 2010 20:10:12 +0000
Subject: [PATCH] Added method of importing multiple images in one go or
 opening a library image (dropdown list in image library)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1724 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/extensions/ext-imagelib.js | 134 ++++++++++++++++++++++++++----
 1 file changed, 119 insertions(+), 15 deletions(-)

diff --git a/editor/extensions/ext-imagelib.js b/editor/extensions/ext-imagelib.js
index 49df1729..429e32b2 100644
--- a/editor/extensions/ext-imagelib.js
+++ b/editor/extensions/ext-imagelib.js
@@ -44,6 +44,9 @@ svgEditor.addExtension("imagelib", function() {
 		svgCanvas.setImageURL(url);
 	}
 
+	var mode = 's';
+	var multi_arr = [];
+
 	 window.addEventListener("message", function(evt) {
 		// Receive postMessage data
 		var response = evt.data;
@@ -55,19 +58,22 @@ svgEditor.addExtension("imagelib", function() {
 		
 		var char1 = response.charAt(0);
 		
+		var svg_str;
+		var img_str;
+		
 		switch (char1) {
 			case '<':
-				svgCanvas.importSvgString(response);
+				svg_str = true;
 				break;
 			case 'd':
 				if(response.indexOf('data:image/svg+xml') === 0) {
 					var pre = 'data:image/svg+xml;base64,';
 					var src = response.substring(pre.length);
-					svgCanvas.importSvgString(svgCanvas.Utils.decode64(src));
+					response = svgCanvas.Utils.decode64(src);
+					svg_str = true;
 					break;
 				} else if(response.indexOf('data:image/') === 0) {
-					
-					importImage(response);
+					img_str = true;
 					break;
 				}
 				// Else fall through
@@ -82,10 +88,82 @@ svgEditor.addExtension("imagelib", function() {
 				return;
 		}
 		
-		closeBrowser();
-		
+		switch (mode) {
+			case 's':
+				// Import one
+				if(svg_str) {
+					svgCanvas.importSvgString(response);
+				} else if(img_str) {
+					importImage(response);
+				}
+				closeBrowser();
+				break;
+			case 'm':
+				// Import multiple
+				multi_arr.push([(svg_str ? 'svg' : 'img'), response]);
+				if(svg_str) {
+					var xml = new DOMParser().parseFromString(response, 'text/xml').documentElement;
+					var title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
+					preview.append('<div>'+title+'</div>');
+				} else {
+					preview.append('<div>Raster image #' + response.length + '</div>');
+				}
+				break;
+			case 'o':
+				// Open
+				if(!svg_str) break;
+				svgEditor.openPrep(function(ok) {
+					if(!ok) return;
+					svgCanvas.clear();
+					svgCanvas.setSvgString(response);
+					// updateCanvas();
+				});
+				closeBrowser();
+				break;
+		}
 	}, true);
 	
+	var preview;
+
+	function toggleMulti(show) {
+		var submit;
+		
+		$('#lib_framewrap, #imglib_opts').css({right: (show ? 200 : 10)});
+		if(!preview) {
+			preview = $('<div id=imglib_preview>').css({
+				position: 'absolute',
+				top: 45,
+				right: 10,
+				width: 180,
+				bottom: 45,
+				background: '#fff',
+				overflow: 'auto'
+			}).insertAfter('#lib_framewrap');
+			
+			submit = $('<button>Import selected</button>').appendTo('#imgbrowse').click(function() {
+				$.each(multi_arr, function(i) {
+					var type = this[0];
+					var data = this[1];
+					if(type == 'svg') {
+						svgCanvas.importSvgString(data);
+						svgCanvas.moveSelectedElements(i*20, i*20, false);
+					} else {
+						importImage(data);
+					}
+				});
+				preview.empty();
+				multi_arr = [];
+				$('#imgbrowse_holder').hide();
+			}).css({
+				position: 'absolute',
+				bottom: 10,
+				right: -10
+			});
+
+		}
+		
+		preview.toggle(show);
+	}
 
 	function showBrowser() {
 		var browser = $('#imgbrowse');
@@ -97,9 +175,14 @@ svgEditor.addExtension("imagelib", function() {
 			var all_libs = 'Select an image library';
 
 			var lib_opts = $('<ul id=imglib_opts>').appendTo(browser);
-			var frame = $('<iframe/>').prependTo(browser).hide().wrap('<div>');
+			var frame = $('<iframe/>').prependTo(browser).hide().wrap('<div id=lib_framewrap>');
 			
-			var header = $('<h1>').prependTo(browser).text(all_libs);
+			var header = $('<h1>').prependTo(browser).text(all_libs).css({
+				position: 'absolute',
+				top: 0,
+				left: 0,
+				width: '100%'
+			});
 			
 			var cancel = $('<button>Cancel</button>').appendTo(browser).click(function() {
 				$('#imgbrowse_holder').hide();
@@ -108,15 +191,31 @@ svgEditor.addExtension("imagelib", function() {
 				top: 5,
 				right: -10
 			});
-
-			var back = $('<button>Show libraries</button>').appendTo(browser).click(function() {
+			
+			var leftBlock = $('<span>').css({position:'absolute',top:5,left:10}).appendTo(browser);
+			
+			var back = $('<button>Show libraries</button>').appendTo(leftBlock).click(function() {
 				frame.attr('src', 'about:blank').hide();
 				lib_opts.show();
 				header.text(all_libs);
 			}).css({
-				position: 'absolute',
-				top: 5,
-				left: 10
+				'margin-right': 5
+			});
+			
+			var type = $('<select><option value=s>Import single</option><option value=m>Import multiple</option><option value=o>Open for editing</option></select>').appendTo(leftBlock).change(function() {
+				mode = $(this).val();
+				switch (mode) {
+					case 's':
+					case 'o':
+						toggleMulti(false);
+						break;
+					
+					case 'm':
+						// Import multiple
+						toggleMulti(true);
+				}
+			}).css({
+				'margin-top': 10
 			});
 			
 			cancel.prepend($.getSvgIcon('cancel', true));
@@ -175,14 +274,13 @@ svgEditor.addExtension("imagelib", function() {
 					margin: .4em;\
 					text-align: center;\
 				}\
-				#imgbrowse > div,\
+				#lib_framewrap,\
 				#imgbrowse > ul {\
 					position: absolute;\
 					top: 45px;\
 					left: 10px;\
 					right: 10px;\
 					bottom: 10px;\
-					border: 1px solid #666;\
 					background: white;\
 					margin: 0;\
 					padding: 0;\
@@ -190,6 +288,12 @@ svgEditor.addExtension("imagelib", function() {
 				#imgbrowse > ul {\
 					overflow: auto;\
 				}\
+				#imgbrowse > div {\
+					border: 1px solid #666;\
+				}\
+				#imglib_preview > div {\
+					padding: 5px;\
+				}\
 				#imgbrowse li {\
 					list-style: none;\
 					padding: .5em;\