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

spec/regexper_spec.js

@@ -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();

src/index.html

@@ -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>

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 = [
+      '<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 => {
+        progress => {
-          this.percentage.style.width = percentage * 100 + '%';
+          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'));
       });
   }
 }

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 & {
+  body.is-loading & {
-    position: absolute;
+    display: block;
-    top: -10000px;
+
+    .svg {
+      position: absolute;
+      top: -10000px;
+    }
+  }
+
+  body.has-results & {
+    display: block;
   }
 }