From 6483314f749d59a79419c812f20452cc12195159 Mon Sep 17 00:00:00 2001 From: Jeff Arnold Date: Wed, 30 Oct 2013 14:53:17 -0400 Subject: [PATCH] Only fade visible messages before rendering compose box Partially addresses #1963 (imported from commit 0c941085ab6894e8e43015a116c49a5bdc674b5f) --- static/js/compose_fade.js | 58 +++++++++++++++++++++++++++------------ static/js/viewport.js | 29 ++++++++++++-------- static/js/zulip.js | 2 +- 3 files changed, 59 insertions(+), 30 deletions(-) diff --git a/static/js/compose_fade.js b/static/js/compose_fade.js index 5fccc9b286..f06df1ff30 100644 --- a/static/js/compose_fade.js +++ b/static/js/compose_fade.js @@ -42,29 +42,55 @@ function _display_users_normally() { $('.user_sidebar_entry').removeClass('faded').removeClass('unfaded'); } +function change_fade_state(elt, should_fade_message) { + if (should_fade_message) { + elt.removeClass("unfaded").addClass("faded"); + } else { + elt.removeClass("faded").addClass("unfaded"); + } +} + function _fade_messages() { var i; - var all_elts = rows.get_table(current_msg_list.table_name).find(".recipient_row, .message_row"); var should_fade_message = false; + var visible_messages = viewport.visible_messages(false); normal_display = false; - // Note: The below algorithm relies on the fact that all_elts is - // sorted as it would be displayed in the message view - for (i = 0; i < all_elts.length; i++) { - var elt = $(all_elts[i]); - if (elt.hasClass("recipient_row")) { - should_fade_message = !util.same_recipient(focused_recipient, current_msg_list.get(rows.id(elt))); - } + // Update the visible messages first, before the compose box opens + for (i = 0; i < visible_messages.length; i++) { + should_fade_message = !util.same_recipient(focused_recipient, visible_messages[i]); + var elt = current_msg_list.get_row(visible_messages[i].id); + var recipient_row = $(elt).prevAll(".recipient_row").first().expectOne(); - if (should_fade_message) { - elt.removeClass("unfaded").addClass("faded"); - } else { - elt.removeClass("faded").addClass("unfaded"); - } + change_fade_state(elt, should_fade_message); + change_fade_state(recipient_row, should_fade_message); } ui.update_floating_recipient_bar(); + + // Defer updating all messages so that the compose box can open sooner + setTimeout(function (expected_msg_list, expected_recipient) { + var all_elts = rows.get_table(current_msg_list.table_name).find(".recipient_row, .message_row"); + + if (current_msg_list !== expected_msg_list || + compose.recipient() !== expected_recipient) { + return; + } + + should_fade_message = false; + + // Note: The below algorithm relies on the fact that all_elts is + // sorted as it would be displayed in the message view + for (i = 0; i < all_elts.length; i++) { + var elt = $(all_elts[i]); + if (elt.hasClass("recipient_row")) { + should_fade_message = !util.same_recipient(focused_recipient, current_msg_list.get(rows.id(elt))); + } + + change_fade_state(elt, should_fade_message); + } + }, 0, current_msg_list, compose.recipient()); } exports.would_receive_message = function (email) { @@ -214,11 +240,7 @@ exports.update_rendered_messages = function (messages, get_elements) { var should_fade_message = !util.same_recipient(focused_recipient, message); _.each(elts, function (elt) { - if (should_fade_message) { - elt.removeClass("unfaded").addClass("faded"); - } else { - elt.removeClass("faded").addClass("unfaded"); - } + change_fade_state(elt, should_fade_message); }); }); }; diff --git a/static/js/viewport.js b/static/js/viewport.js index 5ce9a3f473..00c872dbe7 100644 --- a/static/js/viewport.js +++ b/static/js/viewport.js @@ -102,19 +102,26 @@ exports.set_message_position = function (message_top, message_height, viewport_i exports.scrollTop(new_scroll_top); }; -function in_viewport_or_tall(rect, top_of_feed, bottom_of_feed) { - return ((rect.top > top_of_feed) && // Message top is in view and - ((rect.bottom < bottom_of_feed) || // message is fully in view or - ((rect.height > bottom_of_feed - top_of_feed) && - (rect.top < bottom_of_feed)))); // message is tall. +function in_viewport_or_tall(rect, top_of_feed, bottom_of_feed, + require_fully_visible) { + if (require_fully_visible) { + return ((rect.top > top_of_feed) && // Message top is in view and + ((rect.bottom < bottom_of_feed) || // message is fully in view or + ((rect.height > bottom_of_feed - top_of_feed) && + (rect.top < bottom_of_feed)))); // message is tall. + } else { + return (rect.bottom > top_of_feed && rect.top < bottom_of_feed); + } } function add_to_visible_messages(candidates, visible_messages, - top_of_feed, bottom_of_feed) { + top_of_feed, bottom_of_feed, + require_fully_visible) { _.every(candidates, function (row) { var row_rect = row.getBoundingClientRect(); // Mark very tall messages as read once we've gotten past them - if (in_viewport_or_tall(row_rect, top_of_feed, bottom_of_feed)) { + if (in_viewport_or_tall(row_rect, top_of_feed, bottom_of_feed, + require_fully_visible)) { visible_messages.push(current_msg_list.get(rows.id($(row)))); return true; } else { @@ -135,7 +142,7 @@ var bottom_of_feed = new util.CachedValue({ } }); -exports.visible_messages = function () { +exports.visible_messages = function (require_fully_visible) { // Note that when using getBoundingClientRect() we are getting offsets // relative to the visible window, but when using jQuery's offset() we are // getting offsets relative to the full scrollable window. You can't try to @@ -154,11 +161,11 @@ exports.visible_messages = function () { var messages_above_pointer = selected_row.prevAll("tr.message_row[zid]:lt(" + num_neighbors + ")"); var messages_below_pointer = selected_row.nextAll("tr.message_row[zid]:lt(" + num_neighbors + ")"); add_to_visible_messages(selected_row, visible_messages, - top_of_feed.get(), bottom_of_feed.get()); + top_of_feed.get(), bottom_of_feed.get(), require_fully_visible); add_to_visible_messages(messages_above_pointer, visible_messages, - top_of_feed.get(), bottom_of_feed.get()); + top_of_feed.get(), bottom_of_feed.get(), require_fully_visible); add_to_visible_messages(messages_below_pointer, visible_messages, - top_of_feed.get(), bottom_of_feed.get()); + top_of_feed.get(), bottom_of_feed.get(), require_fully_visible); return visible_messages; }; diff --git a/static/js/zulip.js b/static/js/zulip.js index 8fd73fc681..8935ebddc4 100644 --- a/static/js/zulip.js +++ b/static/js/zulip.js @@ -413,7 +413,7 @@ function process_visible_unread_messages(update_cursor) { mark_current_list_as_read(); } } else { - mark_messages_as_read(viewport.visible_messages()); + mark_messages_as_read(viewport.visible_messages(true)); } }