Send user input to server

This commit is contained in:
Mattias Erming 2014-03-05 09:33:11 -08:00
parent b1023bf76c
commit 56ae48eb89
4 changed files with 108 additions and 23 deletions

View File

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

View File

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

View File

@ -36,32 +36,37 @@ function Client() {
* The active socket. * The active socket.
* *
* @type {Socket} * @type {Socket}
* @public * @private
*/ */
this.socket; var socket;
/** /**
* List of networks. * List of networks.
* *
* @type {Array<Network>} * @type {Array<Network>}
* @public * @private
*/ */
this.networks = []; var networks = [];
/** /**
* Initialize new socket connections. * Initialize new socket connections.
* *
* @param {Array<Network>} * @param {Array<Network>} data
* @public * @public
*/ */
this.init = function(networks) { this.init = function(data) {
this.networks = networks; networks = data;
this.socket.on("event", self.handleEvent);
chat.render(this.networks); chat.render(data);
sidebar.render(this.networks); sidebar.render(data);
socket.on(
"event",
self.handleEvent
);
}; };
/** /**
@ -73,7 +78,7 @@ function Client() {
*/ */
this.connect = function(host) { 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 // Debug
console.log(event); 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() networks: $("#networks").html()
}; };
/**
* This is the target element where we will
* render the view.
*
* @type {jQuery.Object}
* @public
*/
this.element = $("#sidebar");
/** /**
* Render the view. * Render the view.
* *
@ -124,9 +167,9 @@ views.Sidebar = function() {
*/ */
this.render = function(networks) { 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.remove = function(id) {
this.element.find("[data-id='" + id + "']").remove(); 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++);
};
})();

View File

@ -34,10 +34,10 @@ function Server() {
* Active sockets managed by socket.io. * Active sockets managed by socket.io.
* *
* @type {Object} * @type {Object}
* @public * @private
*/ */
this.sockets; var sockets;
/** /**
* List of networks. * List of networks.
@ -57,10 +57,11 @@ function Server() {
*/ */
this.listen = function(port) { this.listen = function(port) {
var app = connect().use(connect.static("client")) var app = connect()
.use(connect.static("client"))
.listen(port); .listen(port);
this.sockets = sockets =
io.listen(app).on("connection", this.init) io.listen(app).on("connection", this.init)
.sockets; .sockets;
}; };
@ -73,8 +74,16 @@ function Server() {
*/ */
this.init = function(socket) { this.init = function(socket) {
self.sockets.emit("init", self.networks); sockets.emit(
socket.on("input", self.handleUserInput); "init",
self.networks
);
socket.on(
"input",
function(input) {
self.handleUserInput(input)
}
);
}; };
/** /**
@ -85,7 +94,22 @@ function Server() {
*/ */
this.handleUserInput = function(input) { this.handleUserInput = function(input) {
// Debug var text = input.text;
console.log(input); 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;
}
}; };
}; };