Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(collectionRepeat): in grid, use height of tallest item in row
Closes #3387.
  • Loading branch information
ajoslin committed Apr 6, 2015
1 parent 0e1689d commit 40bedd7
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 18 deletions.
28 changes: 18 additions & 10 deletions js/angular/directive/collectionRepeat.js
Expand Up @@ -394,7 +394,7 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r

RepeatManagerFactory.$inject = ['$rootScope', '$window', '$$rAF'];
function RepeatManagerFactory($rootScope, $window, $$rAF) {
var EMPTY_DIMENSION = { primaryPos: 0, secondaryPos: 0, primarySize: 0, secondarySize: 0 };
var EMPTY_DIMENSION = { primaryPos: 0, secondaryPos: 0, primarySize: 0, secondarySize: 0, rowPrimarySize: 0 };

return function RepeatController(options) {
var afterItemsNode = options.afterItemsNode;
Expand Down Expand Up @@ -482,6 +482,7 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
scrollView.__$callback = scrollView.__callback;
scrollView.__callback = function(transformLeft, transformTop, zoom, wasResize) {
var scrollValue = view.getScrollValue();
if(window.d)dump('_-callback render', scrollValue, view.scrollPrimarySize + renderAfterBoundary);
if (renderStartIndex === -1 ||
scrollValue + view.scrollPrimarySize > renderAfterBoundary ||
scrollValue < renderBeforeBoundary) {
Expand Down Expand Up @@ -641,6 +642,7 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
if (item.secondarySize !== dim.secondarySize || item.primarySize !== dim.primarySize) {
item.node.style.cssText = item.node.style.cssText
.replace(WIDTH_HEIGHT_REGEX, WIDTH_HEIGHT_TEMPLATE_STR
//TODO fix item.primarySize + 1 hack
.replace(PRIMARY, (item.primarySize = dim.primarySize) + 1)
.replace(SECONDARY, (item.secondarySize = dim.secondarySize))
);
Expand Down Expand Up @@ -858,14 +860,22 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
dim.secondaryPos = prevDimension.secondaryPos + prevDimension.secondarySize;

if (i === 0 || dim.secondaryPos + dim.secondarySize > self.scrollSecondarySize) {
dim.rowStartIndex = i;
dim.secondaryPos = 0;
dim.primarySize = self.getItemPrimarySize(i, data[i]);
dim.primaryPos = prevDimension.primaryPos + prevDimension.primarySize;
dim.primaryPos = prevDimension.primaryPos + prevDimension.rowPrimarySize;

dim.rowStartIndex = i;
dim.rowPrimarySize = dim.primarySize;
} else {
dim.rowStartIndex = prevDimension.rowStartIndex;
dim.primarySize = prevDimension.primarySize;
dim.primarySize = self.getItemPrimarySize(i, data[i]);
dim.primaryPos = prevDimension.primaryPos;
dim.rowStartIndex = prevDimension.rowStartIndex;

dimensions[dim.rowStartIndex].rowPrimarySize = dim.rowPrimarySize = Math.max(
dimensions[dim.rowStartIndex].rowPrimarySize,
dim.primarySize
);
dim.rowPrimarySize = Math.max(dim.primarySize, dim.rowPrimarySize);
}
}
}
Expand Down Expand Up @@ -929,7 +939,7 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
// scrolling down
} else if (scrollValue >= oldScrollValue) {
for (i = oldRenderStartIndex, len = data.length; i < len; i++) {
if ((dim = this.getDimensions(i)) && dim.primaryPos + dim.primarySize >= scrollValue) {
if ((dim = this.getDimensions(i)) && dim.primaryPos + dim.rowPrimarySize >= scrollValue) {
break;
}
}
Expand All @@ -950,7 +960,7 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
// -- Calculate renderEndIndex
var lastRowDim;
for (i = renderStartIndex + 1, len = data.length; i < len; i++) {
if ((dim = this.getDimensions(i)) && dim.primaryPos + dim.primarySize > scrollValueEnd) {
if ((dim = this.getDimensions(i)) && dim.primaryPos + dim.rowPrimarySize > scrollValueEnd) {

// Go all the way to the end of the row if we're in a grid
if (isGridView) {
Expand All @@ -966,7 +976,7 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {

renderEndIndex = Math.min(i, data.length - 1);
renderAfterBoundary = renderEndIndex !== -1 ?
((dim = this.getDimensions(renderEndIndex)).primaryPos + dim.primarySize) :
((dim = this.getDimensions(renderEndIndex)).primaryPos + (dim.rowPrimarySize || dim.primarySize)) :
-1;

oldScrollValue = scrollValue;
Expand All @@ -978,5 +988,3 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
};

}


2 changes: 1 addition & 1 deletion test/html/collection-repeat/basic-grid.html
Expand Up @@ -19,7 +19,7 @@ <h1 class="title">Basic Grid: Dynamic Dimensions</h1>
<ion-list can-swipe="true">
<ion-item class="item"
collection-repeat="item in items"
collection-item-height="75 + ($index % 40)*2"
collection-item-height="65 + (($index % 3) * 10)"
collection-item-width="(10 + ($index % 10))+ '%'">
<h2>{{item.text}}</h2>
</ion-item>
Expand Down
10 changes: 3 additions & 7 deletions test/unit/angular/directive/collectionRepeat.unit.js
Expand Up @@ -409,7 +409,7 @@ describe('collectionRepeat', function() {
var dim = activeItemDimensions();
//Row 0
expect(dim[0]).toBe('x:0,y:0,w:16,h:50');
expect(dim[1]).toBe('x:16,y:0,w:32,h:50');
expect(dim[1]).toBe('x:16,y:0,w:32,h:25');
expect(dim[2]).toBe('x:48,y:0,w:48,h:50');
// Row 1
expect(dim[3]).toBe('x:0,y:50,w:64,h:25');
Expand All @@ -429,21 +429,17 @@ describe('collectionRepeat', function() {
expect(dim[0]).toBe('x:0,y:50,w:64,h:25');
//Row 2
expect(dim[1]).toBe('x:0,y:75,w:80,h:50');
expect(dim[2]).toBe('x:80,y:75,w:16,h:50');
expect(dim[2]).toBe('x:80,y:75,w:16,h:25');

// row 3, index 6: 50 height, 2 items (width 32%, 48%)

//Scroll past row 2 and row 3 to the end
scrollTo(176);
// 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']);

dim = activeItemDimensions();
//Row 3
expect(dim[0]).toBe('x:0,y:175,w:64,h:50');
//Row 4
expect(dim[1]).toBe('x:0,y:225,w:80,h:25');
});

Expand Down

0 comments on commit 40bedd7

Please sign in to comment.