fix(collectionRepeat): make it work performantly with exposeAsideWhen

Closes #3244.
ionic-team · Mar 11, 2015 · 4f35d8e · 4f35d8e
1 parent 060bf61
commit 4f35d8e
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 24 deletions.
diff --git a/js/angular/controller/scrollController.js b/js/angular/controller/scrollController.js
@@ -58,8 +58,7 @@ function($scope,
   }
 
   var resize = angular.bind(scrollView, scrollView.resize);
-  ionic.on('resize', resize, $window);
-
+  angular.element($window).on('resize', resize);
 
   var scrollFunc = function(e) {
     var detail = (e.originalEvent || e).detail || {};
@@ -75,8 +74,7 @@ function($scope,
   $scope.$on('$destroy', function() {
     deregisterInstance();
     scrollView && scrollView.__cleanup && scrollView.__cleanup();
-    ionic.off('resize', resize, $window);
-    $window.removeEventListener('resize', resize);
+    angular.element($window).off('resize', resize);
     $element.off('scroll', scrollFunc);
     scrollView = self.scrollView = scrollViewOptions = self._scrollViewOptions = scrollViewOptions.el = self._scrollViewOptions.el = $element = self.$element = element = null;
   });

diff --git a/js/angular/controller/sideMenuController.js b/js/angular/controller/sideMenuController.js
@@ -292,10 +292,7 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $io
   self.exposeAside = function(shouldExposeAside) {
     if (!(self.left && self.left.isEnabled) && !(self.right && self.right.isEnabled)) return;
     self.close();
-    //Trigger a resize if it changed
-    if (isAsideExposed !== shouldExposeAside) {
-      ionic.trigger('resize', null, window);
-    }
+
     isAsideExposed = shouldExposeAside;
     if (self.left && self.left.isEnabled) {
       // set the left marget width if it should be exposed

diff --git a/js/angular/directive/collectionRepeat.js b/js/angular/directive/collectionRepeat.js
@@ -140,11 +140,9 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
 
     initDimensions();
 
-    var debouncedRefreshDimensions = ionic.animationFrameThrottle(refreshDimensions);
-    var debouncedOnResize = ionic.animationFrameThrottle(validateResize);
-
     // Dimensions are refreshed on resize or data change.
-    angular.element($window).on('resize', debouncedOnResize);
+    angular.element($window).on('resize', validateResize);
+    var unlistenToExposeAside = $rootScope.$on('$ionicExposeAside', validateResize);
     $timeout(refreshDimensions, 0, false);
 
     scope.$watchCollection(listGetter, function(newValue) {
@@ -162,7 +160,8 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
     });
 
     scope.$on('$destroy', function() {
-      angular.element($window).off('resize', debouncedOnResize);
+      angular.element($window).off('resize', validateResize);
+      unlistenToExposeAside();
 
       computedStyleNode && computedStyleNode.parentNode &&
         computedStyleNode.parentNode.removeChild(computedStyleNode);

diff --git a/js/angular/directive/sideMenuContent.js b/js/angular/directive/sideMenuContent.js
@@ -154,7 +154,6 @@ function($timeout, $ionicGesture, $window) {
               $element[0].style.width = '';
               content.offsetX = 0;
             }
-            ionic.trigger('resize', null, window);
           }),
           setMarginRight: ionic.animationFrameThrottle(function(amount) {
             if (amount) {

diff --git a/test/html/collection-repeat/side-menu-exposed.html b/test/html/collection-repeat/side-menu-exposed.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html ng-app="ionic">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+
+    <title>Sample UL</title>
+
+    <link  href="/dist/css/ionic.css" rel="stylesheet">
+    <script src="/dist/js/ionic.bundle.js"></script>
+  </head>
+
+  <body ng-controller="MainCtrl">
+
+    <ion-side-menus>
+
+      <ion-side-menu-content>
+        <ion-header-bar class="bar-positive">
+          <h1 class="title">Change screen to large and back</h1>
+        </ion-header-bar>
+        <ion-content>
+          <h4>WHATS UP</h4>
+          <ion-list can-swipe="true">
+            <ion-item class="item" collection-repeat="item in items">
+              <h2>{{item.text}}</h2>
+            </ion-item>
+          </ion-list>
+          <h2>Stuff after list</h2>
+          <div class="card">Hello</div>
+        </ion-content>
+      </ion-side-menu-content>
+
+      <ion-side-menu side="left" expose-aside-when="large">
+        Hello
+      </ion-side-menu>
+
+    </ion-side-menus>
+  <script>
+angular.module('ionic').controller('MainCtrl',MainCtrl)
+function MainCtrl($scope, $timeout) {
+  $scope.items = [];
+
+  function addImage() {
+    var i = $scope.items.length;
+    $scope.items.push({
+      text: 'Item ' + i,
+      image: 'http://placekitten.com/'+(100+50%i)+'/'+(100+50%i)
+    });
+  }
+
+  $timeout(function() {
+    for (var i = 0; i < 100; i++) addImage();
+  }, 1000);
+}
+  </script>
+  <style>
+  </style>
+</body>
+</html>
diff --git a/test/unit/angular/controller/scrollController.unit.js b/test/unit/angular/controller/scrollController.unit.js
@@ -95,16 +95,6 @@ describe('$ionicScroll Controller', function() {
     expect(ctrl.scrollView.run).toHaveBeenCalled();
   });
 
-
-  it('should unbind window event listener on scope destroy', inject(function($window) {
-    spyOn(ionic, 'on');
-    spyOn(ionic, 'off');
-    setup();
-    expect(ionic.on).toHaveBeenCalledWith('resize', jasmine.any(Function), $window);
-    scope.$destroy();
-    expect(ionic.off).toHaveBeenCalledWith('resize', jasmine.any(Function), $window);
-  }));
-
   it('should listen to scroll event and call $onScroll', function() {
     setup();
     scope.$onScroll = jasmine.createSpy();