supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use handlebars instead of mustache

Browse Source
This commit is contained in:
Mattias Erming 2014-04-20 23:48:05 +02:00
parent 145eaa7279
commit 9e860b14d7
3 changed files with 41 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
client/index.html
View File

@ -53,23 +53,25 @@
</div>
</div>
<script type="text/html" id="networks">
{{#networks}}
<script type="text/x-handlebars-template" id="networks">
{{#each networks}}
<div id="network-{{id}}" class="network list-group">
{{> channels}}
{{partial "#channels"}}
</div>
{{/networks}}
{{/each}}
</script>
<script type="text/html" id="channels">
{{#channels}}
<script type="text/x-handlebars-template" id="channels">
{{#each channels}}
<a href="{{name}}" id="channel-{{id}}" class="channel list-group-item">
<span class="badge pull-right"></span>
{{name}}
</a>
{{/channels}}
{{/each}}
</script>
<script type="text/html" id="windows">
{{#windows}}
<script type="text/x-handlebars-template" id="windows">
{{#each windows}}
<div id="window-{{id}}" class="window {{type}}">
<div class="title">
<div class="toggle">
@ -82,42 +84,44 @@
</button>
</div>
<div class="users">
{{> users}}
{{partial "#users"}}
</div>
<div class="messages">
{{> messages}}
{{partial "#messages"}}
</div>
<form onSubmit="return false;">
<input type="text" class="input" data-target="{{id}}"/>
<input type="submit" style="display: none;"/>
</form>
</div>
{{/windows}}
{{/each}}
</script>
<script type="text/html" id="users">
<script type="text/x-handlebars-template" id="users">
<div class="count">
Users: {{users.length}}
</div>
{{#users}}
{{#each users}}
<div class="user">
{{name}}
</div>
{{/users}}
{{/each}}
</script>
<script type="text/html" id="messages">
{{#messages}}
<script type="text/x-handlebars-template" id="messages">
{{#each messages}}
<div class="message {{type}}">
<div class="time">{{time}}</div>
<div class="user">{{from}}</div>
<div class="type">{{type}}</div>
<div class="text">{{message}}</div>
</div>
{{/messages}}
{{/each}}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/URI.js/1.11.2/URI.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

49
client/js/chat.js
View File

@ -30,39 +30,31 @@ $(function() {
});
var tpl = [];
function render(id, json, partials) {
tpl[id] = tpl[id] || $(id).html();
if (!json) {
// If no data is supplied, return the template instead.
// Handy when fetching partials.
return tpl[id];
}
return Mustache.render(
tpl[id],
json,
partials || {}
);
function render(id, json) {
tpl[id] = tpl[id] || Handlebars.compile($(id).html());
return tpl[id](json);
}
Handlebars.registerHelper(
"partial",
function(id) {
return new Handlebars.SafeString(render(id, this));
}
);
function handleEvent(event, json) {
var data = json.data;
switch (event) {
case "network":
var html = "";
var partials = {
users: render("#users"),
messages: render("#messages"),
};
data.forEach(function(n) {
html += render(
"#windows", {windows: n.channels}, partials
);
html += render("#windows", {windows: n.channels});
});
chat[0].innerHTML = html;
sidebar.find("#list").html(
render("#networks", {networks: data}, {channels: render("#channels")})
render("#networks", {networks: data})
).find(".channel")
.first()
.addClass("active")
@ -104,13 +96,13 @@ $(function() {
sidebar.find(".channel").removeClass("active");
$("#network-" + json.target).append(
render("#channels", {channels: data})
render("#channels", {channels: [data]})
).find(".channel")
.last()
.addClass("active");
chat.append(
render("#windows", {windows: data})
render("#windows", {windows: [data]})
).find(".window")
.last()
.find("input")
@ -124,8 +116,8 @@ $(function() {
break;
case "user":
var target = chat.find("#window-" + json.target).find(".users");
target.html(render("#users", {users: data}));
var html = render("#users", {users: data});
var target = chat.find("#window-" + json.target + " .users").html(html);
break;
case "message":
@ -138,7 +130,7 @@ $(function() {
target = target.parent().find(".active");
}
var msg = $(render("#messages", {messages: data}))
var msg = $(render("#messages", {messages: [data]}));
target = target.find(".messages");
target.append(msg);
@ -253,13 +245,6 @@ $(function() {
$(this).closest(".window").find(".messages").scrollToBottom();
});
chat.on("mouseover", ".text", function() {
var self = $(this);
if (!self.hasClass("parsed")) {
self.addClass("parsed").html(uri(self.html()));
}
});
function uri(text) {
return URI.withinString(text, function(url) {
return "<a href='" + url + "' target='_blank'>" + url + "</a>";

2
lib/models.js
View File

@ -30,7 +30,7 @@ models.Message = Backbone.Model.extend({
defaults: {
type: "",
time: "",
from: "",
from: "-!-",
message: "",
},
initialize: function() {