You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.6 KiB
92 lines
2.6 KiB
/**
|
|
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;
|
|
}
|
|
});
|