Merge pull request #3 from ShiftyAxel/slideable

AnimatedToggleButton Modifications

Author: MaKleSoft

v2/AnimatedToggleButton/AnimatedToggleButton.css

@@ -13,9 +13,11 @@
 }
 
 .onyx-toggle-button.onyx-animated-toggle-button .onyx-toggle-content.off {
-	margin-left: 30px;
+	position:absolute;
+	left:24px;
 }
 
 .onyx-toggle-button.onyx-animated-toggle-button .onyx-toggle-content.on {
-	margin-right: 30px;
+	position:absolute;
+	right:24px;
 }

v2/AnimatedToggleButton/AnimatedToggleButton.js

@@ -5,14 +5,16 @@ enyo.kind({
 	name: "onyx.custom.AnimatedToggleButton",
 	kind: "onyx.ToggleButton",
 	classes: "onyx-animated-toggle-button",
+	style: "overflow:hidden;",
 	components: [
-		{name: "contentOn", classes: "onyx-toggle-content on"},
-		{name: "contentOff", classes: "onyx-toggle-content off"},
-		{kind: "onyx.Slideable", name: "knob", axis: "h", unit: "px", max: 30, min: 0, overMoving: false,
-			classes: "onyx-toggle-button-knob", ondragfinish: "tap"}
+		{kind: "enyo.Slideable", name: "knob", axis: "h", unit: "px", max: 30, min: 0, overMoving: false,
+			classes: "onyx-toggle-button-knob", ondragfinish: "tap", components:[
+				{name: "contentOn", classes: "onyx-toggle-content on"},
+				{name: "contentOff", classes: "onyx-toggle-content off"},
+			]}
 	],
 	valueChanged: function() {
-		this.inherited(arguments);
+		this.addRemoveClass("off", !this.value);
 		this.calculateSlidingBounds();
 		if (this.value) {
 			this.$.knob.animateToMax();

v2/AnimatedToggleButton/example.html

@@ -5,6 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<script src="../enyojs/enyo/enyo.js" type="text/javascript"></script>
 	<script src="../enyojs/lib/onyx/package.js" type="text/javascript"></script>
+	<script src="../enyojs/lib/layout/package.js" type="text/javascript"></script>
 	<script src="package.js"></script>
 
 	<style>