Pagination: maxLoads

This commit is contained in:
Juan 2018-09-13 15:19:50 +02:00
parent f8ec125958
commit 270f16d0db
4 changed files with 25 additions and 9 deletions

View File

@ -4,7 +4,7 @@
ng-if="!$ctrl.model.isLoading"
icon="more_horiz"
vn-tooltip="Load more"
ng-click="$ctrl.model.loadMore()">
ng-click="$ctrl.onLoadClick()">
</vn-icon-button>
<vn-spinner
ng-if="$ctrl.model.isLoading"

View File

@ -10,11 +10,14 @@ import './style.scss';
* @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
* @property {Number} maxLoads The maximum of loads that are automatically performed on scroll, 0 for no limit
*/
class Pagination extends Component {
constructor($element, $scope) {
super($element, $scope);
this.scrollOffset = 300;
this.scrollOffset = 500;
this.maxLoads = 5;
this.nLoads = 0;
this.scrollHandler = e => this.onScroll(e);
}
@ -50,14 +53,23 @@ class Pagination extends Component {
let scrollElement = this.scrollElement;
let shouldLoad =
scrollElement.scrollTop + scrollElement.clientHeight >= (scrollElement.scrollHeight - this.scrollOffset)
&& !this.model.isLoading;
&& !this.model.isLoading
&& (this.maxLoads <= 0 || this.nLoads < this.maxLoads);
if (shouldLoad) {
this.nLoads++;
this.model.loadMore();
this.$.$apply();
}
}
onLoadClick() {
if (this.maxLoads > 0 && this.nLoads == this.maxLoads)
this.nLoads = 0;
this.model.loadMore();
}
$onDestroy() {
this.scrollElement = null;
}
@ -69,7 +81,8 @@ ngModule.component('vnPagination', {
model: '<',
scrollSelector: '@?',
scrollElement: '<?',
scrollOffset: '<?'
scrollOffset: '<?',
maxLoads: '<?'
},
controller: Pagination
});

View File

@ -58,7 +58,10 @@ let baseConfig = {
`${__dirname}/client`,
__dirname,
'node_modules'
]
],
alias: {
'vn-loopback': `${__dirname}/services/loopback`
}
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({