cadey
/
Shuo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added tab completion

This commit is contained in:
Mattias Erming 2014-04-07 23:19:20 +02:00
parent e0a004259a
commit dd4c9a400a
6 changed files with 113 additions and 2034 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/css/style.css
View File

@ -180,6 +180,7 @@ h2 {
padding: 0 8px;
}
#chat .messages {
border-left: 8px solid #f0f0f0;
bottom: 30px;
left: 0;
overflow-y: auto;
@ -192,7 +193,7 @@ h2 {
}
#chat .message {
line-height: 1.4em;
padding: 0 6px;
padding: 0 8px;
}
#chat .message div {
display: inline;
@ -203,6 +204,7 @@ h2 {
#chat .message .user {
color: #f00;
}
#chat .message .type,
#chat .message .text {
color: inherit;
}

32
client/index.html
View File

@ -1,24 +1,24 @@
<!doctype html>
<html>
<head>
<title>Chat</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="wrap">
<div id="viewport">
<aside id="sidebar">
<header class="header">
<ul class="nav nav-tabs">
<li class="active"><a href="#list" data-toggle="tab">Channels</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
@ -26,7 +26,7 @@
</header>
<div class="tab-content">
<div id="list" class="tab-pane active"></div>
<div id="settings" class="tab-pane">
<div class="panel panel-default">
@ -41,7 +41,7 @@
</div>
</div>
</div>
</div>
</aside>
<div id="chat">
@ -53,7 +53,7 @@
</div>
<div id="scripts">
<script type="text/html" id="network">
{{#networks}}
<div id="network-{{id}}" class="network list-group">
@ -61,7 +61,6 @@
</div>
{{/networks}}
</script>
<script type="text/html" id="channel">
{{#channels}}
<a href="{{name}}" id="channel-{{id}}" class="channel list-group-item">
@ -70,7 +69,6 @@
</a>
{{/channels}}
</script>
<script type="text/html" id="window">
{{#channels}}
<div id="window-{{id}}" class="window {{type}}">
@ -97,7 +95,6 @@
</div>
{{/channels}}
</script>
<script type="text/html" id="user">
{{#users}}
<a href="{{name}}" class="user">
@ -105,13 +102,13 @@
</a>
{{/users}}
</script>
<script type="text/html" id="message">
{{#messages}}
<div class="message {{type}}">
<div class="time">{{time}}</div>
<div class="user">{{from}}</div>
<div class="text">{{type}} {{message}}</div>
<div class="type">{{type}}</div>
<div class="text">{{message}}</div>
</div>
{{/messages}}
</script>
@ -122,11 +119,12 @@
<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="/js/lib/jquery.scrollGlue.js"></script>
<script src="/js/lib/bootstrap.js"></script>
<script src="/js/lib/jquery.scrollGlue.js"></script>
<script src="/js/lib/jquery.tabComplete.js"></script>
<script src="/js/chat.js"></script>
</div>
</body>
</html>

32
client/js/chat.js
View File

@ -1,4 +1,24 @@
$(function() {
var commands = [
"/connect",
"/deop",
"/devoice",
"/disconnect",
"/join",
"/kick",
"/leave",
"/mode",
"/nick",
"/op",
"/part",
"/query",
"/quit",
"/server",
"/topic",
"/voice",
"/whois",
];
var socket = io.connect("");
$.each(["network", "channel", "message", "user"], function(i, type) {
socket.on(type, function(json) {
@ -46,8 +66,12 @@ $(function() {
chat.find(".messages").scrollGlue({animate: 400}).scrollToBottom();
chat.find(".window")
.find("input")
.tabComplete(commands)
.end()
.first()
.bringToTop();
.bringToTop()
.end();
break;
case "channel":
@ -69,9 +93,13 @@ $(function() {
render("#window", {channels: json.data})
).find(".window")
.last()
.find("input")
.tabComplete(commands)
.end()
.bringToTop()
.find(".messages")
.scrollGlue({animate: 400});
.scrollGlue({animate: 400})
.end();
break;
case "user":

2000
client/js/lib/URI.js
View File

File diff suppressed because it is too large Load Diff

51
client/js/lib/jquery.tabComplete.js Normal file
View File

@ -0,0 +1,51 @@
/*!
* jquery-tab-complete
* https://github.com/erming/jquery-tab-complete
*
* Copyright (c) 2014 Mattias Erming <mattias@mattiaserming.com>
* Licensed under the MIT License.
*
* Version 0.1.0
*/
(function($) {
$.fn.tabComplete = function(list) {
var self = this;
if (self.size() > 1) {
return self.each(function() {
$(this).tabComplete(list);
});
}
var match = [];
self.on('keydown', function(e) {
var key = e.which;
if (key != 9) {
match = [];
return;
}
var text = self.val().split(' ');
var last = text.splice(-1)[0];
if (!match.length) {
match = $.grep(list, function(w) {
return last != '' && w.indexOf(last) !== -1;
});
}
var i = match.indexOf(last) + 1;
if (i == match.length) {
i = 0;
}
if (match.length) {
last = match[i];
}
text.push(last);
self.val(text.join(' '));
return false;
});
};
})(jQuery);

28
lib/server.js
View File

@ -195,20 +195,6 @@ function event(event, data) {
});
break;
case "part":
var chan = channels.findWhere({name: data[0].channels[0]});
if (data[0].nick == this.get("client").me) {
channels.remove(chan);
return;
}
var users = chan.get("users");
users.remove(users.findWhere({name: data[0].nick}));
chan.addMessage({
from: data[0].nick,
type: "part",
});
break;
case "kick":
var chan = channels.findWhere({name: data[0].channel});
var users = chan.get("users");
@ -281,6 +267,20 @@ function event(event, data) {
channels.first().addMessage(data[0]);
break;
case "part":
var chan = channels.findWhere({name: data[0].channels[0]});
if (data[0].nick == this.get("client").me) {
channels.remove(chan);
return;
}
var users = chan.get("users");
users.remove(users.findWhere({name: data[0].nick}));
chan.addMessage({
from: data[0].nick,
type: "part",
});
break;
case "quit":
channels.each(function(chan) {
var users = chan.get("users");