From b2585f19cac58d0393b8339cb2efddf213e57660 Mon Sep 17 00:00:00 2001 From: Andrew Joslin Date: Tue, 17 Jun 2014 17:40:59 +0000 Subject: [PATCH] fix(collectionRepeat): fix scroll when item bigger than viewport Closes #1621 --- js/angular/service/collectionRepeatManager.js | 15 +++++++++++---- test/html/list-fit.html | 6 +++--- .../service/collectionRepeatManager.unit.js | 9 ++++++--- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/js/angular/service/collectionRepeatManager.js b/js/angular/service/collectionRepeatManager.js index e290da2ae41..5dbc4da0c36 100644 --- 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 index 1bb186db94b..875ea44575a 100644 --- a/test/html/list-fit.html +++ b/test/html/list-fit.html @@ -23,7 +23,7 @@

Hi

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;"> @@ -47,7 +47,7 @@

{{item.text}}

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 @@

{{item.text}}

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 index 4d9176dcf6c..b7c45aab9b4 100644 --- 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,6 +378,8 @@ 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'); @@ -385,6 +387,7 @@ describe('collectionRepeatManager service', function() { 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');