diff --git a/www/css/cytube.css b/www/css/cytube.css index 7e5241f1..7d72e682 100644 --- a/www/css/cytube.css +++ b/www/css/cytube.css @@ -657,6 +657,7 @@ input#logout[type="submit"]:hover { text-align: center; width: 100%; font-weight: bold; + cursor: pointer; } #newmessages-indicator .glyphicon { diff --git a/www/js/data.js b/www/js/data.js index f4176482..051b2df2 100644 --- a/www/js/data.js +++ b/www/js/data.js @@ -46,6 +46,7 @@ var CHATHISTIDX = 0; var CHATTHROTTLE = false; var CHATMAXSIZE = 100; var SCROLLCHAT = true; +var IGNORE_SCROLL_EVENT = false; var LASTCHAT = { name: "" }; diff --git a/www/js/ui.js b/www/js/ui.js index 6348391f..38f57e3c 100644 --- a/www/js/ui.js +++ b/www/js/ui.js @@ -81,7 +81,14 @@ $("#usercount").mouseleave(function () { $("#usercount").find(".profile-box").remove(); }); -$("#messagebuffer").scroll(function () { +$("#messagebuffer").scroll(function (ev) { + if (IGNORE_SCROLL_EVENT) { + // Skip event, this was triggered by scrollChat() and not by a user action. + // Reset for next event. + IGNORE_SCROLL_EVENT = false; + return; + } + var m = $("#messagebuffer"); var isCaughtUp = m.height() + m.scrollTop() >= m.prop("scrollHeight"); if (isCaughtUp) { diff --git a/www/js/util.js b/www/js/util.js index 7ea48939..979e0d6b 100644 --- a/www/js/util.js +++ b/www/js/util.js @@ -820,10 +820,15 @@ function showPollMenu() { } function scrollChat() { - $("#messagebuffer").scrollTop($("#messagebuffer").prop("scrollHeight")); + scrollAndIgnoreEvent($("#messagebuffer").prop("scrollHeight")); $("#newmessages-indicator").remove(); } +function scrollAndIgnoreEvent(top) { + IGNORE_SCROLL_EVENT = true; + $("#messagebuffer").scrollTop(top); +} + function hasPermission(key) { if(key.indexOf("playlist") == 0 && CHANNEL.openqueue) { var key2 = "o" + key; @@ -1455,12 +1460,6 @@ function formatChatMessage(data, last) { if (data.meta.shadow) { div.addClass("chat-shadow"); } - - div.find("img").load(function () { - if (SCROLLCHAT) { - scrollChat(); - } - }); return div; } @@ -1472,17 +1471,19 @@ function addChatMessage(data) { return; } var div = formatChatMessage(data, LASTCHAT); + var msgBuf = $("#messagebuffer"); // Incoming: a bunch of crap for the feature where if you hover over // a message, it highlights messages from that user var safeUsername = data.username.replace(/[^\w-]/g, '\\$'); div.addClass("chat-msg-" + safeUsername); - div.appendTo($("#messagebuffer")); + div.appendTo(msgBuf); div.mouseover(function() { $(".chat-msg-" + safeUsername).addClass("nick-hover"); }); div.mouseleave(function() { $(".nick-hover").removeClass("nick-hover"); }); + var oldHeight = msgBuf.prop("scrollHeight"); var numRemoved = trimChatBuffer(); if (SCROLLCHAT) { scrollChat(); @@ -1499,14 +1500,27 @@ function addChatMessage(data) { $("").text("New Messages Below").appendTo(bgHack); $("").addClass("glyphicon glyphicon-chevron-down") .appendTo(bgHack); + newMessageDiv.click(function () { + SCROLLCHAT = true; + scrollChat(); + }); } if (numRemoved > 0) { - $("#messagebuffer").scrollTop( - $("#messagebuffer").scrollTop() - div.height()); + IGNORE_SCROLL_EVENT = true; + var diff = oldHeight - msgBuf.prop("scrollHeight"); + scrollAndIgnoreEvent(msgBuf.scrollTop() - diff); } } + div.find("img").load(function () { + if (SCROLLCHAT) { + scrollChat(); + } else if ($(this).position().top < 0) { + scrollAndIgnoreEvent(msgBuf.scrollTop() + $(this).height()); + } + }); + var isHighlight = false; if (CLIENT.name && data.username != CLIENT.name) { if (data.msg.toLowerCase().indexOf(CLIENT.name.toLowerCase()) != -1) {