diff --git a/www/css/cytube.css b/www/css/cytube.css index 0f9b4f24..b3e7e4b3 100644 --- a/www/css/cytube.css +++ b/www/css/cytube.css @@ -649,3 +649,19 @@ input#logout[type="submit"] { input#logout[type="submit"]:hover { text-decoration: underline; } + +#newmessages-indicator { + background: rgb(0, 0, 0); + background: rgba(0, 0, 0, 0.8); + line-height: 2.0; + position: relative; + bottom: 50px; + text-align: center; + width: 100%; + font-weight: bold; +} + +#newmessages-indicator .glyphicon { + margin-left: 10px; + margin-right: 10px; +} diff --git a/www/js/ui.js b/www/js/ui.js index 1b62b7df..6348391f 100644 --- a/www/js/ui.js +++ b/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) { diff --git a/www/js/util.js b/www/js/util.js index 605c6a71..301bf43b 100644 --- a/www/js/util.js +++ b/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,27 @@ 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 = $("
").attr("id", "newmessages-indicator") + .insertBefore($("#chatline")); + + $("").addClass("glyphicon glyphicon-chevron-down") + .appendTo(newMessageDiv); + $("").text("New Messages Below").appendTo(newMessageDiv); + $("").addClass("glyphicon glyphicon-chevron-down") + .appendTo(newMessageDiv); + } + + if (numRemoved > 0) { + $("#messagebuffer").scrollTop( + $("#messagebuffer").scrollTop() - div.height()); + } + } var isHighlight = false; if (CLIENT.name && data.username != CLIENT.name) { @@ -1508,6 +1527,8 @@ function trimChatBuffer() { for (var i = 0; i < count; i++) { buffer.firstChild.remove(); } + + return count; } function pingMessage(isHighlight) {