diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts index d49c3f3081..65241ce8b1 100644 --- a/ionic/components/scroll/pull-to-refresh.ts +++ b/ionic/components/scroll/pull-to-refresh.ts @@ -19,8 +19,8 @@ import {raf, ready, CSS} from '../../util/dom'; * ```html * * + * (refresh)="doRefresh($event)" + * (pulling)="doPulling($event)"> * * * @@ -29,23 +29,24 @@ import {raf, ready, CSS} from '../../util/dom'; * * ```ts * export class MyClass { - * constructor(){} + * * doRefresh(refresher) { - * console.debug('Refreshing!', refresher); + * console.log('Refreshing', refresher) * * setTimeout(() => { - * console.debug('Pull to refresh complete!', refresher); * refresher.complete(); - * }) + * console.log("Complete"); + * }, 5000); * } * - * doStarting() { - * console.debug('Pull started!'); + * doStarting(refresher) { + * console.log('Starting', refresher); * } * - * doPulling(amt) { - * console.debug('You have pulled', amt); + * doPulling(refresher) { + * console.log('Pulling', 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 = new EventEmitter(); + @Output() pulling: EventEmitter = 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 = new EventEmitter(); + @Output() refresh: EventEmitter = 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 = new EventEmitter(); + @Output() starting: EventEmitter = new EventEmitter(); constructor( @@ -304,7 +305,7 @@ export class Refresher { activate() { //this.ele.classList.add('active'); this.isActive = true; - //this.starting.next(); + this.starting.emit(this); } /** @@ -327,7 +328,7 @@ export class Refresher { start() { // startCallback this.isRefreshing = true; - this.refresh.next(this); + this.refresh.emit(this); //$scope.$onRefresh(); } @@ -484,8 +485,8 @@ export class Refresher { // overscroll according to the user's drag so far this.overscroll( Math.round((this.deltaY - this.dragOffset) / 3) ); - // Pass an incremental pull amount to the EventEmitter - this.pulling.next(this.lastOverscroll); + // Pass the refresher to the EventEmitter + this.pulling.emit(this); // update the icon accordingly if (!this.activated && this.lastOverscroll > this.ptrThreshold) { diff --git a/ionic/components/scroll/test/pull-to-refresh/index.ts b/ionic/components/scroll/test/pull-to-refresh/index.ts index f27fb00f95..706d7f219c 100644 --- a/ionic/components/scroll/test/pull-to-refresh/index.ts +++ b/ionic/components/scroll/test/pull-to-refresh/index.ts @@ -5,9 +5,23 @@ import {App} from '../../../../../ionic/ionic'; templateUrl: 'main.html' }) class E2EApp { + items = []; + + constructor() { + for(let i = 0; i < 20; i++) { + this.items.push({ "index": i }); + } + } 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(() => { refresher.complete(); @@ -15,11 +29,11 @@ class E2EApp { }, 5000); } - doStarting() { - console.log('DOSTARTING'); + doStarting(refresher) { + console.log('Starting', refresher); } - doPulling(amt) { - console.log('DOPULLING', amt); + doPulling(refresher) { + console.log('Pulling', refresher); } } diff --git a/ionic/components/scroll/test/pull-to-refresh/main.html b/ionic/components/scroll/test/pull-to-refresh/main.html index d3f8b974fb..a4b0eb052c 100644 --- a/ionic/components/scroll/test/pull-to-refresh/main.html +++ b/ionic/components/scroll/test/pull-to-refresh/main.html @@ -3,20 +3,16 @@ + (refresh)="doRefresh($event)" + (pulling)="doPulling($event)" + pullingIcon="heart" + pullingText="release to refresh..." + refreshingIcon="star" + refreshingText="refreshing..."> - - - - - - - + + + Item {{ item.index }} + + - -