Auto-invoke "Load older messages" when at the top of the page

Resolves Trac #445

(imported from commit d7d96fe82e9e1cbef32e0dde284ce217e83aff55)

templates/zephyr/home.html

@@ -43,13 +43,9 @@
     <div class="message_list" id="main_div">
       <div id="top_whitespace"></div>
       <div id="top_narrowed_whitespace"></div>
-      <div id="loading_control">
-        <button type="button" class="btn btn-large btn-block" id="load_more"
-                onclick="load_more_messages();">Load older messages</button>
-        <table id="loading_indicator">
-          <tr><td id="loading_spinner"></td><td>Loading...</td></tr>
-        </table>
-      </div>
+      <table id="loading_indicator">
+        <tr><td id="loading_spinner"></td><td>Loading...</td></tr>
+      </table>
       <table class="message_table focused_table" id="zhome">
         <tbody>
         </tbody>

tools/jslint/check-all.js

@@ -60,7 +60,7 @@ var globals =
     + ' selected_message selected_message_id'
     + ' at_top_of_viewport at_bottom_of_viewport'
     + ' viewport'
-    + ' load_more_messages'
+    + ' load_more_messages reset_load_more_status have_scrolled_away_from_top'
     ;
 
 

zephyr/static/js/narrow.js

@@ -78,7 +78,7 @@ function do_narrow(new_narrow, bar, time_travel, new_filter) {
     // Show the new set of messages.
     $("#zfilt").addClass("focused_table");
 
-    $("#load_more").show();
+    reset_load_more_status();
     $("#show_all_messages").removeAttr("disabled");
     $(".narrowed_to_bar").show();
     $("#top_narrowed_whitespace").show();
@@ -232,7 +232,7 @@ exports.show_all_messages = function () {
     $("#zfilt").removeClass('focused_table');
     $("#zhome").addClass('focused_table');
     $(".narrowed_to_bar").hide();
-    $("#load_more").show();
+    reset_load_more_status();
     $("#top_narrowed_whitespace").hide();
     $("#main_div").removeClass('narrowed_view');
     $("#searchbox").removeClass('narrowed_view');

zephyr/static/js/ui.js

@@ -354,6 +354,13 @@ $(function () {
         if ($('#home').hasClass('active')) {
             keep_pointer_in_view();
             update_floating_recipient_bar();
+            if (viewport.scrollTop() === 0 &&
+                have_scrolled_away_from_top) {
+                have_scrolled_away_from_top = false;
+                load_more_messages();
+            } else if (!have_scrolled_away_from_top) {
+                have_scrolled_away_from_top = true;
+            }
         }
     });
     $(window).scroll(throttled_scrollhandler);

zephyr/static/js/zephyr.js

@@ -14,6 +14,12 @@ var get_updates_params = {
 };
 var get_updates_failures = 0;
 
+var load_more_enabled = true;
+// If the browser hasn't scrolled away from the top of the page
+// since the last time that we ran load_more_messages(), we do
+// not load_more_messages().
+var have_scrolled_away_from_top = true;
+
 // The "message groups", i.e. blocks of messages collapsed by recipient.
 // Each message table has a list of lists.
 var message_groups = {
@@ -712,13 +718,7 @@ $(function () {
     }
 
     if (have_initial_messages) {
-        load_old_messages(initial_pointer, 200, 200,
-                          function (messages) {
-                              // TODO: We can't tell after the initial load
-                              // whether we need the "load more" button or not.
-                              $('#load_more').show();
-                              load_more(messages);
-                          });
+        load_old_messages(initial_pointer, 200, 200, load_more);
     } else {
         get_updates();
     }
@@ -734,12 +734,21 @@ function restart_get_updates(options) {
     get_updates(options);
 }
 
+function reset_load_more_status() {
+    load_more_enabled = true;
+    have_scrolled_away_from_top = true;
+}
+
 function load_more_messages() {
     var batch_size = 400;
+    if (!load_more_enabled) {
+        return;
+    }
+    load_more_enabled = false;
     load_old_messages(message_array[0].id, batch_size, 0,
                       function (messages) {
-                          if (messages.length !== batch_size + 1) {
-                              $('#load_more').hide();
+                          if (messages.length === batch_size + 1) {
+                              load_more_enabled = true;
                           }
                       }, true);
 }