fix(collectionRepeat): fix scroll when item bigger than viewport

Closes #1621
ionic-team · Jun 17, 2014 · b2585f1 · b2585f1
1 parent 96b2243
commit b2585f1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/js/angular/service/collectionRepeatManager.js b/js/angular/service/collectionRepeatManager.js
@@ -16,7 +16,7 @@ function($rootScope, $timeout) {
 
     this.isVertical = !!this.scrollView.options.scrollingY;
     this.renderedItems = {};
-
+    this.dimensions = [];
     this.setCurrentIndex(0);
 
     //Override scrollview's render callback
@@ -142,19 +142,26 @@ function($rootScope, $timeout) {
       }
     },
     /*
-     * setCurrentIndex: set the index in the list that matches the scroller's position.
+     * setCurrentIndex sets the index in the list that matches the scroller's position.
      * Also save the position in the scroller for next and previous items (if they exist)
      */
     setCurrentIndex: function(index, height) {
+      var currentPos = (this.dimensions[index] || {}).primaryPos || 0;
       this.currentIndex = index;
 
       this.hasPrevIndex = index > 0;
       if (this.hasPrevIndex) {
-        this.previousPos = this.dimensions[index - 1].primaryPos;
+        this.previousPos = Math.max(
+          currentPos - this.dimensions[index - 1].primarySize,
+          this.dimensions[index - 1].primaryPos
+        );
       }
       this.hasNextIndex = index + 1 < this.dataSource.getLength();
       if (this.hasNextIndex) {
-        this.nextPos = this.dimensions[index + 1].primaryPos;
+        this.nextPos = Math.min(
+          currentPos + this.dimensions[index + 1].primarySize,
+          this.dimensions[index + 1].primaryPos
+        );
       }
     },
     /**

diff --git a/test/html/list-fit.html b/test/html/list-fit.html
@@ -23,7 +23,7 @@ <h1 class="title">Hi</h1>
           class="item-avatar-left item-icon-right"
           ng-click="alert(item)"
           collection-repeat="item in items"
-          collection-item-height="85"
+          collection-item-height="$index % 10 === 0 ? 500 : 85"
           collection-item-width="'100%'"
           style="position: absolute; left: 0; right: 0;">
           <img ng-src="{{item.image}}">
@@ -47,7 +47,7 @@ <h2>{{item.text}}</h2>
         ctx.drawImage(img,0,0);
         dataURL = canvas.toDataURL(outputFormat || 'image/png');
         callback.call(this, dataURL);
-        canvas = null; 
+        canvas = null;
     };
     img.src = url;
 }
@@ -61,7 +61,7 @@ <h2>{{item.text}}</h2>
   for (var i = 0; i < 5; i++) {
     deferred = $q.defer();
     convertImgToBase64('http://placekitten.com/'+(40+(10*i))+'/'+(40+(10*i)), deferred.resolve);
-    images.push(deferred.promise);      
+    images.push(deferred.promise);
   }
 
   $q.all(images).then(function(dataUrls) {

diff --git a/test/unit/angular/service/collectionRepeatManager.unit.js b/test/unit/angular/service/collectionRepeatManager.unit.js
@@ -284,7 +284,7 @@ describe('collectionRepeatManager service', function() {
     it('with next', function() {
       var manager = setup();
       spyOn(manager.dataSource, 'getLength').andReturn(2);
-      manager.dimensions = [{ primaryPos: 0 }, { primaryPos: 25 }];
+      manager.dimensions = [{ primaryPos: 0 ,primarySize: 25}, { primaryPos: 25, primarySize: 35 }];
       manager.setCurrentIndex(0);
       expect(manager.currentIndex).toBe(0);
       expect(manager.hasPrevIndex).toBe(false);
@@ -296,7 +296,7 @@ describe('collectionRepeatManager service', function() {
     it('with prev', function() {
       var manager = setup();
       spyOn(manager.dataSource, 'getLength').andReturn(2);
-      manager.dimensions = [{ primaryPos: 0 }, { primaryPos: 25 }];
+      manager.dimensions = [{ primaryPos: 0 , primarySize: 25 }, { primaryPos: 25, primarySize: 25 }];
       manager.setCurrentIndex(1);
       expect(manager.currentIndex).toBe(1);
       expect(manager.hasPrevIndex).toBe(true);
@@ -308,7 +308,7 @@ describe('collectionRepeatManager service', function() {
     it('with next and prev', function() {
       var manager = setup();
       spyOn(manager.dataSource, 'getLength').andReturn(3);
-      manager.dimensions = [{ primaryPos: 0 }, { primaryPos: 25 }, { primaryPos: 50 }];
+      manager.dimensions = [{ primarySize: 25, primaryPos: 0 }, { primarySize: 25, primaryPos: 25 }, { primarySize: 25, primaryPos: 50 }];
       manager.setCurrentIndex(1);
       expect(manager.currentIndex).toBe(1);
       expect(manager.hasPrevIndex).toBe(true);
@@ -378,13 +378,16 @@ describe('collectionRepeatManager service', function() {
       var manager = setup();
       manager.renderedItems = {'a':1, 'b':1};
       spyOn(manager, 'removeItem');
+      spyOn(manager.dataSource, 'getLength').andReturn(0);
+      manager.currentIndex = 1;
       manager.render();
       expect(manager.removeItem).toHaveBeenCalledWith('a');
       expect(manager.removeItem).toHaveBeenCalledWith('b');
     });
     it('shouldRedrawAll should remove all', function() {
       var manager = setup();
       manager.renderedItems = {'a':1, 'b':1};
+      manager.currentIndex = 0;
       spyOn(manager, 'removeItem');
       manager.render(true);
       expect(manager.removeItem).toHaveBeenCalledWith('a');