Added 'See more' functionality
This commit is contained in:
parent
054344343d
commit
47280e7490
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -147,6 +154,13 @@ $(function() {
|
|||||||
text: "/part",
|
text: "/part",
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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();
|
||||||
@ -154,37 +168,40 @@ $(function() {
|
|||||||
.bringToTop();
|
.bringToTop();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Utils
|
function escape(text) {
|
||||||
|
|
||||||
function uri(text) {
|
|
||||||
return URI.withinString(text, function(url) {
|
|
||||||
return "<a href='" + url.replace(/^www/, "//www") + "' target='_blank'>" + url + "</a>";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function escape(string) {
|
|
||||||
var e = {
|
var e = {
|
||||||
"<": "<",
|
"<": "<",
|
||||||
">": ">",
|
">": ">"
|
||||||
};
|
};
|
||||||
return string.replace(/[<>]/g, function (s) {
|
return text.replace(/[<>]/g, function (c) {
|
||||||
return e[s];
|
return e[c];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helpers
|
Handlebars.registerHelper({
|
||||||
|
"partial": function(id) {
|
||||||
Handlebars.registerHelper(
|
|
||||||
"uri",
|
|
||||||
function(text) {
|
|
||||||
return uri(escape(text));
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
Handlebars.registerHelper(
|
|
||||||
"partial",
|
|
||||||
function(id) {
|
|
||||||
return new Handlebars.SafeString(render(id, this));
|
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>";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
"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>";
|
||||||
|
}
|
||||||
|
html += rows.slice(-limit).join("");
|
||||||
|
return html;
|
||||||
}
|
}
|
||||||
);
|
});
|
||||||
});
|
});
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user