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 {
clear: both;
color: #f00;
cursor: pointer;
float: left;
margin-left: 20px;
}
#sidebar .channel:hover {
color: #999;
}
#sidebar .network {
color: #000;
margin-top: 10px;

View file

@ -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>

View file

@ -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++);
};
})();

View file

@ -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;
}
};
};