|  |  | 
 |  |  | methodDraw.addExtension("imagelib", function() { | 
 |  |  |  | 
 |  |  |   var uiStrings = methodDraw.uiStrings; | 
 |  |  |    | 
 |  |  |  | 
 |  |  |   $.extend(uiStrings, { | 
 |  |  |     imagelib: { | 
 |  |  |       select_lib: 'Select an image library', | 
 |  |  | 
 |  |  |       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' | 
 |  |  |     } | 
 |  |  |   ]; | 
 |  |  |    | 
 |  |  |  | 
 |  |  |   var xlinkns = "http://www.w3.org/1999/xlink"; | 
 |  |  |  | 
 |  |  |   function closeBrowser() { | 
 |  |  |     $('#imgbrowse_holder').hide(); | 
 |  |  |   } | 
 |  |  |    | 
 |  |  |  | 
 |  |  |   function importImage(url) { | 
 |  |  |     var newImage = svgCanvas.addSvgElementFromJson({ | 
 |  |  |       "element": "image", | 
 |  |  | 
 |  |  |   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); | 
 |  |  | 
 |  |  |       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 { | 
 |  |  | 
 |  |  |           preview.append(entry); | 
 |  |  |           cur_meta.entry = entry; | 
 |  |  |         } | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         return; | 
 |  |  |       case '<': | 
 |  |  |         svg_str = true; | 
 |  |  | 
 |  |  |       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(); | 
 |  |  | 
 |  |  | //        }); | 
 |  |  |         return; | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     switch (mode) { | 
 |  |  |       case 's': | 
 |  |  |         // Import one | 
 |  |  | 
 |  |  |           } else { | 
 |  |  |             var entry = '<img src="' + response + '">'; | 
 |  |  |           } | 
 |  |  |          | 
 |  |  |  | 
 |  |  |           if(cur_meta) { | 
 |  |  |             preview.children().each(function() { | 
 |  |  |               if($(this).data('id') == id) { | 
 |  |  | 
 |  |  |         break; | 
 |  |  |     } | 
 |  |  |   }, true); | 
 |  |  |    | 
 |  |  |  | 
 |  |  |   var preview, submit; | 
 |  |  |  | 
 |  |  |   function toggleMulti(show) { | 
 |  |  |    | 
 |  |  |  | 
 |  |  |     $('#lib_framewrap, #imglib_opts').css({right: (show ? 200 : 10)}); | 
 |  |  |     if(!preview) { | 
 |  |  |       preview = $('<div id=imglib_preview>').css({ | 
 |  |  | 
 |  |  |         background: '#fff', | 
 |  |  |         overflow: 'auto' | 
 |  |  |       }).insertAfter('#lib_framewrap'); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       submit = $('<button disabled>Import selected</button>').appendTo('#imgbrowse').click(function() { | 
 |  |  |         $.each(multi_arr, function(i) { | 
 |  |  |           var type = this[0]; | 
 |  |  | 
 |  |  |       }); | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     preview.toggle(show); | 
 |  |  |     submit.toggle(show); | 
 |  |  |   } | 
 |  |  | 
 |  |  |  | 
 |  |  |       var lib_opts = $('<ul id=imglib_opts>').appendTo(browser); | 
 |  |  |       var frame = $('<iframe/>').prependTo(browser).hide().wrap('<div id=lib_framewrap>'); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       var header = $('<h1>').prependTo(browser).text(all_libs).css({ | 
 |  |  |         position: 'absolute', | 
 |  |  |         top: 0, | 
 |  |  |         left: 0, | 
 |  |  |         width: '100%' | 
 |  |  |       }); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       var cancel = $('<button>' + uiStrings.common.cancel + '</button>').appendTo(browser).click(function() { | 
 |  |  |         $('#imgbrowse_holder').hide(); | 
 |  |  |       }).css({ | 
 |  |  | 
 |  |  |         top: 5, | 
 |  |  |         right: -10 | 
 |  |  |       }); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       var leftBlock = $('<span>').css({position:'absolute',top:5,left:10}).appendTo(browser); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       var back = $('<button hidden>' + uiStrings.imagelib.show_list + '</button>').appendTo(leftBlock).click(function() { | 
 |  |  |         frame.attr('src', 'about:blank').hide(); | 
 |  |  |         lib_opts.show(); | 
 |  |  | 
 |  |  |       }).css({ | 
 |  |  |         'margin-right': 5 | 
 |  |  |       }).hide(); | 
 |  |  |        | 
 |  |  |       var type = $('<select><option value=s>' +  | 
 |  |  |  | 
 |  |  |       var type = $('<select><option value=s>' + | 
 |  |  |       uiStrings.imagelib.import_single + '</option><option value=m>' + | 
 |  |  |       uiStrings.imagelib.import_multi + '</option><option value=o>' + | 
 |  |  |       uiStrings.imagelib.open + '</option></select>').appendTo(leftBlock).change(function() { | 
 |  |  | 
 |  |  |           case 'o': | 
 |  |  |             toggleMulti(false); | 
 |  |  |             break; | 
 |  |  |            | 
 |  |  |  | 
 |  |  |           case 'm': | 
 |  |  |             // Import multiple | 
 |  |  |             toggleMulti(true); | 
 |  |  | 
 |  |  |       }).css({ | 
 |  |  |         'margin-top': 10 | 
 |  |  |       }); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       cancel.prepend($.getSvgIcon('cancel', true)); | 
 |  |  |       back.prepend($.getSvgIcon('tool_imagelib', true)); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       $.each(img_libs, function(i, opts) { | 
 |  |  |         $('<li>').appendTo(lib_opts).text(opts.name).click(function() { | 
 |  |  |           frame.attr('src', opts.url).show(); | 
 |  |  | 
 |  |  |           back.show(); | 
 |  |  |         }).append('<span>' + opts.description + '</span>'); | 
 |  |  |       }); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |     } else { | 
 |  |  |       $('#imgbrowse_holder').show(); | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |    | 
 |  |  |  | 
 |  |  |   return { | 
 |  |  |     buttons: [{ | 
 |  |  |       id: "tool_imagelib", | 
 |  |  | 
 |  |  |       } | 
 |  |  |     }], | 
 |  |  |     callback: function() { | 
 |  |  |      | 
 |  |  |  | 
 |  |  |       $('<style>').text('\ | 
 |  |  |         #imgbrowse_holder {\ | 
 |  |  |           position: absolute;\ |