diff --git a/client/css/style.css b/client/css/style.css
index f5f3cb1a..f4eaa1b6 100644
--- a/client/css/style.css
+++ b/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;
diff --git a/client/index.html b/client/index.html
index b22758d5..35402ff5 100644
--- a/client/index.html
+++ b/client/index.html
@@ -33,7 +33,7 @@
{{> messages}}
diff --git a/client/js/client.js b/client/js/client.js
index 9d19e6df..b2596f79 100644
--- a/client/js/client.js
+++ b/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}
- * @public
+ * @private
*/
- this.networks = [];
+ var networks = [];
/**
* Initialize new socket connections.
*
- * @param {Array}
+ * @param {Array} 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++);
+ };
+})();
diff --git a/lib/server.js b/lib/server.js
index 0583573d..cd5bb621 100644
--- a/lib/server.js
+++ b/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;
+
+ }
};
+
};