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('
'+title+'
');
+ } else {
+ preview.append('Raster image #' + response.length + '
');
+ }
+ 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 = $('').css({
+ position: 'absolute',
+ top: 45,
+ right: 10,
+ width: 180,
+ bottom: 45,
+ background: '#fff',
+ overflow: 'auto'
+ }).insertAfter('#lib_framewrap');
+
+ submit = $('
').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 = $('
').appendTo(browser);
- var frame = $('').prependTo(browser).hide().wrap('');
+ var frame = $('
').prependTo(browser).hide().wrap('
');
- var header = $('
').prependTo(browser).text(all_libs);
+ var header = $('').prependTo(browser).text(all_libs).css({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%'
+ });
var cancel = $('').appendTo(browser).click(function() {
$('#imgbrowse_holder').hide();
@@ -108,15 +191,31 @@ svgEditor.addExtension("imagelib", function() {
top: 5,
right: -10
});
-
- var back = $('').appendTo(browser).click(function() {
+
+ var leftBlock = $('').css({position:'absolute',top:5,left:10}).appendTo(browser);
+
+ var back = $('').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 = $('').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;\