Skip to content

Commit

Permalink
Added innerSVG polyfill to solve issues in internet explorer which do…
Browse files Browse the repository at this point in the history
…es not allow the use of innerHTML property. This created issues when creating labels and for creation of the rendering when saving as image.
  • Loading branch information
santilland committed May 2, 2016
1 parent e28d124 commit 7f82a60
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 4 deletions.
1 change: 1 addition & 0 deletions app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@


<!-- build:js scripts/av.min.js -->
<script src="scripts/vendor/innersvg.js"></script>
<script src="scripts/vendor/jquery.sumoselect.js"></script>
<script src="scripts/vendor/rgbcolor.js"></script>
<script src="scripts/vendor/canvg.js"></script>
Expand Down
3 changes: 2 additions & 1 deletion app/scripts/scatter.js
Original file line number Diff line number Diff line change
Expand Up @@ -1362,8 +1362,9 @@ scatterPlot.prototype.parallelsPlot = function parallelsPlot(){
}else{
newkey = d;
}
return newkey;
return newkey;
});



// In order to work with the canvas renderer styles need to be applied directlo
Expand Down
97 changes: 97 additions & 0 deletions app/scripts/vendor/innersvg.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/**
* innerHTML property for SVGElement
* Copyright(c) 2010, Jeff Schiller
*
* Licensed under the Apache License, Version 2
*
* Works in a SVG document in Chrome 6+, Safari 5+, Firefox 4+ and IE9+.
* Works in a HTML5 document in Chrome 7+, Firefox 4+ and IE9+.
* Does not work in Opera since it doesn't support the SVGElement interface yet.
*
* I haven't decided on the best name for this property - thus the duplication.
*/

(function() {
var serializeXML = function(node, output) {
var nodeType = node.nodeType;
if (nodeType == 3) { // TEXT nodes.
// Replace special XML characters with their entities.
output.push(node.textContent.replace(/&/, '&amp;').replace(/</, '&lt;').replace('>', '&gt;'));
} else if (nodeType == 1) { // ELEMENT nodes.
// Serialize Element nodes.
output.push('<', node.tagName);
if (node.hasAttributes()) {
var attrMap = node.attributes;
for (var i = 0, len = attrMap.length; i < len; ++i) {
var attrNode = attrMap.item(i);
output.push(' ', attrNode.name, '=\'', attrNode.value, '\'');
}
}
if (node.hasChildNodes()) {
output.push('>');
var childNodes = node.childNodes;
for (var i = 0, len = childNodes.length; i < len; ++i) {
serializeXML(childNodes.item(i), output);
}
output.push('</', node.tagName, '>');
} else {
output.push('/>');
}
} else if (nodeType == 8) {
// TODO(codedread): Replace special characters with XML entities?
output.push('<!--', node.nodeValue, '-->');
} else {
// TODO: Handle CDATA nodes.
// TODO: Handle ENTITY nodes.
// TODO: Handle DOCUMENT nodes.
throw 'Error serializing XML. Unhandled node of type: ' + nodeType;
}
}
// The innerHTML DOM property for SVGElement.
Object.defineProperty(SVGElement.prototype, 'innerHTML', {
get: function() {
var output = [];
var childNode = this.firstChild;
while (childNode) {
serializeXML(childNode, output);
childNode = childNode.nextSibling;
}
return output.join('');
},
set: function(markupText) {
// Wipe out the current contents of the element.
while (this.firstChild) {
this.removeChild(this.firstChild);
}

try {
// Parse the markup into valid nodes.
var dXML = new DOMParser();
dXML.async = false;
// Wrap the markup into a SVG node to ensure parsing works.
sXML = '<svg xmlns=\'http://www.w3.org/2000/svg\'>' + markupText + '</svg>';
var svgDocElement = dXML.parseFromString(sXML, 'text/xml').documentElement;

// Now take each node, import it and append to this element.
var childNode = svgDocElement.firstChild;
while(childNode) {
this.appendChild(this.ownerDocument.importNode(childNode, true));
childNode = childNode.nextSibling;
}
} catch(e) {
throw new Error('Error parsing XML string');
};
}
});

// The innerSVG DOM property for SVGElement.
Object.defineProperty(SVGElement.prototype, 'innerSVG', {
get: function() {
return this.innerHTML;
},
set: function(markupText) {
this.innerHTML = markupText;
}
});

})();
1 change: 1 addition & 0 deletions lib/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@


<!-- build:js scripts/av.min.js -->
<script src="scripts/vendor/innersvg.js"></script>
<script src="scripts/vendor/jquery.sumoselect.js"></script>
<script src="scripts/vendor/rgbcolor.js"></script>
<script src="scripts/vendor/canvg.js"></script>
Expand Down
6 changes: 3 additions & 3 deletions lib/scripts/av.min.js

Large diffs are not rendered by default.

0 comments on commit 7f82a60

Please sign in to comment.