diff --git a/spec/parser/javascript_spec.js b/spec/parser/javascript_spec.js
index df573c0..1deb3a6 100644
--- a/spec/parser/javascript_spec.js
+++ b/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('');
+ });
+
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);
diff --git a/spec/regexper_spec.js b/spec/regexper_spec.js
index f20adaf..9321daa 100644
--- a/spec/regexper_spec.js
+++ b/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('');
- });
-
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);
});
});
diff --git a/src/documentation.html b/src/documentation.html
index b06e79b..c84752b 100644
--- a/src/documentation.html
+++ b/src/documentation.html
@@ -1,3 +1,7 @@
TODO: Write documentation
+
+
+
+
diff --git a/src/js/main.js b/src/js/main.js
index c014cb4..0424573 100644
--- a/src/js/main.js
+++ b/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();
+ });
}());
diff --git a/src/js/parser/javascript.js b/src/js/parser/javascript.js
index bdcd0b5..9b63d7e 100644
--- a/src/js/parser/javascript.js
+++ b/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 = [
+ ''
+ ].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
});
});
}
diff --git a/src/js/regexper.js b/src/js/regexper.js
index 55ee20e..680b15d 100644
--- a/src/js/regexper.js
+++ b/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 = [
- ''
- ].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();
diff --git a/src/sass/svg.scss b/src/sass/svg.scss
index 1cc2110..44455bc 100644
--- a/src/sass/svg.scss
+++ b/src/sass/svg.scss
@@ -1,5 +1,9 @@
@import 'base';
+svg {
+ background-color: $white;
+}
+
text, tspan {
font: 12px Arial;
}