Skip to content

Commit a301483

Browse files
ajoslinajoslin
committed
feat(collectionRepeat): resize on $ionicScrollDelegate.resize()
Closes #3292.
1 parent b284119 commit a301483

File tree

2 files changed

+48
-32
lines changed

2 files changed

+48
-32
lines changed

Diff for: ‎js/angular/directive/collectionRepeat.js

+2
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
142142

143143
// Dimensions are refreshed on resize or data change.
144144
angular.element($window).on('resize', validateResize);
145+
scrollCtrl.$element.on('scroll.resize', refreshDimensions);
145146
var unlistenToExposeAside = $rootScope.$on('$ionicExposeAside', validateResize);
146147
$timeout(refreshDimensions, 0, false);
147148

@@ -162,6 +163,7 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
162163
scope.$on('$destroy', function() {
163164
angular.element($window).off('resize', validateResize);
164165
unlistenToExposeAside();
166+
scrollCtrl.$element && scrollCtrl.$element.off('scroll.resize', refreshDimensions);
165167

166168
computedStyleNode && computedStyleNode.parentNode &&
167169
computedStyleNode.parentNode.removeChild(computedStyleNode);

Diff for: ‎test/unit/angular/directive/collectionRepeat.unit.js

+46-32
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ describe('collectionRepeat', function() {
1515

1616
var scrollView;
1717
var repeaterScope;
18+
var scrollCtrl;
1819
function setup(listData, attrs, scrollViewData) {
19-
var content = angular.element('<content>')
20+
var content = angular.element('<content>');
2021
scrollView = angular.extend({
2122
__content: content[0],
2223
__clientHeight: 100,
@@ -34,7 +35,7 @@ describe('collectionRepeat', function() {
3435
resize: angular.noop,
3536
setDimensions: angular.noop
3637
}, scrollViewData || {});
37-
var scrollCtrl = {
38+
scrollCtrl = {
3839
scrollView: scrollView,
3940
$element: content
4041
};
@@ -83,7 +84,7 @@ describe('collectionRepeat', function() {
8384
function getItems() {
8485
return [].slice.call(scrollView.__content.querySelectorAll('[collection-repeat]'))
8586
.map(function(node) {
86-
return angular.element(node).data('$$collectionRepeatItem')
87+
return angular.element(node).data('$$collectionRepeatItem');
8788
})
8889
// make sure we didn't get anything that doesn't actually have the data
8990
.filter(function(item) {
@@ -97,18 +98,18 @@ describe('collectionRepeat', function() {
9798
//1. Group items by their primary position (row),
9899
//2. Sort those groups by secondary position (column),
99100
//3. Concat them all together.
100-
var activeItems = {};
101+
var itemsByPos = {};
101102
items.forEach(function(item) {
102-
(activeItems[item.primaryPos] || (activeItems[item.primaryPos] = [])).push(item);
103+
(itemsByPos[item.primaryPos] || (itemsByPos[item.primaryPos] = [])).push(item);
103104
});
104105

105106
var result = [];
106-
Object.keys(activeItems)
107+
Object.keys(itemsByPos)
107108
.sort(function(pos1, pos2) {
108109
return (+pos1) > (+pos2) ? 1 : -1;
109110
})
110111
.forEach(function(primaryPos) {
111-
var sortedRow = activeItems[primaryPos].sort(function(a,b) {
112+
var sortedRow = itemsByPos[primaryPos].sort(function(a,b) {
112113
return a.secondaryPos > b.secondaryPos ? 1 : -1;
113114
});
114115
result = result.concat(sortedRow);
@@ -219,6 +220,19 @@ describe('collectionRepeat', function() {
219220
setup(5, 'item-height="" item-width=""');
220221
}).toThrow();
221222
}));
223+
224+
it('should refresh layout on scrollCtrl.resize', inject(function($timeout, $window) {
225+
var el = setup(10, 'item-height="20px"', {
226+
__clientHeight: 50,
227+
__clientWidth: 1
228+
});
229+
230+
expect(activeItems().length).toEqual(3);
231+
232+
scrollView.__clientHeight = 30;
233+
scrollCtrl.$element.triggerHandler('scroll.resize');
234+
expect(activeItems().length).toEqual(2);
235+
}));
222236
});
223237

224238
describe('horizontal static list', function() {
@@ -235,24 +249,24 @@ describe('collectionRepeat', function() {
235249
it('should show initial screen of items', function() {
236250
setupHorizontal();
237251
expect(activeItems().length).toBe(3);
238-
expect(activeItemContents()).toEqual(['0','1','2'])
252+
expect(activeItemContents()).toEqual(['0','1','2']);
239253
});
240254
it('should switch out as you scroll', function() {
241255
setupHorizontal();
242256
expect(activeItems().length).toBe(3);
243-
expect(activeItemContents()).toEqual(['0','1','2'])
257+
expect(activeItemContents()).toEqual(['0','1','2']);
244258
expect(activeItemIds()).toEqual(['item0','item1','item2']);
245259

246260
// Item 0 gets sent down to the bottom after scrolling past it
247261
scrollTo(31);
248262
expect(activeItems().length).toBe(3);
249-
expect(activeItemContents()).toEqual(['1','2','3'])
263+
expect(activeItemContents()).toEqual(['1','2','3']);
250264
expect(activeItemIds()).toEqual(['item1','item2','item0']);
251265

252266
// Item 1 gets sent down
253267
scrollTo(61);
254268
expect(activeItems().length).toBe(3);
255-
expect(activeItemContents()).toEqual(['2','3','4'])
269+
expect(activeItemContents()).toEqual(['2','3','4']);
256270
expect(activeItemIds()).toEqual(['item2','item0','item1']);
257271
});
258272
it('should start with the same items when resizing', inject(function($window) {
@@ -261,15 +275,15 @@ describe('collectionRepeat', function() {
261275
scrollTo(61);
262276

263277
expect(activeItems().length).toBe(3);
264-
expect(activeItemContents()).toEqual(['2','3','4'])
278+
expect(activeItemContents()).toEqual(['2','3','4']);
265279
expect(activeItemIds()).toEqual(['item2','item0','item1']);
266280

267281
scrollView.__clientWidth = 50;
268282
scrollView.__clientHeight = 40;
269283
angular.element($window).triggerHandler('resize');
270284

271285
expect(activeItems().length).toBe(2);
272-
expect(activeItemContents()).toEqual(['2','3'])
286+
expect(activeItemContents()).toEqual(['2','3']);
273287
expect(activeItemIds()).toEqual(['item2','item0']);
274288
}));
275289
});
@@ -281,24 +295,24 @@ describe('collectionRepeat', function() {
281295

282296
it('should show initial screen of items', function() {
283297
expect(activeItems().length).toBe(5);
284-
expect(activeItemContents()).toEqual(['0','1','2','3','4'])
298+
expect(activeItemContents()).toEqual(['0','1','2','3','4']);
285299
});
286300

287301
it('should switch out as you scroll', function() {
288302
expect(activeItems().length).toBe(5);
289-
expect(activeItemContents()).toEqual(['0','1','2','3','4'])
303+
expect(activeItemContents()).toEqual(['0','1','2','3','4']);
290304
expect(activeItemIds()).toEqual(['item0','item1','item2','item3','item4']);
291305

292306
// Item 0 gets sent down to the bottom after scrolling past it
293307
scrollTo(26);
294308
expect(activeItems().length).toBe(5);
295-
expect(activeItemContents()).toEqual(['1','2','3','4','5'])
309+
expect(activeItemContents()).toEqual(['1','2','3','4','5']);
296310
expect(activeItemIds()).toEqual(['item1','item2','item3','item4','item0']);
297311

298312
// Item 1 gets sent down
299313
scrollTo(51);
300314
expect(activeItems().length).toBe(5);
301-
expect(activeItemContents()).toEqual(['2','3','4','5','6'])
315+
expect(activeItemContents()).toEqual(['2','3','4','5','6']);
302316
expect(activeItemIds()).toEqual(['item2','item3','item4','item0','item1']);
303317

304318
// scroll to bottom incrementally
@@ -307,7 +321,7 @@ describe('collectionRepeat', function() {
307321
scrollTo(101);
308322
scrollTo(126);
309323
expect(activeItems().length).toBe(5);
310-
expect(activeItemContents()).toEqual(['5','6','7','8','9'])
324+
expect(activeItemContents()).toEqual(['5','6','7','8','9']);
311325
expect(activeItemIds()).toEqual(['item0','item1','item2','item3','item4']);
312326
});
313327

@@ -316,15 +330,15 @@ describe('collectionRepeat', function() {
316330
scrollTo(51);
317331

318332
expect(activeItems().length).toBe(5);
319-
expect(activeItemContents()).toEqual(['2','3','4','5','6'])
333+
expect(activeItemContents()).toEqual(['2','3','4','5','6']);
320334
expect(activeItemIds()).toEqual(['item2','item3','item4','item0','item1']);
321335

322336
scrollView.__clientWidth = 200;
323337
scrollView.__clientHeight = 40;
324338
angular.element($window).triggerHandler('resize');
325339

326340
expect(activeItems().length).toBe(2);
327-
expect(activeItemContents()).toEqual(['2','3'])
341+
expect(activeItemContents()).toEqual(['2','3']);
328342
expect(activeItemIds()).toEqual(['item2','item3']);
329343
}));
330344

@@ -340,38 +354,38 @@ describe('collectionRepeat', function() {
340354

341355
it('should show initial screen of items', function() {
342356
expect(activeItems().length).toBe(3 * 2);
343-
expect(activeItemContents()).toEqual(['0','1','2','3','4','5'])
357+
expect(activeItemContents()).toEqual(['0','1','2','3','4','5']);
344358
});
345359

346360
it('should switch out as you scroll', function() {
347361
expect(activeItems().length).toBe(6);
348-
expect(activeItemContents()).toEqual(['0','1','2','3','4','5'])
362+
expect(activeItemContents()).toEqual(['0','1','2','3','4','5']);
349363
expect(activeItemIds().sort()).toEqual(['item0','item1','item2','item3','item4','item5']);
350364

351365
scrollTo(26);
352366
expect(activeItems().length).toBe(6);
353-
expect(activeItemContents()).toEqual(['3','4','5','6','7','8'])
367+
expect(activeItemContents()).toEqual(['3','4','5','6','7','8']);
354368
expect(activeItemIds().sort()).toEqual(['item0','item1','item2','item3','item4','item5']);
355369

356370
scrollTo(51);
357371
expect(activeItems().length).toBe(4);
358-
expect(activeItemContents()).toEqual(['6','7','8','9'])
372+
expect(activeItemContents()).toEqual(['6','7','8','9']);
359373
expect(activeItemIds().sort()).toEqual(['item0','item1','item2','item5']);
360374
});
361375

362376
it('should start with the same items when resizing', inject(function($window) {
363377
scrollTo(26);
364378

365379
expect(activeItems().length).toBe(6);
366-
expect(activeItemContents()).toEqual(['3','4','5','6','7','8'])
380+
expect(activeItemContents()).toEqual(['3','4','5','6','7','8']);
367381
expect(activeItemIds().sort()).toEqual(['item0','item1','item2','item3','item4','item5']);
368382

369383
scrollView.__clientWidth = 200;
370384
scrollView.__clientHeight = 20;
371385
angular.element($window).triggerHandler('resize');
372386

373387
expect(activeItems().length).toBe(3);
374-
expect(activeItemContents()).toEqual(['3','4','5'])
388+
expect(activeItemContents()).toEqual(['3','4','5']);
375389
expect(activeItemIds().sort()).toEqual(['item3','item4','item5']);
376390
}));
377391
});
@@ -390,7 +404,7 @@ describe('collectionRepeat', function() {
390404
// row 0, index 0: 50 height, 3 items (widths 16%, 32%, 48%)
391405
// row 1, index 3: 25 height, 2 items (widths 64%)
392406
expect(activeItems().length).toBe(4);
393-
expect(activeItemContents()).toEqual(['0','1','2','3'])
407+
expect(activeItemContents()).toEqual(['0','1','2','3']);
394408

395409
var dim = activeItemDimensions();
396410
//Row 0
@@ -407,7 +421,7 @@ describe('collectionRepeat', function() {
407421
// row 1, index 3: 25 height, 1 item (width 64%)
408422
// row 2, index 4: 50 height, 2 items (width 80%, 16%)
409423
expect(activeItems().length).toBe(3);
410-
expect(activeItemContents()).toEqual(['3','4','5'])
424+
expect(activeItemContents()).toEqual(['3','4','5']);
411425
expect(activeItemIds().sort()).toEqual(['item1','item2','item3']);
412426

413427
var dim = activeItemDimensions();
@@ -424,9 +438,9 @@ describe('collectionRepeat', function() {
424438
// row 4, index 8: 50 height, 1 item (width 64%)
425439
// row 5, index 9: 25 height, 2 items (width 80%, 16%)
426440
expect(activeItems().length).toBe(2);
427-
expect(activeItemContents()).toEqual(['8', '9'])
441+
expect(activeItemContents()).toEqual(['8', '9']);
428442

429-
var dim = activeItemDimensions();
443+
dim = activeItemDimensions();
430444
//Row 3
431445
expect(dim[0]).toBe('x:0,y:175,w:64,h:50');
432446
//Row 4
@@ -439,15 +453,15 @@ describe('collectionRepeat', function() {
439453
// row 1, index 3: 25 height, 1 item (width 64%)
440454
// row 2, index 4: 50 height, 2 items (width 80%, 16%)
441455
expect(activeItems().length).toBe(3);
442-
expect(activeItemContents()).toEqual(['3','4','5'])
456+
expect(activeItemContents()).toEqual(['3','4','5']);
443457
expect(activeItemIds().sort()).toEqual(['item1','item2','item3']);
444458

445459
scrollView.__clientWidth = 50;
446460
scrollView.__clientHeight = 50;
447461
angular.element($window).triggerHandler('resize');
448462

449463
expect(activeItems().length).toBe(3);
450-
expect(activeItemContents()).toEqual(['3','4','5'])
464+
expect(activeItemContents()).toEqual(['3','4','5']);
451465
expect(activeItemIds().sort()).toEqual(['item1','item2','item3']);
452466
}));
453467
});

0 commit comments

Comments
 (0)