Skip to content

Instantly share code, notes, and snippets.

@erikhazzard
Created December 23, 2011 19:01
Show Gist options
  • Save erikhazzard/1515079 to your computer and use it in GitHub Desktop.
Save erikhazzard/1515079 to your computer and use it in GitHub Desktop.
(function() {
var codeeditor, dataeditor, init, svg_foot, svg_head, svgeditor, update;
svg_head = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.0//EN\" \"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\">\n<svg version=\"1.0\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n<g id=\"demoholder\">";
svg_foot = "</g>\n</svg>";
svgeditor = ace.edit("js_div0");
dataeditor = ace.edit("js_div1");
codeeditor = ace.edit("js_div2");
init = function() {
var JavascriptMode;
console.log("sup");
JavascriptMode = require("ace/mode/javascript").Mode;
console.log("svgeditor", svgeditor);
svgeditor.setTheme("ace/theme/twilight");
svgeditor.getSession().setMode(new JavascriptMode());
svgeditor.getSession().setValue(svg_code);
dataeditor.setTheme("ace/theme/twilight");
dataeditor.getSession().setMode(new JavascriptMode());
dataeditor.getSession().setValue(data_code);
codeeditor.setTheme("ace/theme/twilight");
codeeditor.getSession().setMode(new JavascriptMode());
codeeditor.getSession().setValue(demo_code);
$('#js_div0').show();
$('#js_div1').show();
$('#js_div2').show();
return d3.select('#update').on("click", function() {
d3.select("#demo").remove();
d3.select("#demosvg").append("svg:g").attr("id", "demo");
return update();
});
};
update = function() {
var code, data, demosvg, html, inner, node, range, svg, svgnode;
svg = svg_head + svgeditor.getSession().getValue() + svg_foot;
console.log("svg", svg);
range = document.createRange();
range.selectNode(document.body);
node = range.createContextualFragment(svg);
svgnode = d3.select(node);
console.log("svgnode", svgnode.select("#demoholder").node());
demosvg = document.importNode(svgnode.select("#demoholder").node(), true);
console.log("NODE", node);
console.log("demosvg", demosvg);
d3.select("#demo").node().appendChild(demosvg);
data = dataeditor.getSession().getValue();
console.log("data");
eval(data);
code = codeeditor.getSession().getValue();
console.log("code");
eval(code);
console.log("THE DEMO NODE");
console.log(d3.select("#demo").node());
html = $('<div>').append($('#demoholder').clone()).remove().html();
console.log("HTML", html);
return inner = html.slice(19, -4);
};
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment