diff --git a/.eslintrc.json b/.eslintrc.json index e7f8a842ec..ce42ab648c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -32,6 +32,7 @@ "popovers": false, "server_events": false, "server_events_dispatch": false, + "message_scroll": false, "ui": false, "ui_report": false, "night_mode": false, diff --git a/static/js/message_fetch.js b/static/js/message_fetch.js index 5845fedce9..db24f2760f 100644 --- a/static/js/message_fetch.js +++ b/static/js/message_fetch.js @@ -9,7 +9,7 @@ var load_more_enabled = true; exports.reset_load_more_status = function reset_load_more_status() { load_more_enabled = true; - ui.hide_loading_more_messages_indicator(); + message_scroll.hide_loading_more_messages_indicator(); }; function process_result(messages, opts) { @@ -122,13 +122,14 @@ exports.load_old_messages = function load_old_messages(opts) { }; -exports.load_more_messages = function load_more_messages(msg_list) { +exports.load_more_messages = function (opts) { + var msg_list = opts.msg_list; var batch_size = 100; var oldest_message_id; if (!load_more_enabled) { return; } - ui.show_loading_more_messages_indicator(); + opts.show_loading(); load_more_enabled = false; if (msg_list.first() === undefined) { oldest_message_id = page_params.pointer; @@ -141,7 +142,7 @@ exports.load_more_messages = function load_more_messages(msg_list) { num_after: 0, msg_list: msg_list, cont: function (messages) { - ui.hide_loading_more_messages_indicator(); + opts.hide_loading(); if (messages.length >= batch_size) { load_more_enabled = true; } diff --git a/static/js/message_scroll.js b/static/js/message_scroll.js new file mode 100644 index 0000000000..1e4495484f --- /dev/null +++ b/static/js/message_scroll.js @@ -0,0 +1,74 @@ +var message_scroll = (function () { + +var exports = {}; + +var actively_scrolling = false; + +var loading_more_messages_indicator_showing = false; +exports.show_loading_more_messages_indicator = function () { + if (! loading_more_messages_indicator_showing) { + loading.make_indicator($('#loading_more_messages_indicator'), + {abs_positioned: true}); + loading_more_messages_indicator_showing = true; + floating_recipient_bar.hide(); + } +}; + +exports.hide_loading_more_messages_indicator = function () { + if (loading_more_messages_indicator_showing) { + loading.destroy_indicator($("#loading_more_messages_indicator")); + loading_more_messages_indicator_showing = false; + } +}; + +exports.actively_scrolling = function () { + return actively_scrolling; +}; + +exports.scroll_finished = function () { + actively_scrolling = false; + + if ($('#home').hasClass('active')) { + if (!pointer.suppress_scroll_pointer_update) { + message_viewport.keep_pointer_in_view(); + } else { + pointer.suppress_scroll_pointer_update = false; + } + floating_recipient_bar.update(); + if (message_viewport.scrollTop() === 0) { + message_fetch.load_more_messages({ + msg_list: current_msg_list, + show_loading: exports.show_loading_more_messages_indicator, + hide_loading: exports.hide_loading_more_messages_indicator, + }); + } + + // When the window scrolls, it may cause some messages to + // enter the screen and become read. Calling + // unread_ops.process_visible will update necessary + // data structures and DOM elements. + setTimeout(unread_ops.process_visible, 0); + } +}; + +var scroll_timer; +function scroll_finish() { + actively_scrolling = true; + clearTimeout(scroll_timer); + scroll_timer = setTimeout(exports.scroll_finished, 100); +} + +exports.initialize = function () { + message_viewport.message_pane.scroll($.throttle(50, function () { + unread_ops.process_visible(); + scroll_finish(); + })); +}; + + +return exports; + +}()); +if (typeof module !== 'undefined') { + module.exports = message_scroll; +} diff --git a/static/js/narrow.js b/static/js/narrow.js index 2d0b4c3547..05f967c8ed 100644 --- a/static/js/narrow.js +++ b/static/js/narrow.js @@ -234,7 +234,7 @@ exports.activate = function (raw_operators, opts) { message_fetch.reset_load_more_status(); maybe_select_closest(); } else { - ui.show_loading_more_messages_indicator(); + message_scroll.show_loading_more_messages_indicator(); } // Put the narrow operators in the URL fragment. @@ -442,7 +442,7 @@ exports.deactivate = function () { unnarrow_times = {start_time: new Date()}; blueslip.debug("Unnarrowed"); - if (ui.actively_scrolling()) { + if (message_scroll.actively_scrolling()) { // There is no way to intercept in-flight scroll events, and they will // cause you to end up in the wrong place if you are actively scrolling // on an unnarrow. Wait a bit and try again once the scrolling is over. diff --git a/static/js/ui.js b/static/js/ui.js index 67490d4fe4..e20dcd4d20 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -2,12 +2,6 @@ var ui = (function () { var exports = {}; -var actively_scrolling = false; - -exports.actively_scrolling = function () { - return actively_scrolling; -}; - // What, if anything, obscures the home tab? exports.replace_emoji_with_text = function (element) { @@ -191,23 +185,6 @@ exports.maybe_show_keyboard_shortcuts = function () { ui.show_info_overlay("keyboard-shortcuts"); }; -var loading_more_messages_indicator_showing = false; -exports.show_loading_more_messages_indicator = function () { - if (! loading_more_messages_indicator_showing) { - loading.make_indicator($('#loading_more_messages_indicator'), - {abs_positioned: true}); - loading_more_messages_indicator_showing = true; - floating_recipient_bar.hide(); - } -}; - -exports.hide_loading_more_messages_indicator = function () { - if (loading_more_messages_indicator_showing) { - loading.destroy_indicator($("#loading_more_messages_indicator")); - loading_more_messages_indicator_showing = false; - } -}; - /* EXPERIMENTS */ /* This method allows an advanced user to use the console @@ -223,45 +200,11 @@ exports.switchToFullWidth = function () { /* END OF EXPERIMENTS */ -function scroll_finished() { - actively_scrolling = false; - - if ($('#home').hasClass('active')) { - if (!pointer.suppress_scroll_pointer_update) { - message_viewport.keep_pointer_in_view(); - } else { - pointer.suppress_scroll_pointer_update = false; - } - floating_recipient_bar.update(); - if (message_viewport.scrollTop() === 0) { - message_fetch.load_more_messages(current_msg_list); - } - - // When the window scrolls, it may cause some messages to - // enter the screen and become read. Calling - // unread_ops.process_visible will update necessary - // data structures and DOM elements. - setTimeout(unread_ops.process_visible, 0); - } -} - -var scroll_timer; -function scroll_finish() { - actively_scrolling = true; - clearTimeout(scroll_timer); - scroll_timer = setTimeout(scroll_finished, 100); -} - // Save the compose content cursor position and restore when we // shift-tab back in (see hotkey.js). var saved_compose_cursor = 0; $(function () { - message_viewport.message_pane.scroll($.throttle(50, function () { - unread_ops.process_visible(); - scroll_finish(); - })); - $('#compose-textarea').blur(function () { saved_compose_cursor = $(this).caret(); }); diff --git a/static/js/ui_init.js b/static/js/ui_init.js index 428936d90f..c6fb115514 100644 --- a/static/js/ui_init.js +++ b/static/js/ui_init.js @@ -260,6 +260,7 @@ $(function () { unread.initialize(); bot_data.initialize(); // Must happen after people.initialize() message_fetch.initialize(); + message_scroll.initialize(); emoji.initialize(); markdown.initialize(); // Must happen after emoji.initialize() compose.initialize(); diff --git a/zproject/settings.py b/zproject/settings.py index ddcad8bc75..14cd53d741 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -1058,6 +1058,7 @@ JS_SPECS = { 'js/floating_recipient_bar.js', 'js/lightbox.js', 'js/ui_report.js', + 'js/message_scroll.js', 'js/ui.js', 'js/night_mode.js', 'js/ui_util.js',