fix(pull-to-refresh): set threshold so the pull to refresh will show …

…until complete is called

Removed the code manually adding classes and used host instead. Fixed
an issue with the tail refresh class not being removed after the first
pull. Added Sass variables to customize the refresher more - will add
even more to this.

References #5207

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

@@ -3,35 +3,41 @@
 // Pull to Refresh
 // --------------------------------------------------
 
-$pull-to-refresh-content-color:      #000 !default;
-$pull-to-refresh-content-font-size:  30px !default;
-$pull-to-refresh-icon-font-size:     16px !default;
+$pull-to-refresh-height:             60px !default;
+
+$pull-to-refresh-text-color:         #000 !default;
+$pull-to-refresh-text-font-size:     16px !default;
+
+$pull-to-refresh-icon-color:         #000 !default;
+$pull-to-refresh-icon-font-size:     30px !default;
 
 ion-refresher {
   position: absolute;
-  top: -60px;
+  top: -$pull-to-refresh-height;
   right: 0;
   left: 0;
   overflow: hidden;
   margin: auto;
-  height: 60px;
+  height: $pull-to-refresh-height;
 
   .refresher-content {
     position: absolute;
-    bottom: 15px;
+    top: 11px;
     left: 0;
     width: 100%;
-    color: $pull-to-refresh-content-color;
+    color: $pull-to-refresh-icon-color;
     text-align: center;
-    font-size: $pull-to-refresh-content-font-size;
+    font-size: $pull-to-refresh-icon-font-size;
 
     .text-refreshing,
     .text-pulling {
-      font-size: $pull-to-refresh-icon-font-size;
-      line-height: $pull-to-refresh-icon-font-size;
+      color: $pull-to-refresh-text-color;
+      font-size: $pull-to-refresh-text-font-size;
+      line-height: $pull-to-refresh-text-font-size;
     }
+
     &.refresher-with-text {
-      bottom: 10px;
+      top: 2px;
     }
   }
 

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

@@ -56,8 +56,9 @@ import {raf, ready, CSS} from '../../util/dom';
   selector: 'ion-refresher',
   host: {
     '[class.active]': 'isActive',
+    '[class.invisible]': 'isInvisible',
     '[class.refreshing]': 'isRefreshing',
-    '[class.refreshingTail]': 'isRefreshingTail'
+    '[class.refreshing-tail]': 'isRefreshingTail'
   },
   template:
     '<div class="refresher-content" [class.refresher-with-text]="pullingText || refreshingText">' +
@@ -83,6 +84,11 @@ export class Refresher {
    * @private
    */
   isActive: boolean;
+
+  /**
+   * @private
+   */
+  isInvisible: boolean;
 
   /**
    * @private
@@ -107,7 +113,7 @@ export class Refresher {
   /**
    * @private
    */
-  ptrThreshold: number = 0;
+  ptrThreshold: number;
 
   /**
    * @private
@@ -242,6 +248,8 @@ export class Refresher {
     sc.addEventListener('touchmove', this._touchMoveListener);
     sc.addEventListener('touchend', this._touchEndListener);
     sc.addEventListener('scroll', this._handleScrollListener);
+
+    this.ptrThreshold = this._ele.offsetHeight;
   }
 
   /**
@@ -303,7 +311,6 @@ export class Refresher {
    * @private
    */
   activate() {
-    //this.ele.classList.add('active');
     this.isActive = true;
     this.start.emit(this);
   }
@@ -332,27 +339,24 @@ export class Refresher {
   }
 
   /**
-   * @private
+   * @private showCallback
    */
   show() {
-    // showCallback
-    this._ele.classList.remove('invisible');
+    this.isInvisible = false;
   }
 
   /**
-   * @private
+   * @private hideCallback
    */
   hide() {
-    // showCallback
-    this._ele.classList.add('invisible');
+    this.isInvisible = true;    
   }
 
   /**
-   * @private
+   * @private tailCallback
    */
   tail() {
-    // tailCallback
-    this._ele.classList.add('refreshing-tail');
+    this.isRefreshingTail = true;
   }
 
   /**