Added render() function
This commit is contained in:
Mattias Erming
parent
923dbcbeeb
commit
e6679fc35b
|
|
@ -107,10 +107,14 @@ h2 {
|
|||
}
|
||||
#chat .window {
|
||||
background: #fff;
|
||||
display: none;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
#chat .window.active {
|
||||
display: block;
|
||||
}
|
||||
#chat .network .close,
|
||||
#chat .network .users {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -58,12 +58,7 @@
|
|||
<script type="text/html" id="network">
|
||||
{{#networks}}
|
||||
<div class="network list-group" data-id="{{id}}">
|
||||
{{#channels}}
|
||||
<a href="{{name}}" class="channel list-group-item" data-id="{{id}}" data-name="{{name}}">
|
||||
<span class="badge pull-right"></span>
|
||||
{{name}}
|
||||
</a>
|
||||
{{/channels}}
|
||||
{{> channels}}
|
||||
</div>
|
||||
{{/networks}}
|
||||
</script>
|
||||
|
|
@ -89,20 +84,10 @@
|
|||
<button class="close btn btn-danger btn-sm ">Leave</button>
|
||||
</div>
|
||||
<div class="users">
|
||||
{{#users}}
|
||||
<a href="{{name}}" class="user">
|
||||
{{mode}}{{name}}
|
||||
</a>
|
||||
{{/users}}
|
||||
{{> users}}
|
||||
</div>
|
||||
<div class="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}}
|
||||
{{> messages}}
|
||||
</div>
|
||||
<form onSubmit="return false;">
|
||||
<input type="text" class="input" data-target="{{id}}"/>
|
||||
|
|
|
|||
|
|
@ -7,36 +7,45 @@ $(function() {
|
|||
"MESSAGES",
|
||||
"USERS"
|
||||
], function(i, type) {
|
||||
socket.on(type, function(data) {
|
||||
render(type, data);
|
||||
socket.on(type, function(json) {
|
||||
event(type, json);
|
||||
});
|
||||
});
|
||||
|
||||
var chat = $("#chat");
|
||||
var sidebar = $("#sidebar");
|
||||
|
||||
// Templates
|
||||
var network_tpl = $("#network").html();
|
||||
var channel_tpl = $("#channel").html();
|
||||
var window_tpl = $("#window").html();
|
||||
var message_tpl = $("#message").html();
|
||||
var user_tpl = $("#user").html()
|
||||
var tpl = [];
|
||||
function render(id, json, partials) {
|
||||
tpl[id] = tpl[id] || $(id).html();
|
||||
if (!json) {
|
||||
// If no data is supplied, return the template instead.
|
||||
// Used when fetching partials.
|
||||
return tpl[id];
|
||||
}
|
||||
return Mustache.render(
|
||||
tpl[id],
|
||||
json,
|
||||
partials || {}
|
||||
);
|
||||
}
|
||||
|
||||
function render(type, data) {
|
||||
function event(type, json) {
|
||||
switch (type) {
|
||||
|
||||
case "NETWORKS":
|
||||
var html = "";
|
||||
data.forEach(function(network) {
|
||||
html += Mustache.render(window_tpl, network);
|
||||
var partials = {
|
||||
messages: render("#message"),
|
||||
users: render("#user")
|
||||
};
|
||||
json.forEach(function(network) {
|
||||
html += render("#window", network, partials);
|
||||
});
|
||||
|
||||
$("#windows")[0].innerHTML = html;
|
||||
|
||||
sidebar.find("#list").html(
|
||||
Mustache.render(network_tpl, {
|
||||
networks: data
|
||||
})
|
||||
render("#network", {networks: json}, {channels: render("#channel")})
|
||||
).find(".channel")
|
||||
.first()
|
||||
.addClass("active");
|
||||
|
|
@ -48,9 +57,9 @@ $(function() {
|
|||
break;
|
||||
|
||||
case "CHANNELS":
|
||||
var target = data.target;
|
||||
if (data.action == "remove") {
|
||||
$("[data-id='" + data.data.id + "']").remove();
|
||||
var target = json.target;
|
||||
if (json.action == "remove") {
|
||||
$("[data-id='" + json.data.id + "']").remove();
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -60,18 +69,14 @@ $(function() {
|
|||
.removeClass("active")
|
||||
.end();
|
||||
|
||||
network = network.filter("[data-id='" + data.target + "']").append(
|
||||
Mustache.render(channel_tpl, {
|
||||
channels: data.data
|
||||
})
|
||||
network = network.filter("[data-id='" + json.target + "']").append(
|
||||
render("#channel", {channels: json.data})
|
||||
).find(".channel")
|
||||
.last()
|
||||
.addClass("active");
|
||||
|
||||
$("#windows").append(
|
||||
Mustache.render(window_tpl, {
|
||||
channels: data.data
|
||||
})
|
||||
render("#window", {channels: json.data})
|
||||
).find(".window")
|
||||
.last()
|
||||
.bringToTop()
|
||||
|
|
@ -81,31 +86,27 @@ $(function() {
|
|||
|
||||
case "USERS":
|
||||
var target;
|
||||
if (typeof data.target !== "undefined") {
|
||||
target = chat.find(".window[data-id='" + data.target + "']");
|
||||
if (typeof json.target !== "undefined") {
|
||||
target = chat.find(".window[data-id='" + json.target + "']");
|
||||
}
|
||||
|
||||
target = target.find(".users");
|
||||
target.html(Mustache.render(user_tpl, {
|
||||
users: data.data
|
||||
}));
|
||||
target.html(render("#user", {users: json.data}));
|
||||
break;
|
||||
|
||||
case "MESSAGES":
|
||||
var target;
|
||||
if (typeof data.target !== "undefined") {
|
||||
target = chat.find(".window[data-id='" + data.target + "']");
|
||||
if (typeof json.target !== "undefined") {
|
||||
target = chat.find(".window[data-id='" + json.target + "']");
|
||||
}
|
||||
|
||||
var message = data.data;
|
||||
var message = json.data;
|
||||
if (message.type == "error") {
|
||||
target = target.parent().find(".active");
|
||||
}
|
||||
|
||||
target = target.find(".messages");
|
||||
target.append(Mustache.render(message_tpl, {
|
||||
messages: message
|
||||
}));
|
||||
target.append(render("#message", {messages: message}));
|
||||
break;
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue