salix/client/core/src/components/pagination/pagination.js

import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';

/**
 * Pagination component that automatically loads more rows when
 * the user scrolls down an element.
 *
 * @property {CrudModel} model The model used for pagination
 * @property {String} scrollSelector The the scrollable element selector
 * @property {HTMLElement} scrollElement The scrollable element
 * @property {Number} scrollOffset The distance, in pixels, until the end that activates the loading of the next rows
 */
class Pagination extends Component {
    constructor($element, $scope) {
        super($element, $scope);
        this.scrollOffset = 300;
        this.scrollHandler = e => this.onScroll(e);
    }

    $onInit() {
        if (!this._scrollElement)
            this.scrollElement = document.body;
    }

    set scrollSelector(value) {
        this._scrollSelector = value;
        this.scrollElement = document.querySelector(value);
    }

    get scrollSelector() {
        return this._scrollSelector;
    }

    set scrollElement(value) {
        if (this._scrollElement)
            this._scrollElement.removeEventListener('scroll', this.scrollHandler);

        this._scrollElement = value;

        if (value)
            this._scrollElement.addEventListener('scroll', this.scrollHandler);
    }

    get scrollElement() {
        return this._scrollElement;
    }

    onScroll() {
        let scrollElement = this.scrollElement;
        let shouldLoad =
            scrollElement.scrollTop + scrollElement.clientHeight >= (scrollElement.scrollHeight - this.scrollOffset)
            && !this.model.isLoading;

        if (shouldLoad) {
            this.model.loadMore();
            this.$.$apply();
        }
    }

    $onDestroy() {
        this.scrollElement = null;
    }
}

ngModule.component('vnPagination', {
    template: require('./pagination.html'),
    bindings: {
        model: '<',
        scrollSelector: '@?',
        scrollElement: '<?',
        scrollOffset: '<?'
    },
    controller: Pagination
});