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

Added user search

This commit is contained in:
Mattias Erming 2014-07-05 01:32:40 +02:00
parent dbcf26d1bd
commit d38c5c77d4
4 changed files with 73 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -2,7 +2,7 @@ module.exports = function(grunt) {
var components = ""; var components = "";
var files = [ var files = [
"./lib/**/*.js", "./lib/**/*.js",
"./client/js/shout.js" "./client/js/chat.js"
]; ];
grunt.initConfig({ grunt.initConfig({
watch: { watch: {

39
client/css/style.css
View File

@ -11,6 +11,7 @@ body {
height: 100%; height: 100%;
} }
body { body {
background: #fff;
color: #222; color: #222;
font: 16px Lato, sans-serif; font: 16px Lato, sans-serif;
margin: 0; margin: 0;
@ -245,7 +246,7 @@ button {
display: inline; display: inline;
} }
#meta { #meta {
border-bottom: 1px solid #e9ecef;
height: 80px; height: 80px;
padding: 25px 0 0 20px; padding: 25px 0 0 20px;
} }
@ -253,18 +254,46 @@ button {
color: #222; color: #222;
font-size: 15px; font-size: 15px;
} }
#meta .count {
color: #ccc;
}
#meta .type { #meta .type {
color: #ccc;
text-transform: capitalize; text-transform: capitalize;
} }
#count {
background: #f9f9f9;
border-top: 1px dashed #e9ecef;
border-bottom: 1px solid #e9ecef;
height: 40px;
left: 0;
position: absolute;
right: 0;
top: 80px;
}
#count:before {
color: #eee;
font: 16px Octicons;
content: "\f02e";
position: absolute;
right: 18px;
line-height: 40px;
transition: color .2s;
}
#search {
color: #222;
border: 0;
background: none;
font: inherit;
outline: 0;
padding: 12px 20px;
position: relative;
width: 100%;
z-index: 2;
}
#users { #users {
bottom: 0; bottom: 0;
overflow: auto; overflow: auto;
padding: 15px 20px; padding: 15px 20px;
position: absolute; position: absolute;
top: 80px; top: 120px;
width: 100%; width: 100%;
} }
#users button { #users button {

11
client/index.html
View File

@ -71,16 +71,15 @@
<script type="text/html" class="users"> <script type="text/html" class="users">
<div id="meta"> <div id="meta">
<h1>{{name}}</h1> <h1>{{name}}</h1>
<div class="count">
{{#if users.length}}
{{users.length}} users
{{else}}
<span class="type"> <span class="type">
{{type}} {{type}}
</span> </span>
</div>
{{#if users.length}}
<div id="count">
<input id="search" placeholder="{{users.length}} users">
</div>
{{/if}} {{/if}}
</div>
</div>
<div id="users"> <div id="users">
{{#each users}} {{#each users}}
<button>{{mode}}{{name}}</button> <button>{{mode}}{{name}}</button>

39
client/js/chat.js
View File

@ -49,7 +49,7 @@ $(function() {
}); });
socket.on("init", function(data) { socket.on("init", function(data) {
networks.empty() networks.empty();
channels = $.map(data.networks, function(n) { channels = $.map(data.networks, function(n) {
return n.channels; return n.channels;
}); });
@ -102,12 +102,21 @@ $(function() {
}); });
socket.on("part", function(data) { socket.on("part", function(data) {
networks.find(".chan[data-id='" + data.chan + "']").remove(); networks.find(".chan[data-id='" + data.chan + "']")
.remove()
.end()
.find(".chan")
.eq(0)
.trigger("click");
}); });
socket.on("quit", function(data) { socket.on("quit", function(data) {
console.log(data); networks.find(".network[data-id='" + data.network + "']")
networks.find(".network[data-id='" + data.network + "']").remove(); .remove()
.end()
.find(".chan")
.eq(0)
.trigger("click");
}); });
socket.on("users", function(data) { socket.on("users", function(data) {
@ -136,9 +145,15 @@ $(function() {
}); });
networks.on("click", ".chan", function() { networks.on("click", ".chan", function() {
var id = $(this).data("id"); var self = $(this);
var chan = find(id); var id = self.data("id");
networks.find(".active").removeClass("active");
self.addClass("active");
chat.data("target", id); chat.data("target", id);
var chan = find(id);
if (typeof chan !== "undefined") { if (typeof chan !== "undefined") {
activeChannel = chan; activeChannel = chan;
chat.html( chat.html(
@ -147,6 +162,18 @@ $(function() {
} }
}); });
chat.on("input", "#search", function() {
var val = $(this).val();
$("#users").find("button").each(function() {
var btn = $(this);
if (btn.text().toLowerCase().indexOf(val) === 0) {
btn.show();
} else {
btn.hide();
}
});
});
function isActive(chan) { function isActive(chan) {
return activeChannel !== null && chan == activeChannel; return activeChannel !== null && chan == activeChannel;
} }