From 5f2c32ea9b19a773e943a9b21704f2138037e681 Mon Sep 17 00:00:00 2001
From: Andy Joslin <andytjoslin@gmail.com>
Date: Tue, 11 Mar 2014 13:56:08 -0600
Subject: [PATCH] feat(ionInfiniteScroll): allow configuration of icon

---
 js/ext/angular/src/directive/ionicContent.js  | 13 ++++++++--
 .../directive/ionicInfiniteScroll.unit.js     | 24 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
index 1965f7e5c8..f321975f0f 100644
--- 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
index 4bfff38f4c..ba17b364dd 100644
--- 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();