mirror of
https://github.com/thelounge/thelounge
synced 2024-11-23 20:43:08 +00:00
Merge pull request #596 from xPaw/history-via-msg
Use a single function to process and render messages
This commit is contained in:
Mattias Erming
commit
6c843e6a3d
4 changed files with 66 additions and 55 deletions
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue