Merge pull request #596 from xPaw/history-via-msg
Use a single function to process and render messages
This commit is contained in:
commit
6c843e6a3d
|
@ -130,6 +130,7 @@ $(function() {
|
||||||
channels: channels
|
channels: channels
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
channels.forEach(renderChannelMessages);
|
||||||
confirmExit();
|
confirmExit();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -172,6 +173,7 @@ $(function() {
|
||||||
channels: [data.chan]
|
channels: [data.chan]
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
renderChannelMessages(data.chan);
|
||||||
var chan = sidebar.find(".chan")
|
var chan = sidebar.find(".chan")
|
||||||
.sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
|
.sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
|
||||||
.last();
|
.last();
|
||||||
|
@ -182,7 +184,7 @@ $(function() {
|
||||||
chan.click();
|
chan.click();
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("msg", function(data) {
|
function buildChatMessage(data) {
|
||||||
var target = "#chan-" + data.chan;
|
var target = "#chan-" + data.chan;
|
||||||
if (data.msg.type === "error") {
|
if (data.msg.type === "error") {
|
||||||
target = "#chan-" + chat.find(".active").data("id");
|
target = "#chan-" + chat.find(".active").data("id");
|
||||||
|
@ -191,13 +193,7 @@ $(function() {
|
||||||
var chan = chat.find(target);
|
var chan = chat.find(target);
|
||||||
var from = data.msg.from;
|
var from = data.msg.from;
|
||||||
|
|
||||||
var msg = $(render("msg", {messages: [data.msg]}));
|
var msg = $(render("msg", data.msg));
|
||||||
chan.find(".messages")
|
|
||||||
.append(msg)
|
|
||||||
.trigger("msg", [
|
|
||||||
target,
|
|
||||||
data.msg
|
|
||||||
]);
|
|
||||||
|
|
||||||
var text = msg.find(".text");
|
var text = msg.find(".text");
|
||||||
if (text.find("i").size() === 1) {
|
if (text.find("i").size() === 1) {
|
||||||
|
@ -224,10 +220,7 @@ $(function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!chan.hasClass("channel")) {
|
if (chan.hasClass("channel")) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var type = data.msg.type;
|
var type = data.msg.type;
|
||||||
if (type === "message" || type === "action") {
|
if (type === "message" || type === "action") {
|
||||||
var nicks = chan.find(".users").data("nicks");
|
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) {
|
socket.on("more", function(data) {
|
||||||
var target = data.chan;
|
var documentFragment = buildChannelMessages(data.chan, data.messages);
|
||||||
var chan = chat
|
var chan = chat
|
||||||
.find("#chan-" + target)
|
.find("#chan-" + data.chan)
|
||||||
.find(".messages")
|
.find(".messages")
|
||||||
.prepend(render("msg", {messages: data.messages}))
|
.prepend(documentFragment)
|
||||||
.end();
|
.end();
|
||||||
if (data.messages.length !== 100) {
|
if (data.messages.length !== 100) {
|
||||||
chan.find(".show-more").removeClass("show");
|
chan.find(".show-more").removeClass("show");
|
||||||
|
|
|
@ -50,9 +50,7 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) {
|
||||||
if (stack1 != null) { buffer += stack1; }
|
if (stack1 != null) { buffer += stack1; }
|
||||||
return buffer + "\">\n <button class=\"show-more-button\" data-id=\""
|
return buffer + "\">\n <button class=\"show-more-button\" data-id=\""
|
||||||
+ escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
|
+ escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
|
||||||
+ "\">\n Show more\n </button>\n </div>\n <div class=\"messages\">\n "
|
+ "\">\n Show more\n </button>\n </div>\n <div class=\"messages\"></div>\n </div>\n <aside class=\"sidebar\">\n <div class=\"users\">\n "
|
||||||
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "msg", {"name":"partial","hash":{},"data":data})))
|
|
||||||
+ "\n </div>\n </div>\n <aside class=\"sidebar\">\n <div class=\"users\">\n "
|
|
||||||
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "user", {"name":"partial","hash":{},"data":data})))
|
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "user", {"name":"partial","hash":{},"data":data})))
|
||||||
+ "\n </div>\n </aside>\n</div>\n";
|
+ "\n </div>\n </aside>\n</div>\n";
|
||||||
},"2":function(depth0,helpers,partials,data) {
|
},"2":function(depth0,helpers,partials,data) {
|
||||||
|
@ -75,25 +73,8 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) {
|
||||||
return buffer;
|
return buffer;
|
||||||
},"useData":true});
|
},"useData":true});
|
||||||
templates['msg'] = template({"1":function(depth0,helpers,partials,data) {
|
templates['msg'] = template({"1":function(depth0,helpers,partials,data) {
|
||||||
var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "<div class=\"msg "
|
|
||||||
+ escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
|
|
||||||
+ " ";
|
|
||||||
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.self : depth0), {"name":"if","hash":{},"fn":this.program(2, data),"inverse":this.noop,"data":data});
|
|
||||||
if (stack1 != null) { buffer += stack1; }
|
|
||||||
buffer += "\">\n <span class=\"time\">\n "
|
|
||||||
+ escapeExpression(((helpers.tz || (depth0 && depth0.tz) || helperMissing).call(depth0, (depth0 != null ? depth0.time : depth0), {"name":"tz","hash":{},"data":data})))
|
|
||||||
+ "\n </span>\n <span class=\"from\">\n";
|
|
||||||
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.from : depth0), {"name":"if","hash":{},"fn":this.program(4, data),"inverse":this.noop,"data":data});
|
|
||||||
if (stack1 != null) { buffer += stack1; }
|
|
||||||
buffer += " </span>\n <span class=\"text\">\n <em class=\"type\">"
|
|
||||||
+ escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
|
|
||||||
+ "</em>\n";
|
|
||||||
stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, (depth0 != null ? depth0.type : depth0), "toggle", {"name":"equal","hash":{},"fn":this.program(6, data),"inverse":this.program(9, data),"data":data}));
|
|
||||||
if (stack1 != null) { buffer += stack1; }
|
|
||||||
return buffer + " </span>\n</div>\n";
|
|
||||||
},"2":function(depth0,helpers,partials,data) {
|
|
||||||
return "self";
|
return "self";
|
||||||
},"4":function(depth0,helpers,partials,data) {
|
},"3":function(depth0,helpers,partials,data) {
|
||||||
var helper, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, functionType="function";
|
var helper, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, functionType="function";
|
||||||
return " <button class=\"user\" style=\"color: #"
|
return " <button class=\"user\" style=\"color: #"
|
||||||
+ escapeExpression(((helpers.stringcolor || (depth0 && depth0.stringcolor) || helperMissing).call(depth0, (depth0 != null ? depth0.from : depth0), {"name":"stringcolor","hash":{},"data":data})))
|
+ escapeExpression(((helpers.stringcolor || (depth0 && depth0.stringcolor) || helperMissing).call(depth0, (depth0 != null ? depth0.from : depth0), {"name":"stringcolor","hash":{},"data":data})))
|
||||||
|
@ -101,28 +82,40 @@ templates['msg'] = template({"1":function(depth0,helpers,partials,data) {
|
||||||
+ escapeExpression(((helper = (helper = helpers.mode || (depth0 != null ? depth0.mode : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"mode","hash":{},"data":data}) : helper)))
|
+ escapeExpression(((helper = (helper = helpers.mode || (depth0 != null ? depth0.mode : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"mode","hash":{},"data":data}) : helper)))
|
||||||
+ escapeExpression(((helper = (helper = helpers.from || (depth0 != null ? depth0.from : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"from","hash":{},"data":data}) : helper)))
|
+ escapeExpression(((helper = (helper = helpers.from || (depth0 != null ? depth0.from : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"from","hash":{},"data":data}) : helper)))
|
||||||
+ "</button>\n";
|
+ "</button>\n";
|
||||||
},"6":function(depth0,helpers,partials,data) {
|
},"5":function(depth0,helpers,partials,data) {
|
||||||
var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = " <div class=\"force-newline\">\n <button id=\"toggle-"
|
var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = " <div class=\"force-newline\">\n <button id=\"toggle-"
|
||||||
+ escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
|
+ escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
|
||||||
+ "\" class=\"toggle-button\">···</button>\n </div>\n";
|
+ "\" class=\"toggle-button\">···</button>\n </div>\n";
|
||||||
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.toggle : depth0), {"name":"if","hash":{},"fn":this.program(7, data),"inverse":this.noop,"data":data});
|
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.toggle : depth0), {"name":"if","hash":{},"fn":this.program(6, data),"inverse":this.noop,"data":data});
|
||||||
if (stack1 != null) { buffer += stack1; }
|
if (stack1 != null) { buffer += stack1; }
|
||||||
return buffer;
|
return buffer;
|
||||||
},"7":function(depth0,helpers,partials,data) {
|
},"6":function(depth0,helpers,partials,data) {
|
||||||
var helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
|
var helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
|
||||||
return " "
|
return " "
|
||||||
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "toggle", {"name":"partial","hash":{},"data":data})))
|
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "toggle", {"name":"partial","hash":{},"data":data})))
|
||||||
+ "\n";
|
+ "\n";
|
||||||
},"9":function(depth0,helpers,partials,data) {
|
},"8":function(depth0,helpers,partials,data) {
|
||||||
var stack1, helperMissing=helpers.helperMissing, buffer = " ";
|
var stack1, helperMissing=helpers.helperMissing, buffer = " ";
|
||||||
stack1 = ((helpers.parse || (depth0 && depth0.parse) || helperMissing).call(depth0, (depth0 != null ? depth0.text : depth0), {"name":"parse","hash":{},"data":data}));
|
stack1 = ((helpers.parse || (depth0 && depth0.parse) || helperMissing).call(depth0, (depth0 != null ? depth0.text : depth0), {"name":"parse","hash":{},"data":data}));
|
||||||
if (stack1 != null) { buffer += stack1; }
|
if (stack1 != null) { buffer += stack1; }
|
||||||
return buffer + "\n";
|
return buffer + "\n";
|
||||||
},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
|
},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
|
||||||
var stack1, buffer = "";
|
var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "<div class=\"msg "
|
||||||
stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.messages : depth0), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
|
+ escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
|
||||||
|
+ " ";
|
||||||
|
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.self : depth0), {"name":"if","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
|
||||||
if (stack1 != null) { buffer += stack1; }
|
if (stack1 != null) { buffer += stack1; }
|
||||||
return buffer;
|
buffer += "\">\n <span class=\"time\">\n "
|
||||||
|
+ escapeExpression(((helpers.tz || (depth0 && depth0.tz) || helperMissing).call(depth0, (depth0 != null ? depth0.time : depth0), {"name":"tz","hash":{},"data":data})))
|
||||||
|
+ "\n </span>\n <span class=\"from\">\n";
|
||||||
|
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.from : depth0), {"name":"if","hash":{},"fn":this.program(3, data),"inverse":this.noop,"data":data});
|
||||||
|
if (stack1 != null) { buffer += stack1; }
|
||||||
|
buffer += " </span>\n <span class=\"text\">\n <em class=\"type\">"
|
||||||
|
+ escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
|
||||||
|
+ "</em>\n";
|
||||||
|
stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, (depth0 != null ? depth0.type : depth0), "toggle", {"name":"equal","hash":{},"fn":this.program(5, data),"inverse":this.program(8, data),"data":data}));
|
||||||
|
if (stack1 != null) { buffer += stack1; }
|
||||||
|
return buffer + " </span>\n</div>\n";
|
||||||
},"useData":true});
|
},"useData":true});
|
||||||
templates['network'] = template({"1":function(depth0,helpers,partials,data) {
|
templates['network'] = template({"1":function(depth0,helpers,partials,data) {
|
||||||
var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
|
var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
|
||||||
|
|
|
@ -25,9 +25,7 @@
|
||||||
Show more
|
Show more
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="messages">
|
<div class="messages"></div>
|
||||||
{{partial "msg"}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
<div class="users">
|
<div class="users">
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
{{#each messages}}
|
|
||||||
<div class="msg {{type}} {{#if self}}self{{/if}}">
|
<div class="msg {{type}} {{#if self}}self{{/if}}">
|
||||||
<span class="time">
|
<span class="time">
|
||||||
{{tz time}}
|
{{tz time}}
|
||||||
|
@ -22,4 +21,3 @@
|
||||||
{{/equal}}
|
{{/equal}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{{/each}}
|
|
||||||
|
|
Loading…
Reference in New Issue