Skip to content

Commit 0e84a38

Browse files
zackbloomzackbloom
committed
Add theme color picker
1 parent 764e64c commit 0e84a38

18 files changed

Lines changed: 48 additions & 31 deletions

‎Gruntfile.coffee‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ module.exports = (grunt) ->
3333

3434
watch:
3535
coffee:
36-
files: ['pace.coffee', 'docs/lib/themes.coffee']
37-
tasks: ["coffee", "uglify"]
36+
files: ['pace.coffee', 'docs/lib/themes.coffee', 'templates/*']
37+
tasks: ["coffee", "uglify", "themes"]
3838

3939
uglify:
4040
options:
@@ -52,4 +52,4 @@ module.exports = (grunt) ->
5252
grunt.loadNpmTasks 'grunt-contrib-uglify'
5353
grunt.loadNpmTasks 'grunt-contrib-coffee'
5454

55-
grunt.registerTask 'default', ['coffee', 'uglify']
55+
grunt.registerTask 'default', ['coffee', 'uglify', 'themes']

‎docs/lib/themes.coffee‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ loadTheme = (name, cb) ->
44
success: cb
55

66
compileTheme = (body, vars={}) ->
7-
body.replace /\{\{\s*([^\} \|]+)(?:\|"([^\} ]+)")?\s*\}\}/g, (match, varName, def) ->
7+
body.replace /\{\{\s*([^\} \|]+)(?:\|"([^"]+)")?\s*\}\}/g, (match, varName, def) ->
88
val = vars[varName] or def
99

1010
if not val?

‎docs/lib/themes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
if (vars == null) {
1313
vars = {};
1414
}
15-
return body.replace(/\{\{\s*([^\} \|]+)(?:\|"([^\} ]+)")?\s*\}\}/g, function(match, varName, def) {
15+
return body.replace(/\{\{\s*([^\} \|]+)(?:\|"([^"]+)")?\s*\}\}/g, function(match, varName, def) {
1616
var val;
1717
val = vars[varName] || def;
1818
if (val == null) {

‎docs/themes/index.html‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
<h1>Pace</h1>
4949
<h2>Themes</h2>
5050
<div class="themes"></div>
51+
<input type="color"></input>
5152
<script>
5253
(function(){
5354
var themes = [{
@@ -92,17 +93,33 @@ <h2>Themes</h2>
9293
'</div>');
9394
});
9495

95-
$('iframe').load(function(){
96+
var initFrame = function(frame, color){
9697
var $styleEl = $('<style>')
97-
$(this).contents().find('body').append($styleEl);
98+
$(frame).contents().find('body').append($styleEl);
9899

99-
loadTheme($(this).data('theme'), function(theme){
100-
body = compileTheme(theme, {color: 'red'});
100+
var context = {};
101+
if (color)
102+
context.color = color;
103+
104+
loadTheme($(frame).data('theme'), function(theme){
105+
body = compileTheme(theme, context);
101106

102107
$styleEl.html(body);
103108
});
104109

105-
$(this).contents().find('.pace').addClass('pace-active');
110+
$(frame).contents().find('.pace').addClass('pace-active');
111+
};
112+
113+
var updateColor = function(color){
114+
$('iframe').each(function(){
115+
initFrame(this, color);
116+
});
117+
};
118+
119+
$('iframe').load(function(){ initFrame(this); });
120+
121+
$('input[type="color"]').change(function(){
122+
updateColor($(this).val());
106123
});
107124
})();
108125
</script>

‎pace-theme-big-counter.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,4 @@
2929
text-align: right;
3030
color: #444;
3131
color: rgba(0, 0, 0, 0.2);
32-
}
32+
}

‎pace-theme-corner-indicator.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,4 @@
6767
@keyframes pace-rotation {
6868
0% { transform: rotate(0deg); }
6969
100% { transform: rotate(359deg); }
70-
}
70+
}

‎pace-theme-fill-left.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@
1414
top: 0;
1515
left: 0;
1616
bottom: 0;
17-
}
17+
}

‎pace-theme-flash.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,4 @@
6969
@keyframes pace-spinner {
7070
0% { transform: rotate(0deg); transform: rotate(0deg); }
7171
100% { transform: rotate(360deg); transform: rotate(360deg); }
72-
}
72+
}

‎pace-theme-flat-top.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@
2525
.pace.pace-active .pace-progress {
2626
-webkit-transform: translateY(0);
2727
transform: translateY(0);
28-
}
28+
}

‎pace-theme-mac-osx.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,4 @@
6565
@keyframes pace-stripe-animation {
6666
0% { transform: none; transform: none; }
6767
100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
68-
}
68+
}

0 commit comments

Comments
 (0)