Extract message_scroll.js.

This mostly moves code from ui.js.

We change the arguments to `message_fetch.load_more_messages()`
to be `opts` with callbacks for `show_loading` and `hide_loading`.

We also defer starting the scroll handler until `message_fetch.js`
has been initialized.

.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,

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;
             }

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;
+}

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.

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();
     });

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();

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',