Adding ability to easily render demo images

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() {
-  var regexper = new Regexper(document.body);
+  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;
 }