Lazy Loading and Infinite Scroll for Catberry Modules

Current version supports Catberry 2.0-3.0.

Description

This is a simple implementation of feed with infinite scroll or lazy loading for Catberry Framework. It wraps HTML elements with specified IDs and uses specified factory method to get next N items to show in feed. Also it automatically loads items step by step with max limit per each. For example your limit is 1000. Lazy loader will load 1000 items to feed but 20 times by 50 items per each.

Usage

First of all you should register plugin in browser.js file of your Catberry application:

var lazyLoader = require('catberry-lazy-loader'),
    catberry = require('catberry'),
    cat = catberry.create();

lazyLoader.register(cat.locator);

Then you should create placeholder for feed with infinite scroll like this:

<!-- feed placeholder reference for module news-feed -->
<div id="news-feed_feed">
    <!-- this is a feed container element below -->
    <div id="js-feed">
        {#.items}
            <!-- foreach in reviews -->
            {>"some_partial_for_feed_item"/}
            <!-- /foreach -->
        {/.items}
    </div>
    <!-- this link switches on infinite scroll -->
    <button data-event="infinite-scroll">Load more</button>
    <!-- this element becomes visible when next items are loading -->
    <div id="js-next-loader"></div>
</div>

Remember, your placeholder should end at the bottom of the page otherwise infinite scroll does not work. You should create styles for all elements like js-next-loader and button by yourself. By default js-next-loader element should be hidden.

Also you need to add event to events.js.

infinite-scroll->infinite-scroll[news-feed]

Then you can use lazy loader in news-feed:

function NewsFeedModule($serviceLocator) {
    // setup lazy loader in browser
    if (this.$context.isBrowser) {
        this.lazyLoader = $serviceLocator.resolve('lazyLoader');
        this.lazyLoader.containerId = 'js-feed';
        this.lazyLoader.loaderId = 'js-next-loader';
        this.lazyLoader.moreItemsCount = 5;
        this.lazyLoader.itemTemplateName = 'some_partial_for_feed_item';
        // factory to get next N items from data source
        this.lazyLoader.factory = this.itemsFactory.bind(this);
    }
}

/**
 * Current lazy loader instance.
 * @type {LazyLoader}
 */
NewsFeedModule.prototype.lazyLoader = null;

/**
 * Loads next chunk of items.
 * @param {jQuery|null} last Last feed item.
 * @param {Number} limit How many items to load from last.
 * @returns {Promise<Array>|Array} Array of items or promise for array.
 */
NewsFeedModule.prototype.itemsFactory = function (last, limit) {
    // some logic to get next 'limit' items using 'last' rendered item
    // these items should be data contexts for rendering of 'dust partial'
    // with id 'some_partial_for_feed_item'
    // this method should return array or Promise for array of items
};

/**
 * Renders initial state of feed.
 * @returns {Promise.<Array>|Array} Array of items or promise for array.
 */
NewsFeedModule.prototype.renderFeed = function () {
    return this.itemsFactory(null, 10);
};

/**
 * Handles clink on 'Load more' button.
 */
NewsFeedModule.prototype.handleInfiniteScroll = function () {
    this.lazyLoader.enableInfiniteScroll();
};

If you need more complex logic for lazy loading then you can use load(limit) method.

Contribution

If you have found a bug, please create pull request with mocha unit-test which reproduces it or describe all details in an issue if you can not implement test. If you want to propose some improvements just create an issue or a pull request but please do not forget to use npm test to be sure that your code is awesome.

All changes should satisfy this Code Style Guide.

Also your changes should be covered by unit tests using mocha.

Denis Rechkunov denis.rechkunov@gmail.com