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() {
'
-
-
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;
}
}