Embedding a template for SVG element instead of just styles
This commit is contained in:
parent
2007fd9e01
commit
b292a764ff
@ -60,32 +60,22 @@ describe('parser/javascript.js', function() {
|
|||||||
this.parser.parsed = jasmine.createSpyObj('parsed', ['render']);
|
this.parser.parsed = jasmine.createSpyObj('parsed', ['render']);
|
||||||
this.parser.parsed.render.and.returnValue(this.renderPromise.promise);
|
this.parser.parsed.render.and.returnValue(this.renderPromise.promise);
|
||||||
|
|
||||||
this.svgStyles = 'example styles';
|
this.svgBase = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svt>';
|
||||||
this.svgContainer = document.createElement('div');
|
this.svgContainer = document.createElement('div');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('creates the SVG element', function() {
|
it('creates the SVG element', function() {
|
||||||
var svg;
|
var svg;
|
||||||
|
|
||||||
this.parser.render(this.svgContainer, this.svgStyles);
|
this.parser.render(this.svgContainer, this.svgBase);
|
||||||
|
|
||||||
svg = this.svgContainer.querySelector('svg');
|
svg = this.svgContainer.querySelector('svg');
|
||||||
expect(svg.getAttribute('xmlns')).toEqual('http://www.w3.org/2000/svg');
|
expect(svg.getAttribute('xmlns')).toEqual('http://www.w3.org/2000/svg');
|
||||||
expect(svg.getAttribute('version')).toEqual('1.1');
|
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() {
|
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();
|
expect(this.parser.parsed.render).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -100,7 +90,7 @@ describe('parser/javascript.js', function() {
|
|||||||
height: 24
|
height: 24
|
||||||
});
|
});
|
||||||
|
|
||||||
this.parser.render(this.svgContainer, this.svgStyles);
|
this.parser.render(this.svgContainer, this.svgBase);
|
||||||
this.renderPromise.resolve(this.result);
|
this.renderPromise.resolve(this.result);
|
||||||
|
|
||||||
setTimeout(done, 10);
|
setTimeout(done, 10);
|
||||||
|
@ -16,7 +16,7 @@ describe('regexper.js', function() {
|
|||||||
'<div><a href="#" data-glyph="data-transfer-download"></a></div>',
|
'<div><a href="#" data-glyph="data-transfer-download"></a></div>',
|
||||||
'<div id="progress"><div></div></div>',
|
'<div id="progress"><div></div></div>',
|
||||||
'<div id="regexp-render"></div>',
|
'<div id="regexp-render"></div>',
|
||||||
'<div id="svg-styles">example styles</div>'
|
'<script type="text/html" id="svg-base"><svg></svg></script>'
|
||||||
].join('');
|
].join('');
|
||||||
|
|
||||||
this.regexper = new Regexper(this.root);
|
this.regexper = new Regexper(this.root);
|
||||||
@ -429,7 +429,7 @@ describe('regexper.js', function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('renders the expression', 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);
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -32,7 +32,7 @@ import _ from 'lodash';
|
|||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
parser.parse(element.getAttribute('data-expr'))
|
parser.parse(element.getAttribute('data-expr'))
|
||||||
.invoke('render', svg, document.querySelector('#svg-styles').innerHTML)
|
.invoke('render', svg, document.querySelector('#svg-base').innerHTML)
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
element.className = _.without(element.className.split(' '), 'loading').join(' ');
|
element.className = _.without(element.className.split(' '), 'loading').join(' ');
|
||||||
element.removeChild(element.querySelector('.spinner'));
|
element.removeChild(element.querySelector('.spinner'));
|
||||||
|
@ -32,23 +32,13 @@ export default class Parser {
|
|||||||
return deferred.promise;
|
return deferred.promise;
|
||||||
}
|
}
|
||||||
|
|
||||||
render(containerElement, styles) {
|
render(containerElement, svgBase) {
|
||||||
var svg,
|
var svg;
|
||||||
style = document.createElement('style');
|
|
||||||
|
|
||||||
containerElement.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>';
|
containerElement.innerHTML += svgBase;
|
||||||
|
|
||||||
svg = Snap(containerElement.querySelector('svg'));
|
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())
|
return this.parsed.render(svg.group())
|
||||||
.then(result => {
|
.then(result => {
|
||||||
var box = result.getBBox();
|
var box = result.getBBox();
|
||||||
|
@ -14,7 +14,7 @@ export default class Regexper {
|
|||||||
this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
|
this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
|
||||||
this.percentage = root.querySelector('#progress div');
|
this.percentage = root.querySelector('#progress div');
|
||||||
this.svgContainer = root.querySelector('#regexp-render');
|
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;
|
this.gaq = (typeof window._gaq === 'undefined') ? [] : window._gaq;
|
||||||
}
|
}
|
||||||
@ -158,7 +158,7 @@ export default class Regexper {
|
|||||||
|
|
||||||
throw message;
|
throw message;
|
||||||
})
|
})
|
||||||
.invoke('render', this.svgContainer, this.svgStyles)
|
.invoke('render', this.svgContainer, this.svgBase)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.state = 'has-results';
|
this.state = 'has-results';
|
||||||
this.updateLinks();
|
this.updateLinks();
|
||||||
|
@ -24,7 +24,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
<!--[if gt IE 8]> -->
|
<!--[if gt IE 8]> -->
|
||||||
<script type="text/css" id="svg-styles">${svgStyles}</script>
|
<script type="text/html" id="svg-base">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||||
|
<defs>
|
||||||
|
<style type="text/css">${svgStyles}</style>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</script>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
|
Loading…
Reference in New Issue
Block a user