Send user input to server

client/css/style.css

@@ -33,9 +33,13 @@ h2 {
 #sidebar .channel {
 	clear: both;
 	color: #f00;
+	cursor: pointer;
 	float: left;
 	margin-left: 20px;
 }
+#sidebar .channel:hover {
+	color: #999;
+}
 #sidebar .network {
 	color: #000;
 	margin-top: 10px;

client/index.html

@@ -33,7 +33,7 @@
 			{{> messages}}
 		</div>
 		<form onSubmit="return false;">
-			<input type="text"/>
+			<input type="text" class="input"/>
 			<input type="submit" style="display: none;"/>
 		</form>
 	</div>

client/js/client.js

@@ -36,32 +36,37 @@ function Client() {
 	 * The active socket.
 	 *
 	 * @type {Socket}
-	 * @public
+	 * @private
 	 */
 	
-	this.socket;
+	var socket;
 
 	/**
 	 * List of networks.
 	 *
 	 * @type {Array<Network>}
-	 * @public
+	 * @private
 	 */
 
-	this.networks = [];
+	var networks = [];
 
 	/**
 	 * Initialize new socket connections.
 	 *
-	 * @param {Array<Network>}
+	 * @param {Array<Network>} data
 	 * @public
 	 */
 	
-	this.init = function(networks) {
-		this.networks = networks;
-		this.socket.on("event", self.handleEvent);
-		chat.render(this.networks);
-		sidebar.render(this.networks);
+	this.init = function(data) {
+		networks = data;
+
+		chat.render(data);
+		sidebar.render(data);
+		
+		socket.on(
+			"event",
+			self.handleEvent
+		);
 	};
 
 	/**
@@ -73,7 +78,7 @@ function Client() {
 	 */
 	
 	this.connect = function(host) {
-		this.socket = io.connect(host).on("init", self.init)
+		socket = io.connect(host).on("init", self.init)
 	};
 
 	/**
@@ -87,6 +92,34 @@ function Client() {
 		// Debug
 		console.log(event);
 	};
+	
+	/**
+	 * Set up user events.
+	 *
+	 * @private
+	 */
+	
+	// Handle window focus.
+	sidebar.element.on("click", ".channel", function(e) {
+		e.preventDefault();
+		var target = $(this).data("id");
+		chat.element.find(".window[data-id='" + target + "']")
+			.bringToTop();
+	});
+
+	// Emit events on user input.
+	chat.element.on("submit", "form", function() {
+		var form = $(this);
+		var input = form.find(".input");
+		if (input.val() != "") {
+			var text = input.val();
+			input.val("");
+			socket.emit("input", {
+				target: form.closest(".window").data("id"),
+				text: text
+			});
+		}
+	});
 
 };
 
@@ -116,6 +149,16 @@ views.Sidebar = function() {
 		networks: $("#networks").html()
 	};
 
+	/**
+	 * This is the target element where we will
+	 * render the view.
+	 *
+	 * @type {jQuery.Object}
+	 * @public
+	 */
+	
+	this.element = $("#sidebar");
+
 	/**
 	 * Render the view.
 	 *
@@ -124,9 +167,9 @@ views.Sidebar = function() {
 	 */
 	
 	this.render = function(networks) {
-		$("#sidebar").html(Mustache.render(tpl.networks, {networks: networks}));
+		this.element.html(Mustache.render(tpl.networks, {networks: networks}));
 	};
-	
+
 };
 
 /**
@@ -239,4 +282,18 @@ views.Chat = function() {
 	this.remove = function(id) {
 		this.element.find("[data-id='" + id + "']").remove();
 	};
+
 };
+
+/**
+ * Bring element to top of the z-index stack.
+ *
+ * @public
+ */
+
+(function() {
+	var highest = 1;
+	$.fn.bringToTop = function() {
+		this.css('z-index', highest++);
+	};
+})();

lib/server.js

@@ -34,10 +34,10 @@ function Server() {
 	 * Active sockets managed by socket.io.
 	 *
 	 * @type {Object}
-	 * @public
+	 * @private
 	 */
 	
-	this.sockets;
+	var sockets;
 
 	/**
 	 * List of networks.
@@ -57,10 +57,11 @@ function Server() {
 	 */
 	
 	this.listen = function(port) {
-		var app = connect().use(connect.static("client"))
+		var app = connect()
+			.use(connect.static("client"))
 			.listen(port);
-		
-		this.sockets =
+
+		sockets =
 			io.listen(app).on("connection", this.init)
 				.sockets;
 	};
@@ -73,8 +74,16 @@ function Server() {
 	 */
 	
 	this.init = function(socket) {
-		self.sockets.emit("init", self.networks);
-		socket.on("input", self.handleUserInput);
+		sockets.emit(
+			"init",
+			self.networks
+		);
+		socket.on(
+			"input",
+			function(input) {
+				self.handleUserInput(input)
+			}
+		);
 	};
 
 	/**
@@ -85,7 +94,22 @@ function Server() {
 	 */
 
 	this.handleUserInput = function(input) {
-		// Debug
-		console.log(input);
+		var text = input.text;
+		if (text.charAt(0) != "/") {
+			console.log("MESSAGE: " + text);
+			return;
+		}
+		
+		var args = text.substr(1).split(" ");
+		var cmd = args[0].toUpperCase();
+
+		switch (cmd) {
+
+		default:
+			console.log("COMMAND: " + cmd);
+			break;
+
+		}
 	};
+
 };