Added 'only icons' option.

jeremypeters · Jul 26, 2014 · cc91221 · cc91221
1 parent 0ed16eb
commit cc91221
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.0.0 (July 26th, 2014)
+
+### Improvements
+
+* Added 'icons only' option
+
 ## 1.1.1 (July 15th, 2014)
 
 ### Improvements

diff --git a/README.md b/README.md
@@ -59,10 +59,11 @@ http://jeremypeters.github.io/ng-bs-animated-button/
 | `buttonSubmittingText`  | 'Submitting...'               |
 | `buttonSuccessText`     | 'Completed'                   |
 | `buttonErrorText`       | 'There was an error'          |
+| `buttonInitialIcon`     | 'glyphicon glyphicon-plus'    |
 | `buttonSubmittingIcon`  | 'glyphicon glyphicon-refresh' |
 | `buttonSuccessIcon`     | 'glyphicon glyphicon-ok'      |
 | `buttonErrorIcon`       | 'glyphicon glyphicon-remove'  |
 | `formIsInvalid`         | 'form.$invalid'               |
 | `animationCompleteTime` | '2000'                        |
 | `iconsPosition`         | 'left'                        |
-
+| `onlyIcons`             | false                         |
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-bs-animated-button",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "authors": [
     "Jeremy Peters <[email protected]>"
   ],

diff --git a/ng-bs-animated-button.css b/ng-bs-animated-button.css
@@ -44,13 +44,26 @@
   -o-transition: opacity 0.15s, width 0.15s;
   transition: opacity 0.15s, width 0.15s;
 }
+.btn-ng-bs-animated.icons-only .icons,
 .btn-ng-bs-animated.is-active .icons {
   opacity: 1;
   width: 1em;
 }
 .btn-ng-bs-animated.is-active .icons.pull-left {
   margin-right: 0.4em;
 }
+.btn-ng-bs-animated.icons-only.is-active .icons.pull-left {
+  margin-right: 0;
+}
+.btn-ng-bs-animated .icon-initial {
+  display: none;
+}
+.btn-ng-bs-animated.icons-only .icon-initial {
+  display: inline-block;
+}
+.btn-ng-bs-animated.is-active .icon-initial {
+  display: none;
+}
 .btn-ng-bs-animated.is-active .icons.pull-right {
   margin-left: 0.4em;
 }
@@ -59,4 +72,7 @@
   -moz-animation: btn-ng-bs-rotation 2s infinite linear;
   -o-animation: btn-ng-bs-rotation 2s infinite linear;
   animation: btn-ng-bs-rotation 2s infinite linear;
-}
+}
+.btn-ng-bs-animated.icons-only .text {
+  display: none;
+}
diff --git a/ng-bs-animated-button.js b/ng-bs-animated-button.js
@@ -22,17 +22,20 @@ angular.module('jp.ng-bs-animated-button', []).
           buttonSubmittingText: $scope.options.buttonSubmittingText || 'Submitting...',
           buttonSuccessText: $scope.options.buttonSuccessText || 'Completed',
           buttonErrorText: $scope.options.buttonErrorText || 'There was an error',
+          buttonInitialIcon: $scope.options.buttonInitialIcon || 'glyphicon glyphicon-plus',
           buttonSubmittingIcon: $scope.options.buttonSubmittingIcon || 'glyphicon glyphicon-refresh',
           buttonSuccessIcon: $scope.options.buttonSuccessIcon || 'glyphicon glyphicon-ok',
           buttonErrorIcon: $scope.options.buttonErrorIcon || 'glyphicon glyphicon-remove',
           formIsInvalid: $scope.options.formIsInvalid || '',
           animationCompleteTime: $scope.options.animationCompleteTime || '2000',
-          iconsPosition: $scope.options.iconsPosition || 'left'
+          iconsPosition: $scope.options.iconsPosition || 'left',
+          onlyIcons: $scope.options.onlyIcons || false
         };
       }],
       template:
-        '<button type="submit" class="btn {{buttonClass}} {{buttonSize}} btn-ng-bs-animated clearfix" ng-disabled="{{formIsInvalid}}">' +
+        '<button type="submit" class="btn {{buttonClass}} {{buttonSize}} {{onlyIcons}} btn-ng-bs-animated clearfix" ng-disabled="{{formIsInvalid}}">' +
           '<div class="icons pull-{{iconsPosition}}">' +
+            '<span class="{{buttonInitialIcon}} icon-initial"></span>' +
             '<span class="{{buttonSubmittingIcon}} icon-spinner icon-submit hidden"></span>' +
             '<span class="{{buttonSuccessIcon}} icon-result icon-success hidden"></span>' +
             '<span class="{{buttonErrorIcon}} icon-result icon-error hidden"></span>' +
@@ -43,6 +46,7 @@ angular.module('jp.ng-bs-animated-button', []).
         var el = element;
 
         var icons = {
+          initial: angular.element(el[0].querySelector('.icon-initial')),
           submitting: angular.element(el[0].querySelector('.icon-submit')),
           result: angular.element(el[0].querySelectorAll('.icon-result')),
           success: angular.element(el[0].querySelector('.icon-success')),
@@ -69,13 +73,18 @@ angular.module('jp.ng-bs-animated-button', []).
         scope.buttonSize = scope.options.buttonSizeClass;
         scope.formIsInvalid = scope.options.formIsInvalid;
         scope.iconsPosition = scope.options.iconsPosition;
+        scope.buttonInitialIcon = scope.options.buttonInitialIcon;
         scope.buttonSubmittingIcon = scope.options.buttonSubmittingIcon;
         scope.buttonSuccessIcon = scope.options.buttonSuccessIcon;
         scope.buttonErrorIcon = scope.options.buttonErrorIcon;
         scope.iconsPosition = scope.options.iconsPosition;
         scope.buttonText = scope.options.buttonDefaultText;
         scope.buttonTextFloatClass = setButtonTextFloatClass();
 
+        if(scope.options.onlyIcons){
+          scope.onlyIcons = 'icons-only';
+        };
+
         scope.$watch('isSubmitting', function(newValue) {
             if (newValue) {
               scope.buttonClass = scope.options.buttonSubmittingClass;