Add theme color picker

Gruntfile.coffee

@@ -33,8 +33,8 @@ module.exports = (grunt) ->
 
     watch:
       coffee:
-        files: ['pace.coffee', 'docs/lib/themes.coffee']
-        tasks: ["coffee", "uglify"]
+        files: ['pace.coffee', 'docs/lib/themes.coffee', 'templates/*']
+        tasks: ["coffee", "uglify", "themes"]
 
     uglify:
       options:
@@ -52,4 +52,4 @@ module.exports = (grunt) ->
   grunt.loadNpmTasks 'grunt-contrib-uglify'
   grunt.loadNpmTasks 'grunt-contrib-coffee'
 
-  grunt.registerTask 'default', ['coffee', 'uglify']
+  grunt.registerTask 'default', ['coffee', 'uglify', 'themes']

docs/lib/themes.coffee

@@ -4,7 +4,7 @@ loadTheme = (name, cb) ->
     success: cb
 
 compileTheme = (body, vars={}) ->
-  body.replace /\{\{\s*([^\} \|]+)(?:\|"([^\} ]+)")?\s*\}\}/g, (match, varName, def) ->
+  body.replace /\{\{\s*([^\} \|]+)(?:\|"([^"]+)")?\s*\}\}/g, (match, varName, def) ->
     val = vars[varName] or def
 
     if not val?

docs/lib/themes.js

@@ -12,7 +12,7 @@
     if (vars == null) {
       vars = {};
     }
-    return body.replace(/\{\{\s*([^\} \|]+)(?:\|"([^\} ]+)")?\s*\}\}/g, function(match, varName, def) {
+    return body.replace(/\{\{\s*([^\} \|]+)(?:\|"([^"]+)")?\s*\}\}/g, function(match, varName, def) {
       var val;
       val = vars[varName] || def;
       if (val == null) {

docs/themes/index.html

@@ -48,6 +48,7 @@
     <h1>Pace</h1>
     <h2>Themes</h2>
     <div class="themes"></div>
+    <input type="color"></input>
     <script>
       (function(){
         var themes = [{
@@ -92,17 +93,33 @@ <h2>Themes</h2>
           '</div>');
         });
 
-        $('iframe').load(function(){
+        var initFrame = function(frame, color){
           var $styleEl = $('<style>')
-          $(this).contents().find('body').append($styleEl);
+          $(frame).contents().find('body').append($styleEl);
 
-          loadTheme($(this).data('theme'), function(theme){
-            body = compileTheme(theme, {color: 'red'});
+          var context = {};
+          if (color)
+            context.color = color;
+
+          loadTheme($(frame).data('theme'), function(theme){
+            body = compileTheme(theme, context);
 
             $styleEl.html(body);
           });
 
-          $(this).contents().find('.pace').addClass('pace-active');
+          $(frame).contents().find('.pace').addClass('pace-active');
+        };
+
+        var updateColor = function(color){
+          $('iframe').each(function(){
+            initFrame(this, color);
+          });
+        };
+
+        $('iframe').load(function(){ initFrame(this); });
+
+        $('input[type="color"]').change(function(){
+          updateColor($(this).val());
         });
       })();
     </script>

pace-theme-big-counter.css

@@ -29,4 +29,4 @@
   text-align: right;
   color: #444;
   color: rgba(0, 0, 0, 0.2);
-}
+}

pace-theme-corner-indicator.css

@@ -67,4 +67,4 @@
 @keyframes pace-rotation {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(359deg); }
-}
+}

pace-theme-fill-left.css

@@ -14,4 +14,4 @@
   top: 0;
   left: 0;
   bottom: 0;
-}
+}

pace-theme-flash.css

@@ -69,4 +69,4 @@
 @keyframes pace-spinner {
   0% { transform: rotate(0deg); transform: rotate(0deg); }
   100% { transform: rotate(360deg); transform: rotate(360deg); }
-}
+}

pace-theme-flat-top.css

@@ -25,4 +25,4 @@
 .pace.pace-active .pace-progress {
   -webkit-transform: translateY(0);
   transform: translateY(0);
-}
+}

pace-theme-mac-osx.css

@@ -65,4 +65,4 @@
 @keyframes pace-stripe-animation {
   0% { transform: none; transform: none; }
   100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
-}
+}

pace-theme-minimal.css

@@ -6,4 +6,4 @@
   top: 0;
   left: 0;
   height: 2px;
-}
+}

templates/pace-theme-big-counter.tmpl.css

@@ -26,6 +26,6 @@
   font-size: 5rem;
   line-height: 1;
   text-align: right;
-  color: #444;
+  color: {{ color|"#444" }};
   color: rgba(0, 0, 0, 0.2);
-}
+}

templates/pace-theme-corner-indicator.tmpl.css

@@ -14,7 +14,7 @@
   right: 0;
   width: 300px;
   height: 300px;
-  background: #29d;
+  background: {{ color|"#29d" }};
   -webkit-transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
   -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
@@ -66,4 +66,4 @@
 @keyframes pace-rotation {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(359deg); }
-}
+}

templates/pace-theme-fill-left.tmpl.css

@@ -7,10 +7,10 @@
 }
 
 .pace .pace-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: {{ color|"rgba(0, 0, 0, 0.2)" }};
   position: fixed;
   z-index: -1;
   top: 0;
   left: 0;
   bottom: 0;
-}
+}

templates/pace-theme-flash.tmpl.css

@@ -39,8 +39,8 @@
   width: 14px;
   height: 14px;
   border: solid 2px transparent;
-  border-top-color: #29d;
-  border-left-color: #29d;
+  border-top-color: {{ color|"#29d" }};
+  border-left-color: {{ color|"#29d" }};
   border-radius: 10px;
   -webkit-animation: pace-spinner 400ms linear infinite;
   -moz-animation: pace-spinner 400ms linear infinite;
@@ -68,4 +68,4 @@
 @keyframes pace-spinner {
   0% { transform: rotate(0deg); transform: rotate(0deg); }
   100% { transform: rotate(360deg); transform: rotate(360deg); }
-}
+}

templates/pace-theme-flat-top.tmpl.css

@@ -13,7 +13,7 @@
   top: 0;
   left: 0;
   height: 12px;
-  background: #29d;
+  background: {{ color|"#29d" }};
   -webkit-transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
   -webkit-transform: translateY(-50px);
@@ -24,4 +24,4 @@
 .pace.pace-active .pace-progress {
   -webkit-transform: translateY(0);
   transform: translateY(0);
-}
+}

templates/pace-theme-mac-osx.tmpl.css

@@ -64,4 +64,4 @@
 @keyframes pace-stripe-animation {
   0% { transform: none; transform: none; }
   100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
-}
+}

templates/pace-theme-minimal.tmpl.css

@@ -1,8 +1,8 @@
 .pace .pace-progress {
-  background: #29d;
+  background: {{ color|"#29d" }};
   position: fixed;
   z-index: 100;
   top: 0;
   left: 0;
   height: 2px;
-}
+}