1 files changed, 92 insertions, 0 deletions
diff --git a/html/lib/onyx/source/ProgressBar.js b/html/lib/onyx/source/ProgressBar.js
new file mode 100644
index 0000000..5a41fac
--- /dev/null
+++ b/html/lib/onyx/source/ProgressBar.js
@@ -0,0 +1,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;
+	}
+});
+\ No newline at end of file