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

View file

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

View file

@ -11,6 +11,7 @@ body {
height: 100%;
}
body {
background: #fff;
color: #222;
font: 16px Lato, sans-serif;
margin: 0;
@ -245,7 +246,7 @@ button {
display: inline;
}
#meta {
border-bottom: 1px solid #e9ecef;
height: 80px;
padding: 25px 0 0 20px;
}
@ -253,18 +254,46 @@ button {
color: #222;
font-size: 15px;
}
#meta .count {
color: #ccc;
}
#meta .type {
color: #ccc;
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 {
bottom: 0;
overflow: auto;
padding: 15px 20px;
position: absolute;
top: 80px;
top: 120px;
width: 100%;
}
#users button {

View file

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

View file

@ -49,7 +49,7 @@ $(function() {
});
socket.on("init", function(data) {
networks.empty()
networks.empty();
channels = $.map(data.networks, function(n) {
return n.channels;
});
@ -102,12 +102,21 @@ $(function() {
});
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) {
console.log(data);
networks.find(".network[data-id='" + data.network + "']").remove();
networks.find(".network[data-id='" + data.network + "']")
.remove()
.end()
.find(".chan")
.eq(0)
.trigger("click");
});
socket.on("users", function(data) {
@ -136,9 +145,15 @@ $(function() {
});
networks.on("click", ".chan", function() {
var id = $(this).data("id");
var chan = find(id);
var self = $(this);
var id = self.data("id");
networks.find(".active").removeClass("active");
self.addClass("active");
chat.data("target", id);
var chan = find(id);
if (typeof chan !== "undefined") {
activeChannel = chan;
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) {
return activeChannel !== null && chan == activeChannel;
}