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
ionic-team · Feb 16, 2016 · acf1894 · acf1894
1 parent c365c92
commit acf1894
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 40 deletions.
diff --git 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
  *  <ion-content>
  *    <ion-refresher (starting)="doStarting()"
- *                   (refresh)="doRefresh($event, refresher)"
- *                   (pulling)="doPulling($event, amt)">
+ *                   (refresh)="doRefresh($event)"
+ *                   (pulling)="doPulling($event)">
  *    </ion-refresher>
  *
  *  </ion-content>
@@ -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<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(
@@ -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
@@ -5,21 +5,35 @@ 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();
       console.log("Complete");
     }, 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
@@ -3,20 +3,16 @@
 <ion-content>
   <ion-refresher
     (starting)="doStarting($event)"
-    (refresh)="doRefresh($event, refresher)"
-    (pulling)="doPulling($event, amt)">
+    (refresh)="doRefresh($event)"
+    (pulling)="doPulling($event)"
+    pullingIcon="heart"
+    pullingText="release to refresh..."
+    refreshingIcon="star"
+    refreshingText="refreshing...">
   </ion-refresher>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
+  <ion-list>
+    <ion-item *ngFor="#item of items">
+      Item {{ item.index }}
+    </ion-item>
+  </ion-list>
 </ion-content>
-
-<style>
-  f {
-    display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px;
-  }
-</style>