jrtechs-sugarizer-lite/activities/FoodChain.activity/lib/onyx/source/ProgressBar.js

/**
	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;
	}
});