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
|
/**
A control that shows the current progress of a process in a horizontal bar.
{kind: "onyx.ProgressBar", progress: 10}
To animate progress changes, call the *animateProgressTo* method:
this.$.progressBar.animateProgressTo(50);
You may customize the color of the bar by applying a style via the
*barClasses* property, e.g.:
{kind: "onyx.ProgressBar", barClasses: "onyx-dark"}
When the *showStripes* property is true (the default), stripes are shown in
the progress bar; when *animateStripes* is true (also the default), these
stripes are animated. The animated stripes use CSS3 gradients and animation
to produce the effects. In browsers that don't support these features, the
effects will not be visible.
*/
enyo.kind({
name: "onyx.ProgressBar",
classes: "onyx-progress-bar",
published: {
progress: 0,
min: 0,
max: 100,
barClasses: "",
showStripes: true,
animateStripes: true
},
events: {
onAnimateProgressFinish: ""
},
components: [
{name: "progressAnimator", kind: "Animator", onStep: "progressAnimatorStep", onEnd: "progressAnimatorComplete"},
{name: "bar", classes: "onyx-progress-bar-bar"}
],
//* @protected
create: function() {
this.inherited(arguments);
this.progressChanged();
this.barClassesChanged();
this.showStripesChanged();
this.animateStripesChanged();
},
barClassesChanged: function(inOld) {
this.$.bar.removeClass(inOld);
this.$.bar.addClass(this.barClasses);
},
showStripesChanged: function() {
this.$.bar.addRemoveClass("striped", this.showStripes);
},
animateStripesChanged: function() {
this.$.bar.addRemoveClass("animated", this.animateStripes);
},
progressChanged: function() {
this.progress = this.clampValue(this.min, this.max, this.progress);
var p = this.calcPercent(this.progress);
this.updateBarPosition(p);
},
clampValue: function(inMin, inMax, inValue) {
return Math.max(inMin, Math.min(inValue, inMax));
},
calcRatio: function(inValue) {
return (inValue - this.min) / (this.max - this.min);
},
calcPercent: function(inValue) {
return this.calcRatio(inValue) * 100;
},
updateBarPosition: function(inPercent) {
this.$.bar.applyStyle("width", inPercent + "%");
},
//* @public
//* Animates progress to the given value.
animateProgressTo: function(inValue) {
this.$.progressAnimator.play({
startValue: this.progress,
endValue: inValue,
node: this.hasNode()
});
},
//* @protected
progressAnimatorStep: function(inSender) {
this.setProgress(inSender.value);
return true;
},
progressAnimatorComplete: function(inSender) {
this.doAnimateProgressFinish(inSender);
return true;
}
});
|
