Added 'Show more' functionality

client/components/handlebars/equal.js

@@ -0,0 +1,9 @@
+Handlebars.registerHelper(
+	"equal", function(a, b, opt) {
+		a = a.toString();
+		b = b.toString();
+		if (a == b) {
+			return opt.fn(this);
+		}
+	}
+);

client/css/style.css

@@ -48,7 +48,6 @@ button {
 	border-top-color: #fff;
 }
 .btn {
-	border: 2px solid #95a5a6;
 	border: 2px solid #84d1ff;
 	border-radius: 5px;
 	color: #95a5a6;
@@ -62,9 +61,11 @@ button {
 	transition: background .2s, border-color .2s, color .2s;
 	word-spacing: 3px;
 }
+.btn:focus {
+	background: #f2fbff;
+}
 .btn:disabled,
 .btn:hover {
-	background: #95a5a6;
 	background: #84d1ff;
 	color: #fff;
 }
@@ -338,6 +339,7 @@ button {
 }
 #windows .window {
 	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
 }
 #windows .window h1 {
 	font: 36px Lato;
@@ -377,6 +379,17 @@ button {
 #chat .sidebar button {
 	color: #33b0f7;
 }
+#chat .show-more {
+	color: #33b0f7;
+	position: absolute;
+	width: 100%;
+	border-bottom: 1px solid #ddd;
+	height: 41px;
+	background: #fff;
+}
+#chat .show-more + .messages .msg:first-child span {
+	padding-top: 46px;
+}
 #chat .messages {
 	display: table;
 	height: 100%;

client/index.html

@@ -29,7 +29,7 @@
 				<button class="icon sign-in" data-target="#sign-in" data-title="Sign in" data-placement="top" title="Sign in to Shout"></button>
 				<button class="icon connect" data-target="#connect" data-title="Connect" data-placement="top" title="Connect to network"></button>
 				<button class="icon settings" data-target="#settings" data-title="Settings" data-placement="top" title="Client settings"></button>
-				<a href="" class="icon sign-out" data-placement="top" title="Sign out user"></a>
+				<a href="" class="icon sign-out" data-placement="top" title="Sign out"></a>
 			</footer>
 		</aside>
 		<div id="main">
@@ -198,6 +198,11 @@
 		{{#each channels}}
 		<div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan">
 			<div class="chat">
+				{{#equal 100 messages.length}}
+				<button class="show-more" data-id="{{id}}">
+					Show more
+				</button>
+				{{/equal}}
 				<div class="messages">
 					{{partial "messages"}}
 				</div>
@@ -237,8 +242,6 @@
 			<span class="from">
 				{{#if from}}
 				<button class="user">{{from}}</button>
-				{{else}}
-				//
 				{{/if}}
 			</span>
 			<span class="text">

client/js/chat.js

@@ -80,6 +80,7 @@ $(function() {
 				networks: data.networks
 			})
 		);
+
 		var channels = $.map(data.networks, function(n) {
 			return n.channels;
 		});
@@ -89,7 +90,9 @@ $(function() {
 			})
 		);
 
-		sidebar.find(".chan").eq(0).trigger("click"); sidebar.find(".empty").hide();
+		sidebar.find(".chan").eq(0).trigger("click");
+		sidebar.find(".empty").hide();
+
 		$("body").removeClass("signed-out");
 
 		var id = $.cookie("target");
@@ -137,6 +140,17 @@ $(function() {
 			]);
 	});
 
+	socket.on("showMore", function(data) {
+		var target = data.chan;
+		chat.find("#chan-" + target)
+			.find(".show-more")
+			.remove()
+			.end()
+			.find(".messages")
+			.prepend(render("messages", {messages: data.messages}))
+			.end();
+	});
+
 	socket.on("network", function(data) {
 		sidebar.find(".empty").hide();
 		sidebar.find(".networks").append(
@@ -377,14 +391,27 @@ $(function() {
 		}
 	});
 
-	$("#windows").on("show", ".window", function() {
+	chat.on("click", ".show-more", function() {
+		var self = $(this);
+		var id = self.data("id");
+		var count = self.next(".messages").children().length;
+		socket.emit("showMore", {
+			target: id,
+			count: count
+		});
+	});
+
+	var windows = $("#windows");
+	var forms = $("#sign-in, #connect");
+
+	windows.on("show", ".window", function() {
 		var self = $(this);
 		setTimeout(function() {
 			self.find("input").eq(0).focus();
 		}, 0);
 	});
 
-	$("#sign-in, #connect").on("submit", "form", function(e) {
+	forms.on("submit", "form", function(e) {
 		e.preventDefault()
 		var event = "auth";
 		var form = $(this);

lib/models/chan.js

@@ -38,3 +38,9 @@ Chan.prototype.sortUsers = function() {
 		).concat(this.users);
 	}, this);
 };
+
+Chan.prototype.toJSON = function() {
+	var clone = _.clone(this);
+	clone.messages = clone.messages.slice(-100);
+	return clone;
+};

lib/server.js

@@ -99,10 +99,15 @@ function init(socket, client) {
 				input(client, data);
 			}
 		);
+		socket.on(
+			"showMore",
+			function(data) {
+				showMore(client, data);
+			}
+		);
 		socket.on(
 			"conn",
 			function(data) {
-				console.log(data);
 				client.connect(data);
 			}
 		);
@@ -134,6 +139,7 @@ function auth(data) {
 
 function input(client, data) {
 	var text = data.text;
+	var target = client.find(data.target);
 	if (text.charAt(0) !== "/") {
 		text = "/say " + text;
 	}
@@ -141,7 +147,6 @@ function input(client, data) {
 	var args = text.split(" ");
 	var cmd = args.shift().replace("/", "").toLowerCase();
 
-	var target = client.find(data.target);
 	_.each(inputs, function(plugin) {
 		try {
 			var path = "./plugins/inputs/" + plugin;
@@ -157,3 +162,16 @@ function input(client, data) {
 		}
 	});
 }
+
+function showMore(client, data) {
+	var target = client.find(data.target);
+	if (!target) {
+		return;
+	}
+	var chan = target.chan;
+	var messages = chan.messages.slice(0, chan.messages.length - (data.count || 0));
+	client.emit("showMore", {
+		chan: chan.id,
+		messages: messages
+	});
+}