diff --git a/client/css/style.css b/client/css/style.css index 7884c71..5347cde 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -115,14 +115,15 @@ h2 { padding: 0px 8px; } #chat .messages { + bottom: 26px; left: 0; overflow-y: auto; padding: 6px 0; position: absolute; right: 160px; top: 36px; + word-wrap: break-word; z-index: 0; - bottom: 26px; } #chat .messages .message { padding: 0 8px; diff --git a/client/js/chat.js b/client/js/chat.js index ca9a153..12f2598 100644 --- a/client/js/chat.js +++ b/client/js/chat.js @@ -20,9 +20,6 @@ $(function() { var View = {}; View.refresh = function(event) { - if (event.data == undefined || event.data == []) { - return; - } chat.html(""); event.data.forEach(function(network) { chat.append(Mustache.render(channels, network, { @@ -30,6 +27,7 @@ $(function() { messages: messages })); }); + chat.find(".messages").scrollToBottom(); sidebar.html( Mustache.render(networks, { networks: event.data @@ -44,19 +42,23 @@ $(function() { case "user": target = ".users"; render = Mustache.render( - $("#users").html(), {users: event.data} + users, {users: event.data} ); break; case "message": target = ".messages"; render = Mustache.render( - $("#messages").html(), {messages: event.data} + messages, {messages: event.data} ); break; } if (target != "") { target = $("[data-id='" + event.target + "'] " + target); + var keepAtBottom = target.isScrollBottom(); target.append(render); + if (keepAtBottom) { + target.scrollToBottom(); + } } }; @@ -86,9 +88,22 @@ $(function() { }); }); + (function() { var highest = 1; $.fn.bringToTop = function() { this.css('z-index', highest++); }; + + $.fn.scrollToBottom = function() { + this.scrollTop(this.prop("scrollHeight")); + }; + + $.fn.isScrollBottom = function() { + var height = this.outerHeight(); + var scroll = this.scrollTop(); + if ((scroll + height + 5) >= this.prop("scrollHeight")) { + return true; + } + }; })();