chore(virtualRepeat): Address review comments on angular#5561

code review
kseamon · Nov 9, 2015 · 8706efb · 8706efb
1 parent 1ae16cb
commit 8706efb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/components/virtualRepeat/virtual-repeater.js b/src/components/virtualRepeat/virtual-repeater.js
@@ -78,7 +78,8 @@ var MAX_ELEMENT_SIZE = 1533917;
 var NUM_EXTRA = 3;
 
 /** @ngInject */
-function VirtualRepeatContainerController($$rAF, $parse, $window, $scope, $element, $attrs) {
+function VirtualRepeatContainerController(
+    $$rAF, $mdUtil, $parse, $window, $scope, $element, $attrs) {
   this.$scope = $scope;
   this.$element = $element;
   this.$attrs = $attrs;
@@ -126,16 +127,19 @@ function VirtualRepeatContainerController($$rAF, $parse, $window, $scope, $eleme
   this.sizer = this.scroller.getElementsByClassName('md-virtual-repeat-sizer')[0];
   this.offsetter = this.scroller.getElementsByClassName('md-virtual-repeat-offsetter')[0];
 
-  // TODO: Come up with a more robust (But hopefully also quick!) way of
+  // After the dom stablizes, measure the initial size of the container and
+  // make a best effort at re-measuring as it changes.
   var boundUpdateSize = angular.bind(this, this.updateSize);
 
   $$rAF(function() {
     boundUpdateSize();
 
+    var debouncedUpdateSize = $mdUtil.debounce(boundUpdateSize, 10, null, false);
     var jWindow = angular.element($window);
-    jWindow.on('resize', boundUpdateSize);
+
+    jWindow.on('resize', debouncedUpdateSize);
     $scope.$on('$destroy', function() {
-      jWindow.off('resize', boundUpdateSize);
+      jWindow.off('resize', debouncedUpdateSize);
     });
 
     $scope.$on('$md-resize', boundUpdateSize);

diff --git a/src/components/virtualRepeat/virtual-repeater.spec.js b/src/components/virtualRepeat/virtual-repeater.spec.js
@@ -13,20 +13,22 @@ describe('<md-virtual-repeat>', function() {
       '     style="height: 10px; width: 10px; box-sizing: border-box;">' +
       '       {{i}} {{$index}}' +
       '</div>';
-  var container, repeater, component, $$rAF, $compile, $document, $window, scope,
+  var container, repeater, component, $$rAF, $compile, $document, $mdUtil, $window, scope,
       scroller, sizer, offsetter;
 
   var NUM_ITEMS = 110,
       VERTICAL_PX = 100,
       HORIZONTAL_PX = 150,
       ITEM_SIZE = 10;
 
-  beforeEach(inject(function(_$$rAF_, _$compile_, _$document_, $rootScope, _$window_, _$material_) {
+  beforeEach(inject(function(
+      _$$rAF_, _$compile_, _$document_, _$mdUtil_, $rootScope, _$window_, _$material_) {
     repeater = angular.element(REPEATER_HTML);
     container = angular.element(CONTAINER_HTML).append(repeater);
     component = null;
     $$rAF = _$$rAF_;
     $material = _$material_;
+    $mdUtil = _$mdUtil_;
     $compile = _$compile_;
     $document = _$document_;
     $window = _$window_;
@@ -522,11 +524,12 @@ describe('<md-virtual-repeat>', function() {
   });
 
   it('should recheck container size on window resize', function() {
+    spyOn($mdUtil, 'debounce').and.callFake(angular.identity);
     scope.items = createItems(100);
     createRepeater();
     // Expect 13 children (10 + 3 extra).
     expect(offsetter.children().length).toBe(13);
-    
+
     container.css('height', '400px');
     angular.element($window).triggerHandler('resize');