Updated chat rendering
This commit is contained in:
Mattias Erming
parent
cb663777b4
commit
9c2ffee7d0
|
|
@ -11,14 +11,17 @@
|
|||
});
|
||||
}
|
||||
|
||||
console.log("YES");
|
||||
|
||||
var isBottom = false;
|
||||
var self = this;
|
||||
|
||||
this.on("beforeAppend", function() {
|
||||
this.unbind(".sticky");
|
||||
this.on("beforeAppend.sticky", function() {
|
||||
isBottom = isScrollBottom.call(self);
|
||||
});
|
||||
|
||||
this.on("afterAppend", function() {
|
||||
this.on("afterAppend.sticky", function() {
|
||||
if (isBottom) {
|
||||
self.scrollBottom();
|
||||
}
|
||||
|
|
@ -32,6 +35,8 @@
|
|||
"overflow-y": overflow
|
||||
});
|
||||
|
||||
|
||||
this.scrollBottom();
|
||||
return this;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import url(
|
||||
http://fonts.googleapis.com/css?family=Lato:300,400,700
|
||||
http://fonts.googleapis.com/css?family=Lato:400,700
|
||||
);
|
||||
@font-face {
|
||||
font-family: "Octicons";
|
||||
|
|
@ -29,10 +29,6 @@ h2 {
|
|||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
font: 300 48px Lato, sans-serif;
|
||||
}
|
||||
button {
|
||||
background: 0;
|
||||
border: none;
|
||||
|
|
@ -75,15 +71,14 @@ button {
|
|||
background: #323841;
|
||||
color: #fff;
|
||||
}
|
||||
#networks {
|
||||
display: none;
|
||||
#sidebar .networks {
|
||||
min-height: 100%;
|
||||
padding: 30px 40px 80px;
|
||||
}
|
||||
#networks .network + .network {
|
||||
#sidebar .network + .network {
|
||||
margin-top: 30px;
|
||||
}
|
||||
#networks .chan {
|
||||
#sidebar .chan {
|
||||
display: block;
|
||||
margin: 1px -10px;
|
||||
padding: 6px 10px 8px;
|
||||
|
|
@ -92,12 +87,12 @@ button {
|
|||
transition: all .2s;
|
||||
width: 160px;
|
||||
}
|
||||
#networks .chan:first-child {
|
||||
#sidebar .chan:first-child {
|
||||
color: #84d1ff;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#networks .badge {
|
||||
#sidebar .badge {
|
||||
background: rgba(255, 255, 255, .06);
|
||||
border-radius: 3px;
|
||||
color: #afb6c0;
|
||||
|
|
@ -108,7 +103,7 @@ button {
|
|||
right: 10px;
|
||||
transition: all .1s;
|
||||
}
|
||||
#networks .badge:empty {
|
||||
#sidebar .badge:empty {
|
||||
display: none;
|
||||
}
|
||||
#footer {
|
||||
|
|
@ -176,8 +171,14 @@ button {
|
|||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
#windows > div {
|
||||
display: none;
|
||||
#windows > div,
|
||||
#windows .chan {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
#chat {
|
||||
font: 13px Consolas, monospace;
|
||||
|
|
@ -188,7 +189,7 @@ button {
|
|||
#chat button:hover {
|
||||
opacity: .6;
|
||||
}
|
||||
#chat .window {
|
||||
#chat .chat {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
|
|
@ -206,37 +207,36 @@ button {
|
|||
right: 0;
|
||||
top: 0;
|
||||
width: 180px;
|
||||
z-index: 1;
|
||||
}
|
||||
#messages {
|
||||
#chat .messages {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#messages .msg {
|
||||
#chat .msg {
|
||||
display: table-row;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
#messages .msg:last-child {
|
||||
#chat .msg:last-child {
|
||||
height: 100%;
|
||||
}
|
||||
#messages .msg:last-child .text {
|
||||
#chat .msg:last-child .text {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
#messages .time,
|
||||
#messages .from,
|
||||
#messages .text {
|
||||
#chat .time,
|
||||
#chat .from,
|
||||
#chat .text {
|
||||
display: table-cell;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
#messages .time {
|
||||
#chat .time {
|
||||
background: #f9f9f9;
|
||||
color: #ddd;
|
||||
text-align: right;
|
||||
width: 46px;
|
||||
}
|
||||
#messages .from {
|
||||
#chat .from {
|
||||
background: #f9f9f9;
|
||||
border-right: 1px solid #f4f4f4;
|
||||
color: #ddd;
|
||||
|
|
@ -244,46 +244,46 @@ button {
|
|||
text-align: right;
|
||||
width: 134px;
|
||||
}
|
||||
#messages a,
|
||||
#messages .from button {
|
||||
#chat a,
|
||||
#chat .from button {
|
||||
color: #33b0f7;
|
||||
}
|
||||
#messages .text {
|
||||
#chat .text {
|
||||
padding-left: 10px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
#messages .text a {
|
||||
#chat .text a {
|
||||
word-break: break-all;
|
||||
}
|
||||
#messages .type {
|
||||
#chat .type {
|
||||
color: #ccc;
|
||||
display: none;
|
||||
}
|
||||
#messages .join .type,
|
||||
#messages .part .type,
|
||||
#messages .mode .type,
|
||||
#messages .nick .type,
|
||||
#messages .kick .type,
|
||||
#messages .quit .type,
|
||||
#messages .quit .type,
|
||||
#messages .notice .type,
|
||||
#messages .topic .type {
|
||||
#chat .join .type,
|
||||
#chat .part .type,
|
||||
#chat .mode .type,
|
||||
#chat .nick .type,
|
||||
#chat .kick .type,
|
||||
#chat .quit .type,
|
||||
#chat .quit .type,
|
||||
#chat .notice .type,
|
||||
#chat .topic .type {
|
||||
display: inline;
|
||||
}
|
||||
#meta {
|
||||
#chat .meta {
|
||||
|
||||
height: 80px;
|
||||
padding: 25px 0 0 20px;
|
||||
}
|
||||
#meta h1 {
|
||||
#chat .meta h1 {
|
||||
color: #222;
|
||||
font-size: 15px;
|
||||
}
|
||||
#meta .type {
|
||||
#chat .meta .type {
|
||||
color: #ccc;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#count {
|
||||
#chat .count {
|
||||
background: #f9f9f9;
|
||||
border-top: 1px dashed #e9ecef;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
|
|
@ -293,7 +293,7 @@ button {
|
|||
right: 0;
|
||||
top: 80px;
|
||||
}
|
||||
#count:before {
|
||||
#chat .count:before {
|
||||
color: #eee;
|
||||
font: 16px Octicons;
|
||||
content: "\f02e";
|
||||
|
|
@ -301,8 +301,9 @@ button {
|
|||
right: 18px;
|
||||
line-height: 40px;
|
||||
transition: color .2s;
|
||||
z-index: -1;
|
||||
}
|
||||
#search {
|
||||
#chat .search {
|
||||
color: #222;
|
||||
border: 0;
|
||||
background: none;
|
||||
|
|
@ -311,9 +312,8 @@ button {
|
|||
padding: 12px 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
#users {
|
||||
#chat .names {
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
|
@ -322,7 +322,7 @@ button {
|
|||
top: 120px;
|
||||
width: 100%;
|
||||
}
|
||||
#users button {
|
||||
#chat .names button {
|
||||
display: block;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<body>
|
||||
|
||||
<aside id="sidebar">
|
||||
<div id="networks"></div>
|
||||
<div class="networks"></div>
|
||||
<footer id="footer">
|
||||
<button id="btn-1" data-target="#connect"></button>
|
||||
<button id="btn-2" data-target="#settings"></button>
|
||||
|
|
@ -32,14 +32,17 @@
|
|||
</header>
|
||||
<div id="windows">
|
||||
<div id="chat"></div>
|
||||
<div id="connect" class="container">
|
||||
<div id="connect">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1>Connect</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settings" class="container">
|
||||
</div>
|
||||
<div id="settings">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1>Settings</h1>
|
||||
|
|
@ -47,6 +50,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form id="form" action="">
|
||||
<input id="submit" tabindex="-1" type="submit">
|
||||
<input id="input">
|
||||
|
|
@ -64,7 +68,7 @@
|
|||
|
||||
<script type="text/html" class="channels">
|
||||
{{#each channels}}
|
||||
<button id="chan-{{id}}" class="chan" data-type="{{type}}">
|
||||
<button data-id="{{id}}" data-target="#chan-{{id}}" class="chan">
|
||||
<span class="badge"></span>
|
||||
{{name}}
|
||||
</button>
|
||||
|
|
@ -72,29 +76,33 @@
|
|||
</script>
|
||||
|
||||
<script type="text/html" class="chat">
|
||||
<div class="window">
|
||||
<div id="messages">
|
||||
{{#each channels}}
|
||||
<div id="chan-{{id}}" data-type="{{type}}" class="chan">
|
||||
<div class="chat">
|
||||
<div class="messages">
|
||||
{{partial "messages"}}
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="meta">
|
||||
<h1>{{name}}</h1>
|
||||
<span class="type">{{type}}</span>
|
||||
</div>
|
||||
<div class="users">
|
||||
{{partial "users"}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
{{/each}}
|
||||
</script>
|
||||
|
||||
<script type="text/html" class="users">
|
||||
<div id="meta">
|
||||
<h1>{{name}}</h1>
|
||||
<span class="type">
|
||||
{{type}}
|
||||
</span>
|
||||
</div>
|
||||
{{#if users.length}}
|
||||
<div id="count">
|
||||
<input id="search" placeholder="{{users.length}} users">
|
||||
<div class="count">
|
||||
<input class="search" placeholder="{{users.length}} users">
|
||||
</div>
|
||||
{{/if}}
|
||||
<div id="users">
|
||||
<div class="names">
|
||||
{{#each users}}
|
||||
<button class="user">{{mode}}{{name}}</button>
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -34,10 +34,6 @@ $(function() {
|
|||
var sidebar = $("#sidebar");
|
||||
var chat = $("#chat");
|
||||
|
||||
var networks = $("#networks");
|
||||
var channels = [];
|
||||
var active = null;
|
||||
|
||||
var tpl = [];
|
||||
function render(name, data) {
|
||||
tpl[name] = tpl[name] || Handlebars.compile($("#templates ." + name).html());
|
||||
|
|
@ -49,59 +45,61 @@ $(function() {
|
|||
});
|
||||
|
||||
socket.on("init", function(data) {
|
||||
networks.empty();
|
||||
channels = $.map(data.networks, function(n) {
|
||||
var channels = $.map(data.networks, function(n) {
|
||||
return n.channels;
|
||||
});
|
||||
networks.append(
|
||||
sidebar.find(".networks").html(
|
||||
render("networks", {
|
||||
networks: data.networks
|
||||
})
|
||||
).fadeIn();
|
||||
var active = $($.cookie("active"));
|
||||
if (active.length === 0) {
|
||||
active = networks.find(".chan").eq(0);
|
||||
);
|
||||
chat.html(
|
||||
render("chat", {
|
||||
channels: channels
|
||||
})
|
||||
);
|
||||
var id = $.cookie("target");
|
||||
var target = sidebar.find("[data-target=" + id + "]");
|
||||
if (target.length !== 0) {
|
||||
target.trigger("click");
|
||||
} else {
|
||||
sidebar.find(".chan")
|
||||
.eq(0)
|
||||
.trigger("click");
|
||||
}
|
||||
active.trigger("click");
|
||||
});
|
||||
|
||||
socket.on("join", function(data) {
|
||||
channels.push(data.chan);
|
||||
var id = data.network;
|
||||
var network = networks
|
||||
.find("#network-" + id)
|
||||
.eq(0);
|
||||
var network = sidebar.find("#network-" + id);
|
||||
network.append(
|
||||
render("channels", {
|
||||
channels: [data.chan]
|
||||
})
|
||||
);
|
||||
network.find(".chan")
|
||||
chat.append(
|
||||
render("chat", {
|
||||
channels: [data.chan]
|
||||
})
|
||||
);
|
||||
sidebar.find(".chan")
|
||||
.last()
|
||||
.trigger("click");
|
||||
});
|
||||
|
||||
socket.on("msg", function(data) {
|
||||
var chan = find(data.chan);
|
||||
if (typeof chan !== "undefined") {
|
||||
chan.messages.push(data.msg);
|
||||
if (isActive(chan)) {
|
||||
chat.find("#messages").append(
|
||||
render("messages", {messages: [data.msg]})
|
||||
);
|
||||
}
|
||||
}
|
||||
chat.find("#chan-" + data.chan)
|
||||
.find(".messages")
|
||||
.append(render("messages", {messages: [data.msg]}));
|
||||
});
|
||||
|
||||
socket.on("network", function(data) {
|
||||
var lobby = data.network.channels[0];
|
||||
channels.push(lobby);
|
||||
networks.append(
|
||||
sidebar.find(".networks").append(
|
||||
render("networks", {
|
||||
networks: [data.network]
|
||||
})
|
||||
);
|
||||
networks.find(".chan")
|
||||
sidebar.find(".chan")
|
||||
.last()
|
||||
.trigger("click");
|
||||
});
|
||||
|
|
@ -112,7 +110,7 @@ $(function() {
|
|||
|
||||
socket.on("part", function(data) {
|
||||
var id = data.chan;
|
||||
networks.find("#chan-" + id)
|
||||
sidebar.find("[data-target=#chan-" + id + "]")
|
||||
.remove()
|
||||
.end()
|
||||
.find(".chan")
|
||||
|
|
@ -122,7 +120,7 @@ $(function() {
|
|||
|
||||
socket.on("quit", function(data) {
|
||||
var id = data.network;
|
||||
networks.find("#network-" + id)
|
||||
sidebar.find("#network-" + id)
|
||||
.remove()
|
||||
.end()
|
||||
.find(".chan")
|
||||
|
|
@ -131,13 +129,9 @@ $(function() {
|
|||
});
|
||||
|
||||
socket.on("users", function(data) {
|
||||
var chan = find(data.chan);
|
||||
if (typeof chan !== "undefined") {
|
||||
chan.users = data.users;
|
||||
if (isActive(chan)) {
|
||||
chat.find(".sidebar").html(render("users", chan));
|
||||
}
|
||||
}
|
||||
chat.find("#chan-" + data.chan)
|
||||
.find(".users")
|
||||
.html(render("users", data));
|
||||
});
|
||||
|
||||
var input = $("#input")
|
||||
|
|
@ -149,45 +143,41 @@ $(function() {
|
|||
var value = input.val();
|
||||
input.val("");
|
||||
socket.emit("input", {
|
||||
target: active.id || -1,
|
||||
target: chat.data("id"),
|
||||
text: value
|
||||
});
|
||||
});
|
||||
|
||||
var top = 1;
|
||||
sidebar.on("click", "button:not(.active)", function() {
|
||||
var btn = $(this);
|
||||
var id = "#" + btn.attr("id");
|
||||
var self = $(this);
|
||||
var target = self.data("target");
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.cookie("active", id);
|
||||
$.cookie("target", target);
|
||||
chat.data(
|
||||
"id",
|
||||
self.data("id")
|
||||
);
|
||||
|
||||
sidebar.find(".active").removeClass("active");
|
||||
btn.addClass("active");
|
||||
self.addClass("active")
|
||||
.find(".badge")
|
||||
.removeClass("highlight")
|
||||
.empty();
|
||||
|
||||
active = null;
|
||||
if (btn.hasClass("chan")) {
|
||||
var chan = find(id.replace("#chan-", ""));
|
||||
if (typeof chan !== "undefined") {
|
||||
active = chan;
|
||||
chat.fadeIn();
|
||||
chat.siblings().hide();
|
||||
chat.html(render("chat", chan));
|
||||
chat.find(".window")
|
||||
.sticky()
|
||||
.scrollBottom();
|
||||
}
|
||||
} else {
|
||||
chat.empty();
|
||||
var target = $(btn.data("target"));
|
||||
if (target.length !== 0) {
|
||||
target.fadeIn();
|
||||
target.siblings().hide();
|
||||
}
|
||||
}
|
||||
var chan = $(target)
|
||||
.css("z-index", top++)
|
||||
.find(".chat")
|
||||
.sticky();
|
||||
});
|
||||
|
||||
chat.on("input", "#search", function() {
|
||||
chat.on("input", ".search", function() {
|
||||
var val = $(this).val();
|
||||
$("#users").find("button").each(function() {
|
||||
var names = $(this).closest(".users").find(".names");
|
||||
names.find("button").each(function() {
|
||||
var btn = $(this);
|
||||
if (btn.text().toLowerCase().indexOf(val) === 0) {
|
||||
btn.show();
|
||||
|
|
@ -203,7 +193,7 @@ $(function() {
|
|||
return;
|
||||
}
|
||||
socket.emit("input", {
|
||||
target: active.id || -1,
|
||||
target: active,
|
||||
text: "/whois " + user
|
||||
});
|
||||
});
|
||||
|
|
@ -212,12 +202,6 @@ $(function() {
|
|||
return active !== null && chan == active;
|
||||
}
|
||||
|
||||
function find(id) {
|
||||
return $.grep(channels, function(c) {
|
||||
return c.id == id;
|
||||
})[0];
|
||||
}
|
||||
|
||||
function complete(word) {
|
||||
return $.grep(
|
||||
commands,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue