EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1741 from dpalou/MOBILE-2832 

MOBILE-2832 core: Make infinite scroll load more automatically
main
Juan Leyva 2019-01-29 13:37:28 +01:00 committed by GitHub
parent dce99f3f34 e71e181489
commit 3573800adb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/infinite-loading/infinite-loading.ts
View File

@ -12,8 +12,8 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Component, Input, Output, EventEmitter } from '@angular/core'; import { Component, Input, Output, EventEmitter, OnChanges, SimpleChange, Optional } from '@angular/core';
import { InfiniteScroll } from 'ionic-angular'; import { InfiniteScroll, Content } from 'ionic-angular';
/** /**
* Component to show a infinite loading trigger and spinner while more data is being loaded. * Component to show a infinite loading trigger and spinner while more data is being loaded.
@ -25,7 +25,7 @@ import { InfiniteScroll } from 'ionic-angular';
selector: 'core-infinite-loading', selector: 'core-infinite-loading',
templateUrl: 'core-infinite-loading.html', templateUrl: 'core-infinite-loading.html',
}) })
export class CoreInfiniteLoadingComponent { export class CoreInfiniteLoadingComponent implements OnChanges {
@Input() enabled: boolean; @Input() enabled: boolean;
@Input() error = false; @Input() error = false;
@Input() position = 'bottom'; @Input() position = 'bottom';
@ -35,10 +35,26 @@ export class CoreInfiniteLoadingComponent {
protected infiniteScroll: InfiniteScroll; protected infiniteScroll: InfiniteScroll;
constructor() { constructor(@Optional() private content: Content) {
this.action = new EventEmitter(); this.action = new EventEmitter();
} }
/**
* Detect changes on input properties.
*
* @param {SimpleChange}} changes Changes.
*/
ngOnChanges(changes: {[name: string]: SimpleChange}): void {
if (changes.enabled && this.enabled) {
// Infinite scroll enabled. If the list doesn't fill the full height, infinite scroll isn't triggered automatically.
// Send a fake scroll event to make infinite scroll check if it should load more items.
setTimeout(() => {
const event: any = new Event('scroll');
this.content.ionScroll.emit(event);
});
}
}
/** /**
* Load More items calling the action provided. * Load More items calling the action provided.
* *
@ -64,6 +80,13 @@ export class CoreInfiniteLoadingComponent {
this.loadingMore = false; this.loadingMore = false;
this.infiniteScroll && this.infiniteScroll.complete(); this.infiniteScroll && this.infiniteScroll.complete();
this.infiniteScroll = undefined; this.infiniteScroll = undefined;
// More items loaded. If the list doesn't fill the full height, infinite scroll isn't triggered automatically.
// Send a fake scroll event to make infinite scroll check if it should load more items.
setTimeout(() => {
const event: any = new Event('scroll');
this.content.ionScroll.emit(event);
});
} }
} }