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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/index.html
View File

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

113
client/js/chat.js
View File

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

4
client/style.css
View File

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