Working PTR

ionic/components/content/content.ts

@@ -1,4 +1,4 @@
-import {Component, View, ElementRef} from 'angular2/angular2';
+import {Component, View, ElementRef, onInit} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 
@@ -7,7 +7,8 @@ import {Ion} from '../ion';
   selector: 'ion-content',
   properties: [
     'parallax'
-  ]
+  ],
+  lifecycle: [onInit]
 })
 @View({
   template: '<div class="scroll-content"><content></content></div>'
@@ -15,10 +16,10 @@ import {Ion} from '../ion';
 export class Content extends Ion {
   constructor(elementRef: ElementRef) {
     super(elementRef);
+  }
 
-    setTimeout(() => {
-      this.scrollElement = elementRef.nativeElement.children[0];
-    });
+  onInit() {
+    this.scrollElement = this.elementRef.nativeElement.children[0];
   }
 
   addScrollEventListener(handler) {

ionic/components/item/extensions/ios.scss

@@ -52,5 +52,6 @@ $item-ios-border-color:          $list-ios-border-color !default;
 }
 
 .list-ios .item-group-title {
+  // TODO: This doesn't look great when it's a header for the first item
   @include hairline(bottom, $item-ios-border-color, $z-index-list-border);
 }

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

@@ -74,8 +74,8 @@ ion-refresher {
     }
   }
 }
-.scroll-content.overscroll{
-  position:fixed;
+.scroll-content.overscroll {
+  overflow: visible;
 }
 /*
   -webkit-overflow-scrolling:touch;

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

@@ -1,4 +1,4 @@
-import {Component, View, NgIf, CSSClass, ElementRef, EventEmitter, Parent} from 'angular2/angular2'
+import {Component, View, NgIf, CSSClass, ElementRef, EventEmitter, Parent, onInit} from 'angular2/angular2'
 
 import {Content} from '../content/content';
 
@@ -20,19 +20,20 @@ import {raf, ready, CSS} from 'ionic/util/dom';
     '[class.active]': 'isActive',
     '[class.refreshing]': 'isRefreshing',
     '[class.refreshingTail]': 'isRefreshingTail'
-  }
+  },
+  lifecycle: [onInit]
 })
 @View({
-  template: `<div class="refresher-content refresher-with-text">
+  template: `<div class="refresher-content" [class.refresher-with-text]="pullingText || refreshingText">
       <div class="icon-pulling">
         <i class="icon" [class]="pullingIcon"></i>
       </div>
-      <div class="text-pulling" [inner-html]="pullingText"></div>
+      <div class="text-pulling" [inner-html]="pullingText" *ng-if="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 class="text-refreshing" [inner-html]="refreshingText" *ng-if="refreshingText"></div>
     </div>`,
   directives: [NgIf, CSSClass]
 })
@@ -49,10 +50,10 @@ export class Refresher {
     this.refresh = new EventEmitter('refresh');
     this.starting = new EventEmitter('starting');
     this.pulling = new EventEmitter('pulling');
+  }
 
-    setTimeout(() => {
-      this.initEvents();
-    }, 1000);
+  onInit() {
+    this.initEvents();
   }
 
   initEvents() {
@@ -73,9 +74,11 @@ export class Refresher {
     this.scrollParent = sp;
     this.scrollChild = sc;
 
-    if(!util.isDefined(this.pullingIcon)) {
-      this.pullingIcon = 'ion-android-arrow-down';
-    }
+    util.defaults(this, {
+      pullingIcon: 'ion-android-arrow-down',
+      refreshingIcon: 'ion-ionic'
+      //refreshingText: 'Updating'
+    })
 
     this.showSpinner = !util.isDefined(this.refreshingIcon) && this.spinner != 'none';
 
@@ -149,7 +152,7 @@ export class Refresher {
   start() {
     // startCallback
     this.isRefreshing = true;
-    this.refresh.next();
+    this.refresh.next(this);
     //$scope.$onRefresh();
   }
 
@@ -164,6 +167,29 @@ export class Refresher {
     this.ele.classList.add('invisible');
   }
 
+  tail() {
+    // tailCallback
+    this.ele.classList.add('refreshing-tail');
+  }
+
+  complete() {
+    setTimeout(() => {
+      raf(this.tail.bind(this));
+
+      // scroll back to home during tail animation
+      this.scrollTo(0, this.scrollTime, this.deactivate.bind(this));
+
+      // return to native scrolling after tail animation has time to finish
+      setTimeout(() => {
+        if(this.isOverscrolling) {
+          this.isOverscrolling = false;
+          this.setScrollLock(false);
+        }
+      }, this.scrollTime);
+
+    }, this.scrollTime);
+  }
+
   scrollTo(Y, duration, callback) {
     // scroll animation loop w/ easing
     // credit https://gist.github.com/dezinezync/5487119

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

@@ -11,8 +11,12 @@ class MyApp {
   constructor() {
     console.log('IonicApp Start')
   }
-  doRefresh() {
-    console.log('DOREFRESH')
+  doRefresh(refresher) {
+    console.log('DOREFRESH', refresher)
+
+    setTimeout(() => {
+      refresher.complete();
+    })
   }
   doStarting() {
     console.log('DOSTARTING');

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 (starting)="doStarting()" (refresh)="doRefresh()" (pulling)="doPulling($event, amt)">
+    <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
     </ion-refresher>
     <f></f>
     <f></f>
@@ -16,7 +16,6 @@
 </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;

ionic/components/toolbar/toolbar.scss

@@ -8,8 +8,11 @@ $toolbar-order: (
   secondary: 40
 );
 
+$toolbar-zindex: 2;
+
 
 ion-toolbar {
+  z-index: $toolbar-zindex;
   position: relative;
   width: 100%;
   height: 100%;