Skip to content

Commit

Permalink
Merge pull request #7 from ingameio/master
Browse files Browse the repository at this point in the history 
Added param 'iterations' to directive
  • Loading branch information
@crisbeto
crisbeto committed Dec 12, 2014
2 parents 08873c9 + 0358398 commit 4959516
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 40 deletions.
15 changes: 8 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
48 changes: 27 additions & 21 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@

form{
text-align: left;
width: 250px;
width: 270px;
margin:20px auto;
}

Expand All @@ -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>

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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');
});

Expand Down
25 changes: 13 additions & 12 deletions roundProgress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,13 @@ angular.module('angular-svg-round-progress', [])
return id;
};
}

if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}

}());


Expand All @@ -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;
Expand All @@ -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(" ");

Expand All @@ -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:{
Expand All @@ -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'),
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -174,7 +175,7 @@ angular.module('angular-svg-round-progress', [])
requestAnimationFrame(animation);
currentIteration++;
};
})();
})();
};

scope.$on('renderCircle', renderCircle);
Expand Down

0 comments on commit 4959516

Please sign in to comment.