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 = catberry = cat = catberry; lazyLoader;
Then you should create placeholder for feed with infinite scroll like this:
<!-- feed placeholder reference for module news-feed --> <!-- this is a feed container element below --> {#.items} <!-- foreach in reviews --> {>"some_partial_for_feed_item"/} <!-- /foreach --> {/.items} <!-- this link switches on infinite scroll --> Load more <!-- this element becomes visible when next items are loading -->
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
:
{ // setup lazy loader in browser if this$contextisBrowser thislazyLoader = $serviceLocator; thislazyLoadercontainerId = 'js-feed'; thislazyLoaderloaderId = 'js-next-loader'; thislazyLoadermoreItemsCount = 5; thislazyLoaderitemTemplateName = 'some_partial_for_feed_item'; // factory to get next N items from data source thislazyLoaderfactory = thisitemsFactory; } /** * Current lazy loader instance. * @type */NewsFeedModuleprototypelazyLoader = null; /** * Loads next chunk of items. * @param * @param * @returns */NewsFeedModuleprototype { // 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 */NewsFeedModuleprototype { return this;}; /** * Handles clink on 'Load more' button. */NewsFeedModuleprototype { thislazyLoader;};
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