Beginning to merge rendering code in main.js and regexper.js
This commit is contained in:
parent
8dda135960
commit
d6e81a2932
@ -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();
|
||||
|
@ -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>
|
||||
|
@ -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'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user