Refactoring

This commit is contained in:
Mattias Erming 2014-04-19 23:40:36 +02:00
parent 8858d16d67
commit 5f59f937ee
13 changed files with 96 additions and 122 deletions

12
.gitmodules vendored
View file

@ -1,12 +1,12 @@
[submodule "node_modules/slate-irc"] [submodule "node_modules/slate-irc"]
path = node_modules/slate-irc path = node_modules/slate-irc
url = http://github.com/erming/slate-irc url = http://github.com/erming/slate-irc
[submodule "client/js/lib/scrollGlue"] [submodule "client/js/scrollGlue"]
path = client/js/lib/scrollGlue path = client/js/scrollGlue
url = http://github.com/erming/scrollGlue url = http://github.com/erming/scrollGlue
[submodule "client/js/lib/inputHistory"] [submodule "client/js/inputHistory"]
path = client/js/lib/inputHistory path = client/js/inputHistory
url = http://github.com/erming/inputHistory url = http://github.com/erming/inputHistory
[submodule "client/js/lib/tabComplete"] [submodule "client/js/tabComplete"]
path = client/js/lib/tabComplete path = client/js/tabComplete
url = http://github.com/erming/tabComplete url = http://github.com/erming/tabComplete

View file

@ -131,7 +131,6 @@ h2 {
} }
#chat .window { #chat .window {
background: #fff; background: #fff;
display: none;
height: 100%; height: 100%;
position: absolute; position: absolute;
width: 100%; width: 100%;

View file

@ -46,24 +46,21 @@
</div> </div>
</aside> </aside>
<div id="chat"> <div id="chat">
<div id="windows">
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="scripts"> <script type="text/html" id="networks">
<script type="text/html" id="network">
{{#networks}} {{#networks}}
<div id="network-{{id}}" class="network list-group"> <div id="network-{{id}}" class="network list-group">
{{> channels}} {{> channels}}
</div> </div>
{{/networks}} {{/networks}}
</script> </script>
<script type="text/html" id="channel"> <script type="text/html" id="channels">
{{#channels}} {{#channels}}
<a href="{{name}}" id="channel-{{id}}" class="channel list-group-item"> <a href="{{name}}" id="channel-{{id}}" class="channel list-group-item">
<span class="badge pull-right"></span> <span class="badge pull-right"></span>
@ -71,8 +68,8 @@
</a> </a>
{{/channels}} {{/channels}}
</script> </script>
<script type="text/html" id="window"> <script type="text/html" id="windows">
{{#channels}} {{#windows}}
<div id="window-{{id}}" class="window {{type}}"> <div id="window-{{id}}" class="window {{type}}">
<div class="title"> <div class="title">
<div class="toggle"> <div class="toggle">
@ -95,9 +92,9 @@
<input type="submit" style="display: none;"/> <input type="submit" style="display: none;"/>
</form> </form>
</div> </div>
{{/channels}} {{/windows}}
</script> </script>
<script type="text/html" id="user"> <script type="text/html" id="users">
<div class="count"> <div class="count">
Users: {{users.length}} Users: {{users.length}}
</div> </div>
@ -107,7 +104,7 @@
</div> </div>
{{/users}} {{/users}}
</script> </script>
<script type="text/html" id="message"> <script type="text/html" id="messages">
{{#messages}} {{#messages}}
<div class="message {{type}}"> <div class="message {{type}}">
<div class="time">{{time}}</div> <div class="time">{{time}}</div>
@ -124,13 +121,11 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/URI.js/1.11.2/URI.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/URI.js/1.11.2/URI.min.js"></script>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="/js/lib/bootstrap.js"></script> <script src="/js/bootstrap.js"></script>
<script src="/js/lib/inputHistory/jquery.inputHistory.js"></script> <script src="/js/inputHistory/jquery.inputHistory.js"></script>
<script src="/js/lib/scrollGlue/jquery.scrollGlue.js"></script> <script src="/js/scrollGlue/jquery.scrollGlue.js"></script>
<script src="/js/lib/tabComplete/jquery.tabComplete.js"></script> <script src="/js/tabComplete/jquery.tabComplete.js"></script>
<script src="/js/chat.js"></script> <script src="/js/chat.js"></script>
</div>
</body> </body>
</html> </html>

View file

@ -1,4 +1,7 @@
$(function() { $(function() {
var chat = $("#chat");
var sidebar = $("#sidebar");
var commands = [ var commands = [
"/connect", "/connect",
"/deop", "/deop",
@ -20,15 +23,12 @@ $(function() {
]; ];
var socket = io.connect(""); var socket = io.connect("");
$.each(["network", "channel", "message", "user"], function(i, type) { $.each(["network", "channel", "user", "message"], function(i, event) {
socket.on(type, function(json) { socket.on(event, function(json) {
event(type, json); handleEvent(event, json);
}); });
}); });
var chat = $("#chat");
var sidebar = $("#sidebar");
var tpl = []; var tpl = [];
function render(id, json, partials) { function render(id, json, partials) {
tpl[id] = tpl[id] || $(id).html(); tpl[id] = tpl[id] || $(id).html();
@ -44,24 +44,25 @@ $(function() {
); );
} }
function event(type, json) { function handleEvent(event, json) {
switch (type) { var data = json.data;
switch (event) {
case "network": case "network":
var html = ""; var html = "";
var partials = { var partials = {
users: render("#user"), users: render("#users"),
messages: render("#message"), messages: render("#messages"),
}; };
json.forEach(function(n) { data.forEach(function(n) {
html += render( html += render(
"#window", n, partials "#windows", {windows: n.channels}, partials
); );
}); });
$("#windows")[0].innerHTML = html; chat[0].innerHTML = html;
sidebar.find("#list").html( sidebar.find("#list").html(
render("#network", {networks: json}, {channels: render("#channel")}) render("#networks", {networks: data}, {channels: render("#channels")})
).find(".channel") ).find(".channel")
.first() .first()
.addClass("active") .addClass("active")
@ -82,7 +83,7 @@ $(function() {
break; break;
case "channel": case "channel":
var id = json.data.id; var id = data.id;
if (json.action == "remove") { if (json.action == "remove") {
$("#channel-" + id + ", #window-" + id).remove(); $("#channel-" + id + ", #window-" + id).remove();
var highest = 0; var highest = 0;
@ -103,13 +104,13 @@ $(function() {
sidebar.find(".channel").removeClass("active"); sidebar.find(".channel").removeClass("active");
$("#network-" + json.target).append( $("#network-" + json.target).append(
render("#channel", {channels: json.data}) render("#channels", {channels: data})
).find(".channel") ).find(".channel")
.last() .last()
.addClass("active"); .addClass("active");
$("#windows").append( chat.append(
render("#window", {channels: json.data}) render("#windows", {windows: data})
).find(".window") ).find(".window")
.last() .last()
.find("input") .find("input")
@ -124,7 +125,7 @@ $(function() {
case "user": case "user":
var target = chat.find("#window-" + json.target).find(".users"); var target = chat.find("#window-" + json.target).find(".users");
target.html(render("#user", {users: json.data})); target.html(render("#users", {users: data}));
break; break;
case "message": case "message":
@ -133,12 +134,11 @@ $(function() {
return; return;
} }
var message = json.data; if (data.type == "error") {
if (message.type == "error") {
target = target.parent().find(".active"); target = target.parent().find(".active");
} }
var msg = $(render("#message", {messages: message})) var msg = $(render("#messages", {messages: data}))
target = target.find(".messages"); target = target.find(".messages");
target.append(msg); target.append(msg);
@ -181,7 +181,7 @@ $(function() {
} else { } else {
hidden += value; hidden += value;
} }
$.cookie("hidden", hidden); // Save the cookie with the new values. $.cookie("hidden", hidden);
chat.toggleClass( chat.toggleClass(
"show-" + value, "show-" + value,
input.prop("checked") input.prop("checked")

@ -0,0 +1 @@
Subproject commit 9c0e33780e5317404d10d817a10127a2a218852c

@ -1 +0,0 @@
Subproject commit b547cb6c9f4db8114dbd6fb0d00b69faf7c4ddac

@ -1 +0,0 @@
Subproject commit ce2447d3ad45a4208536ccea8fb0735e3bedf65f

@ -1 +0,0 @@
Subproject commit b2e909a1f2bbf671ba825ae69b212765e87d2c96

1
client/js/scrollGlue Submodule

@ -0,0 +1 @@
Subproject commit 8fcc5e8f7e8f465f9cfce5b59f7a89abf9bf1593

1
client/js/tabComplete Submodule

@ -0,0 +1 @@
Subproject commit 41caddc1723b8eb0dfe3b5614f87c7d1744a8996

View file

@ -1,6 +1,5 @@
var _ = require("lodash"); var _ = require("lodash");
var Backbone = require("backbone"); var Backbone = require("backbone");
var moment = require("moment");
var id = 1; var id = 1;
var models = var models =
@ -23,28 +22,19 @@ models.Users = Backbone.Collection.extend({
return user.get("name").toLowerCase(); return user.get("name").toLowerCase();
} }
); );
this.trigger("sort", {}, this);
// Move users with these modes to the top.
var modes = ["+", "@"];
for (var i in modes) {
this.models = _.remove(this.models, function(user) {
if (user.get("mode") == modes[i]) {
return true;
}
}).concat(this.models);
}
} }
}); });
models.Message = Backbone.Model.extend({ models.Message = Backbone.Model.extend({
defaults: { defaults: {
type: "", type: "",
time: "", time: "",
from: "-!-", from: "",
message: "", message: "",
}, },
initialize: function() { initialize: function() {
this.set("time", moment().format("HH:mm")); this.set("time", require("moment")().format("HH:mm"));
} }
}); });
@ -57,37 +47,30 @@ models.Channel = Backbone.Model.extend({
type: "channel", type: "channel",
name: "", name: "",
}, },
addUser: function(models) {
return this.get("users").add(models);
},
addMessage: function(models) {
return this.get("messages").add(models);
},
initialize: function() { initialize: function() {
this.set({ var users = new models.Users;
id: id++,
messages: new models.Messages,
users: new models.Users,
});
this.get("messages").on("all", function(action, data) {
this.trigger("message", {
target: this.get("id"),
type: "message",
data: data,
action: action,
});
}, this);
var users = this.get("users");
users.on("all", function(action, data) { users.on("all", function(action, data) {
this.trigger("user", { this.trigger("user", {
target: this.get("id"),
type: "user",
data: users,
action: action, action: action,
target: this.get("id"),
data: users,
}); });
}, this); }, this);
var messages = new models.Messages;
messages.on("all", function(action, data) {
this.trigger("message", {
action: action,
target: this.get("id"),
data: data,
});
}, this);
this.set({
id: id++,
users: users,
messages: messages,
});
} }
}); });
@ -97,32 +80,28 @@ models.Channels = Backbone.Collection.extend({
models.Network = Backbone.Model.extend({ models.Network = Backbone.Model.extend({
defaults: { defaults: {
host: "", host: "",
client: null, client: null,
}, },
addChannel: function(models) {
return this.get("channels").add(models);
},
initialize: function() { initialize: function() {
this.set({ this.set({
id: id++, id: id++,
channels: new models.Channels, channels: new models.Channels,
}); });
this.get("channels").on("all", function(action, data) { this.get("channels").on("all", function(action, data) {
if (action == "message" if (action == "message"
|| action == "user") { || action == "user") {
return this.trigger(action, data); return this.trigger(action, data);
} }
this.trigger("channel", { this.trigger("channel", {
target: this.get("id"),
type: "channel",
data: data,
action: action, action: action,
target: this.get("id"),
data: data,
}); });
}, this); }, this);
this.addChannel({ this.get("channels").add({
type: "network", type: "network",
name: this.get("host") name: this.get("host")
}); });

View file

@ -32,7 +32,9 @@ module.exports = function listen() {
sockets = io.listen(app, {log: 0}).sockets.on("connection", function(s) { sockets = io.listen(app, {log: 0}).sockets.on("connection", function(s) {
s.on("input", input); s.on("input", input);
sockets.emit("network", networks); sockets.emit("network", {
data: networks,
});
}); });
networks.on("all", function() { networks.on("all", function() {
@ -117,7 +119,7 @@ function input(json) {
user = client.me; user = client.me;
client.send(args[1], message); client.send(args[1], message);
} }
channel.addMessage({ channel.get("messages").add({
from: user, from: user,
message: message, message: message,
}); });
@ -220,9 +222,11 @@ function event(event, data) {
case "join": case "join":
var chan = channels.findWhere({name: data[0].channel}) || channels.add({name: data[0].channel}); var chan = channels.findWhere({name: data[0].channel}) || channels.add({name: data[0].channel});
var users = chan.get("users"); var users = chan.get("users");
users.add({name: data[0].nick}); users.add({name: data[0].nick}, {silent: true});
users.sort(); if (data[0].nick != this.get("client").me) {
chan.addMessage({ users.sort();
}
chan.get("messages").add({
from: data[0].nick, from: data[0].nick,
type: "join", type: "join",
}); });
@ -238,7 +242,7 @@ function event(event, data) {
users.reset(); users.reset();
} }
chan.addMessage({ chan.get("messages").add({
from: data[0].nick, from: data[0].nick,
message: data[0].client, message: data[0].client,
type: "kick", type: "kick",
@ -248,7 +252,7 @@ function event(event, data) {
case "mode": case "mode":
var chan = channels.findWhere({name: data[0].target}); var chan = channels.findWhere({name: data[0].target});
if (typeof chan !== "undefined") { if (typeof chan !== "undefined") {
chan.addMessage({ chan.get("messages").add({
from: data[0].nick, from: data[0].nick,
message: data[0].mode + " " + data[0].client, message: data[0].mode + " " + data[0].client,
type: "mode", type: "mode",
@ -259,13 +263,13 @@ function event(event, data) {
case "motd": case "motd":
var messages = data[0].motd; var messages = data[0].motd;
messages.forEach(function(msg) { messages.forEach(function(msg) {
channels.first().addMessage({message: msg}); channels.first().get("messages").add({message: msg});
}); });
break; break;
case "message": case "message":
var chan = channels.findWhere({name: data[0].to}) || channels.add({type: "query", name: data[0].from}); var chan = channels.findWhere({name: data[0].to}) || channels.add({type: "query", name: data[0].from});
chan.addMessage({ chan.get("messages").add({
from: data[0].from, from: data[0].from,
message: data[0].message message: data[0].message
}); });
@ -279,12 +283,11 @@ function event(event, data) {
{silent: true} {silent: true}
); );
users.sort(); users.sort();
users.trigger("reset", {}, users);
break; break;
case "nick": case "nick":
if (data[0].new == this.get("client").me) { if (data[0].new == this.get("client").me) {
channels.first().addMessage({ channels.first().get("messages").add({
message: "You're now known as " + data[0]["new"], message: "You're now known as " + data[0]["new"],
}); });
} }
@ -296,11 +299,9 @@ function event(event, data) {
} }
user.set("name", data[0]["new"]); user.set("name", data[0]["new"]);
users.sort(); users.sort();
users.trigger("change", {}, users);
chan.addMessage({ chan.get("messages").add({
from: data[0].nick, from: data[0].nick,
message: data[0]["new"], message: data[0]["new"],
type: "nick", type: "nick",
@ -312,7 +313,7 @@ function event(event, data) {
if (data[0].to = "*") { if (data[0].to = "*") {
data[0].from = "-!-"; data[0].from = "-!-";
} }
channels.first().addMessage(data[0]); channels.first().get("messages").add(data[0]);
break; break;
case "part": case "part":
@ -324,7 +325,7 @@ function event(event, data) {
var users = chan.get("users"); var users = chan.get("users");
users.remove(users.findWhere({name: data[0].nick})); users.remove(users.findWhere({name: data[0].nick}));
users.sort(); users.sort();
chan.addMessage({ chan.get("messages").add({
from: data[0].nick, from: data[0].nick,
type: "part", type: "part",
}); });
@ -337,7 +338,7 @@ function event(event, data) {
if (user) { if (user) {
users.remove(user); users.remove(user);
users.sort(); users.sort();
chan.addMessage({ chan.get("messages").add({
from: data[0].nick, from: data[0].nick,
type: "quit", type: "quit",
}); });
@ -348,7 +349,7 @@ function event(event, data) {
case "topic": case "topic":
var chan = channels.findWhere({name: data[0].channel}); var chan = channels.findWhere({name: data[0].channel});
var from = data[0].nick || chan.get("name"); var from = data[0].nick || chan.get("name");
chan.addMessage({ chan.get("messages").add({
from: from, from: from,
message: data[0].topic, message: data[0].topic,
type: "topic", type: "topic",
@ -356,7 +357,7 @@ function event(event, data) {
break; break;
case "welcome": case "welcome":
channels.first().addMessage([ channels.first().get("messages").add([
{message: "You're now connected to " + this.get("host")}, {message: "You're now connected to " + this.get("host")},
{message: "You're now known as " + data[0]} {message: "You're now known as " + data[0]}
]); ]);
@ -364,7 +365,7 @@ function event(event, data) {
case "whois": case "whois":
if (data[1] == null) { if (data[1] == null) {
channels.first().addMessage({ channels.first().get("messages").add({
type: "error", type: "error",
message: data[0] message: data[0]
}); });
@ -377,7 +378,7 @@ function event(event, data) {
var i = 0; var i = 0;
for (var k in data[1]) { for (var k in data[1]) {
if (i++ == 5) break; if (i++ == 5) break;
chan.addMessage({ chan.get("messages").add({
message: k + ": " + data[1][k] message: k + ": " + data[1][k]
}); });
} }