embedapi.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Embed API</title>
  6. <script src="jquery.js"></script>
  7. <script src="embedapi.js"></script>
  8. <script>
  9. /*globals $, EmbeddedSVGEdit*/
  10. var initEmbed;
  11. $(function () {'use strict';
  12. var svgCanvas = null;
  13. initEmbed = function () {
  14. var doc, mainButton,
  15. frame = document.getElementById('svgedit');
  16. svgCanvas = new EmbeddedSVGEdit(frame);
  17. // Hide main button, as we will be controlling new, load, save, etc. from the host document
  18. doc = frame.contentDocument || frame.contentWindow.document;
  19. mainButton = doc.getElementById('main_button');
  20. mainButton.style.display = 'none';
  21. };
  22. function handleSvgData(data, error) {
  23. if (error) {
  24. alert('error ' + error);
  25. } else {
  26. alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
  27. }
  28. }
  29. function loadSvg() {
  30. 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>';
  31. svgCanvas.setSvgString(svgexample);
  32. }
  33. function saveSvg() {
  34. svgCanvas.getSvgString()(handleSvgData);
  35. }
  36. // Add event handlers
  37. $('#load').click(loadSvg);
  38. $('#save').click(saveSvg);
  39. $('body').append(
  40. $('<iframe src="svg-editor.html?extensions=ext-xdomain-messaging.js' +
  41. window.location.href.replace(/\?(.*)$/, '&$1') + // Append arguments to this file onto the iframe
  42. '" width="900px" height="600px" id="svgedit" onload="initEmbed();"></iframe>'
  43. )
  44. );
  45. });
  46. </script>
  47. </head>
  48. <body>
  49. <button id="load">Load example</button>
  50. <button id="save">Save data</button>
  51. <br/>
  52. </body>
  53. </html>