javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(collectionRepeat): in grid, use height of tallest item in row

Browse Source 
Closes #3387.
This commit is contained in:
Andrew
2015-04-06 15:01:52 -06:00
parent 0e1689d55c
commit 40bedd7dd3
3 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
js/angular/directive/collectionRepeat.js vendored
View File

@@ -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;
@@ -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) {
@@ -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))
);
@@ -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);
}
}
}
@@ -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;
}
}
@@ -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) {
@@ -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;
@@ -978,5 +988,3 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
};
}

2
test/html/collection-repeat/basic-grid.html
View File

@@ -19,7 +19,7 @@
<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>

10
test/unit/angular/directive/collectionRepeat.unit.js
View File

@@ -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');
@@ -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');
});