Skip to content

Commit

Permalink
add a constant for default values and bump version
Browse files Browse the repository at this point in the history
  • Loading branch information
crisbeto committed Jan 18, 2015
1 parent 3b3e4ab commit d4ba85e
Show file tree
Hide file tree
Showing 10 changed files with 117 additions and 76 deletions.
3 changes: 2 additions & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
];
Expand Down Expand Up @@ -42,4 +43,4 @@ module.exports = function(grunt) {

grunt.registerTask('default', ['concat:build', 'uglify:build']);
grunt.registerTask('deploy', ['default', 'gh-pages:deploy']);
};
};
17 changes: 9 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
11 changes: 2 additions & 9 deletions build/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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){
Expand Down
100 changes: 61 additions & 39 deletions build/roundProgress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};

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

Expand All @@ -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
Expand All @@ -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]);
});
Expand All @@ -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')
};
Expand Down
Loading

0 comments on commit d4ba85e

Please sign in to comment.