add a constant for default values and bump version

Author: crisbeto

Gruntfile.js

@@ -2,6 +2,7 @@ module.exports = function(grunt) {
   var files = [
       'src/shim.js',
       'src/module.js',
+      'src/roundProgressConfig.js',
       'src/roundProgressService.js',
       'src/roundProgress.js',
   ];
@@ -42,4 +43,4 @@ module.exports = function(grunt) {
 
   grunt.registerTask('default', ['concat:build', 'uglify:build']);
   grunt.registerTask('deploy', ['default', 'gh-pages:deploy']);
-};
+};

README.md

@@ -23,15 +23,16 @@ angular.module('someModule', ['angular-svg-round-progress'])
 
 ## Options
 
+* To edit the default values, change the options in the `roundProgressConfig` constant
 * `current` current progress, some value on the scope or a number
-* `max` maximum value, some value on the scope or a number
-* `radius` radius of the circle
-* `color` hex color for the `current` value, example: `#45ccce`
-* `bgcolor` hex background color, example: `#eaeaea`
-* `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)*
-* `animation` the easing function that will be used. Default value is `easeOutCubic`, possible values:
+* `max` maximum value, some value on the scope or a number *(Defaults to `50`)*
+* `radius` radius of the circle *(Defaults to `50`)*
+* `color` hex color for the `current` value, example: `#45ccce` *(Defaults to `#45ccce`)*
+* `bgcolor` hex background color, example: `#eaeaea` *(Defaults to `#eaeaea`)*
+* `stroke` specifies the thickness of the line *(Defaults to `15`)*
+* `semi` boolean, specifies whether the progressbar should be a semicircle or a full circle *(Defaults to `false`)*
+* `iterations` number of iterations for the animation. Set it to 1 for *no animation* and increase for slower animation. *(Defaults to `50`)*
+* `animation` the easing function that will be used. *(Defaults to `easeOutCubic`)* possible values:
     * linearEase
     * easeInQuad
     * easeOutQuad

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-svg-round-progressbar",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "homepage": "https://github.com/crisbeto/angular-svg-round-progressbar",
   "authors": [
     "crisbeto"

build/index.html

@@ -87,14 +87,7 @@ <h2>Sample progressbar</h2>
             <div
                 round-progress
                 max="max"
-                current="current"
-                color="{{ currentColor }}"
-                bgcolor="{{ bgColor }}"
-                radius="{{ radius }}"
-                semi="isSemi"
-                stroke="{{ stroke }}"
-                iterations="{{ iterations }}"
-                animation="{{ currentAnimation }}">
+                current="current">
             </div>
         </div>
 
@@ -177,7 +170,7 @@ <h2>Upload progress example</h2>
 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
-    <script src="roundProgress.js"></script>
+    <script src="roundProgress.min.js"></script>
     <script>
         angular.module('demo', ['angular-svg-round-progress'])
         .controller('demoCtrl', ['$scope', '$timeout', 'roundProgressService', function($scope, $timeout, roundProgressService){

build/roundProgress.js

@@ -30,6 +30,21 @@
 
 angular.module('angular-svg-round-progress', []);
 
+'use strict';
+
+angular.module('angular-svg-round-progress').constant('roundProgressConfig', {
+    max:            50,
+    semi:           false,
+    radius:         100,
+    color:          "#45ccce",
+    bgcolor:        "#eaeaea",
+    stroke:         15,
+    iterations:     50,
+    animation:      "easeOutCubic"
+});
+
+'use strict';
+
 angular.module('angular-svg-round-progress').service('roundProgressService', [function(){
     var service = {};
 
@@ -243,7 +258,7 @@ angular.module('angular-svg-round-progress').service('roundProgressService', [fu
 'use strict';
 
 angular.module('angular-svg-round-progress')
-    .directive('roundProgress', ['$timeout', 'roundProgressService', function($timeout, service){
+    .directive('roundProgress', ['roundProgressService', 'roundProgressConfig', function(service, roundProgressConfig){
 
             if(!service.isSupported){
                 return {
@@ -268,41 +283,38 @@ angular.module('angular-svg-round-progress')
                     animation:      "@"
                 },
                 link: function (scope, element, attrs) {
-
                     var ring        = element.find('path'),
                         background  = element.find('circle'),
+                        options     = angular.copy(roundProgressConfig),
                         size,
                         resetValue;
 
                     var renderCircle = function(){
-                        $timeout(function(){
-                            var isSemicircle = scope.semi,
-                            radius           = parseInt(scope.radius),
-                            stroke           = parseInt(scope.stroke);
-
-                            size = radius*2 + stroke*2;
-
-                            element.attr({
-                                "width":        size,
-                                "height":       isSemicircle ? size/2 : size
-                            }).css({
-                                "overflow": "hidden" // on some browsers the background overflows, if in semicircle mode
-                            });
-
-                            ring.attr({
-                                "stroke":       scope.color,
-                                "stroke-width": stroke,
-                                "transform":    isSemicircle ? ('translate('+ 0 +','+ size +') rotate(-90)') : ''
-                            });
-
-                            background.attr({
-                                "cx":           radius,
-                                "cy":           radius,
-                                "transform":    "translate("+ stroke +", "+ stroke +")",
-                                "r":            radius,
-                                "stroke":       scope.bgcolor,
-                                "stroke-width": stroke
-                            });
+                        var isSemicircle = options.semi,
+                        radius           = parseInt(options.radius),
+                        stroke           = parseInt(options.stroke);
+
+                        size = radius*2 + stroke*2;
+
+                        element.css({
+                            "width":        size,
+                            "height":       isSemicircle ? size/2 : size,
+                            "overflow":     "hidden" // on some browsers the background overflows, if in semicircle mode
+                        });
+
+                        ring.attr({
+                            "stroke":       options.color,
+                            "stroke-width": stroke,
+                            "transform":    isSemicircle ? ('translate('+ 0 +','+ size +') rotate(-90)') : ''
+                        });
+
+                        background.attr({
+                            "cx":           radius,
+                            "cy":           radius,
+                            "transform":    "translate("+ stroke +", "+ stroke +")",
+                            "r":            radius,
+                            "stroke":       options.bgcolor,
+                            "stroke-width": stroke
                         });
                     };
 
@@ -316,19 +328,19 @@ angular.module('angular-svg-round-progress')
                             return scope.current = 0;
                         };
 
-                        if(newValue > scope.max){
+                        if(newValue > options.max){
                             resetValue = oldValue;
-                            return scope.current = scope.max;
+                            return scope.current = options.max;
                         };
 
-                        var max             = scope.max,
-                        radius              = scope.radius,
-                        isSemicircle        = scope.semi,
-                        easingAnimation     = service.animations[scope.animation || 'easeOutCubic'],
+                        var max             = options.max,
+                        radius              = options.radius,
+                        isSemicircle        = options.semi,
+                        easingAnimation     = service.animations[options.animation],
                         start               = oldValue === newValue ? 0 : (oldValue || 0), // fixes the initial animation
                         val                 = newValue - start,
                         currentIteration    = 0,
-                        totalIterations     = parseInt(scope.iterations || 50);
+                        totalIterations     = parseInt(options.iterations);
 
                         if(angular.isNumber(resetValue)){
                             // the reset value fixes problems with animation, caused when limiting the scope.current
@@ -353,7 +365,17 @@ angular.module('angular-svg-round-progress')
                         })();
                     };
 
-                    scope.$watchCollection('[current, max, semi, radius, color, bgcolor, stroke, iterations]', function(newValue, oldValue){
+                    scope.$watchCollection('[current, max, semi, radius, color, bgcolor, stroke, iterations]', function(newValue, oldValue, scope){
+
+                        // pretty much the same as angular.extend,
+                        // but this skips undefined values and internal angular keys
+                        angular.forEach(scope, function(value, key){
+                            // note the scope !== value is because `this` is part of the scope
+                            if(key.indexOf('$') && scope !== value && angular.isDefined(value)){
+                                options[key] = value;
+                            };
+                        });
+
                         renderCircle();
                         renderState(newValue[0], oldValue[0]);
                     });
@@ -362,7 +384,7 @@ angular.module('angular-svg-round-progress')
                 template:[
                     '<svg class="round-progress" xmlns="http://www.w3.org/2000/svg">',
                         '<circle fill="none"/>',
-                        '<path fill="none" />',
+                        '<path fill="none"/>',
                     '</svg>'
                 ].join('\n')
             };