ext-imagelib.js 11 KB

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