feat(refresher): Improve refresher animation. Allow pulling icon rotation to be disabled.

This commit is contained in:
Perry Govier
2014-09-16 16:22:02 -05:00
parent 487e7a9796
commit db27fb116c
7 changed files with 111 additions and 33 deletions

View File

@@ -224,6 +224,7 @@ function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $loca
$timeout(function(){
refresher.classList.remove('active');
refresher.classList.remove('refreshing');
refresher.classList.remove('refreshing-tail');
refresher.classList.add('invisible');
},300);
}, function() {
@@ -236,6 +237,9 @@ function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $loca
},function(){
// hideCallback
refresher.classList.add('invisible');
},function(){
// tailCallback
refresher.classList.add('refreshing-tail');
});
};
}]);

View File

@@ -55,6 +55,8 @@
* refresher.
* @param {string=} refreshing-text The text to display after the user lets go of
* the refresher.
* @param {boolean=} disable-pulling-rotation Disables the rotation animation of the pulling
* icon when it reaches its activated threshold. To be used with a custom `pulling-icon`.
*
*/
IonicModule
@@ -67,7 +69,7 @@ IonicModule
'<div class="scroll-refresher" collection-repeat-ignore>' +
'<div class="ionic-refresher-content" ' +
'ng-class="{\'ionic-refresher-with-text\': pullingText || refreshingText}">' +
'<div class="icon-pulling">' +
'<div class="icon-pulling" ng-class="{\'pulling-rotation-disabled\':disablePullingRotation}">' +
'<i class="icon {{pullingIcon}}"></i>' +
'</div>' +
'<div class="text-pulling" ng-bind-html="pullingText"></div>' +
@@ -77,7 +79,7 @@ IonicModule
'</div>',
compile: function($element, $attrs) {
if (angular.isUndefined($attrs.pullingIcon)) {
$attrs.$set('pullingIcon', 'ion-arrow-down-c');
$attrs.$set('pullingIcon', 'ion-ios7-arrow-down');
}
if (angular.isUndefined($attrs.refreshingIcon)) {
$attrs.$set('refreshingIcon', 'ion-loading-d');
@@ -88,6 +90,7 @@ IonicModule
pullingText: '@',
refreshingIcon: '@',
refreshingText: '@',
disablePullingRotation: '@',
$onRefresh: '&onRefresh',
$onPulling: '&onPulling'
});