From b45a3e09fdff2381b3ada2dd0c1ddb9c2dc6c295 Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Thu, 6 Mar 2014 10:53:02 -0800
Subject: [PATCH] Sticky scroll to bottom

---
 client/css/style.css |  3 ++-
 client/js/chat.js    | 25 ++++++++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

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;
+		}
+	};
 })();