All files / app/assets/javascripts pager.js

87.5% Statements 35/40
83.33% Branches 25/30
90% Functions 9/10
87.5% Lines 35/40

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101          3x 3x                       14x 14x 14x 14x 14x 14x 14x 14x     14x       14x       10x 10x   10x               3x 3x     3x     3x     7x 10x       3x 3x 1x   1x 1x     2x                     14x 14x       11x   2x 1x     1x 1x 1x            
import $ from 'jquery';
import 'vendor/jquery.endless-scroll';
import axios from '~/lib/utils/axios_utils';
import { removeParams, getParameterByName } from '~/lib/utils/url_utility';
 
const ENDLESS_SCROLL_BOTTOM_PX = 400;
const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
 
export default {
  init({
    limit = 0,
    preload = false,
    disable = false,
    prepareData = $.noop,
    successCallback = $.noop,
    errorCallback = $.noop,
    container = '',
  } = {}) {
    this.limit = limit;
    this.offset = parseInt(getParameterByName('offset'), 10) || this.limit;
    this.disable = disable;
    this.prepareData = prepareData;
    this.successCallback = successCallback;
    this.errorCallback = errorCallback;
    this.$container = $(container);
    this.$loading = this.$container.length
      ? this.$container.find('.loading').first()
      : $('.loading').first();
    Iif (preload) {
      this.offset = 0;
      this.getOld();
    }
    this.initLoadMore();
  },
 
  getOld() {
    this.$loading.show();
    const url = $('.content_list').data('href') || removeParams(['limit', 'offset']);
 
    axios
      .get(url, {
        params: {
          limit: this.limit,
          offset: this.offset,
        },
      })
      .then(({ data }) => {
        this.append(data.count, this.prepareData(data.html));
        this.successCallback();
 
        // keep loading until we've filled the viewport height
        Iif (!this.disable && !this.isScrollable()) {
          this.getOld();
        } else {
          this.$loading.hide();
        }
      })
      .catch((err) => this.errorCallback(err))
      .finally(() => this.$loading.hide());
  },
 
  append(count, html) {
    $('.content_list').append(html);
    if (count > 0) {
      this.offset += count;
 
      Eif (count < this.limit) {
        this.disable = true;
      }
    } else {
      this.disable = true;
    }
  },
 
  isScrollable() {
    const $w = $(window);
    return $(document).height() > $w.height() + $w.scrollTop() + ENDLESS_SCROLL_BOTTOM_PX;
  },
 
  initLoadMore() {
    // eslint-disable-next-line @gitlab/no-global-event-off
    $(document).off('scroll');
    $(document).endlessScroll({
      bottomPixels: ENDLESS_SCROLL_BOTTOM_PX,
      fireDelay: ENDLESS_SCROLL_FIRE_DELAY_MS,
      fireOnce: true,
      ceaseFire: () => this.disable === true,
      callback: () => {
        if (this.$container.length && !this.$container.is(':visible')) {
          return;
        }
 
        Eif (!this.$loading.is(':visible')) {
          this.$loading.show();
          this.getOld();
        }
      },
    });
  },
};