Support templating the color of the themes

sdkakcy · Sep 20, 2013 · 764e64c · 764e64c
1 parent 322ac80
commit 764e64c
Show file tree

Hide file tree

Showing 20 changed files with 453 additions and 4 deletions.
diff --git a/Gruntfile.coffee b/Gruntfile.coffee
@@ -1,14 +1,39 @@
+Path = require('path')
+fs = require('fs')
+
+ThemeUtils = require('./docs/lib/themes.coffee')
+
 module.exports = (grunt) ->
+  grunt.registerTask 'themes', 'Compile the pace theme files', ->
+    done = @async()
+
+    options = grunt.config('themes')
+
+    grunt.file.glob options.src, (err, files) ->
+      for file in files
+        body = ThemeUtils.compileTheme fs.readFileSync(file).toString()
+
+        body = "// This is a compiled file, you should be editing the file in templates/\n" + body
+
+        name = Path.basename file
+        name = name.replace '.tmpl', ''
+        path = Path.join options.dest, name
+
+        fs.writeFileSync path, body
+
+      done()
+
   grunt.initConfig
     pkg: grunt.file.readJSON("package.json")
     coffee:
       compile:
         files:
           'pace.js': 'pace.coffee'
+          'docs/lib/themes.js': 'docs/lib/themes.coffee'
 
     watch:
       coffee:
-        files: ['pace.coffee']
+        files: ['pace.coffee', 'docs/lib/themes.coffee']
         tasks: ["coffee", "uglify"]
 
     uglify:
@@ -19,6 +44,10 @@ module.exports = (grunt) ->
         src: 'pace.js'
         dest: 'pace.min.js'
 
+    themes:
+      src: 'templates/*.tmpl.css'
+      dest: '.'
+
   grunt.loadNpmTasks 'grunt-contrib-watch'
   grunt.loadNpmTasks 'grunt-contrib-uglify'
   grunt.loadNpmTasks 'grunt-contrib-coffee'

diff --git a/docs/lib/themes.coffee b/docs/lib/themes.coffee
@@ -0,0 +1,19 @@
+loadTheme = (name, cb) ->
+  $.ajax
+    url: "/pace/templates/pace-theme-#{ name }.tmpl.css"
+    success: cb
+
+compileTheme = (body, vars={}) ->
+  body.replace /\{\{\s*([^\} \|]+)(?:\|"([^\} ]+)")?\s*\}\}/g, (match, varName, def) ->
+    val = vars[varName] or def
+
+    if not val?
+      throw "Theme Template Error: #{ varName } not provided"
+
+    val
+
+if module?
+  module.exports = {compileTheme}
+else
+  window.loadTheme = loadTheme
+  window.compileTheme = compileTheme
diff --git a/docs/lib/themes.js b/docs/lib/themes.js
@@ -0,0 +1,34 @@
+(function() {
+  var compileTheme, loadTheme;
+
+  loadTheme = function(name, cb) {
+    return $.ajax({
+      url: "/pace/templates/pace-theme-" + name + ".tmpl.css",
+      success: cb
+    });
+  };
+
+  compileTheme = function(body, vars) {
+    if (vars == null) {
+      vars = {};
+    }
+    return body.replace(/\{\{\s*([^\} \|]+)(?:\|"([^\} ]+)")?\s*\}\}/g, function(match, varName, def) {
+      var val;
+      val = vars[varName] || def;
+      if (val == null) {
+        throw "Theme Template Error: " + varName + " not provided";
+      }
+      return val;
+    });
+  };
+
+  if (typeof module !== "undefined" && module !== null) {
+    module.exports = {
+      compileTheme: compileTheme
+    };
+  } else {
+    window.loadTheme = loadTheme;
+    window.compileTheme = compileTheme;
+  }
+
+}).call(this);
diff --git a/docs/themes/index.html b/docs/themes/index.html
@@ -1,5 +1,6 @@
 <head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+  <script src="/pace/docs/lib/themes.js"></script>
   <style>
     body {
       margin: 0px;
@@ -92,11 +93,18 @@ <h2>Themes</h2>
         });
 
         $('iframe').load(function(){
-          $(this).contents().find('body').append('<link rel="stylesheet" href="/pace/pace-theme-' + $(this).data('theme') + '.css" />');
+          var $styleEl = $('<style>')
+          $(this).contents().find('body').append($styleEl);
+
+          loadTheme($(this).data('theme'), function(theme){
+            body = compileTheme(theme, {color: 'red'});
+
+            $styleEl.html(body);
+          });
 
           $(this).contents().find('.pace').addClass('pace-active');
         });
       })();
     </script>
   </div>
-</body>
+</body>
diff --git a/pace-theme-barber-shop.css b/pace-theme-barber-shop.css
@@ -1,3 +1,4 @@
+// This is a compiled file, you should be editing the file in templates/
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -59,4 +60,4 @@
 @keyframes pace-stripe-animation {
   0% { transform: none; transform: none; }
   100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
-}
+}
diff --git a/pace-theme-big-counter.css b/pace-theme-big-counter.css
@@ -1,3 +1,4 @@
+// This is a compiled file, you should be editing the file in templates/
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;

diff --git a/pace-theme-corner-indicator.css b/pace-theme-corner-indicator.css
@@ -1,3 +1,4 @@
+// This is a compiled file, you should be editing the file in templates/
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;

diff --git a/pace-theme-fill-left.css b/pace-theme-fill-left.css
@@ -1,3 +1,4 @@
+// This is a compiled file, you should be editing the file in templates/
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;

diff --git a/pace-theme-flash.css b/pace-theme-flash.css
@@ -1,3 +1,4 @@
+// This is a compiled file, you should be editing the file in templates/
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;

diff --git a/pace-theme-flat-top.css b/pace-theme-flat-top.css
@@ -1,3 +1,4 @@
+// This is a compiled file, you should be editing the file in templates/
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;

diff --git a/pace-theme-mac-osx.css b/pace-theme-mac-osx.css
@@ -1,3 +1,4 @@
+// This is a compiled file, you should be editing the file in templates/
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;

diff --git a/pace-theme-minimal.css b/pace-theme-minimal.css
@@ -1,3 +1,4 @@
+// This is a compiled file, you should be editing the file in templates/
 .pace .pace-progress {
   background: #29d;
   position: fixed;

diff --git a/templates/pace-theme-barber-shop.tmpl.css b/templates/pace-theme-barber-shop.tmpl.css
@@ -0,0 +1,62 @@
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.pace .pace-progress {
+  background-color: {{ color|"#29d" }};
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  height: 12px;
+  overflow: hidden;
+}
+
+.pace .pace-progress-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -32px;
+  bottom: 0;
+
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  -webkit-background-size: 32px 32px;
+  -moz-background-size: 32px 32px;
+  -o-background-size: 32px 32px;
+  background-size: 32px 32px;
+
+  -webkit-animation: pace-stripe-animation 500ms linear infinite;
+  -moz-animation: pace-stripe-animation 500ms linear infinite;
+  -ms-animation: pace-stripe-animation 500ms linear infinite;
+  -o-animation: pace-stripe-animation 500ms linear infinite;
+  animation: pace-stripe-animation 500ms linear infinite;
+}
+
+@-webkit-keyframes pace-stripe-animation {
+  0% { -webkit-transform: none; transform: none; }
+  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}
+@-moz-keyframes pace-stripe-animation {
+  0% { -moz-transform: none; transform: none; }
+  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}
+@-o-keyframes pace-stripe-animation {
+  0% { -o-transform: none; transform: none; }
+  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}
+@-ms-keyframes pace-stripe-animation {
+  0% { -ms-transform: none; transform: none; }
+  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}
+@keyframes pace-stripe-animation {
+  0% { transform: none; transform: none; }
+  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
+}
diff --git a/templates/pace-theme-big-counter.tmpl.css b/templates/pace-theme-big-counter.tmpl.css
@@ -0,0 +1,31 @@
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.pace .pace-progress {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  right: 0;
+  height: 5rem;
+  width: 5rem;
+}
+
+.pace .pace-progress:after {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: .5rem;
+  content: attr(data-progress);
+  font-family: "Helvetica Neue", sans-serif;
+  font-weight: 100;
+  font-size: 5rem;
+  line-height: 1;
+  text-align: right;
+  color: #444;
+  color: rgba(0, 0, 0, 0.2);
+}
diff --git a/templates/pace-theme-corner-indicator.tmpl.css b/templates/pace-theme-corner-indicator.tmpl.css
@@ -0,0 +1,69 @@
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.pace .pace-activity {
+  display: block;
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  right: 0;
+  width: 300px;
+  height: 300px;
+  background: #29d;
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
+  transform: translateX(100%) translateY(-100%) rotate(45deg);
+  pointer-events: none;
+}
+
+.pace.pace-active .pace-activity {
+  -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
+  transform: translateX(50%) translateY(-50%) rotate(45deg);
+}
+
+.pace .pace-activity::before,
+.pace .pace-activity::after {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    display: block;
+    border: 5px solid #fff;
+    border-radius: 50%;
+    content: '';
+}
+
+.pace .pace-activity::before {
+    margin-left: -40px;
+    width: 80px;
+    height: 80px;
+    border-right-color: rgba(0, 0, 0, .2);
+    border-left-color: rgba(0, 0, 0, .2);
+    -webkit-animation: pace-rotation 3s linear infinite;
+    animation: pace-rotation 3s linear infinite;
+}
+
+.pace .pace-activity::after {
+    bottom: 50px;
+    margin-left: -20px;
+    width: 40px;
+    height: 40px;
+    border-top-color: rgba(0, 0, 0, .2);
+    border-bottom-color: rgba(0, 0, 0, .2);
+    -webkit-animation: pace-rotation 1s linear infinite;
+    animation: pace-rotation 1s linear infinite;
+}
+
+@-webkit-keyframes pace-rotation {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@keyframes pace-rotation {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}
diff --git a/templates/pace-theme-fill-left.tmpl.css b/templates/pace-theme-fill-left.tmpl.css
@@ -0,0 +1,16 @@
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.pace .pace-progress {
+  background-color: rgba(0, 0, 0, 0.2);
+  position: fixed;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}