diff --git a/www/css/cytube.css b/www/css/cytube.css index 0f9b4f24..7e5241f1 100644 --- a/www/css/cytube.css +++ b/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; +} diff --git a/www/css/themes/bootstrap-theme.min.css b/www/css/themes/bootstrap-theme.min.css index 29fbaabd..3699d283 100644 --- a/www/css/themes/bootstrap-theme.min.css +++ b/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); +} diff --git a/www/css/themes/cyborg.css b/www/css/themes/cyborg.css index cde33171..ca26b689 100644 --- a/www/css/themes/cyborg.css +++ b/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); +} diff --git a/www/css/themes/light.css b/www/css/themes/light.css index d097a62b..25cb67a3 100644 --- a/www/css/themes/light.css +++ b/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); +} diff --git a/www/css/themes/modern.css b/www/css/themes/modern.css index 035cef9d..2668dea5 100644 --- a/www/css/themes/modern.css +++ b/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); +} diff --git a/www/css/themes/slate.css b/www/css/themes/slate.css index 2e309158..4a7a5757 100644 --- a/www/css/themes/slate.css +++ b/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); +} 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..7ea48939 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,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 = $("
").attr("id", "newmessages-indicator") + .insertBefore($("#chatline")); + var bgHack = $("").attr("id", "newmessages-indicator-bghack") + .appendTo(newMessageDiv); + + $("").addClass("glyphicon glyphicon-chevron-down") + .appendTo(bgHack); + $("").text("New Messages Below").appendTo(bgHack); + $("").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) {