Added render() function

This commit is contained in:
Mattias Erming 2014-03-19 18:30:06 +01:00
parent 923dbcbeeb
commit e6679fc35b
3 changed files with 44 additions and 54 deletions

View File

@ -107,10 +107,14 @@ h2 {
} }
#chat .window { #chat .window {
background: #fff; background: #fff;
display: none;
height: 100%; height: 100%;
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
#chat .window.active {
display: block;
}
#chat .network .close, #chat .network .close,
#chat .network .users { #chat .network .users {
display: none; display: none;

View File

@ -58,12 +58,7 @@
<script type="text/html" id="network"> <script type="text/html" id="network">
{{#networks}} {{#networks}}
<div class="network list-group" data-id="{{id}}"> <div class="network list-group" data-id="{{id}}">
{{#channels}} {{> channels}}
<a href="{{name}}" class="channel list-group-item" data-id="{{id}}" data-name="{{name}}">
<span class="badge pull-right"></span>
{{name}}
</a>
{{/channels}}
</div> </div>
{{/networks}} {{/networks}}
</script> </script>
@ -89,20 +84,10 @@
<button class="close btn btn-danger btn-sm ">Leave</button> <button class="close btn btn-danger btn-sm ">Leave</button>
</div> </div>
<div class="users"> <div class="users">
{{#users}} {{> users}}
<a href="{{name}}" class="user">
{{mode}}{{name}}
</a>
{{/users}}
</div> </div>
<div class="messages"> <div class="messages">
{{#messages}} {{> messages}}
<div class="message {{type}}">
<span class="time">{{time}}</span>
<a href="{{user}}" class="user">{{mode}}{{user}}</a>
<span class="text">{{text}}</span>
</div>
{{/messages}}
</div> </div>
<form onSubmit="return false;"> <form onSubmit="return false;">
<input type="text" class="input" data-target="{{id}}"/> <input type="text" class="input" data-target="{{id}}"/>

View File

@ -7,36 +7,45 @@ $(function() {
"MESSAGES", "MESSAGES",
"USERS" "USERS"
], function(i, type) { ], function(i, type) {
socket.on(type, function(data) { socket.on(type, function(json) {
render(type, data); event(type, json);
}); });
}); });
var chat = $("#chat"); var chat = $("#chat");
var sidebar = $("#sidebar"); var sidebar = $("#sidebar");
// Templates var tpl = [];
var network_tpl = $("#network").html(); function render(id, json, partials) {
var channel_tpl = $("#channel").html(); tpl[id] = tpl[id] || $(id).html();
var window_tpl = $("#window").html(); if (!json) {
var message_tpl = $("#message").html(); // If no data is supplied, return the template instead.
var user_tpl = $("#user").html() // Used when fetching partials.
return tpl[id];
}
return Mustache.render(
tpl[id],
json,
partials || {}
);
}
function render(type, data) { function event(type, json) {
switch (type) { switch (type) {
case "NETWORKS": case "NETWORKS":
var html = ""; var html = "";
data.forEach(function(network) { var partials = {
html += Mustache.render(window_tpl, network); messages: render("#message"),
users: render("#user")
};
json.forEach(function(network) {
html += render("#window", network, partials);
}); });
$("#windows")[0].innerHTML = html; $("#windows")[0].innerHTML = html;
sidebar.find("#list").html( sidebar.find("#list").html(
Mustache.render(network_tpl, { render("#network", {networks: json}, {channels: render("#channel")})
networks: data
})
).find(".channel") ).find(".channel")
.first() .first()
.addClass("active"); .addClass("active");
@ -48,9 +57,9 @@ $(function() {
break; break;
case "CHANNELS": case "CHANNELS":
var target = data.target; var target = json.target;
if (data.action == "remove") { if (json.action == "remove") {
$("[data-id='" + data.data.id + "']").remove(); $("[data-id='" + json.data.id + "']").remove();
return; return;
} }
@ -60,18 +69,14 @@ $(function() {
.removeClass("active") .removeClass("active")
.end(); .end();
network = network.filter("[data-id='" + data.target + "']").append( network = network.filter("[data-id='" + json.target + "']").append(
Mustache.render(channel_tpl, { render("#channel", {channels: json.data})
channels: data.data
})
).find(".channel") ).find(".channel")
.last() .last()
.addClass("active"); .addClass("active");
$("#windows").append( $("#windows").append(
Mustache.render(window_tpl, { render("#window", {channels: json.data})
channels: data.data
})
).find(".window") ).find(".window")
.last() .last()
.bringToTop() .bringToTop()
@ -81,31 +86,27 @@ $(function() {
case "USERS": case "USERS":
var target; var target;
if (typeof data.target !== "undefined") { if (typeof json.target !== "undefined") {
target = chat.find(".window[data-id='" + data.target + "']"); target = chat.find(".window[data-id='" + json.target + "']");
} }
target = target.find(".users"); target = target.find(".users");
target.html(Mustache.render(user_tpl, { target.html(render("#user", {users: json.data}));
users: data.data
}));
break; break;
case "MESSAGES": case "MESSAGES":
var target; var target;
if (typeof data.target !== "undefined") { if (typeof json.target !== "undefined") {
target = chat.find(".window[data-id='" + data.target + "']"); target = chat.find(".window[data-id='" + json.target + "']");
} }
var message = data.data; var message = json.data;
if (message.type == "error") { if (message.type == "error") {
target = target.parent().find(".active"); target = target.parent().find(".active");
} }
target = target.find(".messages"); target = target.find(".messages");
target.append(Mustache.render(message_tpl, { target.append(render("#message", {messages: message}));
messages: message
}));
break; break;
} }