diff --git a/client/css/style.css b/client/css/style.css index f5f3cb1..f4eaa1b 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 b22758d..35402ff 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 9d19e6d..b2596f7 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 0583573..cd5bb62 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; + + } }; + };