Skip to content

Commit adc3007

Browse files
mathewbyrnemathewbyrne
committed
Moved example to directory and added to bower.json.
1 parent 9cf44a9 commit adc3007

File tree

3 files changed

+95
-95
lines changed

3 files changed

+95
-95
lines changed

‎angular-progress-arc.js

+72-72
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,86 @@
1-
(function () {
1+
(function (angular) {
22

3-
var TAU = Math.PI * 2;
4-
var ANGLE_OFFSET = -Math.PI / 2;
5-
var ANGLE_MAX = TAU * 0.9;
3+
'use strict';
64

7-
var polarToCartesian = function (x, y, radius, radians) {
8-
return [
9-
x + radius * Math.cos(radians),
10-
y + radius * Math.sin(radians)
11-
];
12-
};
5+
var TAU = Math.PI * 2;
6+
var ANGLE_OFFSET = -Math.PI / 2;
7+
var ANGLE_MAX = TAU * 0.9;
138

14-
var decimalToRadian = function (decimal) {
15-
return (decimal * TAU);
16-
};
9+
var polarToCartesian = function (x, y, radius, radians) {
10+
return [
11+
x + radius * Math.cos(radians),
12+
y + radius * Math.sin(radians)
13+
];
14+
};
1715

18-
var app = angular.module('angular-progress-arc', []);
16+
var decimalToRadian = function (decimal) {
17+
return (decimal * TAU);
18+
};
1919

20-
app.directive('progressArc', function () {
21-
return {
22-
restrict: 'E',
23-
scope: {
24-
width: '@',
25-
height: '@',
26-
strokeWidth: '@',
27-
stroke: '@',
28-
progress: '@',
29-
counterClockwise: '@'
30-
},
31-
link: function (scope, element, attr) {
20+
var app = angular.module('angular-progress-arc', []);
3221

33-
scope.getDescription = function () {
22+
app.directive('progressArc', function () {
23+
return {
24+
restrict: 'E',
25+
scope: {
26+
width: '@',
27+
height: '@',
28+
strokeWidth: '@',
29+
stroke: '@',
30+
progress: '@',
31+
counterClockwise: '@'
32+
},
33+
link: function (scope, element, attr) {
3434

35-
if (scope.progress <= 0) {
36-
return 'M 0 0';
37-
}
35+
scope.getDescription = function () {
3836

39-
var centerX = scope.width / 2;
40-
var centerY = scope.height / 2;
41-
var minDimension = Math.min(scope.width, scope.height);
37+
if (scope.progress <= 0) {
38+
return 'M 0 0';
39+
}
4240

43-
// Cap stroke width so that it's not larger than the radius.
44-
if (scope.strokeWidth * 2 > minDimension) {
45-
scope.strokeWidth = minDimension / 2;
46-
}
41+
var centerX = scope.width / 2;
42+
var centerY = scope.height / 2;
43+
var minDimension = Math.min(scope.width, scope.height);
4744

48-
var radius = (minDimension - scope.strokeWidth) / 2;
49-
var largeArc = scope.progress > 0.5 ? 1 : 0;
50-
var p1 = polarToCartesian(centerX, centerY, radius, ANGLE_OFFSET);
51-
var clockwise = parseInt(scope.counterClockwise) ? 0 : 1;
52-
var angle = scope.progress >= 1.0
53-
? ANGLE_MAX
54-
: decimalToRadian(scope.progress);
55-
var p2 = polarToCartesian(
56-
centerX,
57-
centerY,
58-
radius,
59-
clockwise ? ANGLE_OFFSET + angle : ANGLE_OFFSET - angle
60-
);
45+
// Cap stroke width so that it's not larger than the radius.
46+
if (scope.strokeWidth * 2 > minDimension) {
47+
scope.strokeWidth = minDimension / 2;
48+
}
49+
// -1 from radius to prevent clipping edge of svg element.
50+
var radius = (minDimension - scope.strokeWidth) / 2 - 1;
51+
var largeArc = scope.progress > 0.5 ? 1 : 0;
52+
var p1 = polarToCartesian(centerX, centerY, radius, ANGLE_OFFSET);
53+
var clockwise = parseInt(scope.counterClockwise) ? 0 : 1;
54+
var angle = scope.progress >= 1.0 ? ANGLE_MAX : decimalToRadian(scope.progress);
55+
var p2 = polarToCartesian(
56+
centerX,
57+
centerY,
58+
radius,
59+
clockwise ? ANGLE_OFFSET + angle : ANGLE_OFFSET - angle
60+
);
6161

62-
var d = [
63-
'M', p1[0], p1[1],
64-
'A', radius, radius, 0, largeArc, clockwise, p2[0], p2[1]
65-
];
62+
var d = [
63+
'M', p1[0], p1[1],
64+
'A', radius, radius, 0, largeArc, clockwise, p2[0], p2[1]
65+
];
6666

67-
// A complete circle is not possible with a path and a single
68-
// arc call. So an additional arc is created here to join back
69-
// to the initial point.
70-
if (scope.progress >= 1.0) {
71-
d = d.concat([
72-
'A', radius, radius, 0, 0, clockwise, p1[0], p1[1]
73-
]);
74-
}
67+
// A complete circle is not possible with a path and a single
68+
// arc call. So an additional arc is created here to join back
69+
// to the initial point.
70+
if (scope.progress >= 1.0) {
71+
d = d.concat([
72+
'A', radius, radius, 0, 0, clockwise, p1[0], p1[1]
73+
]);
74+
}
7575

76-
return d.join(' ');
77-
};
78-
},
79-
template:
80-
'<svg ng-attr-width="{{ width }}" ng-attr-height="{{ height }}">' +
81-
'<path fill="none" ng-attr-stroke="{{ stroke }}" ng-attr-stroke-width="{{ strokeWidth }}" ng-attr-d="{{ getDescription() }}">' +
82-
'</svg>'
83-
};
84-
});
76+
return d.join(' ');
77+
};
78+
},
79+
template:
80+
'<svg ng-attr-width="{{ width }}" ng-attr-height="{{ height }}">' +
81+
'<path fill="none" ng-attr-stroke="{{ stroke }}" ng-attr-stroke-width="{{ strokeWidth }}" ng-attr-d="{{ getDescription() }}">' +
82+
'</svg>'
83+
};
84+
});
8585

86-
})();
86+
})(window.angular);

‎bower.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"node_modules",
2020
"bower_components",
2121
"test",
22-
"tests"
22+
"tests",
23+
"example"
2324
],
2425
"dependencies": {
2526
"angular": ">=1.2.19"

‎example.html renamed to ‎example/index.html

+21-22
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,12 @@
33
<head lang="en">
44
<meta charset="UTF-8">
55
<title>angular-progress-arc example</title>
6-
<script src="bower_components/angular/angular.min.js"></script>
7-
<script src="angular-progress-arc.js"></script>
8-
<script>
9-
var app = angular.module('example', ['angular-progress-arc']);
10-
app.controller('ExampleCtrl', function ($scope) {
11-
$scope.progress = 0.5;
12-
$scope.strokeWidth = 20;
13-
$scope.stroke = 'black';
14-
$scope.counterClockwise = '1';
15-
});
16-
</script>
6+
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
177
<style>
188
body {
19-
font-family: Helvetica, Arial, sans-serif;
9+
font-family: "PT Sans", Helvetica, Arial, sans-serif;
10+
color: #333;
11+
font-size: 18px;
2012
}
2113
* {
2214
box-sizing: border-box;
@@ -31,13 +23,13 @@
3123
}
3224
.control {
3325
display: block;
34-
margin-bottom: 0.5em;
26+
margin-bottom: 1em;
3527
}
3628
label {
3729
display: inline-block;
38-
width: 40%;
3930
text-align: right;
4031
padding-right: 0.5em;
32+
width: 40%;
4133
}
4234
.radio label {
4335
width: 100%;
@@ -50,25 +42,32 @@
5042
<progress-arc width="200" height="200" stroke="{{ stroke }}" stroke-width="{{ strokeWidth }}" progress="{{ progress }}" counter-clockwise="{{ counterClockwise }}"></progress-arc>
5143
<div class="control">
5244
<label for="progress">Progress</label>
53-
<input type="range" min="0" max="1" step="0.01" ng-model="progress" id="progress" />
54-
<span>{{ progress }}</span>
45+
<input type="range" min="0" max="1" step="0.001" ng-model="progress" id="progress" />
46+
<span>{{ progress | number:3 }}</span>
5547
</div>
5648
<div class="control">
5749
<label for="stroke-width">Stroke Width</label>
58-
<input type="range" min="1" max="300" step="1" ng-model="strokeWidth" id="stroke-width" />
50+
<input type="range" min="1" max="100" step="1" ng-model="strokeWidth" id="stroke-width" />
5951
<span>{{ strokeWidth }}</span>
6052
</div>
6153
<div class="control">
6254
<label for="stroke">Stroke</label>
63-
<select id="stroke" ng-model="stroke">
64-
<option value="red">red</option>
65-
<option value="black">black</option>
66-
<option value="#abcabc">#abcabc</option>
67-
</select>
55+
<input type="text" ng-model="stroke">
6856
</div>
6957
<div class="control radio">
7058
<label><input type="checkbox" ng-model="counterClockwise" ng-true-value="1" ng-false-value="0" /> Counter-clockwise</label>
7159
</div>
7260
</div>
61+
<script src="../bower_components/angular/angular.min.js"></script>
62+
<script src="../angular-progress-arc.js"></script>
63+
<script>
64+
var app = angular.module('example', ['angular-progress-arc']);
65+
app.controller('ExampleCtrl', function ($scope) {
66+
$scope.progress = 0.75;
67+
$scope.strokeWidth = 50;
68+
$scope.stroke = '#333';
69+
$scope.counterClockwise = '1';
70+
});
71+
</script>
7372
</body>
7473
</html>

0 commit comments

Comments
 (0)