Skip to content

Commit

Permalink
fix(infinite-scroll): Replace with
Browse files Browse the repository at this point in the history 
Also, update tutorial to follow angular styleguide standards.
  • Loading branch information
@mportuga
Portugal, Marcelo authored and mportuga committed Jan 15, 2018
1 parent b77ddc3 commit 30af7e9
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 53 deletions.
98 changes: 50 additions & 48 deletions misc/tutorial/212_infinite_scroll.ngdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,10 @@ Finally, we can reset the data, which gets us back to the middle page and sets t
<file name="app.js">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.infiniteScroll']);

app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.gridOptions = {
app.controller('MainCtrl', function ($scope, $http, $timeout) {
var vm = this;

vm.gridOptions = {
infiniteScrollRowsFromEnd: 40,
infiniteScrollUp: true,
infiniteScrollDown: true,
Expand All @@ -79,117 +81,117 @@ Finally, we can reset the data, which gets us back to the middle page and sets t
],
data: 'data',
onRegisterApi: function(gridApi){
gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);
gridApi.infiniteScroll.on.needLoadMoreDataTop($scope, $scope.getDataUp);
$scope.gridApi = gridApi;
gridApi.infiniteScroll.on.needLoadMoreData($scope, getDataDown);
gridApi.infiniteScroll.on.needLoadMoreDataTop($scope, getDataUp);
vm.gridApi = gridApi;
}
};

$scope.data = [];

$scope.firstPage = 2;
$scope.lastPage = 2;
vm.firstPage = 2;
vm.lastPage = 2;

$scope.getFirstData = function() {
function getFirstData() {
return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json')
.then(function(response) {
var newData = $scope.getPage(response.data, $scope.lastPage);
var newData = getPage(response.data, vm.lastPage);

$scope.data = $scope.data.concat(newData);
});
};
}

$scope.getDataDown = function() {
function getDataDown() {
return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json')
.then(function(response) {
$scope.lastPage++;
var newData = $scope.getPage(response.data, $scope.lastPage);
$scope.gridApi.infiniteScroll.saveScrollPercentage();
vm.lastPage++;
var newData = getPage(response.data, vm.lastPage);
vm.gridApi.infiniteScroll.saveScrollPercentage();
$scope.data = $scope.data.concat(newData);
return $scope.gridApi.infiniteScroll.dataLoaded($scope.firstPage > 0, $scope.lastPage < 4).then(function() {$scope.checkDataLength('up');});
return vm.gridApi.infiniteScroll.dataLoaded(vm.firstPage > 0, vm.lastPage < 4).then(function() {checkDataLength('up');});
})
.catch(function(error) {
return $scope.gridApi.infiniteScroll.dataLoaded();
return vm.gridApi.infiniteScroll.dataLoaded();
});
};
}

$scope.getDataUp = function() {
function getDataUp() {
return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json')
.then(function(response) {
$scope.firstPage--;
var newData = $scope.getPage(response.data, $scope.firstPage);
$scope.gridApi.infiniteScroll.saveScrollPercentage();
vm.firstPage--;
var newData = getPage(response.data, vm.firstPage);
vm.gridApi.infiniteScroll.saveScrollPercentage();
$scope.data = newData.concat($scope.data);
return $scope.gridApi.infiniteScroll.dataLoaded($scope.firstPage > 0, $scope.lastPage < 4).then(function() {$scope.checkDataLength('down');});
return vm.gridApi.infiniteScroll.dataLoaded(vm.firstPage > 0, vm.lastPage < 4).then(function() {checkDataLength('down');});
})
.catch(function(error) {
return $scope.gridApi.infiniteScroll.dataLoaded();
return vm.gridApi.infiniteScroll.dataLoaded();
});
};
}

$scope.getPage = function(data, page) {
function getPage(data, page) {
var res = [];
for (var i = (page * 100); i < (page + 1) * 100 && i < data.length; ++i) {
res.push(data[i]);
}
return res;
};
}

$scope.checkDataLength = function( discardDirection) {
function checkDataLength( discardDirection) {
// work out whether we need to discard a page, if so discard from the direction passed in
if( $scope.lastPage - $scope.firstPage > 3 ){
if( vm.lastPage - vm.firstPage > 3 ){
// we want to remove a page
$scope.gridApi.infiniteScroll.saveScrollPercentage();
vm.gridApi.infiniteScroll.saveScrollPercentage();

if( discardDirection === 'up' ){
$scope.data = $scope.data.slice(100);
$scope.firstPage++;
vm.firstPage++;
$timeout(function() {
// wait for grid to ingest data changes
$scope.gridApi.infiniteScroll.dataRemovedTop($scope.firstPage > 0, $scope.lastPage < 4);
vm.gridApi.infiniteScroll.dataRemovedTop(vm.firstPage > 0, vm.lastPage < 4);
});
} else {
$scope.data = $scope.data.slice(0, 400);
$scope.lastPage--;
vm.lastPage--;
$timeout(function() {
// wait for grid to ingest data changes
$scope.gridApi.infiniteScroll.dataRemovedBottom($scope.firstPage > 0, $scope.lastPage < 4);
vm.gridApi.infiniteScroll.dataRemovedBottom(vm.firstPage > 0, vm.lastPage < 4);
});
}
}
};
}

$scope.reset = function() {
$scope.firstPage = 2;
$scope.lastPage = 2;
vm.reset = function() {
vm.firstPage = 2;
vm.lastPage = 2;

// turn off the infinite scroll handling up and down - hopefully this won't be needed after @swalters scrolling changes
$scope.gridApi.infiniteScroll.setScrollDirections( false, false );
vm.gridApi.infiniteScroll.setScrollDirections( false, false );
$scope.data = [];

$scope.getFirstData().then(function(){
getFirstData().then(function(){
$timeout(function() {
// timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
$scope.gridApi.infiniteScroll.resetScroll( $scope.firstPage > 0, $scope.lastPage < 4 );
vm.gridApi.infiniteScroll.resetScroll( vm.firstPage > 0, vm.lastPage < 4 );
});
});
};

$scope.getFirstData().then(function(){
getFirstData().then(function(){
$timeout(function() {
// timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
// you need to call resetData once you've loaded your data if you want to enable scroll up,
// it adjusts the scroll position down one pixel so that we can generate scroll up events
$scope.gridApi.infiniteScroll.resetScroll( $scope.firstPage > 0, $scope.lastPage < 4 );
vm.gridApi.infiniteScroll.resetScroll( vm.firstPage > 0, vm.lastPage < 4 );
});
});

}]);
});
</file>
<file name="index.html">
<div ng-controller="MainCtrl">
<button id="reset" class="button" ng-click="reset()">Reset</button>
<span> &nbsp; &nbsp; First page: {{ firstPage }} &nbsp; &nbsp; Last page: {{ lastPage }} &nbsp; &nbsp; data.length: {{ data.length }} </span>
<div ui-grid="gridOptions" class="grid" ui-grid-infinite-scroll></div>
<div ng-controller="MainCtrl as $ctrl">
<button id="reset" class="button" ng-click="$ctrl.reset()">Reset</button>
<span> &nbsp; &nbsp; First page: {{ $ctrl.firstPage }} &nbsp; &nbsp; Last page: {{ $ctrl.lastPage }} &nbsp; &nbsp; data.length: {{ data.length }} </span>
<div ui-grid="$ctrl.gridOptions" class="grid" ui-grid-infinite-scroll></div>
</div>
</file>
<file name="main.css">
Expand Down
10 changes: 5 additions & 5 deletions src/features/infinite-scroll/js/infinite-scroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
*
* @description Service for infinite scroll features
*/
module.service('uiGridInfiniteScrollService', ['gridUtil', '$compile', '$timeout', 'uiGridConstants', 'ScrollEvent', '$q', function (gridUtil, $compile, $timeout, uiGridConstants, ScrollEvent, $q) {
module.service('uiGridInfiniteScrollService', ['gridUtil', '$compile', '$rootScope', 'uiGridConstants', 'ScrollEvent', '$q', function (gridUtil, $compile, $rootScope, uiGridConstants, ScrollEvent, $q) {

var service = {

Expand Down Expand Up @@ -351,7 +351,7 @@
*
* If we're scrolling up we scroll to the first row of the old data set -
* so we're assuming that you would have gotten to the top of the grid (from the 20% need more data trigger) by
* the time the data comes back. If we're scrolling down we scoll to the last row of the old data set - so we're
* the time the data comes back. If we're scrolling down we scroll to the last row of the old data set - so we're
* assuming that you would have gotten to the bottom of the grid (from the 80% need more data trigger) by the time
* the data comes back.
*
Expand All @@ -365,7 +365,7 @@
*/
adjustScroll: function(grid){
var promise = $q.defer();
$timeout(function () {
$rootScope.$applyAsync(function () {
var newPercentage, viewportHeight, rowHeight, newVisibleRows, oldTop, newTop;

viewportHeight = grid.getViewportHeight() + grid.headerHeight - grid.renderContainers.body.headerHeight - grid.scrollbarHeight;
Expand All @@ -388,15 +388,15 @@
oldTop = grid.infiniteScroll.prevScrollTop || 0;
newTop = oldTop + (newVisibleRows - grid.infiniteScroll.previousVisibleRows)*rowHeight;
service.adjustInfiniteScrollPosition(grid, newTop);
$timeout( function() {
$rootScope.$applyAsync( function() {
promise.resolve();
});
}

if ( grid.infiniteScroll.direction === uiGridConstants.scrollDirection.DOWN ){
newTop = grid.infiniteScroll.prevScrollTop || (grid.infiniteScroll.previousVisibleRows*rowHeight - viewportHeight);
service.adjustInfiniteScrollPosition(grid, newTop);
$timeout( function() {
$rootScope.$applyAsync( function() {
promise.resolve();
});
}
Expand Down

0 comments on commit 30af7e9

Please sign in to comment.