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

Use a single function to process and render messages
2024-12-18 00:13:07 +00:00 · 2016-01-24 15:45:24 +01:00 · 2016-01-24 15:45:24 +01:00 · 6c843e6a3d
commit 6c843e6a3d
parent 7d3e2ad14a 58496baeba
4 changed files with 66 additions and 55 deletions
--- a/client/js/shout.js
+++ b/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");
--- a/client/js/shout.templates.js
+++ b/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;
--- a/client/views/chat.tpl
+++ b/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">
--- a/client/views/msg.tpl
+++ b/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}}