Added 'Show more' functionality

This commit is contained in:
Mattias Erming 2014-07-20 12:49:44 -07:00
parent 7ac793fc89
commit 0a3cdc1e9b
7 changed files with 93 additions and 17 deletions

View file

@ -0,0 +1,9 @@
Handlebars.registerHelper(
"equal", function(a, b, opt) {
a = a.toString();
b = b.toString();
if (a == b) {
return opt.fn(this);
}
}
);

View file

@ -48,7 +48,6 @@ button {
border-top-color: #fff;
}
.btn {
border: 2px solid #95a5a6;
border: 2px solid #84d1ff;
border-radius: 5px;
color: #95a5a6;
@ -62,9 +61,11 @@ button {
transition: background .2s, border-color .2s, color .2s;
word-spacing: 3px;
}
.btn:focus {
background: #f2fbff;
}
.btn:disabled,
.btn:hover {
background: #95a5a6;
background: #84d1ff;
color: #fff;
}
@ -338,6 +339,7 @@ button {
}
#windows .window {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#windows .window h1 {
font: 36px Lato;
@ -377,6 +379,17 @@ button {
#chat .sidebar button {
color: #33b0f7;
}
#chat .show-more {
color: #33b0f7;
position: absolute;
width: 100%;
border-bottom: 1px solid #ddd;
height: 41px;
background: #fff;
}
#chat .show-more + .messages .msg:first-child span {
padding-top: 46px;
}
#chat .messages {
display: table;
height: 100%;

View file

@ -29,7 +29,7 @@
<button class="icon sign-in" data-target="#sign-in" data-title="Sign in" data-placement="top" title="Sign in to Shout"></button>
<button class="icon connect" data-target="#connect" data-title="Connect" data-placement="top" title="Connect to network"></button>
<button class="icon settings" data-target="#settings" data-title="Settings" data-placement="top" title="Client settings"></button>
<a href="" class="icon sign-out" data-placement="top" title="Sign out user"></a>
<a href="" class="icon sign-out" data-placement="top" title="Sign out"></a>
</footer>
</aside>
<div id="main">
@ -198,6 +198,11 @@
{{#each channels}}
<div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan">
<div class="chat">
{{#equal 100 messages.length}}
<button class="show-more" data-id="{{id}}">
Show more
</button>
{{/equal}}
<div class="messages">
{{partial "messages"}}
</div>
@ -237,8 +242,6 @@
<span class="from">
{{#if from}}
<button class="user">{{from}}</button>
{{else}}
//
{{/if}}
</span>
<span class="text">

View file

@ -80,6 +80,7 @@ $(function() {
networks: data.networks
})
);
var channels = $.map(data.networks, function(n) {
return n.channels;
});
@ -89,7 +90,9 @@ $(function() {
})
);
sidebar.find(".chan").eq(0).trigger("click"); sidebar.find(".empty").hide();
sidebar.find(".chan").eq(0).trigger("click");
sidebar.find(".empty").hide();
$("body").removeClass("signed-out");
var id = $.cookie("target");
@ -137,6 +140,17 @@ $(function() {
]);
});
socket.on("showMore", function(data) {
var target = data.chan;
chat.find("#chan-" + target)
.find(".show-more")
.remove()
.end()
.find(".messages")
.prepend(render("messages", {messages: data.messages}))
.end();
});
socket.on("network", function(data) {
sidebar.find(".empty").hide();
sidebar.find(".networks").append(
@ -377,14 +391,27 @@ $(function() {
}
});
$("#windows").on("show", ".window", function() {
chat.on("click", ".show-more", function() {
var self = $(this);
var id = self.data("id");
var count = self.next(".messages").children().length;
socket.emit("showMore", {
target: id,
count: count
});
});
var windows = $("#windows");
var forms = $("#sign-in, #connect");
windows.on("show", ".window", function() {
var self = $(this);
setTimeout(function() {
self.find("input").eq(0).focus();
}, 0);
});
$("#sign-in, #connect").on("submit", "form", function(e) {
forms.on("submit", "form", function(e) {
e.preventDefault()
var event = "auth";
var form = $(this);

File diff suppressed because one or more lines are too long

View file

@ -38,3 +38,9 @@ Chan.prototype.sortUsers = function() {
).concat(this.users);
}, this);
};
Chan.prototype.toJSON = function() {
var clone = _.clone(this);
clone.messages = clone.messages.slice(-100);
return clone;
};

View file

@ -99,10 +99,15 @@ function init(socket, client) {
input(client, data);
}
);
socket.on(
"showMore",
function(data) {
showMore(client, data);
}
);
socket.on(
"conn",
function(data) {
console.log(data);
client.connect(data);
}
);
@ -134,6 +139,7 @@ function auth(data) {
function input(client, data) {
var text = data.text;
var target = client.find(data.target);
if (text.charAt(0) !== "/") {
text = "/say " + text;
}
@ -141,7 +147,6 @@ function input(client, data) {
var args = text.split(" ");
var cmd = args.shift().replace("/", "").toLowerCase();
var target = client.find(data.target);
_.each(inputs, function(plugin) {
try {
var path = "./plugins/inputs/" + plugin;
@ -157,3 +162,16 @@ function input(client, data) {
}
});
}
function showMore(client, data) {
var target = client.find(data.target);
if (!target) {
return;
}
var chan = target.chan;
var messages = chan.messages.slice(0, chan.messages.length - (data.count || 0));
client.emit("showMore", {
chan: chan.id,
messages: messages
});
}