Merging the rendering code from main.js and regexper.js

src/js/main.js

@@ -27,31 +27,10 @@ window._gaq = (typeof _gaq !== 'undefined') ? _gaq : {
     });
   }
 
-  _.each(document.querySelectorAll('figure[data-expr]'), element => {
-    var parser = new Parser(),
-        svg, percentage;
-
-    element.className = _.compact([element.className, 'loading']).join(' ');
-    element.innerHTML = [
-      '<div class="svg"></div>',
-      '<div class="progress"><div style="width: 0;"></div></div>',
-      element.innerHTML
-    ].join('');
-
-    svg = element.querySelector('.svg');
-    percentage = element.querySelector('.progress div');
-
-    setTimeout(() => {
-      parser.parse(element.getAttribute('data-expr'))
-        .invoke('render', svg, document.querySelector('#svg-base').innerHTML)
-        .then(null, null, progress => {
-          percentage.style.width = progress * 100 + '%';
-        })
-        .finally(() => {
-          element.className = _.without(element.className.split(' '), 'loading').join(' ');
-          element.removeChild(element.querySelector('.progress'));
-        })
-        .done();
-    }, 1);
+  _.each(document.querySelectorAll('[data-expr]'), element => {
+    new Parser(element, { keepContent: true })
+      .parse(element.getAttribute('data-expr'))
+      .invoke('render')
+      .done();
   });
 }());

src/js/parser/javascript.js

@@ -1,10 +1,11 @@
 import Q from 'q';
 import Snap from 'snapsvg';
+import _ from 'lodash';
 
 import javascript from './javascript/parser.js';
 
 export default class Parser {
-  constructor() {
+  constructor(container, options) {
     this.state = {
       groupCounter: 1,
       renderCounter: 0,
@@ -12,11 +13,40 @@ export default class Parser {
       cancelRender: false,
       warnings: []
     };
+
+    this.options = options || {};
+    _.defaults(this.options, {
+      keepContent: false
+    });
+
+    this.container = container;
+  }
+
+  set container(cont) {
+    this._container = cont;
+    this._container.innerHTML = [
+      document.querySelector('#svg-container-base').innerHTML,
+      this.options.keepContent ? this.container.innerHTML : ''
+    ].join('');
+  }
+
+  get container() {
+    return this._container;
+  }
+
+  _addClass(className) {
+    this.container.className = _.compact([this.container.className, className]).join(' ');
+  }
+
+  _removeClass(className) {
+    this.container.className = _.without(this.container.className.split(' '), className).join(' ');
   }
 
   parse(expression) {
     var deferred = Q.defer();
 
+    this._addClass('loading');
+
     setTimeout(() => {
       try {
         javascript.Parser.SyntaxNode.state = this.state;
@@ -32,23 +62,30 @@ export default class Parser {
     return deferred.promise;
   }
 
-  render(containerElement, svgBase) {
-    var svg;
-
-    containerElement.innerHTML = svgBase;
-
-    svg = Snap(containerElement.querySelector('svg'));
+  render() {
+    var svg = Snap(this.container.querySelector('svg')),
+        progress = this.container.querySelector('.progress div');
 
     return this.parsed.render(svg.group())
-      .then(result => {
-        var box = result.getBBox();
+      .then(
+        result => {
+          var box = result.getBBox();
 
-        result.transform(Snap.matrix()
-          .translate(10 - box.x, 10 - box.y));
-        svg.attr({
-          width: box.width + 20,
-          height: box.height + 20
-        });
+          result.transform(Snap.matrix()
+            .translate(10 - box.x, 10 - box.y));
+          svg.attr({
+            width: box.width + 20,
+            height: box.height + 20
+          });
+        },
+        null,
+        percent => {
+          progress.style.width = percent * 100 + '%';
+        }
+      )
+      .finally(() => {
+        this._removeClass('loading');
+        this.container.removeChild(this.container.querySelector('.progress'));
       });
   }
 

src/js/regexper.js

@@ -13,7 +13,6 @@ export default class Regexper {
     this.permalink = root.querySelector('a[data-glyph="link-intact"]');
     this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
     this.svgContainer = root.querySelector('#regexp-render');
-    this.svgBase = this.root.querySelector('#svg-base').innerHTML;
   }
 
   keypressListener(event) {
@@ -28,8 +27,8 @@ export default class Regexper {
   }
 
   documentKeypressListener(event) {
-    if (event.keyCode === 27 && this.runningParser) {
-      this.runningParser.cancel();
+    if (event.keyCode === 27 && this.running) {
+      this.running.cancel();
     }
   }
 
@@ -123,12 +122,12 @@ export default class Regexper {
   }
 
   renderRegexp(expression) {
-    var svg, percentage;
+    var parseError = false;
 
-    if (this.runningParser) {
+    if (this.running) {
       let deferred = Q.defer();
 
-      this.runningParser.cancel();
+      this.running.cancel();
 
       setTimeout(() => {
         deferred.resolve(this.renderRegexp(expression));
@@ -140,53 +139,38 @@ export default class Regexper {
     this.state = 'is-loading';
     this._trackEvent('visualization', 'start');
 
-    this.runningParser = new Parser();
+    this.running = new Parser(this.svgContainer);
 
-    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)
+    return this.running
+      .parse(expression)
       .then(null, message => {
         this.state = 'has-error';
         this.error.innerHTML = '';
         this.error.appendChild(document.createTextNode(message));
 
-        this.parseError = true;
+        parseError = true;
 
         throw message;
       })
-      .invoke('render', svg, this.svgBase)
-      .then(
-        () => {
+      .invoke('render')
+      .then(() => {
           this.state = 'has-results';
           this.updateLinks();
-          this.displayWarnings(this.runningParser.warnings);
+          this.displayWarnings(this.running.warnings);
           this._trackEvent('visualization', 'complete');
-        },
-        null,
-        progress => {
-          percentage.style.width = progress * 100 + '%';
-        }
-      )
+      })
       .then(null, message => {
         if (message === 'Render cancelled') {
           this._trackEvent('visualization', 'cancelled');
           this.state = '';
-        } else if (this.parseError) {
+        } else if (parseError) {
           this._trackEvent('visualization', 'parse error');
         } else {
           throw message;
         }
       })
       .finally(() => {
-        this.runningParser = false;
-        this.parseError = false;
-        this.svgContainer.removeChild(this.svgContainer.querySelector('.progress'));
+        this.running = false;
       });
   }
 }