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-75d572ba1dddmaster
parent
4d817ef39c
commit
1f0e966d1c
|
@ -44,6 +44,9 @@ svgEditor.addExtension("imagelib", function() {
|
||||||
svgCanvas.setImageURL(url);
|
svgCanvas.setImageURL(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var mode = 's';
|
||||||
|
var multi_arr = [];
|
||||||
|
|
||||||
window.addEventListener("message", function(evt) {
|
window.addEventListener("message", function(evt) {
|
||||||
// Receive postMessage data
|
// Receive postMessage data
|
||||||
var response = evt.data;
|
var response = evt.data;
|
||||||
|
@ -55,19 +58,22 @@ svgEditor.addExtension("imagelib", function() {
|
||||||
|
|
||||||
var char1 = response.charAt(0);
|
var char1 = response.charAt(0);
|
||||||
|
|
||||||
|
var svg_str;
|
||||||
|
var img_str;
|
||||||
|
|
||||||
switch (char1) {
|
switch (char1) {
|
||||||
case '<':
|
case '<':
|
||||||
svgCanvas.importSvgString(response);
|
svg_str = true;
|
||||||
break;
|
break;
|
||||||
case 'd':
|
case 'd':
|
||||||
if(response.indexOf('data:image/svg+xml') === 0) {
|
if(response.indexOf('data:image/svg+xml') === 0) {
|
||||||
var pre = 'data:image/svg+xml;base64,';
|
var pre = 'data:image/svg+xml;base64,';
|
||||||
var src = response.substring(pre.length);
|
var src = response.substring(pre.length);
|
||||||
svgCanvas.importSvgString(svgCanvas.Utils.decode64(src));
|
response = svgCanvas.Utils.decode64(src);
|
||||||
|
svg_str = true;
|
||||||
break;
|
break;
|
||||||
} else if(response.indexOf('data:image/') === 0) {
|
} else if(response.indexOf('data:image/') === 0) {
|
||||||
|
img_str = true;
|
||||||
importImage(response);
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
// Else fall through
|
// Else fall through
|
||||||
|
@ -82,10 +88,82 @@ svgEditor.addExtension("imagelib", function() {
|
||||||
return;
|
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);
|
}, 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() {
|
function showBrowser() {
|
||||||
var browser = $('#imgbrowse');
|
var browser = $('#imgbrowse');
|
||||||
|
@ -97,9 +175,14 @@ svgEditor.addExtension("imagelib", function() {
|
||||||
var all_libs = 'Select an image library';
|
var all_libs = 'Select an image library';
|
||||||
|
|
||||||
var lib_opts = $('<ul id=imglib_opts>').appendTo(browser);
|
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() {
|
var cancel = $('<button>Cancel</button>').appendTo(browser).click(function() {
|
||||||
$('#imgbrowse_holder').hide();
|
$('#imgbrowse_holder').hide();
|
||||||
|
@ -109,14 +192,30 @@ svgEditor.addExtension("imagelib", function() {
|
||||||
right: -10
|
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();
|
frame.attr('src', 'about:blank').hide();
|
||||||
lib_opts.show();
|
lib_opts.show();
|
||||||
header.text(all_libs);
|
header.text(all_libs);
|
||||||
}).css({
|
}).css({
|
||||||
position: 'absolute',
|
'margin-right': 5
|
||||||
top: 5,
|
});
|
||||||
left: 10
|
|
||||||
|
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));
|
cancel.prepend($.getSvgIcon('cancel', true));
|
||||||
|
@ -175,14 +274,13 @@ svgEditor.addExtension("imagelib", function() {
|
||||||
margin: .4em;\
|
margin: .4em;\
|
||||||
text-align: center;\
|
text-align: center;\
|
||||||
}\
|
}\
|
||||||
#imgbrowse > div,\
|
#lib_framewrap,\
|
||||||
#imgbrowse > ul {\
|
#imgbrowse > ul {\
|
||||||
position: absolute;\
|
position: absolute;\
|
||||||
top: 45px;\
|
top: 45px;\
|
||||||
left: 10px;\
|
left: 10px;\
|
||||||
right: 10px;\
|
right: 10px;\
|
||||||
bottom: 10px;\
|
bottom: 10px;\
|
||||||
border: 1px solid #666;\
|
|
||||||
background: white;\
|
background: white;\
|
||||||
margin: 0;\
|
margin: 0;\
|
||||||
padding: 0;\
|
padding: 0;\
|
||||||
|
@ -190,6 +288,12 @@ svgEditor.addExtension("imagelib", function() {
|
||||||
#imgbrowse > ul {\
|
#imgbrowse > ul {\
|
||||||
overflow: auto;\
|
overflow: auto;\
|
||||||
}\
|
}\
|
||||||
|
#imgbrowse > div {\
|
||||||
|
border: 1px solid #666;\
|
||||||
|
}\
|
||||||
|
#imglib_preview > div {\
|
||||||
|
padding: 5px;\
|
||||||
|
}\
|
||||||
#imgbrowse li {\
|
#imgbrowse li {\
|
||||||
list-style: none;\
|
list-style: none;\
|
||||||
padding: .5em;\
|
padding: .5em;\
|
||||||
|
|
Loading…
Reference in New Issue