angular-busy-button v1.1.0

angular-busy-button

Interactive buttons for your app. Based on Luckasz's Watroba v-buttons module.

Demo

Getting started

Download the package:

npm install --save angular-busy-button
bower install --save angular-busy-button

Add the style and the script to your html page:

<link rel="stylesheet" type="text/css" href="angular-busy-button.css">
<script type="text/javascript" src="angular-busy-button.js"></script>

Add module name to your application dependencies:

angular.module('app', ['angular-busy-button']);

And now you are ready to use the busy-button attribute directive.

Basic usage

The simplest way to use it is by adding busy-button like so:

<button type="button" busy-button>Click Me</button>

The directive can take also a function that return a Promise, a $resource or a $http promise, like in this example:

<button type="button" busy-button="loadData()">Click Me</button>

$scope.loadData = function() {
  var deferred = $q.defer();
  $timeout(function() {
    deferred.resolve();
  }, 5000)
  return deferred.promise;
}

Also you can use various attributes to customize the button beheviour:

• busy-text: The text to show during button progress
• busy-after: The text to show after the button is pressed
• busy-success: The text to show when the button function success
• busy-error: The text to show when the button function fails
• busy-complete-class: The class to apply after the button progress completes
• busy-wait-time: The number of milliseconds to wait before click again - default 1000ms (1 sec)
• busy-runtimes: The number of times which the button can be pressed/executed

Development

Install all the development dependencies.

npm install

There are two main actions:

grunt  // start the development server with livereload enabled on changes
grunt watch  // re-build automatically on javascript files changes
grunt build // create the distribution files by doing concat and uglify

Contributing

1. Create an issue and describe your idea
2. Fork the project (https://github.com/codekraft-studio/angular-busy-button/fork)
3. Create your feature branch (git checkout -b my-new-feature)
4. Commit your changes (git commit -am 'Add some feature')
5. Publish the branch (git push origin my-new-feature)
6. Create a new Pull Request