Added tab completion

client/css/style.css

@@ -180,6 +180,7 @@ h2 {
 	padding: 0 8px;
 }
 #chat .messages {
+	border-left: 8px solid #f0f0f0;
 	bottom: 30px;
 	left: 0;
 	overflow-y: auto;
@@ -192,7 +193,7 @@ h2 {
 }
 #chat .message {
 	line-height: 1.4em;
-	padding: 0 6px;
+	padding: 0 8px;
 }
 #chat .message div {
 	display: inline;
@@ -203,6 +204,7 @@ h2 {
 #chat .message .user {
 	color: #f00;
 }
+#chat .message .type,
 #chat .message .text {
 	color: inherit;
 }

client/index.html

@@ -61,7 +61,6 @@
 	</div>
 	{{/networks}}
 	</script>
-
 	<script type="text/html" id="channel">
 	{{#channels}}
 	<a href="{{name}}" id="channel-{{id}}" class="channel list-group-item">
@@ -70,7 +69,6 @@
 	</a>
 	{{/channels}}
 	</script>
-
 	<script type="text/html" id="window">
 	{{#channels}}
 	<div id="window-{{id}}" class="window {{type}}">
@@ -97,7 +95,6 @@
 	</div>
 	{{/channels}}
 	</script>
-
 	<script type="text/html" id="user">
 	{{#users}}
 	<a href="{{name}}" class="user">
@@ -105,13 +102,13 @@
 	</a>
 	{{/users}}
 	</script>
-
 	<script type="text/html" id="message">
 	{{#messages}}
 	<div class="message {{type}}">
 		<div class="time">{{time}}</div>
 		<div class="user">{{from}}</div>
-		<div class="text">{{type}} {{message}}</div>
+		<div class="type">{{type}}</div>
+		<div class="text">{{message}}</div>
 	</div>
 	{{/messages}}
 	</script>
@@ -122,8 +119,9 @@
 	<script src="//cdnjs.cloudflare.com/ajax/libs/URI.js/1.11.2/URI.min.js"></script>
 	
 	<script src="/socket.io/socket.io.js"></script>
-	<script src="/js/lib/jquery.scrollGlue.js"></script>
 	<script src="/js/lib/bootstrap.js"></script>
+	<script src="/js/lib/jquery.scrollGlue.js"></script>
+	<script src="/js/lib/jquery.tabComplete.js"></script>
 	<script src="/js/chat.js"></script>
 	
 	</div>

client/js/chat.js

@@ -1,4 +1,24 @@
 $(function() {
+	var commands = [
+		"/connect",
+		"/deop",
+		"/devoice",
+		"/disconnect",
+		"/join",
+		"/kick",
+		"/leave",
+		"/mode",
+		"/nick",
+		"/op",
+		"/part",
+		"/query",
+		"/quit",
+		"/server",
+		"/topic",
+		"/voice",
+		"/whois",
+	];
+	
 	var socket = io.connect("");
 	$.each(["network", "channel", "message", "user"], function(i, type) {
 		socket.on(type, function(json) {
@@ -46,8 +66,12 @@ $(function() {
 
 			chat.find(".messages").scrollGlue({animate: 400}).scrollToBottom();
 			chat.find(".window")
+				.find("input")
+				.tabComplete(commands)
+				.end()
 				.first()
-				.bringToTop();
+				.bringToTop()
+				.end();
 			break;
 
 		case "channel":
@@ -69,9 +93,13 @@ $(function() {
 				render("#window", {channels: json.data})
 			).find(".window")
 				.last()
+				.find("input")
+				.tabComplete(commands)
+				.end()
 				.bringToTop()
 				.find(".messages")
-				.scrollGlue({animate: 400});
+				.scrollGlue({animate: 400})
+				.end();
 			break;
 
 		case "user":

client/js/lib/jquery.tabComplete.js

@@ -0,0 +1,51 @@
+/*!
+ * jquery-tab-complete
+ * https://github.com/erming/jquery-tab-complete
+ *
+ * Copyright (c) 2014 Mattias Erming <mattias@mattiaserming.com>
+ * Licensed under the MIT License.
+ *
+ * Version 0.1.0
+ */
+
+(function($) {
+	$.fn.tabComplete = function(list) {
+		var self = this;
+		if (self.size() > 1) {
+			return self.each(function() {
+				$(this).tabComplete(list);
+			});
+		}
+		
+		var match = [];
+		self.on('keydown', function(e) {
+			var key = e.which;
+			if (key != 9) {
+				match = [];
+				return;
+			}
+			
+			var text = self.val().split(' ');
+			var last = text.splice(-1)[0];
+			
+			if (!match.length) {
+				match = $.grep(list, function(w) {
+					return last != '' && w.indexOf(last) !== -1;
+				});
+			}
+			
+			var i = match.indexOf(last) + 1;
+			if (i == match.length) {
+				i = 0;
+			}
+			
+			if (match.length) {
+				last = match[i];
+			}
+			
+			text.push(last);
+			self.val(text.join(' '));
+			return false;
+		});
+	};
+})(jQuery);

lib/server.js

@@ -195,20 +195,6 @@ function event(event, data) {
 		});	
 		break;
 	
-	case "part":
-		var chan = channels.findWhere({name: data[0].channels[0]});
-		if (data[0].nick == this.get("client").me) {
-			channels.remove(chan);
-			return;
-		}
-		var users = chan.get("users");
-		users.remove(users.findWhere({name: data[0].nick}));
-		chan.addMessage({
-			from: data[0].nick,
-			type: "part",
-		});
-		break;
-	
 	case "kick":
 		var chan = channels.findWhere({name: data[0].channel});
 		var users = chan.get("users");
@@ -281,6 +267,20 @@ function event(event, data) {
 		channels.first().addMessage(data[0]);
 		break;
 	
+	case "part":
+		var chan = channels.findWhere({name: data[0].channels[0]});
+		if (data[0].nick == this.get("client").me) {
+			channels.remove(chan);
+			return;
+		}
+		var users = chan.get("users");
+		users.remove(users.findWhere({name: data[0].nick}));
+		chan.addMessage({
+			from: data[0].nick,
+			type: "part",
+		});
+		break;
+	
 	case "quit":
 		channels.each(function(chan) {
 			var users = chan.get("users");