/*globals $, svgEditor, svgedit, svgCanvas, DOMParser*/ /*jslint vars: true, eqeq: true, es5: true, todo: true */ /* * ext-imagelib.js * * Licensed under the MIT License * * Copyright(c) 2010 Alexis Deveria * */ svgEditor.addExtension("imagelib", function() {'use strict'; 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: svgEditor.curConfig.extPath + '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' }, { name: 'Openclipart', url: 'http://openclipart.org/svgedit', description: 'Share and Use Images. Over 50,000 Public Domain SVG Images and Growing.' } ]; 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 tranfer_stopped = false; var pending = {}; var preview, submit; window.addEventListener("message", function(evt) { // Receive postMessage data var response = evt.data; if (!response || typeof response !== "string") { // Todo: Should namespace postMessage API for this extension and filter out here // Do nothing return; } try { // This block can be removed if embedAPI moves away from a string to an object (if IE9 support not needed) var res = JSON.parse(response); if (res.namespace) { // Part of embedAPI communications return; } } catch (e) {} var char1 = response.charAt(0); var id; var svg_str; var img_str; if (char1 != "{" && tranfer_stopped) { tranfer_stopped = false; return; } if (char1 == '|') { var secondpos = response.indexOf('|', 1); id = response.substr(1, secondpos-1); response = response.substr(secondpos+1); char1 = response.charAt(0); } // Hide possible transfer dialog box $('#dialog_box').hide(); var entry, cur_meta; switch (char1) { case '{': // Metadata tranfer_stopped = false; 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 { 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 = svgedit.utilities.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,' + svgedit.utilities.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 title; cur_meta = pending[id]; if (svg_str) { if (cur_meta && cur_meta.name) { title = cur_meta.name; } else { // Try to find a title var xml = new DOMParser().parseFromString(response, 'text/xml').documentElement; 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) { title = cur_meta.name || ''; } if (cur_meta && cur_meta.preview_url) { entry = '' + title; } else { 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); 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 = $('