forked from angular-ui/bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprogressbar.js
More file actions
106 lines (94 loc) · 3.42 KB
/
progressbar.js
File metadata and controls
106 lines (94 loc) · 3.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
angular.module('ui.bootstrap.progressbar', ['ui.bootstrap.transition'])
.constant('progressConfig', {
animate: true,
autoType: false,
stackedTypes: ['success', 'info', 'warning', 'danger']
})
.controller('ProgressBarController', ['$scope', '$attrs', 'progressConfig', function($scope, $attrs, progressConfig) {
// Whether bar transitions should be animated
var animate = angular.isDefined($attrs.animate) ? $scope.$eval($attrs.animate) : progressConfig.animate;
var autoType = angular.isDefined($attrs.autoType) ? $scope.$eval($attrs.autoType) : progressConfig.autoType;
var stackedTypes = angular.isDefined($attrs.stackedTypes) ? $scope.$eval('[' + $attrs.stackedTypes + ']') : progressConfig.stackedTypes;
// Create bar object
this.makeBar = function(newBar, oldBar, index) {
var newValue = (angular.isObject(newBar)) ? newBar.value : (newBar || 0);
var oldValue = (angular.isObject(oldBar)) ? oldBar.value : (oldBar || 0);
var type = (angular.isObject(newBar) && angular.isDefined(newBar.type)) ? newBar.type : (autoType) ? getStackedType(index || 0) : null;
return {
from: oldValue,
to: newValue,
type: type,
animate: animate
};
};
function getStackedType(index) {
return stackedTypes[index];
}
this.addBar = function(bar) {
$scope.bars.push(bar);
$scope.totalPercent += bar.to;
};
this.clearBars = function() {
$scope.bars = [];
$scope.totalPercent = 0;
};
this.clearBars();
}])
.directive('progress', function() {
return {
restrict: 'EA',
replace: true,
controller: 'ProgressBarController',
scope: {
value: '=percent',
onFull: '&',
onEmpty: '&'
},
templateUrl: 'template/progressbar/progress.html',
link: function(scope, element, attrs, controller) {
scope.$watch('value', function(newValue, oldValue) {
controller.clearBars();
if (angular.isArray(newValue)) {
// Stacked progress bar
for (var i=0, n=newValue.length; i < n; i++) {
controller.addBar(controller.makeBar(newValue[i], oldValue[i], i));
}
} else {
// Simple bar
controller.addBar(controller.makeBar(newValue, oldValue));
}
}, true);
// Total percent listeners
scope.$watch('totalPercent', function(value) {
if (value >= 100) {
scope.onFull();
} else if (value <= 0) {
scope.onEmpty();
}
}, true);
}
};
})
.directive('progressbar', ['$transition', function($transition) {
return {
restrict: 'EA',
replace: true,
scope: {
width: '=',
old: '=',
type: '=',
animate: '='
},
templateUrl: 'template/progressbar/bar.html',
link: function(scope, element) {
scope.$watch('width', function(value) {
if (scope.animate) {
element.css('width', scope.old + '%');
$transition(element, {width: value + '%'});
} else {
element.css('width', value + '%');
}
});
}
};
}]);