fix(ionicScrollDelegate): trigger resize before scrolling to top/bottom

Closes #522
ionic-team · Feb 6, 2014 · ea289b8 · ea289b8
1 parent 0fe4486
commit ea289b8
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 32 deletions.
diff --git a/js/ext/angular/src/service/delegates/ionicScrollDelegate.js b/js/ext/angular/src/service/delegates/ionicScrollDelegate.js
@@ -26,7 +26,7 @@ angular.module('ionic.ui.service.scrollDelegate', [])
 
         if(ionic.DomUtil.rectContains(e.gesture.touches[0].pageX, e.gesture.touches[0].pageY, bounds.left, bounds.top, bounds.left + bounds.width, bounds.top + 20)) {
           _this.scrollTop();
-        } 
+        }
       }, element[0]);
     },
 
@@ -47,6 +47,14 @@ angular.module('ionic.ui.service.scrollDelegate', [])
      * $scope {Scope} the scope to register and listen for events
      */
     register: function($scope, $element) {
+
+      function scrollViewResize() {
+        // Run the resize after this digest
+        return $timeout(function() {
+          $scope.$parent.scrollView && $scope.$parent.scrollView.resize();
+        });
+      }
+
       $element.bind('scroll', function(e) {
         $scope.onScroll({
           event: e,
@@ -56,10 +64,7 @@ angular.module('ionic.ui.service.scrollDelegate', [])
       });
 
       $scope.$parent.$on('scroll.resize', function(e) {
-        // Run the resize after this digest
-        $timeout(function() {
-          $scope.$parent.scrollView && $scope.$parent.scrollView.resize();
-        });
+        scrollViewResize();
       });
 
       // Called to stop refreshing on the scroll view
@@ -73,14 +78,18 @@ angular.module('ionic.ui.service.scrollDelegate', [])
        * @param animate {boolean} whether to animate or just snap
        */
       $scope.$parent.$on('scroll.scrollTop', function(e, animate) {
-        $scope.$parent.scrollView && $scope.$parent.scrollView.scrollTo(0, 0, animate === false ? false : true);
+        scrollViewResize().then(function() {
+          $scope.$parent.scrollView && $scope.$parent.scrollView.scrollTo(0, 0, animate === false ? false : true);
+        });
       });
       $scope.$parent.$on('scroll.scrollBottom', function(e, animate) {
-        var sv = $scope.$parent.scrollView;
-        var max;
-        if(!sv) { return; }
-        max = sv.getScrollMax();
-        sv.scrollTo(0, max.top, animate === false ? false : true);
+        scrollViewResize().then(function() {
+          var sv = $scope.$parent.scrollView;
+          if (sv) {
+            var max = sv.getScrollMax();
+            sv.scrollTo(0, max.top, animate === false ? false : true);
+          }
+        });
       });
     }
   };

diff --git a/js/ext/angular/test/service/delegates/ionicScrollDelegate.unit.js b/js/ext/angular/test/service/delegates/ionicScrollDelegate.unit.js
@@ -27,45 +27,59 @@ describe('Ionic ScrollDelegate Service', function() {
     expect(sv).not.toBe(undefined);
   });
 
-  it('Should scroll top', function() {
-    spyOn(del, 'register');
+  it('should resize', function() {
+    var scope = rootScope.$new();
+    var el = compile('<content></content>')(scope);
+
+    var sv = del.getScrollView(scope);
+    spyOn(sv, 'resize');
 
+    del.resize();
+    timeout.flush();
+    expect(sv.resize).toHaveBeenCalled();
+  });
+
+  it('Should resize & scroll top', function() {
     var scope = rootScope.$new();
     var el = compile('<content start-y="100"></content>')(scope);
 
     var sv = del.getScrollView(scope);
+    spyOn(sv, 'resize');
 
-    var v = sv.getValues();
+    expect(sv.getValues().top).toBe(100);
 
-    expect(v.top).toBe(100);
-
-    del.scrollTop();
+    del.scrollTop(false);
+    timeout.flush();
+    expect(sv.resize).toHaveBeenCalled();
 
-    expect(v.top).toBe(100);
+    expect(sv.getValues().top).toBe(0);
   });
 
-  /*
-  it('Should scroll bottom', function() {
-    spyOn(del, 'register');
-
+  it('Should resize & scroll top', function() {
     var scope = rootScope.$new();
-    var el = compile('<content start-y="100"><div style="height:1000px; width:100px;"></div></content>')(scope);
+    var el = compile('<content start-y="100"></content>')(scope);
 
     var sv = del.getScrollView(scope);
-    timeout.flush();
-    sv.resize();
+    spyOn(sv, 'resize');
 
-    var v = sv.getValues();
+    expect(sv.getValues().top).toBe(100);
 
+    del.scrollBottom(false);
+    timeout.flush();
+    expect(sv.resize).toHaveBeenCalled();
 
-    expect(v.top).toBe(100);
+    expect(sv.getValues().top).toBe(sv.getScrollMax().top);
+  });
 
+  it('should finish refreshing', function() {
+    var scope = rootScope.$new();
+    var el = compile('<content start-y="100"></content>')(scope);
 
-    console.log(sv.getScrollMax());
-    del.scrollBottom();
+    var sv = del.getScrollView(scope);
+    spyOn(sv, 'finishPullToRefresh');
 
-    expect(v.top).toBe(100);
-  });
-  */
+    del.finishRefreshing(scope);
+    expect(sv.finishPullToRefresh).toHaveBeenCalled();
+ });
 });