refactor(pull-to-refresh): emit starting event and change all events to emit the refresher

Cleaned up the API docs for scroll and test also.

References #5207
This commit is contained in:
Brandy Carney
2016-02-16 14:34:02 -05:00
parent c365c923bd
commit acf1894b75
3 changed files with 51 additions and 40 deletions

View File

@ -19,8 +19,8 @@ import {raf, ready, CSS} from '../../util/dom';
* ```html * ```html
* <ion-content> * <ion-content>
* <ion-refresher (starting)="doStarting()" * <ion-refresher (starting)="doStarting()"
* (refresh)="doRefresh($event, refresher)" * (refresh)="doRefresh($event)"
* (pulling)="doPulling($event, amt)"> * (pulling)="doPulling($event)">
* </ion-refresher> * </ion-refresher>
* *
* </ion-content> * </ion-content>
@ -29,23 +29,24 @@ import {raf, ready, CSS} from '../../util/dom';
* *
* ```ts * ```ts
* export class MyClass { * export class MyClass {
* constructor(){} *
* doRefresh(refresher) { * doRefresh(refresher) {
* console.debug('Refreshing!', refresher); * console.log('Refreshing', refresher)
* *
* setTimeout(() => { * setTimeout(() => {
* console.debug('Pull to refresh complete!', refresher);
* refresher.complete(); * refresher.complete();
* }) * console.log("Complete");
* }, 5000);
* } * }
* *
* doStarting() { * doStarting(refresher) {
* console.debug('Pull started!'); * console.log('Starting', refresher);
* } * }
* *
* doPulling(amt) { * doPulling(refresher) {
* console.debug('You have pulled', amt); * console.log('Pulling', refresher);
* } * }
*
* } * }
* ``` * ```
* @demo /docs/v2/demos/refresher/ * @demo /docs/v2/demos/refresher/
@ -191,19 +192,19 @@ export class Refresher {
/** /**
* @output {any} the methond on your class you want to perform when you are pulling down * @output {event} When you are pulling down
*/ */
@Output() pulling: EventEmitter<any> = new EventEmitter(); @Output() pulling: EventEmitter<Refresher> = new EventEmitter();
/** /**
* @output {any} the methond on your class you want to perform when you refreshing * @output {event} When you are refreshing
*/ */
@Output() refresh: EventEmitter<any> = new EventEmitter(); @Output() refresh: EventEmitter<Refresher> = new EventEmitter();
/** /**
* @output {any} the methond on your class you want to perform when you start pulling down * @output {event} When you start pulling down
*/ */
@Output() starting: EventEmitter<any> = new EventEmitter(); @Output() starting: EventEmitter<Refresher> = new EventEmitter();
constructor( constructor(
@ -304,7 +305,7 @@ export class Refresher {
activate() { activate() {
//this.ele.classList.add('active'); //this.ele.classList.add('active');
this.isActive = true; this.isActive = true;
//this.starting.next(); this.starting.emit(this);
} }
/** /**
@ -327,7 +328,7 @@ export class Refresher {
start() { start() {
// startCallback // startCallback
this.isRefreshing = true; this.isRefreshing = true;
this.refresh.next(this); this.refresh.emit(this);
//$scope.$onRefresh(); //$scope.$onRefresh();
} }
@ -484,8 +485,8 @@ export class Refresher {
// overscroll according to the user's drag so far // overscroll according to the user's drag so far
this.overscroll( Math.round((this.deltaY - this.dragOffset) / 3) ); this.overscroll( Math.round((this.deltaY - this.dragOffset) / 3) );
// Pass an incremental pull amount to the EventEmitter // Pass the refresher to the EventEmitter
this.pulling.next(this.lastOverscroll); this.pulling.emit(this);
// update the icon accordingly // update the icon accordingly
if (!this.activated && this.lastOverscroll > this.ptrThreshold) { if (!this.activated && this.lastOverscroll > this.ptrThreshold) {

View File

@ -5,9 +5,23 @@ import {App} from '../../../../../ionic/ionic';
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class E2EApp { class E2EApp {
items = [];
constructor() {
for(let i = 0; i < 20; i++) {
this.items.push({ "index": i });
}
}
doRefresh(refresher) { doRefresh(refresher) {
console.log('DOREFRESH', refresher) console.log('Refreshing', refresher)
// Add to the top of the list on refresh
let firstIndex = this.items[0].index - 1;
for(let i = firstIndex; i > firstIndex - 5; i--) {
this.items.unshift({ "index": i });
}
setTimeout(() => { setTimeout(() => {
refresher.complete(); refresher.complete();
@ -15,11 +29,11 @@ class E2EApp {
}, 5000); }, 5000);
} }
doStarting() { doStarting(refresher) {
console.log('DOSTARTING'); console.log('Starting', refresher);
} }
doPulling(amt) { doPulling(refresher) {
console.log('DOPULLING', amt); console.log('Pulling', refresher);
} }
} }

View File

@ -3,20 +3,16 @@
<ion-content> <ion-content>
<ion-refresher <ion-refresher
(starting)="doStarting($event)" (starting)="doStarting($event)"
(refresh)="doRefresh($event, refresher)" (refresh)="doRefresh($event)"
(pulling)="doPulling($event, amt)"> (pulling)="doPulling($event)"
pullingIcon="heart"
pullingText="release to refresh..."
refreshingIcon="star"
refreshingText="refreshing...">
</ion-refresher> </ion-refresher>
<f></f> <ion-list>
<f></f> <ion-item *ngFor="#item of items">
<f></f> Item {{ item.index }}
<f></f> </ion-item>
<f></f> </ion-list>
<f></f>
<f></f>
</ion-content> </ion-content>
<style>
f {
display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px;
}
</style>