Re-implemented the 'Show more' button

README.md

@@ -71,11 +71,19 @@ socket.emit("join", {
     id: 0,
     name: "",
     type: "",
+    count: 0,
     messages: [],
     users: [],
   }
 });
 
+// Event: "messages"
+// Sent after the server receives a "fetch" request from client.
+socket.emit("messages", {
+  id: 0,
+  msg: []
+});
+
 // Event: "msg"
 // Sent when receiving a message.
 socket.emit("msg", {

client/css/style.css

@@ -209,6 +209,25 @@ button {
 	right: 180px;
 	top: 0;
 }
+#chat .show-more {
+	border-bottom: 1px solid #eee;
+	color: #bec5d0;
+	font: 12px Lato, sans-serif;
+	line-height: 1.8em;
+	padding: 10px 0;
+	text-align: center;
+	text-transform: uppercase;
+	width: 100%;
+	word-spacing: 2px;
+}
+#chat .show-more:hover {
+	color: #33b0f7;
+}
+#chat .show-more:disabled {
+	color: #bec5d0;
+	opacity: .4;
+	text-decoration: line-through;
+}
 #chat .messages {
 	display: table;
 	width: 100%;

client/index.html

@@ -54,7 +54,7 @@
 		
 		<script type="text/html" class="windows">
 		{{#each windows}}
-		<div id="window-{{id}}" class="window {{type}}">
+		<div id="window-{{id}}" class="window {{type}}" data-id="{{id}}">
 			<div class="sidebar">
 				<div class="meta">
 				<h1>
@@ -76,6 +76,9 @@
 				</ul>
 			</div>
 			<div class="chat">
+				<button class="show-more" data-id="{{id}}">
+					Show more
+				</button>
 				<div class="messages">
 					{{partial "messages"}}
 				</div>

client/js/chat.js

@@ -36,6 +36,7 @@ $(function() {
 	var socket = io.connect("");
 	var events = [
 		"join",
+		"messages",
 		"msg",
 		"networks",
 		"nick",
@@ -72,10 +73,22 @@ $(function() {
 				.trigger("click");
 			break;
 		
+		case "messages":
 		case "msg":
-			$("#window-" + data.id)
-				.find(".messages")
-				.append(render("messages", {messages: [data.msg]}));
+			var target = $("#window-" + data.id).find(".messages");
+			var html = render(
+				"messages",
+				{messages: toArray(data.msg)}
+			);
+			switch (e) {
+			case "messages":
+				target.prepend(html);
+				break;
+			
+			case "msg":
+				target.append(html);
+				break;
+			}
 			break;
 		
 		case "networks":
@@ -180,20 +193,29 @@ $(function() {
 		}
 	});
 	
-	chat.on("click", ".show-more .btn", function() {
-		var target = $(this).parent();
-		var html = $.parseHTML(target.next(".hidden").remove().html());
-		target.replaceWith(html);
+	chat.on("click", ".show-more", function() {
+		var btn = $(this);
+		var messages = btn.closest(".chat").find(".messages").children();
+		socket.emit("fetch", {
+			id: btn.data("id"),
+			count: messages.length,
+		});
+		btn.attr("disabled", true);
 	});
 	
 	chat.on("click", ".user", function(e) {
 		e.preventDefault();
 		var user = $(this);
-		var id = user.closest(".window").find(".form").data("target");
+		var id = user
+			.closest(".window")
+			.data("id");
+		
+		// Remove modes
 		var name = user.html().replace(/[\s+@]/g, "");
 		if (name.match(/[#.]|-!-/) != null) {
 			return;
 		}
+		
 		socket.emit("input", {
 			id: id,
 			text: "/whois " + name,
@@ -229,6 +251,10 @@ $(function() {
 		viewport.toggleClass(btn.attr("class"));
 	});
 	
+	function toArray(val) {
+		return Array.isArray(val) ? val : [val];
+	}
+
 	function escape(text) {
 		var e = {
 			"<": "&lt;",

config.js

@@ -1,5 +1,6 @@
 module.exports = {
 	port: 9000,
+	messages: 100,
 	defaults: {
 		nick: "shout_user",
 		realname: "http://github.com/erming/shout",

lib/models/chan.js

@@ -1,4 +1,5 @@
 var _ = require("lodash");
+var config = require("../../config") || {};
 
 module.exports = Chan;
 
@@ -7,6 +8,7 @@ function Chan(attr) {
 		id: global.id = ++global.id || 1,
 		name: "",
 		type: "channel",
+		count: 0,
 		messages: [],
 		users: [],
 	}, attr));
@@ -25,3 +27,10 @@ Chan.prototype.sortUsers = function() {
 		).concat(this.users);
 	}, this);
 };
+
+Chan.prototype.toJSON = function() {
+	var clone = _.clone(this);
+	clone.count = clone.messages.length;
+	clone.messages = clone.messages.slice(-1 * (config.messages || 0));
+	return clone;
+};

lib/server.js

@@ -43,8 +43,11 @@ function listen() {
 	
 	var self = this;
 	sockets = io.listen(app, {log: 0}).sockets.on("connection", function(s) {
-		s.on("input", input);
 		s.emit("networks", {networks: networks});
+		s.on("input", input);
+		s.on("fetch", function(data) {
+			fetch(s, data);
+		});
 	});
 	
 	(config.networks || []).forEach(function(n) {
@@ -334,13 +337,27 @@ function input(data) {
 	case "raw":
 	case "send":
 		if (client) {
-			console.log(args.slice(1).join(" "));
 			client.write(args.slice(1).join(" "));
 		}
 		break;
 	}
 }
 
+function fetch(socket, data) {
+	var target = find(data.id);
+	if (!target) {
+		return;
+	}
+	var chan = target.chan;
+	var messages = chan
+		.messages
+		.slice(0, chan.messages.length - (data.count || 0));
+	socket.emit("messages", {
+		id: data.id,
+		msg: messages,
+	});
+}
+
 function event(e, data) {
 	var data = _.last(data);
 	var channels = this.channels;