diff --git a/spec/parser/javascript_spec.js b/spec/parser/javascript_spec.js index 1225c2d..d776e6b 100644 --- a/spec/parser/javascript_spec.js +++ b/spec/parser/javascript_spec.js @@ -60,32 +60,22 @@ describe('parser/javascript.js', function() { this.parser.parsed = jasmine.createSpyObj('parsed', ['render']); this.parser.parsed.render.and.returnValue(this.renderPromise.promise); - this.svgStyles = 'example styles'; + this.svgBase = ''; this.svgContainer = document.createElement('div'); }); it('creates the SVG element', function() { var svg; - this.parser.render(this.svgContainer, this.svgStyles); + this.parser.render(this.svgContainer, this.svgBase); svg = this.svgContainer.querySelector('svg'); expect(svg.getAttribute('xmlns')).toEqual('http://www.w3.org/2000/svg'); expect(svg.getAttribute('version')).toEqual('1.1'); }); - it('sets the styles on the SVG element', function() { - var styles; - - this.parser.render(this.svgContainer, this.svgStyles); - - styles = this.svgContainer.querySelector('svg defs style'); - expect(styles.getAttribute('type')).toEqual('text/css'); - expect(styles.firstChild.nodeValue).toEqual(this.svgStyles); - }); - it('render the parsed expression', function() { - this.parser.render(this.svgContainer, this.svgStyles); + this.parser.render(this.svgContainer, this.svgBase); expect(this.parser.parsed.render).toHaveBeenCalled(); }); @@ -100,7 +90,7 @@ describe('parser/javascript.js', function() { height: 24 }); - this.parser.render(this.svgContainer, this.svgStyles); + this.parser.render(this.svgContainer, this.svgBase); this.renderPromise.resolve(this.result); setTimeout(done, 10); diff --git a/spec/regexper_spec.js b/spec/regexper_spec.js index d19133f..e51085e 100644 --- a/spec/regexper_spec.js +++ b/spec/regexper_spec.js @@ -16,7 +16,7 @@ describe('regexper.js', function() { '
', '
', '
', - '
example styles
' + '' ].join(''); this.regexper = new Regexper(this.root); @@ -429,7 +429,7 @@ describe('regexper.js', function() { }); it('renders the expression', function() { - expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svgContainer, this.regexper.svgStyles); + expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svgContainer, this.regexper.svgBase); }); }); diff --git a/src/js/main.js b/src/js/main.js index 8fe1f98..532bfea 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -32,7 +32,7 @@ import _ from 'lodash'; setTimeout(() => { parser.parse(element.getAttribute('data-expr')) - .invoke('render', svg, document.querySelector('#svg-styles').innerHTML) + .invoke('render', svg, document.querySelector('#svg-base').innerHTML) .finally(() => { element.className = _.without(element.className.split(' '), 'loading').join(' '); element.removeChild(element.querySelector('.spinner')); diff --git a/src/js/parser/javascript.js b/src/js/parser/javascript.js index 1ac8652..856c159 100644 --- a/src/js/parser/javascript.js +++ b/src/js/parser/javascript.js @@ -32,23 +32,13 @@ export default class Parser { return deferred.promise; } - render(containerElement, styles) { - var svg, - style = document.createElement('style'); + render(containerElement, svgBase) { + var svg; - containerElement.innerHTML = ''; + containerElement.innerHTML += svgBase; svg = Snap(containerElement.querySelector('svg')); - style.setAttribute('type', 'text/css'); - if (style.styleSheet) { - style.styleSheet.cssText = styles; - } else { - style.appendChild(document.createTextNode(styles)); - } - - svg.select('defs').append(style); - return this.parsed.render(svg.group()) .then(result => { var box = result.getBBox(); diff --git a/src/js/regexper.js b/src/js/regexper.js index 9c5dd7e..9b4cdc6 100644 --- a/src/js/regexper.js +++ b/src/js/regexper.js @@ -14,7 +14,7 @@ export default class Regexper { this.download = root.querySelector('a[data-glyph="data-transfer-download"]'); this.percentage = root.querySelector('#progress div'); this.svgContainer = root.querySelector('#regexp-render'); - this.svgStyles = this.root.querySelector('#svg-styles').innerHTML; + this.svgBase = this.root.querySelector('#svg-base').innerHTML; this.gaq = (typeof window._gaq === 'undefined') ? [] : window._gaq; } @@ -158,7 +158,7 @@ export default class Regexper { throw message; }) - .invoke('render', this.svgContainer, this.svgStyles) + .invoke('render', this.svgContainer, this.svgBase) .then(() => { this.state = 'has-results'; this.updateLinks(); diff --git a/template.html b/template.html index 3c1b12e..1c14f09 100644 --- a/template.html +++ b/template.html @@ -24,7 +24,13 @@ - +