Skip to content

Commit

Permalink
feat(ionInfiniteScroll): use event system
Browse files Browse the repository at this point in the history
Fixes #661.

BREAKING CHANGE: The binding for ionInfiniteScroll has changed, as well
as how you finish it.

If you had this code before:

```html
<ion-content on-infinite-scroll="doSomething"></ion-content>
```
```js
function MyCtrl($scope) {
  $scope.doSomething = function(scrollDoneCallback) {
    doSomething();
    scrollDoneCallback();
  };
}
```js

Now, your code should look like this:

```html
<ion-content on-infinite-scroll="doSomething()"></ion-content>
```
``js
function MyCtrl($scope) {
  $scope.doSomething = function() {
    doSomething();
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };
}
```
  • Loading branch information
ajoslin committed Feb 26, 2014
1 parent 997aec8 commit 7b0716c
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 42 deletions.
82 changes: 43 additions & 39 deletions js/ext/angular/src/directive/ionicContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
$onRefreshOpening: '&onRefreshOpening',
$onScroll: '&onScroll',
$onScrollComplete: '&onScrollComplete',
$onInfiniteScroll: '&onInfiniteScroll',
refreshComplete: '=',
onInfiniteScroll: '&',
infiniteScrollDistance: '@',
hasBouncing: '@',
scroll: '@',
Expand Down Expand Up @@ -160,40 +160,6 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
}
};
}

// Check if this supports infinite scrolling and listen for scroll events
// to trigger the infinite scrolling
// TODO(ajoslin): move functionality out of this function and make testable
var infiniteScroll = $element.find('ion-infinite-scroll');
var infiniteStarted = false;
if(infiniteScroll) {
// Parse infinite scroll distance
var distance = attr.infiniteScrollDistance || '1%';
var maxScroll;
if(distance.indexOf('%')) {
// It's a multiplier
maxScroll = function() {
return scrollView.getScrollMax().top * ( 1 - parseInt(distance, 10) / 100 );
};
} else {
// It's a pixel value
maxScroll = function() {
return scrollView.getScrollMax().top - parseInt(distance, 10);
};
}
$element.bind('scroll', function(e) {
if( scrollView && !infiniteStarted && (scrollView.getValues().top > maxScroll() ) ) {
infiniteStarted = true;
infiniteScroll.addClass('active');
var cb = function() {
scrollView.resize();
infiniteStarted = false;
infiniteScroll.removeClass('active');
};
$scope.$apply(angular.bind($scope, $scope.onInfiniteScroll, cb));
}
});
}
}
}
};
Expand All @@ -218,12 +184,50 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
};
})

.directive('ionInfiniteScroll', function() {
.directive('ionInfiniteScroll', ['$ionicBind', function($ionicBind) {
return {
restrict: 'E',
replace: false,
template: '<div class="scroll-infinite"><div class="scroll-infinite-content"><i class="icon ion-loading-d icon-refreshing"></i></div></div>'
require: '^?$ionicScroll',
template:
'<div class="scroll-infinite">' +
'<div class="scroll-infinite-content">' +
'<i class="icon ion-loading-d icon-refreshing"></i>' +
'</div>' +
'</div>',
link: function($scope, $element, $attrs, scrollCtrl) {
setTimeout(function() {
var scrollCtrl = $element.controller('$ionicScroll');
var scrollView = scrollCtrl.scrollView;

$ionicBind($scope, $attrs, {
distance: '@infiniteScrollDistance'
});
function maxScroll() {
var dist = $scope.distance || '1%';
return dist.indexOf('%') > -1 ?
scrollView.getScrollMax().top * (1 - parseInt(dist,10) / 100) :
scrollView.getScrollMax().top - parseInt(dist, 10);
}

var infiniteScrolling = false;
$scope.$on('scroll.infiniteScrollComplete', function() {
$element[0].classList.remove('active');
setTimeout(function() {
scrollView.resize();
});
infiniteScrolling = false;
});

scrollCtrl.$element.on('scroll', ionic.animationFrameThrottle(function() {
if (!infiniteScrolling && scrollView.getValues().top >= maxScroll()) {
$element[0].classList.add('active');
infiniteScrolling = true;
$scope.$apply(angular.bind($scope, $scope.$onInfiniteScroll));
}
}));
});
}
};
});
}]);

})();
10 changes: 7 additions & 3 deletions js/ext/angular/test/list-fit.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,13 @@ <h1 class="title">Footer!</h1>
};
$scope.more = [];
$scope.addMore = function() {
for (var i=0; i<15; i++) {
$scope.more.push(i);
}
$timeout(function() {
var l = $scope.more.length;
for (var i=l; i<l+15; i++) {
$scope.more.push(i);
}
$scope.$broadcast('scroll.infiniteScrollComplete');
}, 1500);
};
}
</script>
Expand Down

0 comments on commit 7b0716c

Please sign in to comment.