diff --git a/spec/regexper_spec.js b/spec/regexper_spec.js index cafcfc1..c8240c0 100644 --- a/spec/regexper_spec.js +++ b/spec/regexper_spec.js @@ -14,7 +14,6 @@ describe('regexper.js', function() { '', '
', '
', - '
', '
', '' ].join(''); @@ -281,6 +280,12 @@ describe('regexper.js', function() { beforeEach(function() { spyOn(this.regexper, 'buildBlobURL'); + this.regexper.svgContainer.innerHTML = '
example image
'; + }); + + 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(); diff --git a/src/index.html b/src/index.html index 262b87f..9af9bbb 100644 --- a/src/index.html +++ b/src/index.html @@ -11,12 +11,6 @@
-
-
-
-
-
-
diff --git a/src/js/regexper.js b/src/js/regexper.js index b1ab3ea..396811b 100644 --- a/src/js/regexper.js +++ b/src/js/regexper.js @@ -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 = [ + '
', + '
', + ].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')); }); } } diff --git a/src/sass/main.scss b/src/sass/main.scss index f6d20b1..1f1918c 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -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; } }