Package naming, performance improvements, coding style improvements.

* Renamed the module to `angular-svg-round-progressbar` in order to match the name on NPM and Bower.
* Started using `performance.now` for the animation timing, if the browser supports it.
* Removed some styles that were being set twice in a row for some reason.
* Fixed some crappy indentation and removed unnecessary quotes.
* Switched to using string concatenation instead of joining arrays in order to avoid having to create a whole lot of arrays.
* Bumped the version to 0.4.0.

Author: crisbeto

README.md

@@ -19,10 +19,10 @@ or
 `<script src="http://crisbeto.github.io/angular-svg-round-progressbar/roundProgress.min.js"></script>`
 
 
-Add `angular-svg-round-progress` to your app's module dependencies:
+Add `angular-svg-round-progressbar` to your app's module dependencies:
 
 ```javascript
-angular.module('someModule', ['angular-svg-round-progress'])
+angular.module('someModule', ['angular-svg-round-progressbar'])
 ```
 
 ## Options

bower.json

@@ -1,11 +1,11 @@
 {
   "name": "angular-svg-round-progressbar",
-  "version": "0.3.10",
+  "version": "0.4.0",
   "homepage": "https://github.com/crisbeto/angular-svg-round-progressbar",
   "authors": [
     "crisbeto"
   ],
-  "description": "AngularJS module that uses SVG to create a circular progressar",
+  "description": "AngularJS module that uses SVG to create a circular progressbar",
   "keywords": [
     "angular",
     "progress",

build/index.html

@@ -285,7 +285,7 @@ <h2>Clock example</h2>
     <script>
         'use strict';
 
-        angular.module('demo', ['angular-svg-round-progress']).controller('demoCtrl', ['$scope', '$interval', '$timeout', '$window', 'roundProgressService', function($scope, $interval, $timeout, $window, roundProgressService){
+        angular.module('demo', ['angular-svg-round-progressbar']).controller('demoCtrl', ['$scope', '$interval', '$timeout', '$window', 'roundProgressService', function($scope, $interval, $timeout, $window, roundProgressService){
 
             $scope.current =        27;
             $scope.max =            50;

build/roundProgress.js

@@ -1,7 +1,7 @@
 {
   "name": "angular-svg-round-progressbar",
-  "version": "0.3.10",
-  "description": "AngularJS module that uses SVG to create a circular progressar",
+  "version": "0.4.0",
+  "description": "AngularJS module that uses SVG to create a circular progressbar",
   "main": "build/roundProgress.min.js",
   "scripts": {},
   "repository": {

build/roundProgress.min.js

@@ -1 +1 @@
-angular.module('angular-svg-round-progress', []);
+angular.module('angular-svg-round-progressbar', []);

package.json

@@ -1,17 +1,17 @@
 'use strict';
 
-angular.module('angular-svg-round-progress').constant('roundProgressConfig', {
+angular.module('angular-svg-round-progressbar').constant('roundProgressConfig', {
     max:            50,
     semi:           false,
     rounded:        false,
     responsive:     false,
     clockwise:      true,
     radius:         100,
-    color:          "#45ccce",
-    bgcolor:        "#eaeaea",
+    color:          '#45ccce',
+    bgcolor:        '#eaeaea',
     stroke:         15,
     duration:       800,
-    animation:      "easeOutCubic",
+    animation:      'easeOutCubic',
     animationDelay: 0,
     offset:         0
 });

src/module.js

@@ -1,10 +1,13 @@
 'use strict';
 
-angular.module('angular-svg-round-progress').service('roundProgressService', [function(){
+angular.module('angular-svg-round-progressbar').service('roundProgressService', ['$window', function($window){
     var service = {};
     var isNumber = angular.isNumber;
     var base = document.head.querySelector('base');
 
+    // credits to http://modernizr.com/ for the feature test
+    service.isSupported = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect);
+
     // fixes issues if the document has a <base> element
     service.resolveColor = base && base.href ? function(value){
         var hashIndex = value.indexOf('#');
@@ -18,19 +21,6 @@ angular.module('angular-svg-round-progress').service('roundProgressService', [fu
         return value;
     };
 
-    // credits to http://modernizr.com/ for the feature test
-    service.isSupported = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect);
-
-    // utility function
-    var polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {
-        var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
-
-        return {
-            x: centerX + (radius * Math.cos(angleInRadians)),
-            y: centerY + (radius * Math.sin(angleInRadians))
-        };
-    };
-
     // deals with floats passed as strings
     service.toNumber = function(value){
         return isNumber(value) ? value : parseFloat((value + '').replace(',', '.'));
@@ -56,29 +46,31 @@ angular.module('angular-svg-round-progress').service('roundProgressService', [fu
         return value;
     };
 
-    // credit to http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
-    service.updateState = function(val, total, R, ring, size, isSemicircle) {
+    service.getTimestamp = $window.performance && $window.performance.now ? function(){
+        return $window.performance.now();
+    } : function(){
+        return $window.Date.now();
+    };
 
-        if(!size) return ring;
+    // credit to http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
+    service.updateState = function(current, total, pathRadius, element, elementRadius, isSemicircle) {
+        if(!elementRadius) return element;
 
-        var value       = val > 0 ? Math.min(val, total) : 0;
+        var value       = current > 0 ? Math.min(current, total) : 0;
         var type        = isSemicircle ? 180 : 359.9999;
         var perc        = total === 0 ? 0 : (value / total) * type;
-        var x           = size/2;
-        var start       = polarToCartesian(x, x, R, perc); // in this case x and y are the same
-        var end         = polarToCartesian(x, x, R, 0);
-        var arcSweep    = (perc <= 180 ? "0" : "1");
-        var d = [
-            "M", start.x, start.y,
-            "A", R, R, 0, arcSweep, 0, end.x, end.y
-        ].join(" ");
-
-        return ring.attr('d', d);
+        var start       = polarToCartesian(elementRadius, elementRadius, pathRadius, perc);
+        var end         = polarToCartesian(elementRadius, elementRadius, pathRadius, 0);
+        var arcSweep    = (perc <= 180 ? 0 : 1);
+        var d           = 'M ' + start + ' A ' + pathRadius + ' ' + pathRadius + ' 0 ' + arcSweep + ' 0 ' + end;
+
+        return element.attr('d', d);
     };
 
     service.isDirective = function(el){
         if(el && el.length){
-            return (typeof el.attr('round-progress') !== 'undefined' || el[0].nodeName.toLowerCase() === 'round-progress');
+            var directiveName = 'round-progress';
+            return (typeof el.attr(directiveName) !== 'undefined' || el[0].nodeName.toLowerCase() === directiveName);
         }
 
         return false;
@@ -259,5 +251,14 @@ angular.module('angular-svg-round-progress').service('roundProgressService', [fu
         }
     };
 
+    // utility function
+    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
+        var x = centerX + (radius * Math.cos(angleInRadians));
+        var y = centerY + (radius * Math.sin(angleInRadians));
+
+        return x + ' ' + y;
+    }
+
     return service;
 }]);