feat(ionInfiniteScroll): allow configuration of icon

ionic-team · Mar 11, 2014 · 5f2c32e · 5f2c32e
1 parent 703f68f
commit 5f2c32e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
@@ -211,7 +211,8 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
  * @param {expression} on-infinite What to call when the scroller reaches the
  * bottom.
  * @param {string=} distance The distance from the bottom that the scroll must
- * reach to trigger the on-infinite expression. Default 1%.
+ * reach to trigger the on-infinite expression. Default: 1%.
+ * @param {string=} icon The icon to show while loading. Default: 'ion-loading-d'.
  *
  * @usage
  * ```html
@@ -240,6 +241,7 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
  * ```html
  * <ion-infinite-scroll
  *   ng-if="moreDataCanBeLoaded()"
+ *   icon="ion-loading-c"
  *   on-infinite="loadMoreData()">
  * </ion-infinite-scroll>
  * ```
@@ -251,9 +253,10 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
     template:
       '<div class="scroll-infinite">' +
         '<div class="scroll-infinite-content">' +
-          '<i class="icon ion-loading-d icon-refreshing"></i>' +
+          '<i class="icon {{icon()}} icon-refreshing"></i>' +
         '</div>' +
       '</div>',
+    scope: true,
     controller: ['$scope', '$attrs', function($scope, $attrs) {
       this.isLoading = false;
       this.scrollView = null; //given by link function
@@ -272,6 +275,12 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
       var infiniteScrollCtrl = ctrls[1];
       var scrollView = infiniteScrollCtrl.scrollView = scrollCtrl.scrollView;
 
+      var iconElement = $element[0].querySelector('.icon');
+
+      $scope.icon = function() {
+        return angular.isDefined($attrs.icon) ? $attrs.icon : 'ion-loading-d';
+      };
+
       $scope.$on('scroll.infiniteScrollComplete', function() {
         $element[0].classList.remove('active');
         $timeout(function() {

diff --git a/js/ext/angular/test/directive/ionicInfiniteScroll.unit.js b/js/ext/angular/test/directive/ionicInfiniteScroll.unit.js
@@ -32,7 +32,7 @@ describe('ionicInfiniteScroll directive', function() {
     });
     return element;
   }
-  
+
   it('should error if no ionicScroll parent', function() {
     expect(function() {
       inject(function($compile, $rootScope) {
@@ -47,6 +47,28 @@ describe('ionicInfiniteScroll directive', function() {
     expect(ctrl.isLoading).toBe(false);
   });
 
+  describe('icon', function() {
+    it('should have default icon ion-loading-d', function() {
+      var el = setup();
+      var icon = angular.element(el[0].querySelector('.icon'));
+      expect(icon.hasClass('ion-loading-d')).toBe(true);
+    });
+
+    it('should allow icon attr blank', function() {
+      var el = setup('icon=""');
+      var icon = angular.element(el[0].querySelector('.icon'));
+      expect(icon.hasClass('ion-loading-d')).toBe(false);
+    });
+
+    it('should allow interpolated icon attr', function() {
+      var el = setup('icon="{{someIcon}}"');
+      var icon = angular.element(el[0].querySelector('.icon'));
+      expect(icon.hasClass('ion-loading-d')).toBe(false);
+      el.scope().$apply('someIcon = "super-icon"');
+      expect(icon.hasClass('super-icon')).toBe(true);
+    });
+  });
+
   describe('getMaxScroll', function() {
     it('getMaxScroll should default to 1%', function() {
       var el = setup();