From 55ee38081765a215c6262571c2b67798bc99835c Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sun, 21 Dec 2014 15:22:01 -0500 Subject: [PATCH] Adding ability to easily render demo images --- spec/parser/javascript_spec.js | 10 ++++++++-- spec/regexper_spec.js | 6 +----- src/documentation.html | 4 ++++ src/js/main.js | 14 ++++++++++++-- src/js/parser/javascript.js | 19 ++++++++++++++----- src/js/regexper.js | 13 ++----------- src/sass/svg.scss | 4 ++++ 7 files changed, 45 insertions(+), 25 deletions(-) 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; }