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

Use a single function to process and render messages

client/js/shout.js

@@ -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");

client/js/shout.templates.js

@@ -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;

client/views/chat.tpl

@@ -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">

client/views/msg.tpl

@@ -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}}