Merge branch '24499-fix-activity-autoload-on-large-viewports' into 'master'

app/assets/javascripts/activities.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-undef, quotes, no-var, padded-blocks, max-len */
-(function() {
-  this.Activities = (function() {
-    function Activities() {
-      Pager.init(20, true, false, this.updateTooltips);
-      $(".event-filter-link").on("click", (function(_this) {
-        return function(event) {
-          event.preventDefault();
-          _this.toggleFilter($(event.currentTarget));
-          return _this.reloadActivities();
-        };
-      })(this));
-    }
-
-    Activities.prototype.updateTooltips = function() {
-      gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
-    };
-
-    Activities.prototype.reloadActivities = function() {
-      $(".content_list").html('');
-      Pager.init(20, true, false, this.updateTooltips);
-    };
-
-    Activities.prototype.toggleFilter = function(sender) {
-      var filter = sender.attr("id").split("_")[0];
-
-      $('.event-filter .active').removeClass("active");
-      Cookies.set("event_filter", filter);
-
-      sender.closest('li').toggleClass("active");
-    };
-
-    return Activities;
-
-  })();
-
-}).call(this);

app/assets/javascripts/activities.js.es6

+/* eslint-disable no-param-reassign, class-methods-use-this */
+/* global Pager, Cookies */
+
+((global) => {
+  class Activities {
+    constructor() {
+      Pager.init(20, true, false, this.updateTooltips);
+      $('.event-filter-link').on('click', (e) => {
+        e.preventDefault();
+        this.toggleFilter(e.currentTarget);
+        this.reloadActivities();
+      });
+    }
+
+    updateTooltips() {
+      gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
+    }
+
+    reloadActivities() {
+      $('.content_list').html('');
+      Pager.init(20, true, false, this.updateTooltips);
+    }
+
+    toggleFilter(sender) {
+      const $sender = $(sender);
+      const filter = $sender.attr('id').split('_')[0];
+
+      $('.event-filter .active').removeClass('active');
+      Cookies.set('event_filter', filter);
+
+      $sender.closest('li').toggleClass('active');
+    }
+  }
+
+  global.Activities = Activities;
+})(window.gl || (window.gl = {}));

app/assets/javascripts/dispatcher.js.es6

@@ -110,10 +110,10 @@
           Issuable.init();
           break;
         case 'dashboard:activity':
-          new Activities();
+          new gl.Activities();
           break;
         case 'dashboard:projects:starred':
-          new Activities();
+          new gl.Activities();
           break;
         case 'projects:commit:show':
           new Commit();
@@ -139,7 +139,7 @@
           new gl.Pipelines();
           break;
         case 'groups:activity':
-          new Activities();
+          new gl.Activities();
           break;
         case 'groups:show':
           shortcut_handler = new ShortcutsNavigation();

app/assets/javascripts/pager.js

-/* eslint-disable func-names, space-before-function-paren, object-shorthand, quotes, no-undef, prefer-template, wrap-iife, comma-dangle, no-return-assign, no-else-return, consistent-return, no-unused-vars, padded-blocks, max-len */
-(function() {
-  this.Pager = {
-    init: function(limit, preload, disable, callback) {
-      this.limit = limit != null ? limit : 0;
-      this.disable = disable != null ? disable : false;
-      this.callback = callback != null ? callback : $.noop;
-      this.loading = $('.loading').first();
-      if (preload) {
-        this.offset = 0;
-        this.getOld();
-      } else {
-        this.offset = this.limit;
-      }
-      return this.initLoadMore();
-    },
-    getOld: function() {
-      this.loading.show();
-      return $.ajax({
-        type: "GET",
-        url: $(".content_list").data('href') || location.href,
-        data: "limit=" + this.limit + "&offset=" + this.offset,
-        complete: (function(_this) {
-          return function() {
-            return _this.loading.hide();
-          };
-        })(this),
-        success: function(data) {
-          Pager.append(data.count, data.html);
-          return Pager.callback();
-        },
-        dataType: "json"
-      });
-    },
-    append: function(count, html) {
-      $(".content_list").append(html);
-      if (count > 0) {
-        return this.offset += count;
-      } else {
-        return this.disable = true;
-      }
-    },
-    initLoadMore: function() {
-      $(document).unbind('scroll');
-      return $(document).endlessScroll({
-        bottomPixels: 400,
-        fireDelay: 1000,
-        fireOnce: true,
-        ceaseFire: function() {
-          return Pager.disable;
-        },
-        callback: (function(_this) {
-          return function(i) {
-            if (!_this.loading.is(':visible')) {
-              _this.loading.show();
-              return Pager.getOld();
-            }
-          };
-        })(this)
-      });
-    }
-  };
-
-}).call(this);

app/assets/javascripts/pager.js.es6

+(() => {
+  const ENDLESS_SCROLL_BOTTOM_PX = 400;
+  const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
+
+  const Pager = {
+    init(limit = 0, preload = false, disable = false, callback = $.noop) {
+      this.limit = limit;
+      this.offset = this.limit;
+      this.disable = disable;
+      this.callback = callback;
+      this.loading = $('.loading').first();
+      if (preload) {
+        this.offset = 0;
+        this.getOld();
+      }
+      this.initLoadMore();
+    },
+
+    getOld() {
+      this.loading.show();
+      $.ajax({
+        type: 'GET',
+        url: $('.content_list').data('href') || window.location.href,
+        data: `limit=${this.limit}&offset=${this.offset}`,
+        dataType: 'json',
+        error: () => this.loading.hide(),
+        success: (data) => {
+          this.append(data.count, data.html);
+          this.callback();
+
+          // keep loading until we've filled the viewport height
+          if (!this.disable && !this.isScrollable()) {
+            this.getOld();
+          } else {
+            this.loading.hide();
+          }
+        },
+      });
+    },
+
+    append(count, html) {
+      $('.content_list').append(html);
+      if (count > 0) {
+        this.offset += count;
+      } else {
+        this.disable = true;
+      }
+    },
+
+    isScrollable() {
+      const $w = $(window);
+      return $(document).height() > $w.height() + $w.scrollTop() + ENDLESS_SCROLL_BOTTOM_PX;
+    },
+
+    initLoadMore() {
+      $(document).unbind('scroll');
+      $(document).endlessScroll({
+        bottomPixels: ENDLESS_SCROLL_BOTTOM_PX,
+        fireDelay: ENDLESS_SCROLL_FIRE_DELAY_MS,
+        fireOnce: true,
+        ceaseFire: () => this.disable === true,
+        callback: () => {
+          if (!this.loading.is(':visible')) {
+            this.loading.show();
+            this.getOld();
+          }
+        },
+      });
+    },
+  };
+
+  window.Pager = Pager;
+})();

app/assets/javascripts/user_tabs.js.es6

@@ -134,7 +134,7 @@ content on the Users#show page.
       }
       const $calendarWrap = this.$parentEl.find('.user-calendar');
       $calendarWrap.load($calendarWrap.data('href'));
-      new Activities();
+      new gl.Activities();
       return this.loaded['activity'] = true;
     }
 

app/views/projects/_activity.html.haml

@@ -13,7 +13,7 @@
   = spinner
 
 :javascript
-  var activity = new Activities();
+  var activity = new gl.Activities();
   $(document).on('page:restore', function (event) {
     activity.reloadActivities()
   })

changelogs/unreleased/24499-fix-activity-autoload-on-large-viewports.yml

+---
+title: Fix activity page endless scroll on large viewports
+merge_request: 7608
+author: 

spec/javascripts/activities_spec.js.es6

@@ -35,7 +35,7 @@
   describe('Activities', () => {
     beforeEach(() => {
       fixture.load(fixtureTemplate);
-      new Activities();
+      new gl.Activities();
     });
 
     for(let i = 0; i < filters.length; i++) {