Skip to content

Commit 764e64c

Browse files
zackbloomzackbloom
committed
Support templating the color of the themes
1 parent 322ac80 commit 764e64c

20 files changed

Lines changed: 453 additions & 4 deletions

‎Gruntfile.coffee‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,39 @@
1+
Path = require('path')
2+
fs = require('fs')
3+
4+
ThemeUtils = require('./docs/lib/themes.coffee')
5+
16
module.exports = (grunt) ->
7+
grunt.registerTask 'themes', 'Compile the pace theme files', ->
8+
done = @async()
9+
10+
options = grunt.config('themes')
11+
12+
grunt.file.glob options.src, (err, files) ->
13+
for file in files
14+
body = ThemeUtils.compileTheme fs.readFileSync(file).toString()
15+
16+
body = "// This is a compiled file, you should be editing the file in templates/\n" + body
17+
18+
name = Path.basename file
19+
name = name.replace '.tmpl', ''
20+
path = Path.join options.dest, name
21+
22+
fs.writeFileSync path, body
23+
24+
done()
25+
226
grunt.initConfig
327
pkg: grunt.file.readJSON("package.json")
428
coffee:
529
compile:
630
files:
731
'pace.js': 'pace.coffee'
32+
'docs/lib/themes.js': 'docs/lib/themes.coffee'
833

934
watch:
1035
coffee:
11-
files: ['pace.coffee']
36+
files: ['pace.coffee', 'docs/lib/themes.coffee']
1237
tasks: ["coffee", "uglify"]
1338

1439
uglify:
@@ -19,6 +44,10 @@ module.exports = (grunt) ->
1944
src: 'pace.js'
2045
dest: 'pace.min.js'
2146

47+
themes:
48+
src: 'templates/*.tmpl.css'
49+
dest: '.'
50+
2251
grunt.loadNpmTasks 'grunt-contrib-watch'
2352
grunt.loadNpmTasks 'grunt-contrib-uglify'
2453
grunt.loadNpmTasks 'grunt-contrib-coffee'

‎docs/lib/themes.coffee‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
loadTheme = (name, cb) ->
2+
$.ajax
3+
url: "/pace/templates/pace-theme-#{ name }.tmpl.css"
4+
success: cb
5+
6+
compileTheme = (body, vars={}) ->
7+
body.replace /\{\{\s*([^\} \|]+)(?:\|"([^\} ]+)")?\s*\}\}/g, (match, varName, def) ->
8+
val = vars[varName] or def
9+
10+
if not val?
11+
throw "Theme Template Error: #{ varName } not provided"
12+
13+
val
14+
15+
if module?
16+
module.exports = {compileTheme}
17+
else
18+
window.loadTheme = loadTheme
19+
window.compileTheme = compileTheme

‎docs/lib/themes.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
(function() {
2+
var compileTheme, loadTheme;
3+
4+
loadTheme = function(name, cb) {
5+
return $.ajax({
6+
url: "/pace/templates/pace-theme-" + name + ".tmpl.css",
7+
success: cb
8+
});
9+
};
10+
11+
compileTheme = function(body, vars) {
12+
if (vars == null) {
13+
vars = {};
14+
}
15+
return body.replace(/\{\{\s*([^\} \|]+)(?:\|"([^\} ]+)")?\s*\}\}/g, function(match, varName, def) {
16+
var val;
17+
val = vars[varName] || def;
18+
if (val == null) {
19+
throw "Theme Template Error: " + varName + " not provided";
20+
}
21+
return val;
22+
});
23+
};
24+
25+
if (typeof module !== "undefined" && module !== null) {
26+
module.exports = {
27+
compileTheme: compileTheme
28+
};
29+
} else {
30+
window.loadTheme = loadTheme;
31+
window.compileTheme = compileTheme;
32+
}
33+
34+
}).call(this);

‎docs/themes/index.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<head>
22
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
3+
<script src="/pace/docs/lib/themes.js"></script>
34
<style>
45
body {
56
margin: 0px;
@@ -92,11 +93,18 @@ <h2>Themes</h2>
9293
});
9394

9495
$('iframe').load(function(){
95-
$(this).contents().find('body').append('<link rel="stylesheet" href="/pace/pace-theme-' + $(this).data('theme') + '.css" />');
96+
var $styleEl = $('<style>')
97+
$(this).contents().find('body').append($styleEl);
98+
99+
loadTheme($(this).data('theme'), function(theme){
100+
body = compileTheme(theme, {color: 'red'});
101+
102+
$styleEl.html(body);
103+
});
96104

97105
$(this).contents().find('.pace').addClass('pace-active');
98106
});
99107
})();
100108
</script>
101109
</div>
102-
</body>
110+
</body>

‎pace-theme-barber-shop.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// This is a compiled file, you should be editing the file in templates/
12
.pace {
23
-webkit-pointer-events: none;
34
pointer-events: none;
@@ -59,4 +60,4 @@
5960
@keyframes pace-stripe-animation {
6061
0% { transform: none; transform: none; }
6162
100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
62-
}
63+
}

‎pace-theme-big-counter.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// This is a compiled file, you should be editing the file in templates/
12
.pace {
23
-webkit-pointer-events: none;
34
pointer-events: none;

‎pace-theme-corner-indicator.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// This is a compiled file, you should be editing the file in templates/
12
.pace {
23
-webkit-pointer-events: none;
34
pointer-events: none;

‎pace-theme-fill-left.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// This is a compiled file, you should be editing the file in templates/
12
.pace {
23
-webkit-pointer-events: none;
34
pointer-events: none;

‎pace-theme-flash.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// This is a compiled file, you should be editing the file in templates/
12
.pace {
23
-webkit-pointer-events: none;
34
pointer-events: none;

‎pace-theme-flat-top.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// This is a compiled file, you should be editing the file in templates/
12
.pace {
23
-webkit-pointer-events: none;
34
pointer-events: none;

0 commit comments

Comments
 (0)