/* * ext-imagelib.js * * Licensed under the MIT License * * Copyright(c) 2010 Alexis Deveria * */ svgEditor.addExtension("imagelib", function() { var uiStrings = svgEditor.uiStrings; $.extend(uiStrings, { imagelib: { select_lib: 'Select an image library', show_list: 'Show library list', import_single: 'Import single', import_multi: 'Import multiple', open: 'Open as new document' } }); var img_libs = [{ name: 'Demo library (local)', url: 'extensions/imagelib/index.html', description: 'Demonstration library for SVG-edit on this server' }, { name: 'IAN Symbol Libraries', url: 'http://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php', description: 'Free library of illustrations' } ]; function closeBrowser() { $('#imgbrowse_holder').hide(); } function importImage(url) { var newImage = svgCanvas.addSvgElementFromJson({ "element": "image", "attr": { "x": 0, "y": 0, "width": 0, "height": 0, "id": svgCanvas.getNextId(), "style": "pointer-events:inherit" } }); svgCanvas.clearSelection(); svgCanvas.addToSelection([newImage]); svgCanvas.setImageURL(url); } var mode = 's'; var multi_arr = []; var cur_meta; var tranfer_stopped = false; var pending = {}; window.addEventListener("message", function(evt) { // Receive postMessage data var response = evt.data; if(!response) { // Do nothing return; } var char1 = response.charAt(0); var svg_str; var img_str; if(char1 != "{" && tranfer_stopped) { tranfer_stopped = false; return; } if(char1 == '|') { var secondpos = response.indexOf('|', 1); var id = response.substr(1, secondpos-1); response = response.substr(secondpos+1); char1 = response.charAt(0); } // Hide possible transfer dialog box $('#dialog_box').hide(); switch (char1) { case '{': // Metadata tranfer_stopped = false; var cur_meta = JSON.parse(response); pending[cur_meta.id] = cur_meta; var name = (cur_meta.name || 'file'); var message = uiStrings.notification.retrieving.replace('%s', name); if(mode != 'm') { $.process_cancel(message, function() { tranfer_stopped = true; // Should a message be sent back to the frame? $('#dialog_box').hide(); }); } else { var entry = $('
' + message + '
').data('id', cur_meta.id); preview.append(entry); cur_meta.entry = entry; } return; case '<': 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); response = svgCanvas.Utils.decode64(src); svg_str = true; break; } else if(response.indexOf('data:image/') === 0) { img_str = true; break; } // Else fall through default: // TODO: See if there's a way to base64 encode the binary data stream // var str = 'data:;base64,' + svgCanvas.Utils.encode64(response, true); // Assume it's raw image data // importImage(str); // Don't give warning as postMessage may have been used by something else if(mode !== 'm') { closeBrowser(); } else { pending[id].entry.remove(); } // $.alert('Unexpected data was returned: ' + response, function() { // if(mode !== 'm') { // closeBrowser(); // } else { // pending[id].entry.remove(); // } // }); return; } 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]); var cur_meta = pending[id]; if(svg_str) { if(cur_meta && cur_meta.name) { var title = cur_meta.name; } else { // Try to find a title var xml = new DOMParser().parseFromString(response, 'text/xml').documentElement; var title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')'; } if(cur_meta) { preview.children().each(function() { if($(this).data('id') == id) { if(cur_meta.preview_url) { $(this).html('' + title); } else { $(this).text(title); } submit.removeAttr('disabled'); } }); } else { preview.append('
'+title+'
'); submit.removeAttr('disabled'); } } else { if(cur_meta && cur_meta.preview_url) { var title = cur_meta.name || ''; } if(cur_meta && cur_meta.preview_url) { var entry = '' + title; } else { var entry = ''; } if(cur_meta) { preview.children().each(function() { if($(this).data('id') == id) { $(this).html(entry); submit.removeAttr('disabled'); } }); } else { preview.append($('
').append(entry)); submit.removeAttr('disabled'); } } 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, submit; function toggleMulti(show) { $('#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') .on("click touchend", function() { $.each(multi_arr, function(i) { var type = this[0]; var data = this[1]; if(type == 'svg') { svgCanvas.importSvgString(data); } else { importImage(data); } svgCanvas.moveSelectedElements(i*20, i*20, false); }); preview.empty(); multi_arr = []; $('#imgbrowse_holder').hide(); }).css({ position: 'absolute', bottom: 10, right: -10 }); } preview.toggle(show); submit.toggle(show); } function showBrowser() { var browser = $('#imgbrowse'); if(!browser.length) { $('
\
').insertAfter('#svg_docprops'); browser = $('#imgbrowse'); var all_libs = uiStrings.imagelib.select_lib; var lib_opts = $('