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.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));
|
||||||
});
|
});
|
||||||
|
@ -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();
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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)
|
||||||
|
@ -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
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" />
|
<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>
|
||||||
|
Loading…
Reference in New Issue
Block a user