| 1 | /*
|
|---|
| 2 | * ext-imagelib.js
|
|---|
| 3 | *
|
|---|
| 4 | * Licensed under the Apache License, Version 2
|
|---|
| 5 | *
|
|---|
| 6 | * Copyright(c) 2010 Alexis Deveria
|
|---|
| 7 | *
|
|---|
| 8 | */
|
|---|
| 9 |
|
|---|
| 10 | methodDraw.addExtension("imagelib", function() {
|
|---|
| 11 |
|
|---|
| 12 | var uiStrings = methodDraw.uiStrings;
|
|---|
| 13 |
|
|---|
| 14 | $.extend(uiStrings, {
|
|---|
| 15 | imagelib: {
|
|---|
| 16 | select_lib: 'Select an image library',
|
|---|
| 17 | show_list: 'Show library list',
|
|---|
| 18 | import_single: 'Import single',
|
|---|
| 19 | import_multi: 'Import multiple',
|
|---|
| 20 | open: 'Open as new document'
|
|---|
| 21 | }
|
|---|
| 22 | });
|
|---|
| 23 |
|
|---|
| 24 | var img_libs = [{
|
|---|
| 25 | name: 'Demo library (local)',
|
|---|
| 26 | url: 'extensions/imagelib/index.html',
|
|---|
| 27 | description: 'Demonstration library for SVG-edit on this server'
|
|---|
| 28 | },
|
|---|
| 29 | {
|
|---|
| 30 | name: 'IAN Symbol Libraries',
|
|---|
| 31 | url: 'http://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php',
|
|---|
| 32 | description: 'Free library of illustrations'
|
|---|
| 33 | }
|
|---|
| 34 | ];
|
|---|
| 35 |
|
|---|
| 36 | var xlinkns = "http://www.w3.org/1999/xlink";
|
|---|
| 37 |
|
|---|
| 38 | function closeBrowser() {
|
|---|
| 39 | $('#imgbrowse_holder').hide();
|
|---|
| 40 | }
|
|---|
| 41 |
|
|---|
| 42 | function importImage(url) {
|
|---|
| 43 | var newImage = svgCanvas.addSvgElementFromJson({
|
|---|
| 44 | "element": "image",
|
|---|
| 45 | "attr": {
|
|---|
| 46 | "x": 0,
|
|---|
| 47 | "y": 0,
|
|---|
| 48 | "width": 0,
|
|---|
| 49 | "height": 0,
|
|---|
| 50 | "id": svgCanvas.getNextId(),
|
|---|
| 51 | "style": "pointer-events:inherit"
|
|---|
| 52 | }
|
|---|
| 53 | });
|
|---|
| 54 | svgCanvas.clearSelection();
|
|---|
| 55 | svgCanvas.addToSelection([newImage]);
|
|---|
| 56 | svgCanvas.setImageURL(url);
|
|---|
| 57 | }
|
|---|
| 58 |
|
|---|
| 59 | var mode = 's';
|
|---|
| 60 | var multi_arr = [];
|
|---|
| 61 | var cur_meta;
|
|---|
| 62 | var tranfer_stopped = false;
|
|---|
| 63 | var pending = {};
|
|---|
| 64 |
|
|---|
| 65 | window.addEventListener("message", function(evt) {
|
|---|
| 66 | // Receive postMessage data
|
|---|
| 67 | var response = evt.data;
|
|---|
| 68 |
|
|---|
| 69 | if(!response) {
|
|---|
| 70 | // Do nothing
|
|---|
| 71 | return;
|
|---|
| 72 | }
|
|---|
| 73 |
|
|---|
| 74 | var char1 = response.charAt(0);
|
|---|
| 75 |
|
|---|
| 76 | var svg_str;
|
|---|
| 77 | var img_str;
|
|---|
| 78 |
|
|---|
| 79 | if(char1 != "{" && tranfer_stopped) {
|
|---|
| 80 | tranfer_stopped = false;
|
|---|
| 81 | return;
|
|---|
| 82 | }
|
|---|
| 83 |
|
|---|
| 84 | if(char1 == '|') {
|
|---|
| 85 | var secondpos = response.indexOf('|', 1);
|
|---|
| 86 | var id = response.substr(1, secondpos-1);
|
|---|
| 87 | response = response.substr(secondpos+1);
|
|---|
| 88 | char1 = response.charAt(0);
|
|---|
| 89 |
|
|---|
| 90 | }
|
|---|
| 91 |
|
|---|
| 92 |
|
|---|
| 93 | // Hide possible transfer dialog box
|
|---|
| 94 | $('#dialog_box').hide();
|
|---|
| 95 |
|
|---|
| 96 | switch (char1) {
|
|---|
| 97 | case '{':
|
|---|
| 98 | // Metadata
|
|---|
| 99 | tranfer_stopped = false;
|
|---|
| 100 | var cur_meta = JSON.parse(response);
|
|---|
| 101 |
|
|---|
| 102 | pending[cur_meta.id] = cur_meta;
|
|---|
| 103 |
|
|---|
| 104 | var name = (cur_meta.name || 'file');
|
|---|
| 105 |
|
|---|
| 106 | var message = uiStrings.notification.retrieving.replace('%s', name);
|
|---|
| 107 |
|
|---|
| 108 | if(mode != 'm') {
|
|---|
| 109 | $.process_cancel(message, function() {
|
|---|
| 110 | tranfer_stopped = true;
|
|---|
| 111 | // Should a message be sent back to the frame?
|
|---|
| 112 |
|
|---|
| 113 | $('#dialog_box').hide();
|
|---|
| 114 | });
|
|---|
| 115 | } else {
|
|---|
| 116 | var entry = $('<div>' + message + '</div>').data('id', cur_meta.id);
|
|---|
| 117 | preview.append(entry);
|
|---|
| 118 | cur_meta.entry = entry;
|
|---|
| 119 | }
|
|---|
| 120 |
|
|---|
| 121 | return;
|
|---|
| 122 | case '<':
|
|---|
| 123 | svg_str = true;
|
|---|
| 124 | break;
|
|---|
| 125 | case 'd':
|
|---|
| 126 | if(response.indexOf('data:image/svg+xml') === 0) {
|
|---|
| 127 | var pre = 'data:image/svg+xml;base64,';
|
|---|
| 128 | var src = response.substring(pre.length);
|
|---|
| 129 | response = svgCanvas.Utils.decode64(src);
|
|---|
| 130 | svg_str = true;
|
|---|
| 131 | break;
|
|---|
| 132 | } else if(response.indexOf('data:image/') === 0) {
|
|---|
| 133 | img_str = true;
|
|---|
| 134 | break;
|
|---|
| 135 | }
|
|---|
| 136 | // Else fall through
|
|---|
| 137 | default:
|
|---|
| 138 | // TODO: See if there's a way to base64 encode the binary data stream
|
|---|
| 139 | // var str = 'data:;base64,' + svgCanvas.Utils.encode64(response, true);
|
|---|
| 140 |
|
|---|
| 141 | // Assume it's raw image data
|
|---|
| 142 | // importImage(str);
|
|---|
| 143 |
|
|---|
| 144 | // Don't give warning as postMessage may have been used by something else
|
|---|
| 145 | if(mode !== 'm') {
|
|---|
| 146 | closeBrowser();
|
|---|
| 147 | } else {
|
|---|
| 148 | pending[id].entry.remove();
|
|---|
| 149 | }
|
|---|
| 150 | // $.alert('Unexpected data was returned: ' + response, function() {
|
|---|
| 151 | // if(mode !== 'm') {
|
|---|
| 152 | // closeBrowser();
|
|---|
| 153 | // } else {
|
|---|
| 154 | // pending[id].entry.remove();
|
|---|
| 155 | // }
|
|---|
| 156 | // });
|
|---|
| 157 | return;
|
|---|
| 158 | }
|
|---|
| 159 |
|
|---|
| 160 | switch (mode) {
|
|---|
| 161 | case 's':
|
|---|
| 162 | // Import one
|
|---|
| 163 | if(svg_str) {
|
|---|
| 164 | svgCanvas.importSvgString(response);
|
|---|
| 165 | } else if(img_str) {
|
|---|
| 166 | importImage(response);
|
|---|
| 167 | }
|
|---|
| 168 | closeBrowser();
|
|---|
| 169 | break;
|
|---|
| 170 | case 'm':
|
|---|
| 171 | // Import multiple
|
|---|
| 172 | multi_arr.push([(svg_str ? 'svg' : 'img'), response]);
|
|---|
| 173 | var cur_meta = pending[id];
|
|---|
| 174 | if(svg_str) {
|
|---|
| 175 | if(cur_meta && cur_meta.name) {
|
|---|
| 176 | var title = cur_meta.name;
|
|---|
| 177 | } else {
|
|---|
| 178 | // Try to find a title
|
|---|
| 179 | var xml = new DOMParser().parseFromString(response, 'text/xml').documentElement;
|
|---|
| 180 | var title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
|
|---|
| 181 | }
|
|---|
| 182 | if(cur_meta) {
|
|---|
| 183 | preview.children().each(function() {
|
|---|
| 184 | if($(this).data('id') == id) {
|
|---|
| 185 | if(cur_meta.preview_url) {
|
|---|
| 186 | $(this).html('<img src="' + cur_meta.preview_url + '">' + title);
|
|---|
| 187 | } else {
|
|---|
| 188 | $(this).text(title);
|
|---|
| 189 | }
|
|---|
| 190 | submit.removeAttr('disabled');
|
|---|
| 191 | }
|
|---|
| 192 | });
|
|---|
| 193 | } else {
|
|---|
| 194 | preview.append('<div>'+title+'</div>');
|
|---|
| 195 | submit.removeAttr('disabled');
|
|---|
| 196 | }
|
|---|
| 197 | } else {
|
|---|
| 198 | if(cur_meta && cur_meta.preview_url) {
|
|---|
| 199 | var title = cur_meta.name || '';
|
|---|
| 200 | }
|
|---|
| 201 | if(cur_meta && cur_meta.preview_url) {
|
|---|
| 202 | var entry = '<img src="' + cur_meta.preview_url + '">' + title;
|
|---|
| 203 | } else {
|
|---|
| 204 | var entry = '<img src="' + response + '">';
|
|---|
| 205 | }
|
|---|
| 206 |
|
|---|
| 207 | if(cur_meta) {
|
|---|
| 208 | preview.children().each(function() {
|
|---|
| 209 | if($(this).data('id') == id) {
|
|---|
| 210 | $(this).html(entry);
|
|---|
| 211 | submit.removeAttr('disabled');
|
|---|
| 212 | }
|
|---|
| 213 | });
|
|---|
| 214 | } else {
|
|---|
| 215 | preview.append($('<div>').append(entry));
|
|---|
| 216 | submit.removeAttr('disabled');
|
|---|
| 217 | }
|
|---|
| 218 |
|
|---|
| 219 | }
|
|---|
| 220 | break;
|
|---|
| 221 | case 'o':
|
|---|
| 222 | // Open
|
|---|
| 223 | if(!svg_str) break;
|
|---|
| 224 | methodDraw.openPrep(function(ok) {
|
|---|
| 225 | if(!ok) return;
|
|---|
| 226 | svgCanvas.clear();
|
|---|
| 227 | svgCanvas.setSvgString(response);
|
|---|
| 228 | // updateCanvas();
|
|---|
| 229 | });
|
|---|
| 230 | closeBrowser();
|
|---|
| 231 | break;
|
|---|
| 232 | }
|
|---|
| 233 | }, true);
|
|---|
| 234 |
|
|---|
| 235 | var preview, submit;
|
|---|
| 236 |
|
|---|
| 237 | function toggleMulti(show) {
|
|---|
| 238 |
|
|---|
| 239 | $('#lib_framewrap, #imglib_opts').css({right: (show ? 200 : 10)});
|
|---|
| 240 | if(!preview) {
|
|---|
| 241 | preview = $('<div id=imglib_preview>').css({
|
|---|
| 242 | position: 'absolute',
|
|---|
| 243 | top: 45,
|
|---|
| 244 | right: 10,
|
|---|
| 245 | width: 180,
|
|---|
| 246 | bottom: 45,
|
|---|
| 247 | background: '#fff',
|
|---|
| 248 | overflow: 'auto'
|
|---|
| 249 | }).insertAfter('#lib_framewrap');
|
|---|
| 250 |
|
|---|
| 251 | submit = $('<button disabled>Import selected</button>').appendTo('#imgbrowse').click(function() {
|
|---|
| 252 | $.each(multi_arr, function(i) {
|
|---|
| 253 | var type = this[0];
|
|---|
| 254 | var data = this[1];
|
|---|
| 255 | if(type == 'svg') {
|
|---|
| 256 | svgCanvas.importSvgString(data);
|
|---|
| 257 | } else {
|
|---|
| 258 | importImage(data);
|
|---|
| 259 | }
|
|---|
| 260 | svgCanvas.moveSelectedElements(i*20, i*20, false);
|
|---|
| 261 | });
|
|---|
| 262 | preview.empty();
|
|---|
| 263 | multi_arr = [];
|
|---|
| 264 | $('#imgbrowse_holder').hide();
|
|---|
| 265 | }).css({
|
|---|
| 266 | position: 'absolute',
|
|---|
| 267 | bottom: 10,
|
|---|
| 268 | right: -10
|
|---|
| 269 | });
|
|---|
| 270 |
|
|---|
| 271 | }
|
|---|
| 272 |
|
|---|
| 273 | preview.toggle(show);
|
|---|
| 274 | submit.toggle(show);
|
|---|
| 275 | }
|
|---|
| 276 |
|
|---|
| 277 | function showBrowser() {
|
|---|
| 278 |
|
|---|
| 279 | var browser = $('#imgbrowse');
|
|---|
| 280 | if(!browser.length) {
|
|---|
| 281 | $('<div id=imgbrowse_holder><div id=imgbrowse class=toolbar_button>\
|
|---|
| 282 | </div></div>').insertAfter('#svg_docprops');
|
|---|
| 283 | browser = $('#imgbrowse');
|
|---|
| 284 |
|
|---|
| 285 | var all_libs = uiStrings.imagelib.select_lib;
|
|---|
| 286 |
|
|---|
| 287 | var lib_opts = $('<ul id=imglib_opts>').appendTo(browser);
|
|---|
| 288 | var frame = $('<iframe/>').prependTo(browser).hide().wrap('<div id=lib_framewrap>');
|
|---|
| 289 |
|
|---|
| 290 | var header = $('<h1>').prependTo(browser).text(all_libs).css({
|
|---|
| 291 | position: 'absolute',
|
|---|
| 292 | top: 0,
|
|---|
| 293 | left: 0,
|
|---|
| 294 | width: '100%'
|
|---|
| 295 | });
|
|---|
| 296 |
|
|---|
| 297 | var cancel = $('<button>' + uiStrings.common.cancel + '</button>').appendTo(browser).click(function() {
|
|---|
| 298 | $('#imgbrowse_holder').hide();
|
|---|
| 299 | }).css({
|
|---|
| 300 | position: 'absolute',
|
|---|
| 301 | top: 5,
|
|---|
| 302 | right: -10
|
|---|
| 303 | });
|
|---|
| 304 |
|
|---|
| 305 | var leftBlock = $('<span>').css({position:'absolute',top:5,left:10}).appendTo(browser);
|
|---|
| 306 |
|
|---|
| 307 | var back = $('<button hidden>' + uiStrings.imagelib.show_list + '</button>').appendTo(leftBlock).click(function() {
|
|---|
| 308 | frame.attr('src', 'about:blank').hide();
|
|---|
| 309 | lib_opts.show();
|
|---|
| 310 | header.text(all_libs);
|
|---|
| 311 | back.hide();
|
|---|
| 312 | }).css({
|
|---|
| 313 | 'margin-right': 5
|
|---|
| 314 | }).hide();
|
|---|
| 315 |
|
|---|
| 316 | var type = $('<select><option value=s>' +
|
|---|
| 317 | uiStrings.imagelib.import_single + '</option><option value=m>' +
|
|---|
| 318 | uiStrings.imagelib.import_multi + '</option><option value=o>' +
|
|---|
| 319 | uiStrings.imagelib.open + '</option></select>').appendTo(leftBlock).change(function() {
|
|---|
| 320 | mode = $(this).val();
|
|---|
| 321 | switch (mode) {
|
|---|
| 322 | case 's':
|
|---|
| 323 | case 'o':
|
|---|
| 324 | toggleMulti(false);
|
|---|
| 325 | break;
|
|---|
| 326 |
|
|---|
| 327 | case 'm':
|
|---|
| 328 | // Import multiple
|
|---|
| 329 | toggleMulti(true);
|
|---|
| 330 | }
|
|---|
| 331 | }).css({
|
|---|
| 332 | 'margin-top': 10
|
|---|
| 333 | });
|
|---|
| 334 |
|
|---|
| 335 | cancel.prepend($.getSvgIcon('cancel', true));
|
|---|
| 336 | back.prepend($.getSvgIcon('tool_imagelib', true));
|
|---|
| 337 |
|
|---|
| 338 | $.each(img_libs, function(i, opts) {
|
|---|
| 339 | $('<li>').appendTo(lib_opts).text(opts.name).click(function() {
|
|---|
| 340 | frame.attr('src', opts.url).show();
|
|---|
| 341 | header.text(opts.name);
|
|---|
| 342 | lib_opts.hide();
|
|---|
| 343 | back.show();
|
|---|
| 344 | }).append('<span>' + opts.description + '</span>');
|
|---|
| 345 | });
|
|---|
| 346 |
|
|---|
| 347 | } else {
|
|---|
| 348 | $('#imgbrowse_holder').show();
|
|---|
| 349 | }
|
|---|
| 350 | }
|
|---|
| 351 |
|
|---|
| 352 | return {
|
|---|
| 353 | buttons: [{
|
|---|
| 354 | id: "tool_imagelib",
|
|---|
| 355 | type: "menu", // _flyout
|
|---|
| 356 | position: 4,
|
|---|
| 357 | panel: "file_menu",
|
|---|
| 358 | title: "Image library",
|
|---|
| 359 | events: {
|
|---|
| 360 | "mouseup": showBrowser
|
|---|
| 361 | }
|
|---|
| 362 | }],
|
|---|
| 363 | callback: function() {
|
|---|
| 364 |
|
|---|
| 365 | $('<style>').text('\
|
|---|
| 366 | #imgbrowse_holder {\
|
|---|
| 367 | position: absolute;\
|
|---|
| 368 | top: 0;\
|
|---|
| 369 | left: 0;\
|
|---|
| 370 | width: 100%;\
|
|---|
| 371 | height: 100%;\
|
|---|
| 372 | background-color: rgba(0, 0, 0, .5);\
|
|---|
| 373 | z-index: 5;\
|
|---|
| 374 | }\
|
|---|
| 375 | \
|
|---|
| 376 | #imgbrowse {\
|
|---|
| 377 | position: absolute;\
|
|---|
| 378 | top: 25px;\
|
|---|
| 379 | left: 25px;\
|
|---|
| 380 | right: 25px;\
|
|---|
| 381 | bottom: 25px;\
|
|---|
| 382 | min-width: 300px;\
|
|---|
| 383 | min-height: 200px;\
|
|---|
| 384 | background: #B0B0B0;\
|
|---|
| 385 | border: 1px outset #777;\
|
|---|
| 386 | }\
|
|---|
| 387 | #imgbrowse h1 {\
|
|---|
| 388 | font-size: 20px;\
|
|---|
| 389 | margin: .4em;\
|
|---|
| 390 | text-align: center;\
|
|---|
| 391 | }\
|
|---|
| 392 | #lib_framewrap,\
|
|---|
| 393 | #imgbrowse > ul {\
|
|---|
| 394 | position: absolute;\
|
|---|
| 395 | top: 45px;\
|
|---|
| 396 | left: 10px;\
|
|---|
| 397 | right: 10px;\
|
|---|
| 398 | bottom: 10px;\
|
|---|
| 399 | background: white;\
|
|---|
| 400 | margin: 0;\
|
|---|
| 401 | padding: 0;\
|
|---|
| 402 | }\
|
|---|
| 403 | #imgbrowse > ul {\
|
|---|
| 404 | overflow: auto;\
|
|---|
| 405 | }\
|
|---|
| 406 | #imgbrowse > div {\
|
|---|
| 407 | border: 1px solid #666;\
|
|---|
| 408 | }\
|
|---|
| 409 | #imglib_preview > div {\
|
|---|
| 410 | padding: 5px;\
|
|---|
| 411 | font-size: 12px;\
|
|---|
| 412 | }\
|
|---|
| 413 | #imglib_preview img {\
|
|---|
| 414 | display: block;\
|
|---|
| 415 | margin: 0 auto;\
|
|---|
| 416 | max-height: 100px;\
|
|---|
| 417 | }\
|
|---|
| 418 | #imgbrowse li {\
|
|---|
| 419 | list-style: none;\
|
|---|
| 420 | padding: .5em;\
|
|---|
| 421 | background: #E8E8E8;\
|
|---|
| 422 | border-bottom: 1px solid #B0B0B0;\
|
|---|
| 423 | line-height: 1.2em;\
|
|---|
| 424 | font-style: sans-serif;\
|
|---|
| 425 | }\
|
|---|
| 426 | #imgbrowse li > span {\
|
|---|
| 427 | color: #666;\
|
|---|
| 428 | font-size: 15px;\
|
|---|
| 429 | display: block;\
|
|---|
| 430 | }\
|
|---|
| 431 | #imgbrowse li:hover {\
|
|---|
| 432 | background: #FFC;\
|
|---|
| 433 | cursor: pointer;\
|
|---|
| 434 | }\
|
|---|
| 435 | #imgbrowse iframe {\
|
|---|
| 436 | width: 100%;\
|
|---|
| 437 | height: 100%;\
|
|---|
| 438 | border: 0;\
|
|---|
| 439 | }\
|
|---|
| 440 | ').appendTo('head');
|
|---|
| 441 | }
|
|---|
| 442 | }
|
|---|
| 443 | });
|
|---|
| 444 |
|
|---|
