Added 'See more' functionality

This commit is contained in:
Mattias Erming 2014-04-26 17:26:30 +02:00
parent 054344343d
commit 47280e7490
3 changed files with 71 additions and 49 deletions

View File

@ -49,6 +49,7 @@
{{partial "#users"}}
</div>
<div class="messages">
<button class="show-more">Show more</button>
{{partial "#messages"}}
</div>
<form onSubmit="return false;">
@ -71,7 +72,7 @@
</script>
<script type="text/html" id="messages">
{{#each messages}}
{{#slice messages limit="100"}}
<div class="msg {{type}}">
<span class="time">
{{time}}
@ -88,7 +89,7 @@
{{{uri text}}}
</span>
</div>
{{/each}}
{{/slice}}
</script>
<script src="/js/jquery.js"></script>

View File

@ -46,9 +46,8 @@ $(function() {
function event(e, data) {
switch (e) {
case "join":
chat.append(render("#windows", {
windows: [data.chan],
})).find(".window")
chat.append(render("#windows", {windows: [data.chan]}))
.find(".window")
.last()
.find(".input")
.tabComplete({after: " ", list: commands})
@ -58,24 +57,29 @@ $(function() {
.find(".messages")
.scrollGlue({speed: 400})
.end();
$("#network-" + data.id).append(render("#channels", {
channels: [data.chan],
})).find(".channel")
// Sidebar
$("#network-" + data.id)
.append(render("#channels", {channels: [data.chan]}))
.find(".channel")
.last()
.uniqueClass("active")
.end();
break;
case "msg":
$("#window-" + data.id).find(".messages").append(render("#messages", {
messages: [data.msg],
}));
$("#window-" + data.id)
.find(".messages")
.append(render("#messages", {messages: [data.msg]}));
break;
case "networks":
chat.html(render("#windows", {
windows: $.map(data.networks, function(n) { return n.channels; }),
})).find(".window")
var channels = $.map(data.networks, function(n) { return n.channels; });
chat.html(render("#windows", {windows: channels}))
.find(".window")
.last()
.bringToTop()
.end()
.find(".input")
.tabComplete({after: " ", list: commands})
.inputHistory({submit: true})
@ -83,29 +87,32 @@ $(function() {
.find(".messages")
.scrollGlue({speed: 400})
.end()
.last()
.bringToTop()
.find(".hidden")
.prev(".show-more")
.show()
.end();
sidebar.html(render("#networks", {
networks: data.networks,
})).find(".channel")
sidebar.html(render("#networks", {networks: data.networks}))
.find(".channel")
.last()
.addClass("active")
.end();
break;
case "nick":
// Not yet implemented.
// ..
break;
case "part":
$("#channel-" + data.id + ", #window-" + data.id).remove();
$("#channel-" + data.id)
.add("#window-" + data.id)
.remove();
break;
case "users":
$("#window-" + data.id).find(".users").html(render("#users", {
users: data.users,
}));
$("#window-" + data.id)
.find(".users")
.html(render("#users", {users: data.users}));
break;
}
}
@ -148,43 +155,53 @@ $(function() {
});
});
chat.on("click", ".show-more", function() {
var btn = $(this);
btn.replaceWith($.parseHTML(
btn.next(".hidden").remove().html()
));
});
sidebar.on("click", ".channel", function(e) {
e.preventDefault();
$("#window-" + $(this).attr("id").replace("channel-", ""))
.bringToTop();
});
// Utils
function escape(text) {
var e = {
"<": "&lt;",
">": "&gt;"
};
return text.replace(/[<>]/g, function (c) {
return e[c];
});
}
function uri(text) {
Handlebars.registerHelper({
"partial": function(id) {
return new Handlebars.SafeString(render(id, this));
},
"uri": function(text) {
text = escape(text);
return URI.withinString(text, function(url) {
return "<a href='" + url.replace(/^www/, "//www") + "' target='_blank'>" + url + "</a>";
});
}
function escape(string) {
var e = {
"<": "&lt;",
">": "&gt;",
};
return string.replace(/[<>]/g, function (s) {
return e[s];
},
"slice": function(items, block) {
var limit = block.hash.limit;
var rows = $.map(items, function(i) {
return block.fn(i);
});
var html = "";
var hide = rows
.slice(0, Math.max(0, rows.length - limit))
.join("");
if (hide != "") {
html = "<script type='text/html' class='hidden'>" + hide + "</script>";
}
// Helpers
Handlebars.registerHelper(
"uri",
function(text) {
return uri(escape(text));
html += rows.slice(-limit).join("");
return html;
}
);
Handlebars.registerHelper(
"partial",
function(id) {
return new Handlebars.SafeString(render(id, this));
}
);
});
});

View File

@ -134,6 +134,10 @@ li {
word-wrap: break-word;
z-index: 0;
}
#chat .show-more {
display: none;
margin-left: 14px;
}
#chat .msg {
border-left: 8px solid transparent;
line-height: 1.3em;