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

Closes #3387.
ionic-team · Apr 6, 2015 · 40bedd7 · 40bedd7
1 parent 0e1689d
commit 40bedd7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/js/angular/directive/collectionRepeat.js b/js/angular/directive/collectionRepeat.js
@@ -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) {
   };
 
 }
-
-
diff --git a/test/html/collection-repeat/basic-grid.html b/test/html/collection-repeat/basic-grid.html
@@ -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>

diff --git a/test/unit/angular/directive/collectionRepeat.unit.js b/test/unit/angular/directive/collectionRepeat.unit.js
@@ -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');
     });