Merge pull request #537 from calzoneman/chatscroll-improvements

Chatscroll improvements

www/css/cytube.css

@@ -649,3 +649,17 @@ input#logout[type="submit"] {
 input#logout[type="submit"]:hover {
     text-decoration: underline;
 }
+
+#newmessages-indicator {
+    margin-top: -30px;
+    line-height: 30px;
+    height: 30px;
+    text-align: center;
+    width: 100%;
+    font-weight: bold;
+}
+
+#newmessages-indicator .glyphicon {
+    margin-left: 10px;
+    margin-right: 10px;
+}

www/css/themes/bootstrap-theme.min.css

@@ -81,3 +81,8 @@ footer {
 .queue_entry.queue_active {
     background-color: #d9edf7;
 }
+
+#newmessages-indicator-bghack {
+    background: rgb(200, 200, 200);
+    background: rgba(200, 200, 200, 0.9);
+}

www/css/themes/cyborg.css

@@ -85,3 +85,8 @@ input.form-control[type="email"], textarea.form-control {
 .queue_entry.queue_active {
     background-color: #333333;
 }
+
+#newmessages-indicator-bghack {
+    background: rgb(32, 32, 32);
+    background: rgba(32, 32, 32, 0.9);
+}

www/css/themes/light.css

@@ -75,3 +75,8 @@ footer {
 .queue_entry.queue_active {
     background-color: #d9edf7;
 }
+
+#newmessages-indicator-bghack {
+    background: rgb(200, 200, 200);
+    background: rgba(200, 200, 200, 0.9);
+}

www/css/themes/modern.css

@@ -186,3 +186,8 @@ input.form-control[type="email"], textarea.form-control {
     min-height: 20px;
     padding: 10px 19px !important;
 }
+
+#newmessages-indicator-bghack {
+    background: rgb(16, 16, 16);
+    background: rgba(16, 16, 16, 0.9);
+}

www/css/themes/slate.css

@@ -97,3 +97,8 @@ input.form-control[type="email"], textarea.form-control {
 .navbar-inverse .navbar-text-nofloat {
     color: #ccc;
 }
+
+#newmessages-indicator-bghack {
+    background: rgb(0, 0, 0);
+    background: rgba(0, 0, 0, 0.9);
+}

www/js/ui.js

@@ -81,8 +81,16 @@ $("#usercount").mouseleave(function () {
     $("#usercount").find(".profile-box").remove();
 });
 
-$("#messagebuffer").mouseenter(function() { SCROLLCHAT = false; });
-$("#messagebuffer").mouseleave(function() { SCROLLCHAT = true; });
+$("#messagebuffer").scroll(function () {
+    var m = $("#messagebuffer");
+    var isCaughtUp = m.height() + m.scrollTop() >= m.prop("scrollHeight");
+    if (isCaughtUp) {
+        SCROLLCHAT = true;
+        $("#newmessages-indicator").remove();
+    } else {
+        SCROLLCHAT = false;
+    }
+});
 
 $("#guestname").keydown(function (ev) {
     if (ev.keyCode === 13) {

www/js/util.js

@@ -821,6 +821,7 @@ function showPollMenu() {
 
 function scrollChat() {
     $("#messagebuffer").scrollTop($("#messagebuffer").prop("scrollHeight"));
+    $("#newmessages-indicator").remove();
 }
 
 function hasPermission(key) {
@@ -1482,9 +1483,29 @@ function addChatMessage(data) {
     div.mouseleave(function() {
         $(".nick-hover").removeClass("nick-hover");
     });
-    trimChatBuffer();
-    if(SCROLLCHAT)
+    var numRemoved = trimChatBuffer();
+    if (SCROLLCHAT) {
         scrollChat();
+    } else {
+        var newMessageDiv = $("#newmessages-indicator");
+        if (!newMessageDiv.length) {
+            newMessageDiv = $("<div/>").attr("id", "newmessages-indicator")
+                    .insertBefore($("#chatline"));
+            var bgHack = $("<span/>").attr("id", "newmessages-indicator-bghack")
+                    .appendTo(newMessageDiv);
+
+            $("<span/>").addClass("glyphicon glyphicon-chevron-down")
+                    .appendTo(bgHack);
+            $("<span/>").text("New Messages Below").appendTo(bgHack);
+            $("<span/>").addClass("glyphicon glyphicon-chevron-down")
+                    .appendTo(bgHack);
+        }
+
+        if (numRemoved > 0) {
+            $("#messagebuffer").scrollTop(
+                    $("#messagebuffer").scrollTop() - div.height());
+        }
+    }
 
     var isHighlight = false;
     if (CLIENT.name && data.username != CLIENT.name) {
@@ -1508,6 +1529,8 @@ function trimChatBuffer() {
     for (var i = 0; i < count; i++) {
         buffer.firstChild.remove();
     }
+
+    return count;
 }
 
 function pingMessage(isHighlight) {