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

Merge pull request #596 from xPaw/history-via-msg

Browse Source 
Use a single function to process and render messages
This commit is contained in:
Mattias Erming 2016-01-24 15:45:24 +01:00
commit 6c843e6a3d
4 changed files with 66 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
client/js/shout.js
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,28 +220,54 @@ $(function() {
}
});
if (!chan.hasClass("channel")) {
return;
}
var type = data.msg.type;
if (type === "message" || type === "action") {
var nicks = chan.find(".users").data("nicks");
if (nicks) {
var find = nicks.indexOf(from);
if (find !== -1 && typeof move === "function") {
move(nicks, find, 0);
if (chan.hasClass("channel")) {
var type = data.msg.type;
if (type === "message" || type === "action") {
var nicks = chan.find(".users").data("nicks");
if (nicks) {
var find = nicks.indexOf(from);
if (find !== -1 && typeof move === "function") {
move(nicks, find, 0);
}
}
}
}
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");

49
client/js/shout.templates.js
View File

@ -50,9 +50,7 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) {
if (stack1 != null) { buffer += stack1; }
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)))
+ "\">\n Show more\n </button>\n </div>\n <div class=\"messages\">\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 "
+ "\">\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, "user", {"name":"partial","hash":{},"data":data})))
+ "\n </div>\n </aside>\n</div>\n";
},"2":function(depth0,helpers,partials,data) {
@ -75,25 +73,8 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) {
return buffer;
},"useData":true});
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";
},"4":function(depth0,helpers,partials,data) {
},"3":function(depth0,helpers,partials,data) {
var helper, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, functionType="function";
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})))
@ -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.from || (depth0 != null ? depth0.from : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"from","hash":{},"data":data}) : helper)))
+ "</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-"
+ 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";
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; }
return buffer;
},"7":function(depth0,helpers,partials,data) {
},"6":function(depth0,helpers,partials,data) {
var helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
return " "
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "toggle", {"name":"partial","hash":{},"data":data})))
+ "\n";
},"9":function(depth0,helpers,partials,data) {
},"8":function(depth0,helpers,partials,data) {
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}));
if (stack1 != null) { buffer += stack1; }
return buffer + "\n";
},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
var stack1, buffer = "";
stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.messages : depth0), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":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(1, data),"inverse":this.noop,"data":data});
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});
templates['network'] = template({"1":function(depth0,helpers,partials,data) {
var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;

4
client/views/chat.tpl
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">

2
client/views/msg.tpl
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}}