Beginning to merge rendering code in main.js and regexper.js

This commit is contained in:
Jeff Avallone 2014-12-29 18:37:21 -05:00
parent 8dda135960
commit d6e81a2932
4 changed files with 34 additions and 26 deletions

View File

@ -14,7 +14,6 @@ describe('regexper.js', function() {
'<ul id="warnings"></ul>', '<ul id="warnings"></ul>',
'<div><a href="#" data-glyph="link-intact"></a></div>', '<div><a href="#" data-glyph="link-intact"></a></div>',
'<div><a href="#" data-glyph="data-transfer-download"></a></div>', '<div><a href="#" data-glyph="data-transfer-download"></a></div>',
'<div class="progress"><div></div></div>',
'<div id="regexp-render"></div>', '<div id="regexp-render"></div>',
'<script type="text/html" id="svg-base"><svg></svg></script>' '<script type="text/html" id="svg-base"><svg></svg></script>'
].join(''); ].join('');
@ -281,6 +280,12 @@ describe('regexper.js', function() {
beforeEach(function() { beforeEach(function() {
spyOn(this.regexper, 'buildBlobURL'); spyOn(this.regexper, 'buildBlobURL');
this.regexper.svgContainer.innerHTML = '<div class="svg">example image</div>';
});
it('builds the blob URL from the SVG image', function() {
this.regexper.updateLinks();
expect(this.regexper.buildBlobURL).toHaveBeenCalledWith('example image');
}); });
describe('when blob URLs are supported', function() { describe('when blob URLs are supported', function() {
@ -426,7 +431,7 @@ describe('regexper.js', function() {
it('renders the expression', function(done) { it('renders the expression', function(done) {
this.regexper.renderRegexp('example expression') this.regexper.renderRegexp('example expression')
.then(() => { .then(() => {
expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svgContainer, this.regexper.svgBase); expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svgContainer.querySelector('.svg'), this.regexper.svgBase);
}, fail) }, fail)
.finally(done) .finally(done)
.done(); .done();

View File

@ -11,12 +11,6 @@
</div> </div>
<div class="results"> <div class="results">
<div id="loading">
<div class="progress">
<div style="width: 0%;"></div>
</div>
</div>
<div id="error"></div> <div id="error"></div>
<ul id="warnings"></ul> <ul id="warnings"></ul>

View File

@ -12,7 +12,6 @@ export default class Regexper {
this.warnings = root.querySelector('#warnings'); this.warnings = root.querySelector('#warnings');
this.permalink = root.querySelector('a[data-glyph="link-intact"]'); this.permalink = root.querySelector('a[data-glyph="link-intact"]');
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.svgContainer = root.querySelector('#regexp-render'); this.svgContainer = root.querySelector('#regexp-render');
this.svgBase = this.root.querySelector('#svg-base').innerHTML; this.svgBase = this.root.querySelector('#svg-base').innerHTML;
} }
@ -101,7 +100,7 @@ export default class Regexper {
updateLinks() { updateLinks() {
try { try {
this.download.parentNode.style.display = null; this.download.parentNode.style.display = null;
this.download.href = this.buildBlobURL(this.svgContainer.innerHTML); this.download.href = this.buildBlobURL(this.svgContainer.querySelector('.svg').innerHTML);
} }
catch(e) { catch(e) {
// Blobs or URLs created from them don't work here. // Blobs or URLs created from them don't work here.
@ -124,6 +123,8 @@ export default class Regexper {
} }
renderRegexp(expression) { renderRegexp(expression) {
var svg, percentage;
if (this.runningParser) { if (this.runningParser) {
let deferred = Q.defer(); let deferred = Q.defer();
@ -141,6 +142,14 @@ export default class Regexper {
this.runningParser = new Parser(); this.runningParser = new Parser();
this.svgContainer.innerHTML = [
'<div class="svg"></div>',
'<div class="progress"><div style="width: 0;"></div></div>',
].join('');
svg = this.svgContainer.querySelector('.svg');
percentage = this.svgContainer.querySelector('.progress div');
return this.runningParser.parse(expression) return this.runningParser.parse(expression)
.then(null, message => { .then(null, message => {
this.state = 'has-error'; this.state = 'has-error';
@ -151,7 +160,7 @@ export default class Regexper {
throw message; throw message;
}) })
.invoke('render', this.svgContainer, this.svgBase) .invoke('render', svg, this.svgBase)
.then( .then(
() => { () => {
this.state = 'has-results'; this.state = 'has-results';
@ -160,8 +169,8 @@ export default class Regexper {
this._trackEvent('visualization', 'complete'); this._trackEvent('visualization', 'complete');
}, },
null, null,
percentage => { progress => {
this.percentage.style.width = percentage * 100 + '%'; percentage.style.width = progress * 100 + '%';
} }
) )
.then(null, message => { .then(null, message => {
@ -177,6 +186,7 @@ export default class Regexper {
.finally(() => { .finally(() => {
this.runningParser = false; this.runningParser = false;
this.parseError = false; this.parseError = false;
this.svgContainer.removeChild(this.svgContainer.querySelector('.progress'));
}); });
} }
} }

View File

@ -285,16 +285,6 @@ header {
} }
} }
#loading {
background: $white;
padding: rhythm(1/2) 0;
display: none;
body.is-loading & {
display: block;
}
}
.progress { .progress {
width: 50%; width: 50%;
height: rhythm(1/2); height: rhythm(1/2);
@ -362,11 +352,20 @@ header {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
text-align: center; text-align: center;
display: none;
body.is-loading &, body.has-error & { body.is-loading & {
display: block;
.svg {
position: absolute; position: absolute;
top: -10000px; top: -10000px;
} }
}
body.has-results & {
display: block;
}
} }
footer { footer {