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>',
'<div><a href="#" data-glyph="link-intact"></a></div>',
'<div><a href="#" data-glyph="data-transfer-download"></a></div>',
'<div class="progress"><div></div></div>',
'<div id="regexp-render"></div>',
'<script type="text/html" id="svg-base"><svg></svg></script>'
].join('');
@ -281,6 +280,12 @@ describe('regexper.js', function() {
beforeEach(function() {
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() {
@ -426,7 +431,7 @@ describe('regexper.js', function() {
it('renders the expression', function(done) {
this.regexper.renderRegexp('example expression')
.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)
.finally(done)
.done();

View File

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

View File

@ -12,7 +12,6 @@ export default class Regexper {
this.warnings = root.querySelector('#warnings');
this.permalink = root.querySelector('a[data-glyph="link-intact"]');
this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
this.percentage = root.querySelector('.progress div');
this.svgContainer = root.querySelector('#regexp-render');
this.svgBase = this.root.querySelector('#svg-base').innerHTML;
}
@ -101,7 +100,7 @@ export default class Regexper {
updateLinks() {
try {
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) {
// Blobs or URLs created from them don't work here.
@ -124,6 +123,8 @@ export default class Regexper {
}
renderRegexp(expression) {
var svg, percentage;
if (this.runningParser) {
let deferred = Q.defer();
@ -141,6 +142,14 @@ export default class Regexper {
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)
.then(null, message => {
this.state = 'has-error';
@ -151,7 +160,7 @@ export default class Regexper {
throw message;
})
.invoke('render', this.svgContainer, this.svgBase)
.invoke('render', svg, this.svgBase)
.then(
() => {
this.state = 'has-results';
@ -160,8 +169,8 @@ export default class Regexper {
this._trackEvent('visualization', 'complete');
},
null,
percentage => {
this.percentage.style.width = percentage * 100 + '%';
progress => {
percentage.style.width = progress * 100 + '%';
}
)
.then(null, message => {
@ -177,6 +186,7 @@ export default class Regexper {
.finally(() => {
this.runningParser = 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 {
width: 50%;
height: rhythm(1/2);
@ -362,10 +352,19 @@ header {
width: 100%;
overflow: auto;
text-align: center;
display: none;
body.is-loading &, body.has-error & {
position: absolute;
top: -10000px;
body.is-loading & {
display: block;
.svg {
position: absolute;
top: -10000px;
}
}
body.has-results & {
display: block;
}
}