Send user input to server
This commit is contained in:
parent
b1023bf76c
commit
56ae48eb89
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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)
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -88,6 +93,34 @@ function Client() {
|
|||||||
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,7 +167,7 @@ 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++);
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user