From ca3ad6305ec0655ad8475a12ac2228b61cdd9ba0 Mon Sep 17 00:00:00 2001
From: Lionel LASKE <llaske@c2s.fr>
Date: Sat, 25 Aug 2012 20:23:36 +0000
Subject: Init commit

---
(limited to 'html/lib/onyx/source/Slider.js')

diff --git a/html/lib/onyx/source/Slider.js b/html/lib/onyx/source/Slider.js
new file mode 100644
index 0000000..037adb0
--- /dev/null
+++ b/html/lib/onyx/source/Slider.js
@@ -0,0 +1,109 @@
+/**
+	A control that presents a range of selection options in the form of a
+	horizontal slider with a control knob.  The knob may be tapped and dragged
+	to the desired location.
+	
+		{kind: "onyx.Slider", value: 30}
+	
+	The *onChanging* event is fired when dragging the control knob.
+	The *onChange* event is fired when the position is set, either by finishing
+	a drag or by tapping the bar.
+*/
+enyo.kind({
+	name: "onyx.Slider",
+	kind: "onyx.ProgressBar",
+	classes: "onyx-slider",
+	published: {
+		value: 0,
+		lockBar: true,
+		tappable: true
+	},
+	events: {
+		onChange: "",
+		onChanging: "",
+		onAnimateFinish: ""
+	},
+	showStripes: false,
+	//* @protected
+	handlers: {
+		ondragstart: "dragstart",
+		ondrag: "drag",
+		ondragfinish: "dragfinish"
+	},
+	moreComponents: [
+		{kind: "Animator", onStep: "animatorStep", onEnd: "animatorComplete"},
+		{classes: "onyx-slider-taparea"},
+		{name: "knob", classes: "onyx-slider-knob"}
+	],
+	create: function() {
+		this.inherited(arguments);
+		this.createComponents(this.moreComponents);
+		this.valueChanged();
+	},
+	valueChanged: function() {
+		this.value = this.clampValue(this.min, this.max, this.value);
+		var p = this.calcPercent(this.value);
+		this.updateKnobPosition(p);
+		if (this.lockBar) {
+			this.setProgress(this.value);
+		}
+	},
+	updateKnobPosition: function(inPercent) {
+		this.$.knob.applyStyle("left", inPercent + "%");
+	},
+	calcKnobPosition: function(inEvent) {
+		var x = inEvent.clientX - this.hasNode().getBoundingClientRect().left;
+		return (x / this.getBounds().width) * (this.max - this.min) + this.min;
+	},
+	dragstart: function(inSender, inEvent) {
+		if (inEvent.horizontal) {
+			inEvent.preventDefault();
+			this.dragging = true;
+			return true;
+		}
+	},
+	drag: function(inSender, inEvent) {
+		if (this.dragging) {
+			var v = this.calcKnobPosition(inEvent);
+			this.setValue(v);
+			this.doChanging({value: this.value});
+			return true;
+		}
+	},
+	dragfinish: function(inSender, inEvent) {
+		this.dragging = false;
+		inEvent.preventTap();
+		this.doChange({value: this.value});
+		return true;
+	},
+	tap: function(inSender, inEvent) {
+		if (this.tappable) {
+			var v = this.calcKnobPosition(inEvent);
+			this.tapped = true;
+			this.animateTo(v);
+			return true;
+		}
+	},
+	//* @public
+	//* Animates to the given value.
+	animateTo: function(inValue) {
+		this.$.animator.play({
+			startValue: this.value,
+			endValue: inValue,
+			node: this.hasNode()
+		});
+	},
+	//* @protected
+	animatorStep: function(inSender) {
+		this.setValue(inSender.value);
+		return true;
+	},
+	animatorComplete: function(inSender) {
+		if (this.tapped) {
+			this.tapped = false;
+			this.doChange({value: this.value});
+		}
+		this.doAnimateFinish(inSender);
+		return true;
+	}
+});
\ No newline at end of file
--
cgit v0.9.1