0.2.0 release. Adds:

- Dynamic binding - Animation presets and ability to choose animation - Some file reorganization
crisbeto · Dec 21, 2014 · c3f032f · c3f032f
1 parent 4959516
commit c3f032f
Show file tree

Hide file tree

Showing 13 changed files with 717 additions and 259 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,4 @@
 bower_components/
 node_modules/
-build/
 .DS_Store
 .grunt/
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,24 +1,29 @@
 module.exports = function(grunt) {
+  var files = [
+      'src/shim.js',
+      'src/module.js',
+      'src/roundProgressService.js',
+      'src/roundProgress.js',
+  ];
+
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     'uglify': {
       'options': {
         'banner': '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
       },
       'build': {
-        'src': 'roundProgress.js',
+        'src': files,
         'dest': 'build/roundProgress.min.js'
       }
     },
-    'copy': {
-      'deploy': {
-        'files': [{
-          'src': ['demo.html'],
-          'dest': 'build/index.html'
-        }, {
-          'src': ['roundProgress.js'],
-          'dest': 'build/'
-        }]
+    'concat': {
+      'options': {
+        separator: '\n',
+      },
+      'build': {
+        src: files,
+        dest: 'build/roundProgress.js',
       }
     },
     'gh-pages': {
@@ -32,9 +37,9 @@ module.exports = function(grunt) {
   });
 
   grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-gh-pages');
 
-  grunt.registerTask('default', ['uglify:build', 'copy:deploy']);
+  grunt.registerTask('default', ['concat:build', 'uglify:build']);
   grunt.registerTask('deploy', ['default', 'gh-pages:deploy']);
 };
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ AngularJS module that uses SVG to create a circular progressbar
 
 ## Install
 
-Include Angular and `roundProgress.js` or `roundProgress.min.js` in your page. You can use bower, or a script-tag:
+Include Angular and [roundProgress.min.js](https://raw.githubusercontent.com/crisbeto/angular-svg-round-progressbar/master/build/roundProgress.min.js) or [roundProgress.js](https://raw.githubusercontent.com/crisbeto/angular-svg-round-progressbar/master/build/roundProgress.js) in your page. You can use bower, or a script-tag:
 
 `bower install angular-svg-round-progressbar`
 
@@ -31,25 +31,44 @@ angular.module('someModule', ['angular-svg-round-progress'])
 * `stroke` specifies the thickness of the line
 * `semi` boolean, specifies whether the progressbar should be a semicircle or a full circle
 * `iterations` number of iterations for the animation. Set it to 1 for *no animation* and increase for slower animation. *(Optional, 50 by default)*
-* To manually trigger a complete re-render of the progressbar, broadcast a "renderCircle" from a parent scope:
-
-```javascript
-$rootScope.$broadcast('renderCircle');
-```
+* `animation` the easing function that will be used. Default value is `easeOutCubic`, possible values:
+    * linearEase
+    * easeInQuad
+    * easeOutQuad
+    * easeInOutQuad
+    * easeInCubic
+    * easeOutCubic
+    * easeInOutCubic
+    * easeInQuart
+    * easeOutQuart
+    * easeInOutQuart
+    * easeInQuint
+    * easeOutQuint
+    * easeInOutQuint
+    * easeInSine
+    * easeOutSine
+    * easeInOutSine
+    * easeInExpo
+    * easeOutExpo
+    * easeInOutExpo
+    * easeInCirc
+    * easeOutCirc
+    * easeInOutCirc
 
 ### Example:
 
 ```html
 <div
-	round-progress
-	max="max"
-	current="current"
-	color="#45ccce"
-	bgcolor="#eaeaea"
-	radius="100"
-	stroke="20"
-	semi="true">
-</div>
+    round-progress
+    max="max"
+    current="current"
+    color="#45ccce"
+    bgcolor="#eaeaea"
+    radius="100"
+    stroke="20"
+    semi="true"
+    iterations="50"
+    animation="easeInOutQuart"></div>
 ```
 
 ## Browser support

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-svg-round-progressbar",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "homepage": "https://github.com/crisbeto/angular-svg-round-progressbar",
   "authors": [
     "crisbeto"
@@ -21,5 +21,5 @@
   "dependencies": {
     "angular": "~1.2.19"
   },
-  "main":"roundProgress.js"
+  "main":"build/roundProgress.min.js"
 }
diff --git a/demo.html → build/index.html b/demo.html → build/index.html
@@ -1,6 +1,6 @@
 
 <!doctype html>
-<html lang="en">
+<html lang="en" ng-app="demo">
 <head>
     <meta charset="UTF-8">
     <title>Angular SVG round progressbar demo</title>
@@ -57,15 +57,15 @@
 
         form{
             text-align: left;
-            width: 270px;
+            width: 300px;
             margin:20px auto;
         }
 
         form > div{
             margin-bottom: 5px;
         }
 
-        input{
+        input, select{
             float:right;
             padding: 5px;
         }
@@ -77,8 +77,8 @@
         }
     </style>
 </head>
-<body ng-app="demo">
-    <div class="container" ng-controller="demoCtrl">
+<body ng-controller="demoCtrl">
+    <div class="container">
         <a class="back" href="https://github.com/crisbeto/angular-svg-round-progressbar">Back to project repo</a>
 
         <h2>Sample progressbar</h2>
@@ -93,7 +93,8 @@ <h2>Sample progressbar</h2>
                 radius="{{ radius }}"
                 semi="isSemi"
                 stroke="{{ stroke }}"
-                iterations="{{ iterations }}">
+                iterations="{{ iterations }}"
+                animation="{{ currentAnimation }}">
             </div>
         </div>
 
@@ -131,6 +132,16 @@ <h3>Customize!</h3>
                 <input type="number" ng-model="radius"/>
             </div>
 
+            <div class="cf">
+                <label>Iterations:</label>
+                <input type="number" ng-model="iterations"/>
+            </div>
+
+            <div class="cf">
+                <label>Animation:</label>
+                <select ng-model="currentAnimation" ng-options="animation for animation in animations"></select>
+            </div>
+
             <div class="cf">
                 <label>Color:</label>
                 <input type="color" ng-model="currentColor"/>
@@ -140,28 +151,23 @@ <h3>Customize!</h3>
                 <label>Background color:</label>
                 <input type="color" ng-model="bgColor"/>
             </div>
-
-            <div class="cf">
-                <label>Iterations:</label>
-                <input type="number" ng-model="iterations"/>
-            </div>
         </form>
     </div>
 
-    <div class="container" ng-controller="demoCtrl">
+    <div class="container">
         <h2>Upload progress example</h2>
         <div class="progress-wrapper">
-            <div class="progress">{{ ((uploadCurrent/100)*100) | number:0 }}%</div>
+            <div class="progress"  ng-style="{'font-size': ((radius + stroke)/(isSemi ? 3.5 : 3))+'px'}">{{ ((uploadCurrent/100)*100) | number:0 }}%</div>
             <div
                 round-progress
                 max="100"
                 current="uploadCurrent"
-                color="#45ccce"
-                bgcolor="#eaeaea"
-                radius="100"
+                color="{{ currentColor }}"
+                bgcolor="{{ bgColor }}"
+                radius="{{ radius }}"
                 semi="isSemi"
-                stroke="15">
-            </div>
+                stroke="{{ stroke }}"
+                animation="{{ currentAnimation }}"></div>
         </div>
 
         <button ng-click="start();">Start</button>
@@ -170,20 +176,22 @@ <h2>Upload progress example</h2>
     </div>
 
 
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
     <script src="roundProgress.js"></script>
     <script>
         angular.module('demo', ['angular-svg-round-progress'])
-        .controller('demoCtrl', ['$scope', '$timeout', '$rootScope', function($scope, $timeout, $rootScope){
-
-            $scope.current =        27,
-            $scope.max =            50,
-            $scope.uploadCurrent =  0,
-            $scope.stroke =         15,
-            $scope.radius =         100,
-            $scope.isSemi =         false,
-            $scope.currentColor =   '#45ccce',
-            $scope.bgColor =        '#eaeaea'
+        .controller('demoCtrl', ['$scope', '$timeout', 'roundProgressService', function($scope, $timeout, roundProgressService){
+
+            $scope.current =        27;
+            $scope.max =            50;
+            $scope.uploadCurrent =  0;
+            $scope.stroke =         15;
+            $scope.radius =         100;
+            $scope.isSemi =         false;
+            $scope.currentColor =   '#45ccce';
+            $scope.bgColor =        '#eaeaea';
+            $scope.iterations =     50;
+            $scope.currentAnimation = 'easeOutCubic';
 
             var random = function(min, max){
                 return Math.round(Math.floor(Math.random()*(max-min+1)+min));
@@ -194,10 +202,6 @@ <h2>Upload progress example</h2>
                 $scope.current+=(amount || 1);
             };
 
-            $scope.$watchCollection('[max, stroke, radius, isSemi, currentColor, bgColor, iterations]', function(newValue, oldValue){
-                $rootScope.$broadcast('renderCircle');
-            });
-
             $scope.decrement = function(amount){
                 $scope.current-=(amount || 1);
             };
@@ -210,7 +214,7 @@ <h2>Upload progress example</h2>
                     if($scope.uploadCurrent < 100){
                         $scope.start();
                     }
-                }, random(300, 500));
+                }, random(100, 500));
             };
 
             $scope.stop = function(){
@@ -222,6 +226,11 @@ <h2>Upload progress example</h2>
                 $scope.uploadCurrent = 0;
             };
 
+            $scope.animations = [];
+
+            angular.forEach(roundProgressService.animations, function(value, key){
+                $scope.animations.push(key);
+            });
         }]);
     </script>
 </body>