Adding ability to easily render demo images

spec/parser/javascript_spec.js

@@ -60,12 +60,18 @@ describe('parser/javascript.js', function() {
       this.parser.parsed = jasmine.createSpyObj('parsed', ['render']);
       this.parser.parsed.render.and.returnValue(this.renderPromise.promise);
 
+      this.svgStyles = 'example styles';
       this.svg = Snap(document.createElement('svg'));
       spyOn(this.svg, 'group').and.returnValue('example group');
     });
 
+    it('adds the svg styles to the svg element', function() {
+      this.parser.render(this.svg, this.svgStyles);
+      expect(this.svg.innerHTML).toEqual('<style type="text/css">example styles</style>');
+    });
+
     it('render the parsed expression', function() {
-      this.parser.render(this.svg, 10);
+      this.parser.render(this.svg, this.svgStyles);
       expect(this.parser.parsed.render).toHaveBeenCalledWith('example group');
     });
 
@@ -82,7 +88,7 @@ describe('parser/javascript.js', function() {
 
         spyOn(this.svg, 'attr');
 
-        this.parser.render(this.svg, 10);
+        this.parser.render(this.svg, this.svgStyles);
         this.renderPromise.resolve(this.result);
 
         setTimeout(done, 10);

spec/regexper_spec.js

@@ -378,10 +378,6 @@ describe('regexper.js', function() {
       expect(this.regexper._trackEvent).toHaveBeenCalledWith('visualization', 'start');
     });
 
-    it('adds the svg styles to the svg element', function() {
-      expect(this.regexper.svg.innerHTML).toEqual('<style type="text/css">example styles</style>');
-    });
-
     it('keeps a copy of the running parser', function() {
       expect(this.regexper.runningParser).toBeTruthy();
     });
@@ -422,7 +418,7 @@ describe('regexper.js', function() {
       });
 
       it('renders the expression', function() {
-        expect(this.parser.render).toHaveBeenCalledWith(this.regexper.snap, this.regexper.padding);
+        expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svg, this.regexper.svgStyles);
       });
 
     });

src/documentation.html

@@ -1,3 +1,7 @@
 <div class="copy documentation">
 TODO: Write documentation
+
+<svg data-expr="test?" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
 </div>
+
+<script src="/js/main.js" async defer></script>

src/js/main.js

@@ -1,14 +1,24 @@
 import util from './util.js';
 import Regexper from './regexper.js';
+import Parser from './parser/javascript.js';
+import _ from 'lodash';
 
 (function() {
+  if (document.body.querySelector('#content .container')) {
     var regexper = new Regexper(document.body);
 
-  if (document.body.querySelector('#content')) {
     regexper.bindListeners();
 
     setTimeout(() => {
       window.dispatchEvent(util.customEvent('hashchange'));
     });
   }
+
+  _.each(document.querySelectorAll('svg[data-expr]'), element => {
+    var parser = new Parser();
+
+    parser.parse(element.getAttribute('data-expr'))
+      .invoke('render', element, document.querySelector('#svg-styles').innerHTML)
+      .done();
+  });
 }());

src/js/parser/javascript.js

@@ -1,4 +1,5 @@
 import Q from 'q';
+import Snap from 'snapsvg';
 
 import javascript from './javascript/parser.js';
 
@@ -30,18 +31,26 @@ export default class Parser {
     return deferred.promise;
   }
 
-  render(svg, padding) {
-    svg.selectAll('g').remove();
+  render(svgElement, styles) {
+    var svg;
+
+    svgElement.innerHTML = [
+      '<style type="text/css">',
+      styles,
+      '</style>'
+    ].join('');
+
+    svg = Snap(svgElement);
 
     return this.parsed.render(svg.group())
       .then(result => {
         var box = result.getBBox();
 
         result.transform(Snap.matrix()
-          .translate(padding - box.x, padding - box.y));
+          .translate(10 - box.x, 10 - box.y));
         svg.attr({
-          width: box.width + padding * 2,
-          height: box.height + padding * 2
+          width: box.width + 20,
+          height: box.height + 20
         });
       });
   }

src/js/regexper.js

@@ -1,6 +1,5 @@
 import util from './util.js';
 import Parser from './parser/javascript.js';
-import Snap from 'snapsvg';
 import Q from 'q';
 
 export default class Regexper {
@@ -13,9 +12,7 @@ export default class Regexper {
     this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
     this.percentage = root.querySelector('#progress div');
     this.svg = root.querySelector('#regexp-render svg');
-
-    this.padding = 10;
-    this.snap = Snap(this.svg);
+    this.svgStyles = this.root.querySelector('#svg-styles').innerHTML;
 
     this.gaq = (typeof window._gaq === 'undefined') ? [] : window._gaq;
   }
@@ -141,12 +138,6 @@ export default class Regexper {
     this.state = 'is-loading';
     this._trackEvent('visualization', 'start');
 
-    this.svg.innerHTML = [
-      '<style type="text/css">',
-      this.root.querySelector('#svg-styles').innerHTML,
-      '</style>'
-    ].join('');
-
     this.runningParser = new Parser();
 
     return this.runningParser.parse(expression)
@@ -159,7 +150,7 @@ export default class Regexper {
 
         throw message;
       })
-      .invoke('render', this.snap, this.padding)
+      .invoke('render', this.svg, this.svgStyles)
       .then(() => {
         this.state = 'has-results';
         this.updateLinks();

src/sass/svg.scss

@@ -1,5 +1,9 @@
 @import 'base';
 
+svg {
+  background-color: $white;
+}
+
 text, tspan {
   font: 12px Arial;
 }