hardlounge/client/js/chat.js

125 lines
2.4 KiB
JavaScript
Raw Normal View History

2014-03-06 15:11:25 +00:00
$(function() {
var socket = io.connect("");
socket.on(
"event",
function(event) {
2014-03-06 18:02:43 +00:00
console.log(event);
2014-03-06 15:11:25 +00:00
View[event.action](event);
}
);
var chat = $("#chat");
var sidebar = $("#sidebar");
// Templates
var networks = $("#networks").html();
var channels = $("#channels").html();
var messages = $("#messages").html();
var users = $("#users").html()
var View = {};
2014-03-06 18:02:43 +00:00
View.refresh = function(event) {
2014-03-06 19:31:06 +00:00
var data = event.data;
2014-03-06 15:11:25 +00:00
sidebar.html(
Mustache.render(networks, {
2014-03-06 19:31:06 +00:00
networks: data
2014-03-06 15:11:25 +00:00
})
);
2014-03-06 19:31:06 +00:00
chat.html("");
var partials = {
users: users,
messages: messages
};
data.forEach(function(network) {
chat.append(Mustache.render(channels, network, partials));
});
chat.find(".messages").scrollToBottom();
chat.find(".window")
// Sort windows by `data-id` value.
.sort(function(a, b) { return ($(a).data("id") - $(b).data("id")); })
.last()
.bringToTop()
.find(".input")
.focus();
2014-03-06 15:11:25 +00:00
};
View.add = function(event) {
var target = "";
var render = "";
2014-03-06 19:31:06 +00:00
2014-03-06 15:11:25 +00:00
switch (event.type) {
case "user":
target = ".users";
render = Mustache.render(
2014-03-06 18:53:02 +00:00
users, {users: event.data}
2014-03-06 15:11:25 +00:00
);
break;
2014-03-06 19:31:06 +00:00
2014-03-06 15:11:25 +00:00
case "message":
target = ".messages";
render = Mustache.render(
2014-03-06 18:53:02 +00:00
messages, {messages: event.data}
2014-03-06 15:11:25 +00:00
);
break;
}
2014-03-06 19:31:06 +00:00
2014-03-06 15:11:25 +00:00
if (target != "") {
target = $("[data-id='" + event.target + "'] " + target);
2014-03-06 18:53:02 +00:00
var keepAtBottom = target.isScrollBottom();
2014-03-06 15:11:25 +00:00
target.append(render);
2014-03-06 18:53:02 +00:00
if (keepAtBottom) {
target.scrollToBottom();
}
2014-03-06 15:11:25 +00:00
}
};
View.remove = function(event) {
$("[data-id='" + event.target + "']").remove();
};
View.change = function(event) {
// ..
};
chat.on("submit", "form", function() {
var input = $(this).find(".input");
var text = input.val();
if (text != "") {
input.val("");
socket.emit("input", {
id: input.data("target"),
text: text
});
}
});
sidebar.on("click", ".channel", function() {
chat.find(".window[data-id='" + $(this).data("id") + "']")
.bringToTop();
});
});
2014-03-06 18:53:02 +00:00
2014-03-06 15:11:25 +00:00
(function() {
var highest = 1;
$.fn.bringToTop = function() {
2014-03-06 19:31:06 +00:00
return this.css('z-index', highest++);
2014-03-06 15:11:25 +00:00
};
2014-03-06 18:53:02 +00:00
$.fn.scrollToBottom = function() {
2014-03-06 19:31:06 +00:00
return this.scrollTop(this.prop("scrollHeight"));
2014-03-06 18:53:02 +00:00
};
$.fn.isScrollBottom = function() {
var height = this.outerHeight();
var scroll = this.scrollTop();
if ((scroll + height + 5) >= this.prop("scrollHeight")) {
return true;
}
};
2014-03-06 15:11:25 +00:00
})();