ext-server_opensave.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /*
  2. * ext-server_opensave.js
  3. *
  4. * Licensed under the Apache License, Version 2
  5. *
  6. * Copyright(c) 2010 Alexis Deveria
  7. *
  8. */
  9. svgEditor.addExtension("server_opensave", {
  10. callback: function() {
  11. var save_svg_action = 'extensions/filesave.php';
  12. var save_png_action = 'extensions/filesave.php';
  13. // Create upload target (hidden iframe)
  14. var target = $('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
  15. svgEditor.setCustomHandlers({
  16. save: function(win, data) {
  17. var svg = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n" + data; // Chamilo add encoding="UTF-8"
  18. var title = svgCanvas.getDocumentTitle();
  19. var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_');//Chamilo replace by below
  20. var filename =title;//Chamilo TODO:check if the filter through filesave.php is enough
  21. var form = $('<form>').attr({
  22. method: 'post',
  23. action: save_svg_action,
  24. target: 'output_frame'
  25. }) .append('<input type="hidden" name="output_svg" value="' + encodeURI(svg) + '">')
  26. .append('<input type="hidden" name="filename" value="' + filename + '">')
  27. .appendTo('body')
  28. .submit().remove();
  29. },
  30. pngsave: function(win, data) {
  31. var issues = data.issues;
  32. if(!$('#export_canvas').length) {
  33. $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
  34. }
  35. var c = $('#export_canvas')[0];
  36. c.width = svgCanvas.contentW;
  37. c.height = svgCanvas.contentH;
  38. canvg(c, data.svg, {renderCallback: function() {
  39. var datauri = c.toDataURL('image/png');
  40. var uiStrings = svgEditor.uiStrings;
  41. var note = '';
  42. // Check if there's issues
  43. if(issues.length) {
  44. var pre = "\n \u2022 ";
  45. note += ("\n\n" + pre + issues.join(pre));
  46. }
  47. if(note.length) {
  48. alert(note);
  49. }
  50. var title = svgCanvas.getDocumentTitle();
  51. var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_');
  52. var form = $('<form>').attr({
  53. method: 'post',
  54. action: save_png_action,
  55. target: 'output_frame'
  56. }) .append('<input type="hidden" name="output_png" value="' + datauri + '">')
  57. .append('<input type="hidden" name="filename" value="' + filename + '">')
  58. .appendTo('body')
  59. .submit().remove();
  60. }});
  61. }
  62. });
  63. // Do nothing if client support is found
  64. if(window.FileReader) return;
  65. var cancelled = false;
  66. // Change these to appropriate script file
  67. var open_svg_action = 'extensions/fileopen.php?type=load_svg';
  68. var import_svg_action = 'extensions/fileopen.php?type=import_svg';
  69. var import_img_action = 'extensions/fileopen.php?type=import_img';
  70. // Set up function for PHP uploader to use
  71. svgEditor.processFile = function(str64, type) {
  72. if(cancelled) {
  73. cancelled = false;
  74. return;
  75. }
  76. $('#dialog_box').hide();
  77. if(type != 'import_img') {
  78. var xmlstr = svgCanvas.Utils.decode64(str64);
  79. }
  80. switch ( type ) {
  81. case 'load_svg':
  82. svgCanvas.clear();
  83. svgCanvas.setSvgString(xmlstr);
  84. svgEditor.updateCanvas();
  85. break;
  86. case 'import_svg':
  87. svgCanvas.importSvgString(xmlstr);
  88. svgEditor.updateCanvas();
  89. break;
  90. case 'import_img':
  91. svgCanvas.setGoodImage(str64);
  92. break;
  93. }
  94. }
  95. // Create upload form
  96. var open_svg_form = $('<form>');
  97. open_svg_form.attr({
  98. enctype: 'multipart/form-data',
  99. method: 'post',
  100. action: open_svg_action,
  101. target: 'output_frame'
  102. });
  103. // Create import form
  104. var import_svg_form = open_svg_form.clone().attr('action', import_svg_action);
  105. // Create image form
  106. var import_img_form = open_svg_form.clone().attr('action', import_img_action);
  107. // It appears necessory to rebuild this input every time a file is
  108. // selected so the same file can be picked and the change event can fire.
  109. function rebuildInput(form) {
  110. form.empty();
  111. var inp = $('<input type="file" name="svg_file">').appendTo(form);
  112. function submit() {
  113. // This submits the form, which returns the file data using svgEditor.uploadSVG
  114. form.submit();
  115. rebuildInput(form);
  116. $.process_cancel("Uploading...", function() {
  117. cancelled = true;
  118. $('#dialog_box').hide();
  119. });
  120. }
  121. if(form[0] == open_svg_form[0]) {
  122. inp.change(function() {
  123. // This takes care of the "are you sure" dialog box
  124. svgEditor.openPrep(function(ok) {
  125. if(!ok) {
  126. rebuildInput(form);
  127. return;
  128. }
  129. submit();
  130. });
  131. });
  132. } else {
  133. inp.change(function() {
  134. // This submits the form, which returns the file data using svgEditor.uploadSVG
  135. submit();
  136. });
  137. }
  138. }
  139. // Create the input elements
  140. rebuildInput(open_svg_form);
  141. rebuildInput(import_svg_form);
  142. rebuildInput(import_img_form);
  143. // Add forms to buttons
  144. $("#tool_open").show().prepend(open_svg_form);
  145. $("#tool_import").show().prepend(import_svg_form);
  146. $("#tool_image").prepend(import_img_form);
  147. }
  148. });