fix(refresher): finish animating before changing icon, hide when not in use

Author: perrygovier

js/angular/controller/scrollController.js

@@ -20,6 +20,8 @@ IonicModule
 function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $location, $rootScope, $document, $ionicScrollDelegate) {
 
   var self = this;
+  // for testing
+  this.__timeout = $timeout;
 
   this._scrollViewOptions = scrollViewOptions; //for testing
 
@@ -188,14 +190,28 @@ function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $loca
     var refresher = this.refresher = refresherElement;
     var refresherHeight = self.refresher.clientHeight || 0;
     scrollView.activatePullToRefresh(refresherHeight, function() {
+      // activateCallback
       refresher.classList.add('active');
       refresherScope.$onPulling();
     }, function() {
-      refresher.classList.remove('refreshing');
-      refresher.classList.remove('active');
+      // deactivateCallback
+      $timeout(function(){
+        refresher.classList.remove('active');
+        refresher.classList.remove('refreshing');
+        refresher.classList.add('invisible');
+      },300);
     }, function() {
+      // startCallback
       refresher.classList.add('refreshing');
       refresherScope.$onRefresh();
+    },function(){
+      // showCallback
+      refresher.classList.remove('invisible');
+      console.log('showing')
+    },function(){
+      // hideCallback
+      refresher.classList.add('invisible');
+      console.log('hiding');
     });
   };
 }]);

js/angular/directive/refresher.js

@@ -95,7 +95,6 @@ IonicModule
         scrollCtrl._setRefresher($scope, $element[0]);
         $scope.$on('scroll.refreshComplete', function() {
           $scope.$evalAsync(function() {
-            $element[0].classList.remove('active');
             scrollCtrl.scrollView.finishPullToRefresh();
           });
         });

js/views/scrollView.js

@@ -1261,16 +1261,19 @@ ionic.views.Scroll = ionic.views.View.inherit({
    * @param activateCallback {Function} Callback to execute on activation. This is for signalling the user about a refresh is about to happen when he release.
    * @param deactivateCallback {Function} Callback to execute on deactivation. This is for signalling the user about the refresh being cancelled.
    * @param startCallback {Function} Callback to execute to start the real async refresh action. Call {@link #finishPullToRefresh} after finish of refresh.
+   * @param showCallback {Function} Callback to execute when the refresher should be shown. This is for showing the refresher during a negative scrollTop.
+   * @param hideCallback {Function} Callback to execute when the refresher should be hidden. This is for hiding the refresher when it's behind the nav bar.
    */
-  activatePullToRefresh: function(height, activateCallback, deactivateCallback, startCallback) {
+  activatePullToRefresh: function(height, activateCallback, deactivateCallback, startCallback, showCallback, hideCallback) {
 
     var self = this;
 
     self.__refreshHeight = height;
     self.__refreshActivate = activateCallback;
     self.__refreshDeactivate = deactivateCallback;
     self.__refreshStart = startCallback;
-
+    self.__refreshShow = showCallback;
+    self.__refreshHide = hideCallback;
   },
 
 
@@ -1741,6 +1744,15 @@ ionic.views.Scroll = ionic.views.View.inherit({
             // Support pull-to-refresh (only when only y is scrollable)
             if (!self.__enableScrollX && self.__refreshHeight != null) {
 
+              // hide the refresher when it's behind the header bar in case of header transparency
+              if(scrollTop < 0){
+                self.__refreshHidden = false;
+                self.__refreshShow();
+              }else{
+                self.__refreshHide();
+                self.__refreshHidden = true;
+              }
+
               if (!self.__refreshActive && scrollTop <= -self.__refreshHeight) {
 
                 self.__refreshActive = true;
@@ -1767,6 +1779,10 @@ ionic.views.Scroll = ionic.views.View.inherit({
             scrollTop = 0;
 
           }
+        }else if(self.__refreshHeight && !self.__refreshHidden){
+          // if a positive scroll value and the refresher is still not hidden, hide it
+          self.__refreshHide();
+          self.__refreshHidden = true;
         }
       }
 

test/unit/angular/controller/scrollController.unit.js

@@ -354,10 +354,12 @@ describe('$ionicScroll Controller', function() {
     setup({
       el: angular.element('<div><div class="scroll-refresher"></div></div>')[0]
     });
-    spyOn(ctrl.scrollView, 'activatePullToRefresh').andCallFake(function(height, start, refreshing, done) {
+    spyOn(ctrl.scrollView, 'activatePullToRefresh').andCallFake(function(height, start, refreshing, done, show, hide) {
       startCb = start;
       refreshingCb = refreshing;
       doneCb = done;
+      showCb = show;
+      hideCb = hide;
     });
     ctrl._setRefresher(scope, ctrl.element);
 
@@ -378,15 +380,26 @@ describe('$ionicScroll Controller', function() {
     expect(scope.$onPulling).toHaveBeenCalled();
 
     refreshingCb();
-    expect(refresher.classList.contains('active')).toBe(false);
+    expect(refresher.classList.contains('active')).toBe(true);
     expect(refresher.classList.contains('refreshing')).toBe(false);
 
     expect(scope.$onRefresh).not.toHaveBeenCalled();
 
     doneCb();
-    expect(refresher.classList.contains('active')).toBe(false);
+    expect(refresher.classList.contains('active')).toBe(true);
     expect(refresher.classList.contains('refreshing')).toBe(true);
     expect(scope.$onRefresh).toHaveBeenCalled();
+    timeout.flush();
+
+    expect(refresher.classList.contains('active')).toBe(false);
+    expect(refresher.classList.contains('refreshing')).toBe(false);
+    expect(refresher.classList.contains('invisible')).toBe(true);
+
+    showCb();
+    expect(refresher.classList.contains('invisible')).toBe(false);
+
+    hideCb();
+    expect(refresher.classList.contains('invisible')).toBe(true);
   });
 
 });

test/unit/angular/directive/refresher.unit.js

@@ -65,7 +65,6 @@ describe('ionRefresher directive', function() {
     expect(el.hasClass('active')).toBe(true);
     expect(ctrl.scrollView.finishPullToRefresh).not.toHaveBeenCalled();
     el.scope().$apply();
-    expect(el.hasClass('active')).toBe(false);
     expect(ctrl.scrollView.finishPullToRefresh).toHaveBeenCalled();
   });