Skip to content
This repository has been archived by the owner on Dec 16, 2022. It is now read-only.

Use a single function to process and render messages #596

Merged
merged 2 commits into from
Jan 24, 2016
+66 −55
Merged

Use a single function to process and render messages #596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a9bc41
Use a single function to process and render messages
xPaw Jan 20, 2016
58496ba
Recompile templates
xPaw Jan 23, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 44 additions & 22 deletions client/js/shout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ $(function() {
channels: channels
})
);
channels.forEach(renderChannelMessages);
confirmExit();
}

Expand Down Expand Up @@ -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();
Expand All @@ -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");
Expand All @@ -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) {
Expand All @@ -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");
Expand Down
49 changes: 21 additions & 28 deletions client/js/shout.templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -75,54 +73,49 @@ 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})))
+ "\">"
+ 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;
Expand Down
4 changes: 1 addition & 3 deletions client/views/chat.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,7 @@
Show more
</button>
</div>
<div class="messages">
{{partial "msg"}}
</div>
<div class="messages"></div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I'm not sure why this must be removed, can you explain, please?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the messages have to be processed through javascript (which they are).

</div>
<aside class="sidebar">
<div class="users">
Expand Down
2 changes: 0 additions & 2 deletions client/views/msg.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
{{#each messages}}
<div class="msg {{type}} {{#if self}}self{{/if}}">
<span class="time">
{{tz time}}
Expand All @@ -22,4 +21,3 @@
{{/equal}}
</span>
</div>
{{/each}}