2013-10-13 23:59:32 +00:00
<!DOCTYPE html>
< html xmlns = "http://www.w3.org/1999/xhtml" >
2010-09-20 18:55:10 +00:00
< head >
2013-10-13 23:59:32 +00:00
< meta charset = "utf-8" / >
2013-02-19 16:30:56 +00:00
< title > Embed API< / title >
2013-10-13 23:59:32 +00:00
< script src = "jquery.js" > < / script >
< script src = "embedapi.js" > < / script >
< script >
/*globals $, EmbeddedSVGEdit*/
$(function () {'use strict';
var svgCanvas = null;
2010-09-20 18:55:10 +00:00
2013-02-19 16:30:56 +00:00
function init_embed() {
2013-10-13 23:59:32 +00:00
var doc, mainButton,
frame = document.getElementById('svgedit');
svgCanvas = new EmbeddedSVGEdit(frame);
// Hide main button, as we will be controlling new, load, save, etc. from the host document
doc = frame.contentDocument || frame.contentWindow.document;
mainButton = doc.getElementById('main_button');
2013-02-19 16:30:56 +00:00
mainButton.style.display = 'none';
}
function handleSvgData(data, error) {
if (error) {
2010-09-20 18:55:10 +00:00
alert('error ' + error);
2013-02-19 16:30:56 +00:00
} else {
2010-09-20 18:55:10 +00:00
alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
2013-02-19 16:30:56 +00:00
}
2010-09-20 18:55:10 +00:00
}
2013-02-19 16:30:56 +00:00
function loadSvg() {
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 > ';
svgCanvas.setSvgString(svgexample);
}
2010-09-20 18:55:10 +00:00
2013-02-19 16:30:56 +00:00
function saveSvg() {
svgCanvas.getSvgString()(handleSvgData);
}
2013-10-13 23:59:32 +00:00
// Add event handlers
$('#load').click(loadSvg);
$('#save').click(saveSvg);
// Export globals
window.init_embed = init_embed;
});
2013-02-19 16:30:56 +00:00
< / script >
2013-10-13 23:59:32 +00:00
< / head >
< body >
< button id = "load" > Load example< / button >
< button id = "save" > Save data< / button >
2013-02-19 16:30:56 +00:00
< br / >
2013-10-13 23:59:32 +00:00
< iframe src = "svg-editor.html" width = "900px" height = "600px" id = "svgedit" onload = "init_embed();" > < / iframe >
2010-09-20 18:55:10 +00:00
< / body >
< / html >
