Moving the SVG styles out of the svg element
They are now processed with compass
This commit is contained in:
parent
fbb8c4187d
commit
e466e7e548
12
gulpfile.js
12
gulpfile.js
@ -11,7 +11,7 @@ function errorHandler() {
|
||||
|
||||
gulp.task('default', ['server'], function() {
|
||||
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.js, ['browserify']);
|
||||
});
|
||||
@ -37,9 +37,10 @@ gulp.task('static', function() {
|
||||
.pipe(gulp.dest(config.buildRoot));
|
||||
});
|
||||
|
||||
gulp.task('markup', function() {
|
||||
gulp.task('markup', ['compass'], function() {
|
||||
var wrap = require('gulp-wrap'),
|
||||
path = require('path');
|
||||
path = require('path'),
|
||||
fs = require('fs');
|
||||
|
||||
return gulp.src(config.globs.html, { base: './src' })
|
||||
.pipe(errorHandler())
|
||||
@ -49,7 +50,10 @@ gulp.task('markup', function() {
|
||||
file = path.relative(root, this.file.history[0]);
|
||||
|
||||
return config.titles[file] || config.titles['_'];
|
||||
}
|
||||
},
|
||||
svgStyles: fs.readFileSync(path.join(config.compass.css, 'svg.css'), {
|
||||
encoding: 'utf-8'
|
||||
})
|
||||
}))
|
||||
.pipe(gulp.dest(config.buildRoot));
|
||||
});
|
||||
|
@ -14,7 +14,8 @@ describe('regexper.js', function() {
|
||||
'<div><a href="#" data-glyph="link-intact"></a></div>',
|
||||
'<div><a href="#" data-glyph="data-transfer-download"></a></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('');
|
||||
|
||||
this.regexper = new Regexper(this.root);
|
||||
@ -377,6 +378,10 @@ 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();
|
||||
});
|
||||
|
@ -26,71 +26,7 @@
|
||||
|
||||
<!-- NOTE: Do not put anything in #regexp-render other than the <svg> element -->
|
||||
<div id="regexp-render">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<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>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -141,6 +141,12 @@ 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)
|
||||
|
@ -2,8 +2,10 @@ $green: #bada55;
|
||||
$dark-green: shade($green, 25%);
|
||||
$light-green: tint($green, 25%);
|
||||
$gray: #6b6659;
|
||||
$light-gray: tint($gray, 25%);
|
||||
$tan: #cbcbba;
|
||||
$red: #b3151a;
|
||||
$blue: #dae9e5;
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
|
||||
|
63
src/sass/svg.scss
Normal file
63
src/sass/svg.scss
Normal 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;
|
||||
}
|
@ -15,6 +15,8 @@
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/css" id="svg-styles">${svgStyles}</script>
|
||||
|
||||
<header>
|
||||
<div class="logo">
|
||||
<h1><a href="/">Regexper</a></h1>
|
||||
|
Loading…
Reference in New Issue
Block a user