Use a single function to process and render messages

This commit is contained in:
Pavel Djundik 2016-01-20 15:32:14 +02:00
parent 3e85130d17
commit 7a9bc41b30
3 changed files with 45 additions and 27 deletions

View File

@ -130,6 +130,7 @@ $(function() {
channels: channels
})
);
channels.forEach(renderChannelMessages);
confirmExit();
}
@ -172,6 +173,7 @@ $(function() {
channels: [data.chan]
})
);
renderChannelMessages(data.chan);
var chan = sidebar.find(".chan")
.sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
.last();
@ -182,7 +184,7 @@ $(function() {
chan.click();
});
socket.on("msg", function(data) {
function buildChatMessage(data) {
var target = "#chan-" + data.chan;
if (data.msg.type === "error") {
target = "#chan-" + chat.find(".active").data("id");
@ -191,13 +193,7 @@ $(function() {
var chan = chat.find(target);
var from = data.msg.from;
var msg = $(render("msg", {messages: [data.msg]}));
chan.find(".messages")
.append(msg)
.trigger("msg", [
target,
data.msg
]);
var msg = $(render("msg", data.msg));
var text = msg.find(".text");
if (text.find("i").size() === 1) {
@ -224,10 +220,7 @@ $(function() {
}
});
if (!chan.hasClass("channel")) {
return;
}
if (chan.hasClass("channel")) {
var type = data.msg.type;
if (type === "message" || type === "action") {
var nicks = chan.find(".users").data("nicks");
@ -238,14 +231,43 @@ $(function() {
}
}
}
}
return msg;
}
function buildChannelMessages(channel, messages) {
return messages.reduce(function(docFragment, message) {
docFragment.append(buildChatMessage({
chan: channel,
msg: message
}));
return docFragment;
}, $(document.createDocumentFragment()));
}
function renderChannelMessages(data) {
var documentFragment = buildChannelMessages(data.id, data.messages);
chat.find("#chan-" + data.id + " .messages").append(documentFragment);
}
socket.on("msg", function(data) {
var msg = buildChatMessage(data);
var target = "#chan-" + data.chan;
chat.find(target + " .messages")
.append(msg)
.trigger("msg", [
target,
data.msg
]);
});
socket.on("more", function(data) {
var target = data.chan;
var documentFragment = buildChannelMessages(data.chan, data.messages);
var chan = chat
.find("#chan-" + target)
.find("#chan-" + data.chan)
.find(".messages")
.prepend(render("msg", {messages: data.messages}))
.prepend(documentFragment)
.end();
if (data.messages.length !== 100) {
chan.find(".show-more").removeClass("show");

View File

@ -25,9 +25,7 @@
Show more
</button>
</div>
<div class="messages">
{{partial "msg"}}
</div>
<div class="messages"></div>
</div>
<aside class="sidebar">
<div class="users">

View File

@ -1,4 +1,3 @@
{{#each messages}}
<div class="msg {{type}} {{#if self}}self{{/if}}">
<span class="time">
{{tz time}}
@ -22,4 +21,3 @@
{{/equal}}
</span>
</div>
{{/each}}