embedapi-dom.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /*globals $, EmbeddedSVGEdit*/
  2. /*jslint vars: true */
  3. var initEmbed;
  4. // Todo: Get rid of frame.contentWindow dependencies so can be more easily adjusted to work cross-domain
  5. $(function () {'use strict';
  6. var svgCanvas = null;
  7. var frame;
  8. initEmbed = function () {
  9. var doc, mainButton;
  10. svgCanvas = new EmbeddedSVGEdit(frame);
  11. // Hide main button, as we will be controlling new, load, save, etc. from the host document
  12. doc = frame.contentDocument || frame.contentWindow.document;
  13. mainButton = doc.getElementById('main_button');
  14. mainButton.style.display = 'none';
  15. };
  16. function handleSvgData(data, error) {
  17. if (error) {
  18. alert('error ' + error);
  19. } else {
  20. alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
  21. }
  22. }
  23. function loadSvg() {
  24. var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/></g></svg>';
  25. svgCanvas.setSvgString(svgexample);
  26. }
  27. function saveSvg() {
  28. svgCanvas.getSvgString()(handleSvgData);
  29. }
  30. function exportPNG() {
  31. var str = frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
  32. var exportWindow = window.open(
  33. 'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
  34. 'svg-edit-exportWindow'
  35. );
  36. svgCanvas.rasterExport('PNG', null, exportWindow.name);
  37. }
  38. function exportPDF() {
  39. var str = frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
  40. /**
  41. // If you want to handle the PDF blob yourself, do as follows
  42. svgCanvas.bind('exportedPDF', function (win, data) {
  43. alert(data.dataurlstring);
  44. });
  45. svgCanvas.exportPDF(); // Accepts two args: optionalWindowName supplied back to bound exportPDF handler and optionalOutputType (defaults to dataurlstring)
  46. return;
  47. */
  48. var exportWindow = window.open(
  49. 'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
  50. 'svg-edit-exportWindow'
  51. );
  52. svgCanvas.exportPDF(exportWindow.name);
  53. }
  54. // Add event handlers
  55. $('#load').click(loadSvg);
  56. $('#save').click(saveSvg);
  57. $('#exportPNG').click(exportPNG);
  58. $('#exportPDF').click(exportPDF);
  59. $('body').append(
  60. $('<iframe src="svg-editor.html?extensions=ext-xdomain-messaging.js' +
  61. window.location.href.replace(/\?(.*)$/, '&$1') + // Append arguments to this file onto the iframe
  62. '" width="900px" height="600px" id="svgedit" onload="initEmbed();"></iframe>'
  63. )
  64. );
  65. frame = document.getElementById('svgedit');
  66. });