Moving the SVG styles out of the svg element

They are now processed with compass
This commit is contained in:
Jeff Avallone 2014-12-21 14:39:00 -05:00
parent fbb8c4187d
commit e466e7e548
7 changed files with 88 additions and 70 deletions

View File

@ -11,7 +11,7 @@ function errorHandler() {
gulp.task('default', ['server'], function() { gulp.task('default', ['server'], function() {
gulp.watch(config.globs.other, ['static']); gulp.watch(config.globs.other, ['static']);
gulp.watch([config.globs.html, config.templateFile], ['markup']); gulp.watch([config.globs.html, config.templateFile, config.globs.sass], ['markup']);
gulp.watch(config.globs.sass, ['compass']); gulp.watch(config.globs.sass, ['compass']);
gulp.watch(config.globs.js, ['browserify']); gulp.watch(config.globs.js, ['browserify']);
}); });
@ -37,9 +37,10 @@ gulp.task('static', function() {
.pipe(gulp.dest(config.buildRoot)); .pipe(gulp.dest(config.buildRoot));
}); });
gulp.task('markup', function() { gulp.task('markup', ['compass'], function() {
var wrap = require('gulp-wrap'), var wrap = require('gulp-wrap'),
path = require('path'); path = require('path'),
fs = require('fs');
return gulp.src(config.globs.html, { base: './src' }) return gulp.src(config.globs.html, { base: './src' })
.pipe(errorHandler()) .pipe(errorHandler())
@ -49,7 +50,10 @@ gulp.task('markup', function() {
file = path.relative(root, this.file.history[0]); file = path.relative(root, this.file.history[0]);
return config.titles[file] || config.titles['_']; return config.titles[file] || config.titles['_'];
} },
svgStyles: fs.readFileSync(path.join(config.compass.css, 'svg.css'), {
encoding: 'utf-8'
})
})) }))
.pipe(gulp.dest(config.buildRoot)); .pipe(gulp.dest(config.buildRoot));
}); });

View File

@ -14,7 +14,8 @@ describe('regexper.js', function() {
'<div><a href="#" data-glyph="link-intact"></a></div>', '<div><a href="#" data-glyph="link-intact"></a></div>',
'<div><a href="#" data-glyph="data-transfer-download"></a></div>', '<div><a href="#" data-glyph="data-transfer-download"></a></div>',
'<div id="progress"><div></div></div>', '<div id="progress"><div></div></div>',
'<div id="regexp-render"><svg></svg></div>' '<div id="regexp-render"><svg></svg></div>',
'<div id="svg-styles">example styles</div>'
].join(''); ].join('');
this.regexper = new Regexper(this.root); this.regexper = new Regexper(this.root);
@ -377,6 +378,10 @@ describe('regexper.js', function() {
expect(this.regexper._trackEvent).toHaveBeenCalledWith('visualization', 'start'); 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() { it('keeps a copy of the running parser', function() {
expect(this.regexper.runningParser).toBeTruthy(); expect(this.regexper.runningParser).toBeTruthy();
}); });

View File

@ -26,71 +26,7 @@
<!-- NOTE: Do not put anything in #regexp-render other than the <svg> element --> <!-- NOTE: Do not put anything in #regexp-render other than the <svg> element -->
<div id="regexp-render"> <div id="regexp-render">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
<style type="text/css">
text, tspan {
font: 12px Arial;
}
path {
fill-opacity: 0;
stroke-width: 2px;
stroke: #000;
}
circle.pin {
fill: #6b6659;
stroke-width: 2px;
stroke: #000;
}
.anchor text, .any-character text {
fill: #fff;
}
.anchor rect, .any-character rect {
fill: #6b6659;
}
.escape text, .charset-escape text, .literal text {
fill: #000;
}
.escape rect, .charset-escape rect {
fill: #bada55;
}
.literal rect {
fill: #dae9e5;
}
.charset .charset-box {
fill: #cbcbba;
}
.subexp .subexp-label,
.charset .charset-label,
.match-fragment .repeat-label {
font-size: 10px;
}
.subexp .subexp-label,
.charset .charset-label {
dominant-baseline: text-after-edge;
}
.subexp .subexp-box {
stroke: #a0a0a0;
stroke-dasharray: 6,2;
stroke-width: 2px;
fill-opacity: 0;
}
.quote {
fill: #a0a0a0;
}
</style>
</svg>
</div> </div>
</div> </div>

View File

@ -141,6 +141,12 @@ export default class Regexper {
this.state = 'is-loading'; this.state = 'is-loading';
this._trackEvent('visualization', 'start'); this._trackEvent('visualization', 'start');
this.svg.innerHTML = [
'<style type="text/css">',
this.root.querySelector('#svg-styles').innerHTML,
'</style>'
].join('');
this.runningParser = new Parser(); this.runningParser = new Parser();
return this.runningParser.parse(expression) return this.runningParser.parse(expression)

View File

@ -2,8 +2,10 @@ $green: #bada55;
$dark-green: shade($green, 25%); $dark-green: shade($green, 25%);
$light-green: tint($green, 25%); $light-green: tint($green, 25%);
$gray: #6b6659; $gray: #6b6659;
$light-gray: tint($gray, 25%);
$tan: #cbcbba; $tan: #cbcbba;
$red: #b3151a; $red: #b3151a;
$blue: #dae9e5;
$black: #000; $black: #000;
$white: #fff; $white: #fff;

63
src/sass/svg.scss Normal file
View File

@ -0,0 +1,63 @@
@import 'base';
text, tspan {
font: 12px Arial;
}
path {
fill-opacity: 0;
stroke-width: 2px;
stroke: $black;
}
circle.pin {
fill: $gray;
stroke-width: 2px;
stroke: $black;
}
.anchor text, .any-character text {
fill: $white;
}
.anchor rect, .any-character rect {
fill: $gray;
}
.escape text, .charset-escape text, .literal text {
fill: $black;
}
.escape rect, .charset-escape rect {
fill: $green;
}
.literal rect {
fill: $blue;
}
.charset .charset-box {
fill: $tan;
}
.subexp .subexp-label,
.charset .charset-label,
.match-fragment .repeat-label {
font-size: 10px;
}
.subexp .subexp-label,
.charset .charset-label {
dominant-baseline: text-after-edge;
}
.subexp .subexp-box {
stroke: $light-gray;
stroke-dasharray: 6,2;
stroke-width: 2px;
fill-opacity: 0;
}
.quote {
fill: $light-gray;
}

View File

@ -15,6 +15,8 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
</head> </head>
<body> <body>
<script type="text/css" id="svg-styles">${svgStyles}</script>
<header> <header>
<div class="logo"> <div class="logo">
<h1><a href="/">Regexper</a></h1> <h1><a href="/">Regexper</a></h1>