Precompile Handlebars templates

This commit is contained in:
Mattias Erming 2014-08-25 16:13:47 -07:00
parent 6d06e7020e
commit fb6ac7168e
11 changed files with 217 additions and 94 deletions

18
build.sh Executable file
View File

@ -0,0 +1,18 @@
#!/bin/bash
#
# This file will compile the javascript libraries and
# the Handlebars templates.
#
# Install Handlebars
if ! type handlebars &> /dev/null; then
sudo npm -g install handlebars
fi
# Compile the templates
handlebars -e tpl -f client/js/shout.templates.js client/templates/
# Uglify the javascript libraries
# See: Gruntfile.js
grunt uglify

File diff suppressed because one or more lines are too long

View File

@ -150,90 +150,6 @@
</div> </div>
</div> </div>
<div id="templates">
<script type="text/html" class="networks">
{{#each networks}}
<section id="network-{{id}}" class="network">
{{partial "channels"}}
</section>
{{/each}}
</script>
<script type="text/html" class="channels">
{{#each channels}}
<button data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}}">
<span class="badge"></span>
<span class="close"></span>
{{name}}
</button>
{{/each}}
</script>
<script type="text/html" class="chat">
{{#each channels}}
<div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan {{type}}">
<div class="header">
<button class="lt"></button>
<button class="rt"></button>
<span class="title">{{name}}</span>
<span class="topic">{{type}} </span>
</div>
<div class="chat">
{{#equal 100 messages.length}}
<button class="show-more" data-id="{{id}}">
Show more
</button>
{{/equal}}
<div class="messages">
{{partial "messages"}}
</div>
</div>
<aside class="sidebar">
<div class="users">
{{partial "users"}}
</div>
</aside>
</div>
{{/each}}
</script>
<script type="text/html" class="users">
{{#if users.length}}
<div class="count">
<input class="search" placeholder="{{users.length}} users">
</div>
{{/if}}
<div class="names">
{{#each users}}
<button class="user">{{mode}}{{name}}</button>
{{/each}}
</div>
</script>
<script type="text/html" class="messages">
{{#each messages}}
<div class="msg {{type}}">
<span class="time">
{{tz time}}
</span>
<span class="from">
{{#if from}}
<button class="user">{{from}}</button>
{{/if}}
</span>
<span class="text">
<em class="type">{{type}}</em>
{{#equal type "image"}}
<img src="{{text}}" class="image">
{{else}}
{{{uri text}}}
{{/equal}}
</span>
</div>
{{/each}}
</script>
</div>
<% if (debug) { %> <% if (debug) { %>
<script src="js/libs/favico.js"></script> <script src="js/libs/favico.js"></script>
<script src="js/libs/handlebars.js"></script> <script src="js/libs/handlebars.js"></script>

View File

@ -41,10 +41,8 @@ $(function() {
animation: "none" animation: "none"
}); });
var tpl = [];
function render(name, data) { function render(name, data) {
tpl[name] = tpl[name] || Handlebars.compile($("#templates ." + name).html()); return Handlebars.templates[name](data);
return tpl[name](data);
} }
Handlebars.registerHelper( Handlebars.registerHelper(
@ -84,7 +82,7 @@ $(function() {
} }
sidebar.find(".networks").html( sidebar.find(".networks").html(
render("networks", { render("network", {
networks: data.networks networks: data.networks
}) })
); );
@ -117,7 +115,7 @@ $(function() {
var id = data.network; var id = data.network;
var network = sidebar.find("#network-" + id); var network = sidebar.find("#network-" + id);
network.append( network.append(
render("channels", { render("chan", {
channels: [data.chan] channels: [data.chan]
}) })
); );
@ -141,7 +139,7 @@ $(function() {
target = "#chan-" + target; target = "#chan-" + target;
chat.find(target) chat.find(target)
.find(".messages") .find(".messages")
.append(render("messages", {messages: [data.msg]})) .append(render("msg", {messages: [data.msg]}))
.trigger("msg", [ .trigger("msg", [
target, target,
data.msg data.msg
@ -155,14 +153,14 @@ $(function() {
.remove() .remove()
.end() .end()
.find(".messages") .find(".messages")
.prepend(render("messages", {messages: data.messages})) .prepend(render("msg", {messages: data.messages}))
.end(); .end();
}); });
socket.on("network", function(data) { socket.on("network", function(data) {
sidebar.find(".empty").hide(); sidebar.find(".empty").hide();
sidebar.find(".networks").append( sidebar.find(".networks").append(
render("networks", { render("network", {
networks: [data.network] networks: [data.network]
}) })
); );
@ -215,7 +213,7 @@ $(function() {
socket.on("users", function(data) { socket.on("users", function(data) {
chat.find("#chan-" + data.chan) chat.find("#chan-" + data.chan)
.find(".users") .find(".users")
.html(render("users", data)); .html(render("user", data));
}); });
$("#connect") $("#connect")

View File

@ -0,0 +1,122 @@
(function() {
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['chan'] = template({"1":function(depth0,helpers,partials,data) {
var helper, functionType="function", escapeExpression=this.escapeExpression;
return "\n<button data-id=\""
+ escapeExpression(((helper = helpers.id || (depth0 && depth0.id)),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+ "\" data-target=\"#chan-"
+ escapeExpression(((helper = helpers.id || (depth0 && depth0.id)),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+ "\" data-title=\""
+ escapeExpression(((helper = helpers.name || (depth0 && depth0.name)),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper)))
+ "\" class=\"chan "
+ escapeExpression(((helper = helpers.type || (depth0 && depth0.type)),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
+ "\">\n <span class=\"badge\"></span>\n <span class=\"close\"></span>\n "
+ escapeExpression(((helper = helpers.name || (depth0 && depth0.name)),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper)))
+ "\n</button>\n";
},"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {
var stack1, buffer = "";
stack1 = helpers.each.call(depth0, (depth0 && depth0.channels), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
if(stack1 || stack1 === 0) { buffer += stack1; }
return buffer + "\n";
},"useData":true});
templates['chat'] = template({"1":function(depth0,helpers,partials,data) {
var stack1, helper, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing, buffer = "\n<div id=\"chan-"
+ escapeExpression(((helper = helpers.id || (depth0 && depth0.id)),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+ "\" data-id=\""
+ escapeExpression(((helper = helpers.id || (depth0 && depth0.id)),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+ "\" data-type=\""
+ escapeExpression(((helper = helpers.type || (depth0 && depth0.type)),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
+ "\" class=\"chan "
+ escapeExpression(((helper = helpers.type || (depth0 && depth0.type)),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
+ "\">\n <div class=\"header\">\n <button class=\"lt\"></button>\n <button class=\"rt\"></button>\n <span class=\"title\">"
+ escapeExpression(((helper = helpers.name || (depth0 && depth0.name)),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper)))
+ "</span>\n <span class=\"topic\">"
+ escapeExpression(((helper = helpers.type || (depth0 && depth0.type)),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
+ " </span>\n </div>\n <div class=\"chat\">\n ";
stack1 = (helper = helpers.equal || (depth0 && depth0.equal) || helperMissing,helper.call(depth0, 100, ((stack1 = (depth0 && depth0.messages)),stack1 == null || stack1 === false ? stack1 : stack1.length), {"name":"equal","hash":{},"fn":this.program(2, data),"inverse":this.noop,"data":data}));
if(stack1 || stack1 === 0) { buffer += stack1; }
return buffer + "\n <div class=\"messages\">\n "
+ escapeExpression((helper = helpers.partial || (depth0 && depth0.partial) || helperMissing,helper.call(depth0, "msg", {"name":"partial","hash":{},"data":data})))
+ "\n </div>\n </div>\n <aside class=\"sidebar\">\n <div class=\"users\">\n "
+ escapeExpression((helper = helpers.partial || (depth0 && depth0.partial) || helperMissing,helper.call(depth0, "user", {"name":"partial","hash":{},"data":data})))
+ "\n </div>\n </aside>\n</div>\n";
},"2":function(depth0,helpers,partials,data) {
var helper, functionType="function", escapeExpression=this.escapeExpression;
return "\n <button class=\"show-more\" data-id=\""
+ escapeExpression(((helper = helpers.id || (depth0 && depth0.id)),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+ "\">\n Show more\n </button>\n ";
},"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {
var stack1, buffer = "";
stack1 = helpers.each.call(depth0, (depth0 && depth0.channels), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
if(stack1 || stack1 === 0) { buffer += stack1; }
return buffer + "\n";
},"useData":true});
templates['msg'] = template({"1":function(depth0,helpers,partials,data) {
var stack1, helper, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing, buffer = "\n<div class=\"msg "
+ escapeExpression(((helper = helpers.type || (depth0 && depth0.type)),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
+ "\">\n <span class=\"time\">\n "
+ escapeExpression((helper = helpers.tz || (depth0 && depth0.tz) || helperMissing,helper.call(depth0, (depth0 && depth0.time), {"name":"tz","hash":{},"data":data})))
+ "\n </span>\n <span class=\"from\">\n ";
stack1 = helpers['if'].call(depth0, (depth0 && depth0.from), {"name":"if","hash":{},"fn":this.program(2, data),"inverse":this.noop,"data":data});
if(stack1 || stack1 === 0) { buffer += stack1; }
buffer += "\n </span>\n <span class=\"text\">\n <em class=\"type\">"
+ escapeExpression(((helper = helpers.type || (depth0 && depth0.type)),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
+ "</em>\n ";
stack1 = (helper = helpers.equal || (depth0 && depth0.equal) || helperMissing,helper.call(depth0, (depth0 && depth0.type), "image", {"name":"equal","hash":{},"fn":this.program(4, data),"inverse":this.program(6, data),"data":data}));
if(stack1 || stack1 === 0) { buffer += stack1; }
return buffer + "\n </span>\n</div>\n";
},"2":function(depth0,helpers,partials,data) {
var helper, functionType="function", escapeExpression=this.escapeExpression;
return "\n <button class=\"user\">"
+ escapeExpression(((helper = helpers.from || (depth0 && depth0.from)),(typeof helper === functionType ? helper.call(depth0, {"name":"from","hash":{},"data":data}) : helper)))
+ "</button>\n ";
},"4":function(depth0,helpers,partials,data) {
var helper, functionType="function", escapeExpression=this.escapeExpression;
return "\n <img src=\""
+ escapeExpression(((helper = helpers.text || (depth0 && depth0.text)),(typeof helper === functionType ? helper.call(depth0, {"name":"text","hash":{},"data":data}) : helper)))
+ "\" class=\"image\">\n ";
},"6":function(depth0,helpers,partials,data) {
var stack1, helper, helperMissing=helpers.helperMissing, buffer = "\n ";
stack1 = (helper = helpers.uri || (depth0 && depth0.uri) || helperMissing,helper.call(depth0, (depth0 && depth0.text), {"name":"uri","hash":{},"data":data}));
if(stack1 || stack1 === 0) { buffer += stack1; }
return buffer + "\n ";
},"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {
var stack1, buffer = "";
stack1 = helpers.each.call(depth0, (depth0 && depth0.messages), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
if(stack1 || stack1 === 0) { buffer += stack1; }
return buffer + "\n";
},"useData":true});
templates['network'] = template({"1":function(depth0,helpers,partials,data) {
var helper, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing;
return "\n<section id=\"network-"
+ escapeExpression(((helper = helpers.id || (depth0 && depth0.id)),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+ "\" class=\"network\">\n "
+ escapeExpression((helper = helpers.partial || (depth0 && depth0.partial) || helperMissing,helper.call(depth0, "chan", {"name":"partial","hash":{},"data":data})))
+ "\n</section>\n";
},"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {
var stack1, buffer = "";
stack1 = helpers.each.call(depth0, (depth0 && depth0.networks), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
if(stack1 || stack1 === 0) { buffer += stack1; }
return buffer + "\n";
},"useData":true});
templates['user'] = template({"1":function(depth0,helpers,partials,data) {
var stack1, functionType="function", escapeExpression=this.escapeExpression;
return "\n<div class=\"count\">\n <input class=\"search\" placeholder=\""
+ escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.users)),stack1 == null || stack1 === false ? stack1 : stack1.length)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+ " users\">\n</div>\n";
},"3":function(depth0,helpers,partials,data) {
var helper, functionType="function", escapeExpression=this.escapeExpression;
return "\n <button class=\"user\">"
+ escapeExpression(((helper = helpers.mode || (depth0 && depth0.mode)),(typeof helper === functionType ? helper.call(depth0, {"name":"mode","hash":{},"data":data}) : helper)))
+ escapeExpression(((helper = helpers.name || (depth0 && depth0.name)),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper)))
+ "</button>\n ";
},"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {
var stack1, buffer = "";
stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.users)),stack1 == null || stack1 === false ? stack1 : stack1.length), {"name":"if","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
if(stack1 || stack1 === 0) { buffer += stack1; }
buffer += "\n<div class=\"names\">\n ";
stack1 = helpers.each.call(depth0, (depth0 && depth0.users), {"name":"each","hash":{},"fn":this.program(3, data),"inverse":this.noop,"data":data});
if(stack1 || stack1 === 0) { buffer += stack1; }
return buffer + "\n</div>\n";
},"useData":true});
})();

View File

@ -0,0 +1,7 @@
{{#each channels}}
<button data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}}">
<span class="badge"></span>
<span class="close"></span>
{{name}}
</button>
{{/each}}

25
client/templates/chat.tpl Normal file
View File

@ -0,0 +1,25 @@
{{#each channels}}
<div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan {{type}}">
<div class="header">
<button class="lt"></button>
<button class="rt"></button>
<span class="title">{{name}}</span>
<span class="topic">{{type}} </span>
</div>
<div class="chat">
{{#equal 100 messages.length}}
<button class="show-more" data-id="{{id}}">
Show more
</button>
{{/equal}}
<div class="messages">
{{partial "msg"}}
</div>
</div>
<aside class="sidebar">
<div class="users">
{{partial "user"}}
</div>
</aside>
</div>
{{/each}}

20
client/templates/msg.tpl Normal file
View File

@ -0,0 +1,20 @@
{{#each messages}}
<div class="msg {{type}}">
<span class="time">
{{tz time}}
</span>
<span class="from">
{{#if from}}
<button class="user">{{from}}</button>
{{/if}}
</span>
<span class="text">
<em class="type">{{type}}</em>
{{#equal type "image"}}
<img src="{{text}}" class="image">
{{else}}
{{{uri text}}}
{{/equal}}
</span>
</div>
{{/each}}

View File

@ -0,0 +1,5 @@
{{#each networks}}
<section id="network-{{id}}" class="network">
{{partial "chan"}}
</section>
{{/each}}

10
client/templates/user.tpl Normal file
View File

@ -0,0 +1,10 @@
{{#if users.length}}
<div class="count">
<input class="search" placeholder="{{users.length}} users">
</div>
{{/if}}
<div class="names">
{{#each users}}
<button class="user">{{mode}}{{name}}</button>
{{/each}}
</div>

View File

@ -22,6 +22,7 @@
"irc", "irc",
"server" "server"
], ],
"license": "MIT",
"dependencies": { "dependencies": {
"commander": "^2.3.0", "commander": "^2.3.0",
"connect": "~2.19.6", "connect": "~2.19.6",