Merge pull request #7 from mburgosh/pr-add-class-option

Add optional class while button disabled

Author: kirstein

README.md

@@ -31,6 +31,14 @@ If thats done then just follow those simple steps:
 ```
   <button ng-click="doSomething()" ng-autodisable>Do something</button>
 ```
+#### Loading class
+
+You can optianlly add a list of classes which will be added to the element while this is disabled. This is usefull to add a spinner or something similar.
+
+```
+  <button ng-click="doSomething()" ng-autodisable-class="class1 class2" ng-autodisable>Do something</button>
+```
+
 
 ### Demo
 ---

src/angular-autodisable.js

@@ -27,7 +27,9 @@
 
     var DISABLED = 'disabled',      // Disabled attribute
         ATTRNAME = 'ngAutodisable', // The attribute name to which we store the handlers ids
-        ELEMENT = null;
+        ELEMENT = null,
+        LOADING_CLASS = false,
+        LOADING_CLASS_ATTR = 'ngAutodisableClass';
 
     // Id for the registered handlers.
     // Will be incremented in order to make sure that handler is uniquely registered
@@ -88,6 +90,7 @@
       }
 
       attrs.$set(DISABLED, value, true);
+      toggleLoadingClass(ELEMENT);
     }
 
     /**
@@ -105,6 +108,18 @@
 
         var element = angular.element(ELEMENT).find('button[type=submit]');
         element.attr(DISABLED, !!value);
+        toggleLoadingClass(element);
+    }
+
+    /**
+     * Toggles the loading class (if exist) to the element
+     *
+     * @param  {Element} element element to get the class attached to
+     */
+    function toggleLoadingClass(element) {
+      if(LOADING_CLASS) {
+        element.toggleClass(LOADING_CLASS);
+      }
     }
 
     /**
@@ -168,6 +183,9 @@
       restrict : 'A',
       compile  : function(el, attrs) {
         ELEMENT = el;
+        if ( attrs.hasOwnProperty(LOADING_CLASS_ATTR) ) {
+          LOADING_CLASS = attrs[LOADING_CLASS_ATTR];
+        }
         if( attrs.hasOwnProperty('ngClick') ) {
             type = types.click;
         } else  if ( attrs.hasOwnProperty('ngSubmit') ) {

test/ng-autodisable-submit.spec.js

@@ -133,6 +133,29 @@ describe('angular autodisable', function() {
       }));
     });
 
+    describe('loading class', function() {
+      it('should add a class to the button if the promise is not resolved', inject(function($q) {
+        $rootScope.clickHandler = function() {
+          var defer = $q.defer();
+          return defer.promise;
+        };
+        var el = compile('<form ng-submit="clickHandler()" ng-autodisable-class="loading" ng-autodisable> <button type="submit"></button> </form>');
+        el.find('button[type=submit]').click();
+        expect(el.find('button[type=submit]').hasClass('loading')).toBe(true);
+      }));
+
+      it('should add multiple class to the button if the promise is not resolved', inject(function($q) {
+        $rootScope.clickHandler = function() {
+          var defer = $q.defer();
+          return defer.promise;
+        };
+        var el = compile('<form ng-submit="clickHandler()" ng-autodisable-class="firstClass secondClass" ng-autodisable> <button type="submit"></button> </form>');
+        el.find('button[type=submit]').click();
+        expect(el.find('button[type=submit]').hasClass('firstClass')).toBe(true);
+        expect(el.find('button[type=submit]').hasClass('secondClass')).toBe(true);
+      }));
+    });
+
     describe('http promise', function() {
       it('should disable the button if ngClick returns HTTP promise', inject(function($http, $httpBackend) {
         $rootScope.clickHandler = function() {

test/ng-autodisable.spec.js

@@ -133,6 +133,29 @@ describe('angular autodisable', function() {
       }));
     });
 
+    describe('loading class', function() {
+      it('should add a class to the button if the promise is not resolved', inject(function($q) {
+        $rootScope.clickHandler = function() {
+          var defer = $q.defer();
+          return defer.promise;
+        };
+        var el = compile('<button ng-click="clickHandler()" ng-autodisable-class="loading" ng-autodisable></button>');
+        el.click();
+        expect(el.hasClass('loading')).toBe(true);
+      }));
+
+      it('should add multiple class to the button if the promise is not resolved', inject(function($q) {
+        $rootScope.clickHandler = function() {
+          var defer = $q.defer();
+          return defer.promise;
+        };
+        var el = compile('<button ng-click="clickHandler()" ng-autodisable-class="firstClass secondClass" ng-autodisable></button>');
+        el.click();
+        expect(el.hasClass('firstClass')).toBe(true);
+        expect(el.hasClass('secondClass')).toBe(true);
+      }));
+    });
+
     describe('http promise', function() {
       it('should disable the button if ngClick returns HTTP promise', inject(function($http, $httpBackend) {
         $rootScope.clickHandler = function() {