wip

ionic/components/scroll/pull-to-refresh.scss

@@ -1,3 +1,4 @@
+// Scroll refresher (for pull to refresh)
 ion-refresher {
   position: absolute;
   top: -60px;
@@ -6,12 +7,12 @@ ion-refresher {
   overflow: hidden;
   margin: auto;
   height: 60px;
-  .refresher {
+  .refresher-content {
     position: absolute;
     bottom: 15px;
     left: 0;
     width: 100%;
-    color: #fff;
+    color: #000;//$scroll-refresh-icon-color;
     text-align: center;
 
     font-size: 30px;
@@ -21,8 +22,83 @@ ion-refresher {
       font-size: 16px;
       line-height: 16px;
     }
-    &.ionic-refresher-with-text {
+    &.refresher-with-text {
       bottom: 10px;
     }
   }
+
+  .icon-refreshing,
+  .icon-pulling {
+    width: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+  }
+  .icon-pulling {
+    animation-name: refresh-spin-back;
+    animation-duration: 200ms;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    transform: translate3d(0,0,0) rotate(0deg);
+  }
+  .icon-refreshing,
+  .text-refreshing {
+    display: none;
+  }
+  .icon-refreshing {
+    animation-duration: 1.5s;
+  }
+
+  &.active {
+    .icon-pulling:not(.pulling-rotation-disabled) {
+      animation-name: refresh-spin;
+      transform: translate3d(0,0,0) rotate(-180deg);
+    }
+    &.refreshing {
+      transition: -webkit-transform .2s;
+      transition: transform .2s;
+      transform: scale(1,1);
+
+      .icon-pulling,
+      .text-pulling {
+        display: none;
+      }
+      .icon-refreshing,
+      .text-refreshing {
+        display: block;
+      }
+      &.refreshing-tail {
+        transform: scale(0,0);
+      }
+    }
+  }
+}
+.scroll-content.overscroll{
+  position:fixed;
+}
+/*
+  -webkit-overflow-scrolling:touch;
+  width:100%;
+}
+*/
+
+@-webkit-keyframes refresh-spin {
+  0%   { -webkit-transform: translate3d(0,0,0) rotate(0); }
+  100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
+}
+
+@keyframes refresh-spin {
+  0%   { transform: translate3d(0,0,0) rotate(0); }
+  100% { transform: translate3d(0,0,0) rotate(180deg); }
+}
+
+@-webkit-keyframes refresh-spin-back {
+  0%   { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
+  100% { -webkit-transform: translate3d(0,0,0) rotate(0); }
+}
+
+@keyframes refresh-spin-back {
+  0%   { transform: translate3d(0,0,0) rotate(180deg); }
+  100% { transform: translate3d(0,0,0) rotate(0); }
 }

ionic/components/scroll/pull-to-refresh.ts

@@ -1,15 +1,40 @@
-import {Component, View, ElementRef, EventEmitter, Parent} from 'angular2/angular2'
+import {Component, View, NgIf, CSSClass, ElementRef, EventEmitter, Parent} from 'angular2/angular2'
 
 import {Content} from '../content/content';
 
-import {raf, ready, CSS} from 'ionic/util/dom'
+import * as util from 'ionic/util';
+import {raf, ready, CSS} from 'ionic/util/dom';
 
 @Component({
   selector: 'ion-refresher',
-  events: ['refresh', 'pulling']
+  events: ['refresh', 'starting', 'pulling'],
+  properties: [
+    'pullingIcon',
+    'pullingText',
+    'refreshingIcon',
+    'refreshingText',
+    'spinner',
+    'disablePullingRotation'
+  ],
+  host: {
+    '[class.active]': 'isActive',
+    '[class.refreshing]': 'isRefreshing',
+    '[class.refreshingTail]': 'isRefreshingTail'
+  }
 })
 @View({
-  template: '<div class="refresher"></div>',
+  template: `<div class="refresher-content refresher-with-text">
+      <div class="icon-pulling">
+        <i class="icon" [class]="pullingIcon"></i>
+      </div>
+      <div class="text-pulling" [inner-html]="pullingText"></div>
+      <div class="icon-refreshing">
+        <!--<ion-spinner ng-if="showSpinner" icon="{{spinner}}"></ion-spinner>-->
+        <i class="icon" [class]="refreshingIcon"></i>
+      </div>
+      <div class="text-refreshing" [inner-html]="refreshingText"></div>
+    </div>`,
+  directives: [NgIf, CSSClass]
 })
 export class Refresher {
   constructor(
@@ -22,6 +47,7 @@ export class Refresher {
     this.content = content;
 
     this.refresh = new EventEmitter('refresh');
+    this.starting = new EventEmitter('starting');
     this.pulling = new EventEmitter('pulling');
 
     setTimeout(() => {
@@ -47,6 +73,14 @@ export class Refresher {
     this.scrollParent = sp;
     this.scrollChild = sc;
 
+    if(!util.isDefined(this.pullingIcon)) {
+      this.pullingIcon = 'ion-android-arrow-down';
+    }
+
+    this.showSpinner = !util.isDefined(this.refreshingIcon) && this.spinner != 'none';
+
+    this.showIcon = util.isDefined(this.refreshingIcon);
+
     this._touchMoveListener = this._handleTouchMove.bind(this);
     this._touchEndListener = this._handleTouchEnd.bind(this);
     this._handleScrollListener = this._handleScroll.bind(this);
@@ -96,16 +130,17 @@ export class Refresher {
   }
 
   activate() {
-    this.ele.classList.add('active');
-    this.pulling.next(0);
+    //this.ele.classList.add('active');
+    this.isActive = true;
+    //this.starting.next();
   }
 
   deactivate() {
     // give tail 150ms to finish
     setTimeout(() => {
-      this.ele.classList.remove('active');
-      this.ele.classList.remove('refreshing');
-      this.ele.classList.remove('refreshing-tail');
+      this.isActive = false;
+      this.isRefreshing = false;
+      this.isRefreshingTail = false;
       // deactivateCallback
       if (this.activated) this.activated = false;
     }, 150);
@@ -113,7 +148,7 @@ export class Refresher {
 
   start() {
     // startCallback
-    this.ele.classList.add('refreshing');
+    this.isRefreshing = true;
     this.refresh.next();
     //$scope.$onRefresh();
   }
@@ -234,6 +269,9 @@ export class Refresher {
     // overscroll according to the user's drag so far
     this.overscroll(parseInt((this.deltaY - this.dragOffset) / 3, 10));
 
+    // Pass an incremental pull amount to the EventEmitter
+    this.pulling.next(this.lastOverscroll);
+
     // update the icon accordingly
     if (!this.activated && this.lastOverscroll > this.ptrThreshold) {
       this.activated = true;

ionic/components/scroll/test/pull-to-refresh/index.ts

@@ -14,8 +14,11 @@ class MyApp {
   doRefresh() {
     console.log('DOREFRESH')
   }
-  doPull(amt) {
-    console.log('PULLING', amt);
+  doStarting() {
+    console.log('DOSTARTING');
+  }
+  doPulling(amt) {
+    console.log('DOPULLING', amt);
   }
 }
 

ionic/components/scroll/test/pull-to-refresh/main.html

@@ -2,7 +2,7 @@
   <ion-toolbar><ion-title>Pull To Refresh</ion-title></ion-toolbar>
 
   <ion-content>
-    <ion-refresher (refresh)="doRefresh()" (pulling)="doPull(amt)">
+    <ion-refresher (starting)="doStarting()" (refresh)="doRefresh()" (pulling)="doPulling($event, amt)">
     </ion-refresher>
     <f></f>
     <f></f>
@@ -16,6 +16,7 @@
 </ion-view>
 <style>
   f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px; }
+  ion-refresher { background-color: red; }
   #counter {
     position: fixed;
     top: 0;