Skip to content

Commit

Permalink
feat(collectionRepeat): resize on $ionicScrollDelegate.resize()
Browse files Browse the repository at this point in the history 
Closes #3292.
  • Loading branch information
@ajoslin
ajoslin committed Mar 12, 2015
1 parent b284119 commit a301483
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 32 deletions.
2 changes: 2 additions & 0 deletions js/angular/directive/collectionRepeat.js
View file
Expand Up @@ -142,6 +142,7 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r

// Dimensions are refreshed on resize or data change.
angular.element($window).on('resize', validateResize);
scrollCtrl.$element.on('scroll.resize', refreshDimensions);
var unlistenToExposeAside = $rootScope.$on('$ionicExposeAside', validateResize);
$timeout(refreshDimensions, 0, false);

Expand All @@ -162,6 +163,7 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
scope.$on('$destroy', function() {
angular.element($window).off('resize', validateResize);
unlistenToExposeAside();
scrollCtrl.$element && scrollCtrl.$element.off('scroll.resize', refreshDimensions);

computedStyleNode && computedStyleNode.parentNode &&
computedStyleNode.parentNode.removeChild(computedStyleNode);
Expand Down
78 changes: 46 additions & 32 deletions test/unit/angular/directive/collectionRepeat.unit.js
View file
Expand Up @@ -15,8 +15,9 @@ describe('collectionRepeat', function() {

var scrollView;
var repeaterScope;
var scrollCtrl;
function setup(listData, attrs, scrollViewData) {
var content = angular.element('<content>')
var content = angular.element('<content>');
scrollView = angular.extend({
__content: content[0],
__clientHeight: 100,
Expand All @@ -34,7 +35,7 @@ describe('collectionRepeat', function() {
resize: angular.noop,
setDimensions: angular.noop
}, scrollViewData || {});
var scrollCtrl = {
scrollCtrl = {
scrollView: scrollView,
$element: content
};
Expand Down Expand Up @@ -83,7 +84,7 @@ describe('collectionRepeat', function() {
function getItems() {
return [].slice.call(scrollView.__content.querySelectorAll('[collection-repeat]'))
.map(function(node) {
return angular.element(node).data('$$collectionRepeatItem')
return angular.element(node).data('$$collectionRepeatItem');
})
// make sure we didn't get anything that doesn't actually have the data
.filter(function(item) {
Expand All @@ -97,18 +98,18 @@ describe('collectionRepeat', function() {
//1. Group items by their primary position (row),
//2. Sort those groups by secondary position (column),
//3. Concat them all together.
var activeItems = {};
var itemsByPos = {};
items.forEach(function(item) {
(activeItems[item.primaryPos] || (activeItems[item.primaryPos] = [])).push(item);
(itemsByPos[item.primaryPos] || (itemsByPos[item.primaryPos] = [])).push(item);
});

var result = [];
Object.keys(activeItems)
Object.keys(itemsByPos)
.sort(function(pos1, pos2) {
return (+pos1) > (+pos2) ? 1 : -1;
})
.forEach(function(primaryPos) {
var sortedRow = activeItems[primaryPos].sort(function(a,b) {
var sortedRow = itemsByPos[primaryPos].sort(function(a,b) {
return a.secondaryPos > b.secondaryPos ? 1 : -1;
});
result = result.concat(sortedRow);
Expand Down Expand Up @@ -219,6 +220,19 @@ describe('collectionRepeat', function() {
setup(5, 'item-height="" item-width=""');
}).toThrow();
}));

it('should refresh layout on scrollCtrl.resize', inject(function($timeout, $window) {
var el = setup(10, 'item-height="20px"', {
__clientHeight: 50,
__clientWidth: 1
});

expect(activeItems().length).toEqual(3);

scrollView.__clientHeight = 30;
scrollCtrl.$element.triggerHandler('scroll.resize');
expect(activeItems().length).toEqual(2);
}));
});

describe('horizontal static list', function() {
Expand All @@ -235,24 +249,24 @@ describe('collectionRepeat', function() {
it('should show initial screen of items', function() {
setupHorizontal();
expect(activeItems().length).toBe(3);
expect(activeItemContents()).toEqual(['0','1','2'])
expect(activeItemContents()).toEqual(['0','1','2']);
});
it('should switch out as you scroll', function() {
setupHorizontal();
expect(activeItems().length).toBe(3);
expect(activeItemContents()).toEqual(['0','1','2'])
expect(activeItemContents()).toEqual(['0','1','2']);
expect(activeItemIds()).toEqual(['item0','item1','item2']);

// Item 0 gets sent down to the bottom after scrolling past it
scrollTo(31);
expect(activeItems().length).toBe(3);
expect(activeItemContents()).toEqual(['1','2','3'])
expect(activeItemContents()).toEqual(['1','2','3']);
expect(activeItemIds()).toEqual(['item1','item2','item0']);

// Item 1 gets sent down
scrollTo(61);
expect(activeItems().length).toBe(3);
expect(activeItemContents()).toEqual(['2','3','4'])
expect(activeItemContents()).toEqual(['2','3','4']);
expect(activeItemIds()).toEqual(['item2','item0','item1']);
});
it('should start with the same items when resizing', inject(function($window) {
Expand All @@ -261,15 +275,15 @@ describe('collectionRepeat', function() {
scrollTo(61);

expect(activeItems().length).toBe(3);
expect(activeItemContents()).toEqual(['2','3','4'])
expect(activeItemContents()).toEqual(['2','3','4']);
expect(activeItemIds()).toEqual(['item2','item0','item1']);

scrollView.__clientWidth = 50;
scrollView.__clientHeight = 40;
angular.element($window).triggerHandler('resize');

expect(activeItems().length).toBe(2);
expect(activeItemContents()).toEqual(['2','3'])
expect(activeItemContents()).toEqual(['2','3']);
expect(activeItemIds()).toEqual(['item2','item0']);
}));
});
Expand All @@ -281,24 +295,24 @@ describe('collectionRepeat', function() {

it('should show initial screen of items', function() {
expect(activeItems().length).toBe(5);
expect(activeItemContents()).toEqual(['0','1','2','3','4'])
expect(activeItemContents()).toEqual(['0','1','2','3','4']);
});

it('should switch out as you scroll', function() {
expect(activeItems().length).toBe(5);
expect(activeItemContents()).toEqual(['0','1','2','3','4'])
expect(activeItemContents()).toEqual(['0','1','2','3','4']);
expect(activeItemIds()).toEqual(['item0','item1','item2','item3','item4']);

// Item 0 gets sent down to the bottom after scrolling past it
scrollTo(26);
expect(activeItems().length).toBe(5);
expect(activeItemContents()).toEqual(['1','2','3','4','5'])
expect(activeItemContents()).toEqual(['1','2','3','4','5']);
expect(activeItemIds()).toEqual(['item1','item2','item3','item4','item0']);

// Item 1 gets sent down
scrollTo(51);
expect(activeItems().length).toBe(5);
expect(activeItemContents()).toEqual(['2','3','4','5','6'])
expect(activeItemContents()).toEqual(['2','3','4','5','6']);
expect(activeItemIds()).toEqual(['item2','item3','item4','item0','item1']);

// scroll to bottom incrementally
Expand All @@ -307,7 +321,7 @@ describe('collectionRepeat', function() {
scrollTo(101);
scrollTo(126);
expect(activeItems().length).toBe(5);
expect(activeItemContents()).toEqual(['5','6','7','8','9'])
expect(activeItemContents()).toEqual(['5','6','7','8','9']);
expect(activeItemIds()).toEqual(['item0','item1','item2','item3','item4']);
});

Expand All @@ -316,15 +330,15 @@ describe('collectionRepeat', function() {
scrollTo(51);

expect(activeItems().length).toBe(5);
expect(activeItemContents()).toEqual(['2','3','4','5','6'])
expect(activeItemContents()).toEqual(['2','3','4','5','6']);
expect(activeItemIds()).toEqual(['item2','item3','item4','item0','item1']);

scrollView.__clientWidth = 200;
scrollView.__clientHeight = 40;
angular.element($window).triggerHandler('resize');

expect(activeItems().length).toBe(2);
expect(activeItemContents()).toEqual(['2','3'])
expect(activeItemContents()).toEqual(['2','3']);
expect(activeItemIds()).toEqual(['item2','item3']);
}));

Expand All @@ -340,38 +354,38 @@ describe('collectionRepeat', function() {

it('should show initial screen of items', function() {
expect(activeItems().length).toBe(3 * 2);
expect(activeItemContents()).toEqual(['0','1','2','3','4','5'])
expect(activeItemContents()).toEqual(['0','1','2','3','4','5']);
});

it('should switch out as you scroll', function() {
expect(activeItems().length).toBe(6);
expect(activeItemContents()).toEqual(['0','1','2','3','4','5'])
expect(activeItemContents()).toEqual(['0','1','2','3','4','5']);
expect(activeItemIds().sort()).toEqual(['item0','item1','item2','item3','item4','item5']);

scrollTo(26);
expect(activeItems().length).toBe(6);
expect(activeItemContents()).toEqual(['3','4','5','6','7','8'])
expect(activeItemContents()).toEqual(['3','4','5','6','7','8']);
expect(activeItemIds().sort()).toEqual(['item0','item1','item2','item3','item4','item5']);

scrollTo(51);
expect(activeItems().length).toBe(4);
expect(activeItemContents()).toEqual(['6','7','8','9'])
expect(activeItemContents()).toEqual(['6','7','8','9']);
expect(activeItemIds().sort()).toEqual(['item0','item1','item2','item5']);
});

it('should start with the same items when resizing', inject(function($window) {
scrollTo(26);

expect(activeItems().length).toBe(6);
expect(activeItemContents()).toEqual(['3','4','5','6','7','8'])
expect(activeItemContents()).toEqual(['3','4','5','6','7','8']);
expect(activeItemIds().sort()).toEqual(['item0','item1','item2','item3','item4','item5']);

scrollView.__clientWidth = 200;
scrollView.__clientHeight = 20;
angular.element($window).triggerHandler('resize');

expect(activeItems().length).toBe(3);
expect(activeItemContents()).toEqual(['3','4','5'])
expect(activeItemContents()).toEqual(['3','4','5']);
expect(activeItemIds().sort()).toEqual(['item3','item4','item5']);
}));
});
Expand All @@ -390,7 +404,7 @@ describe('collectionRepeat', function() {
// row 0, index 0: 50 height, 3 items (widths 16%, 32%, 48%)
// row 1, index 3: 25 height, 2 items (widths 64%)
expect(activeItems().length).toBe(4);
expect(activeItemContents()).toEqual(['0','1','2','3'])
expect(activeItemContents()).toEqual(['0','1','2','3']);

var dim = activeItemDimensions();
//Row 0
Expand All @@ -407,7 +421,7 @@ describe('collectionRepeat', function() {
// row 1, index 3: 25 height, 1 item (width 64%)
// row 2, index 4: 50 height, 2 items (width 80%, 16%)
expect(activeItems().length).toBe(3);
expect(activeItemContents()).toEqual(['3','4','5'])
expect(activeItemContents()).toEqual(['3','4','5']);
expect(activeItemIds().sort()).toEqual(['item1','item2','item3']);

var dim = activeItemDimensions();
Expand All @@ -424,9 +438,9 @@ describe('collectionRepeat', function() {
// row 4, index 8: 50 height, 1 item (width 64%)
// row 5, index 9: 25 height, 2 items (width 80%, 16%)
expect(activeItems().length).toBe(2);
expect(activeItemContents()).toEqual(['8', '9'])
expect(activeItemContents()).toEqual(['8', '9']);

var dim = activeItemDimensions();
dim = activeItemDimensions();
//Row 3
expect(dim[0]).toBe('x:0,y:175,w:64,h:50');
//Row 4
Expand All @@ -439,15 +453,15 @@ describe('collectionRepeat', function() {
// row 1, index 3: 25 height, 1 item (width 64%)
// row 2, index 4: 50 height, 2 items (width 80%, 16%)
expect(activeItems().length).toBe(3);
expect(activeItemContents()).toEqual(['3','4','5'])
expect(activeItemContents()).toEqual(['3','4','5']);
expect(activeItemIds().sort()).toEqual(['item1','item2','item3']);

scrollView.__clientWidth = 50;
scrollView.__clientHeight = 50;
angular.element($window).triggerHandler('resize');

expect(activeItems().length).toBe(3);
expect(activeItemContents()).toEqual(['3','4','5'])
expect(activeItemContents()).toEqual(['3','4','5']);
expect(activeItemIds().sort()).toEqual(['item1','item2','item3']);
}));
});
Expand Down

0 comments on commit a301483

Please sign in to comment.