From 23f39ab2f5962692f22362f72defb23c52a4fdc5 Mon Sep 17 00:00:00 2001 From: calzoneman Date: Sun, 29 Nov 2015 09:28:03 -0800 Subject: [PATCH 1/2] Improve chat autoscroll behavior The previous behavior (don't autoscroll if the mouse is over the chat area) was not intuitive and caused problems for people in chat only mode, which led to a lot of people assuming that it was a glitch. This change introduces the following behavior: * Hovering over chat no longer affects autoscroll. * Scrolling up in chat turns off autoscroll. * Scrolling to the bottom of the chatbox resumes autoscroll. * If a new message is added while autoscroll is off, a "New Messages Below" indicator is added to the bottom of the chatbox. --- www/css/cytube.css | 16 ++++++++++++++++ www/js/ui.js | 12 ++++++++++-- www/js/util.js | 25 +++++++++++++++++++++++-- 3 files changed, 49 insertions(+), 4 deletions(-) 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) { From 3c5d36919b1bff1722d3936d2cff906a428e6182 Mon Sep 17 00:00:00 2001 From: calzoneman Date: Sun, 29 Nov 2015 10:29:56 -0800 Subject: [PATCH 2/2] Fix positioning and background color of new message indicator --- www/css/cytube.css | 8 +++----- www/css/themes/bootstrap-theme.min.css | 5 +++++ www/css/themes/cyborg.css | 5 +++++ www/css/themes/light.css | 5 +++++ www/css/themes/modern.css | 5 +++++ www/css/themes/slate.css | 5 +++++ www/js/util.js | 8 +++++--- 7 files changed, 33 insertions(+), 8 deletions(-) diff --git a/www/css/cytube.css b/www/css/cytube.css index b3e7e4b3..7e5241f1 100644 --- a/www/css/cytube.css +++ b/www/css/cytube.css @@ -651,11 +651,9 @@ input#logout[type="submit"]:hover { } #newmessages-indicator { - background: rgb(0, 0, 0); - background: rgba(0, 0, 0, 0.8); - line-height: 2.0; - position: relative; - bottom: 50px; + margin-top: -30px; + line-height: 30px; + height: 30px; text-align: center; width: 100%; font-weight: bold; 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/util.js b/www/js/util.js index 301bf43b..7ea48939 100644 --- a/www/js/util.js +++ b/www/js/util.js @@ -1491,12 +1491,14 @@ function addChatMessage(data) { 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(newMessageDiv); - $("").text("New Messages Below").appendTo(newMessageDiv); + .appendTo(bgHack); + $("").text("New Messages Below").appendTo(bgHack); $("").addClass("glyphicon glyphicon-chevron-down") - .appendTo(newMessageDiv); + .appendTo(bgHack); } if (numRemoved > 0) {