Merge pull request #7 from ingameio/master

Added param 'iterations' to directive

Author: crisbeto

README.md

@@ -30,6 +30,7 @@ angular.module('someModule', ['angular-svg-round-progress'])
 * `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)*
 * To manually trigger a complete re-render of the progressbar, broadcast a "renderCircle" from a parent scope:
 
 ```javascript
@@ -39,13 +40,13 @@ $rootScope.$broadcast('renderCircle');
 ### Example:
 
 ```html
-<div 
-	round-progress 
-	max="max" 
-	current="current" 
-	color="#45ccce" 
-	bgcolor="#eaeaea" 
-	radius="100" 
+<div
+	round-progress
+	max="max"
+	current="current"
+	color="#45ccce"
+	bgcolor="#eaeaea"
+	radius="100"
 	stroke="20"
 	semi="true">
 </div>

demo.html

@@ -57,7 +57,7 @@
 
         form{
             text-align: left;
-            width: 250px;
+            width: 270px;
             margin:20px auto;
         }
 
@@ -84,15 +84,16 @@
         <h2>Sample progressbar</h2>
         <div class="progress-wrapper" ng-style="{'font-size': ((radius + stroke)/(isSemi ? 3.5 : 3))+'px'}">
             <div class="progress">{{ current }}/{{ max }}</div>
-            <div 
-                round-progress 
-                max="max" 
-                current="current" 
-                color="{{ currentColor }}" 
-                bgcolor="{{ bgColor }}" 
-                radius="{{ radius }}" 
+            <div
+                round-progress
+                max="max"
+                current="current"
+                color="{{ currentColor }}"
+                bgcolor="{{ bgColor }}"
+                radius="{{ radius }}"
                 semi="isSemi"
-                stroke="{{ stroke }}">
+                stroke="{{ stroke }}"
+                iterations="{{ iterations }}">
             </div>
         </div>
 
@@ -122,37 +123,42 @@ <h3>Customize!</h3>
 
             <div class="cf">
                 <label>Stroke:</label>
-                <input type="number" ng-model="stroke"/> 
+                <input type="number" ng-model="stroke"/>
             </div>
 
             <div class="cf">
                 <label>Radius:</label>
                 <input type="number" ng-model="radius"/>
-            </div> 
+            </div>
 
             <div class="cf">
                 <label>Color:</label>
-                <input type="color" ng-model="currentColor"/> 
+                <input type="color" ng-model="currentColor"/>
             </div>
 
             <div class="cf">
                 <label>Background color:</label>
                 <input type="color" ng-model="bgColor"/>
-            </div> 
+            </div>
+
+            <div class="cf">
+                <label>Iterations:</label>
+                <input type="number" ng-model="iterations"/>
+            </div>
         </form>
     </div>
 
     <div class="container" ng-controller="demoCtrl">
         <h2>Upload progress example</h2>
         <div class="progress-wrapper">
             <div class="progress">{{ ((uploadCurrent/100)*100) | number:0 }}%</div>
-            <div 
-                round-progress 
-                max="100" 
-                current="uploadCurrent" 
-                color="#45ccce" 
-                bgcolor="#eaeaea" 
-                radius="100" 
+            <div
+                round-progress
+                max="100"
+                current="uploadCurrent"
+                color="#45ccce"
+                bgcolor="#eaeaea"
+                radius="100"
                 semi="isSemi"
                 stroke="15">
             </div>
@@ -188,7 +194,7 @@ <h2>Upload progress example</h2>
                 $scope.current+=(amount || 1);
             };
 
-            $scope.$watchCollection('[max, stroke, radius, isSemi, currentColor, bgColor]', function(newValue, oldValue){
+            $scope.$watchCollection('[max, stroke, radius, isSemi, currentColor, bgColor, iterations]', function(newValue, oldValue){
                 $rootScope.$broadcast('renderCircle');
             });
 

roundProgress.js

@@ -33,13 +33,13 @@ angular.module('angular-svg-round-progress', [])
                         return id;
                     };
                 }
-                    
+
                 if (!window.cancelAnimationFrame){
                     window.cancelAnimationFrame = function(id) {
                         clearTimeout(id);
                     };
                 }
-                    
+
             }());
 
 
@@ -51,7 +51,7 @@ angular.module('angular-svg-round-progress', [])
                     y: centerY + (radius * Math.sin(angleInRadians))
                 };
             }
-            
+
             var updateState = function(value, total, R, ring, size, isSemicircle) {
                 if(!size){
                     return;
@@ -67,7 +67,7 @@ angular.module('angular-svg-round-progress', [])
                     // arcSweep = endAngle - startAngle <= 180 ? "0" : "1",
                     arcSweep    = (perc <= 180 ? "0" : "1"),
                     d = [
-                        "M", start.x, start.y, 
+                        "M", start.x, start.y,
                         "A", R, R, 0, arcSweep, 0, end.x, end.y
                     ].join(" ");
 
@@ -77,8 +77,8 @@ angular.module('angular-svg-round-progress', [])
             var easeOutCubic = function(currentIteration, startValue, changeInValue, totalIterations) {
                 // credits to http://www.kirupa.com/forum/showthread.php?378287-Robert-Penner-s-Easing-Equations-in-Pure-JS-(no-jQuery)
                 return changeInValue * (Math.pow(currentIteration / totalIterations - 1, 3) + 1) + startValue;
-            };  
-        
+            };
+
             return {
                 restrict:'EA',
                 scope:{
@@ -88,7 +88,8 @@ angular.module('angular-svg-round-progress', [])
                     radius:     "@",
                     color:      "@",
                     bgcolor:    "@",
-                    stroke:     "@"
+                    stroke:     "@",
+                    iterations: "@"
                 },
                 link: function (scope, element, attrs) {
                     var ring        = element.find('path'),
@@ -151,7 +152,7 @@ angular.module('angular-svg-round-progress', [])
                         start               = oldValue === newValue ? 0 : (oldValue || 0), // fixes the initial animation
                         val                 = newValue - start,
                         currentIteration    = 0,
-                        totalIterations     = 50;
+                        totalIterations     = scope.iterations || 50;
 
                         if(angular.isNumber(resetValue)){
                             // the reset value fixes problems with animation, caused when limiting the scope.current
@@ -163,9 +164,9 @@ angular.module('angular-svg-round-progress', [])
                         (function animation(){
                             if(currentIteration <= totalIterations){
                                 updateState(
-                                    easeOutCubic(currentIteration, start, val, totalIterations), 
-                                    max, 
-                                    radius, 
+                                    easeOutCubic(currentIteration, start, val, totalIterations),
+                                    max,
+                                    radius,
                                     ring,
                                     size,
                                     isSemicircle
@@ -174,7 +175,7 @@ angular.module('angular-svg-round-progress', [])
                                 requestAnimationFrame(animation);
                                 currentIteration++;
                             };
-                        })();                        
+                        })();
                     };
 
                     scope.$on('renderCircle', renderCircle);