Skip to content

Commit fbcb989

Browse files
zackbloomzackbloom
committed
Simplify template syntax
1 parent 96294ff commit fbcb989

15 files changed

Lines changed: 110 additions & 39 deletions

‎docs/lib/color.js‎

Lines changed: 24 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/lib/themes.coffee‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
1+
if module?
2+
vm = require('vm')
3+
4+
# Used by the eval'd code
5+
Color = require('color')
6+
17
loadTheme = (name, cb) ->
28
$.ajax
39
url: "/pace/templates/pace-theme-#{ name }.tmpl.css"
410
success: cb
511

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+
compileTheme = (body, args={}) ->
13+
body.replace /`([\s\S]*?)`/gm, (match, code) ->
14+
if module?
15+
val = vm.runInNewContext code, {args, Color}
16+
else
17+
# It matters that args is in the context
18+
Color = window.Color
19+
val = eval(code)
20+
console.log(val)
1221

1322
val
1423

‎docs/lib/themes.js‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
(function() {
2-
var compileTheme, loadTheme;
2+
var Color, compileTheme, loadTheme, vm;
3+
4+
if (typeof module !== "undefined" && module !== null) {
5+
vm = require('vm');
6+
Color = require('color');
7+
}
38

49
loadTheme = function(name, cb) {
510
return $.ajax({
@@ -8,15 +13,21 @@
813
});
914
};
1015

11-
compileTheme = function(body, vars) {
12-
if (vars == null) {
13-
vars = {};
16+
compileTheme = function(body, args) {
17+
if (args == null) {
18+
args = {};
1419
}
15-
return body.replace(/\{\{\s*([^\} \|]+)(?:\|"([^"]+)")?\s*\}\}/g, function(match, varName, def) {
20+
return body.replace(/`([\s\S]*?)`/gm, function(match, code) {
1621
var val;
17-
val = vars[varName] || def;
18-
if (val == null) {
19-
throw "Theme Template Error: " + varName + " not provided";
22+
if (typeof module !== "undefined" && module !== null) {
23+
val = vm.runInNewContext(code, {
24+
args: args,
25+
Color: Color
26+
});
27+
} else {
28+
Color = window.Color;
29+
val = eval(code);
30+
console.log(val);
2031
}
2132
return val;
2233
});

‎docs/themes/index.html‎

Lines changed: 10 additions & 1 deletion
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/color.js"></script>
34
<script src="/pace/docs/lib/themes.js"></script>
45
<style>
56
body {
@@ -126,7 +127,15 @@ <h2>Themes</h2>
126127
location.href = 'data:text/css,' + encodeURIComponent(cssCache[theme]);
127128
};
128129

129-
$('iframe').load(function(){ initFrame(this); });
130+
$('iframe').load(function(){
131+
var _this = this;
132+
133+
// For some strange reason, the Color library we depend on defines itself
134+
// asyncronously
135+
setTimeout(function(){
136+
initFrame(_this);
137+
}, 0);
138+
});
130139

131140
$('input[type="color"]').change(function(){
132141
updateColor($(this).val());

‎pace-theme-flash.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
// This is a compiled file, you should be editing the file in templates/
2-
// This is a compiled file, you should be editing the file in templates/
32
.pace {
43
-webkit-pointer-events: none;
54
pointer-events: none;

‎pace-theme-mac-osx.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
// This is a compiled file, you should be editing the file in templates/
2-
// This is a compiled file, you should be editing the file in templates/
32
.pace {
43
-webkit-pointer-events: none;
54
pointer-events: none;
@@ -14,6 +13,8 @@
1413

1514
.pace .pace-progress {
1615
background-color: #78c0f0;
16+
17+
color: #CBE7F9;
1718
position: fixed;
1819
z-index: 100;
1920
top: 0;
@@ -36,10 +37,13 @@
3637
left: 0;
3738
right: -28px;
3839
bottom: 0;
39-
background-image: -webkit-radial-gradient(rgba(21, 146, 226, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
40-
background-image: -moz-radial-gradient(rgba(21, 146, 226, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
41-
background-image: -o-radial-gradient(rgba(21, 146, 226, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
42-
background-image: radial-gradient(rgba(21, 146, 226, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
40+
41+
background-image: -o-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
42+
background-image: -moz-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
43+
background-image: -webkit-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
44+
background-image: radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
45+
46+
4347
-webkit-background-size: 28px 100%;
4448
-moz-background-size: 28px 100%;
4549
-o-background-size: 28px 100%;

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"grunt-contrib-uglify": "~0.2.4",
1111
"grunt-cli": "~0.1.9",
1212
"grunt": "~0.4.1",
13-
"grunt-contrib-watch": "~0.5.3"
13+
"grunt-contrib-watch": "~0.5.3",
14+
"color": "~0.4.4"
1415
}
1516
}

‎templates/pace-theme-barber-shop.tmpl.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212

1313
.pace .pace-progress {
14-
background-color: {{ color|"#29d" }};
14+
background-color: `args.color || "#29d"`;
1515
position: fixed;
1616
z-index: 100;
1717
top: 0;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,6 @@
2626
font-size: 5rem;
2727
line-height: 1;
2828
text-align: right;
29-
color: {{ color|"#444" }};
29+
color: `args.color || "#444"`;
3030
color: rgba(0, 0, 0, 0.2);
3131
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
right: 0;
1515
width: 300px;
1616
height: 300px;
17-
background: {{ color|"#29d" }};
17+
background: `args.color || "#29d"`;
1818
-webkit-transition: -webkit-transform 0.3s;
1919
transition: transform 0.3s;
2020
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);

0 commit comments

Comments
 (0)