First commit

application/elements/toggle.js

@@ -0,0 +1,96 @@
+
+
+export default class toggle{
+
+	boxCursor			= "pointer";
+
+	cursor				= "pointer";
+
+	boxBorderRadius		= 16;
+
+	boxBackground		= "grey"
+
+	boxWidth			= 50;
+
+	boxHeight			= 24;
+
+	height				= 20;
+
+	width				= 20;
+
+	margin				= 2;
+
+	borderRadius		= "100%"
+
+	background			= "white";
+
+	transform;
+
+	value				= true;
+
+	transition			= "0.2s";
+
+	boxTransition		= "0.2s";
+
+	create() {
+
+		if( this.value ) {
+
+			this.transform 		= "translateX(130%)";
+
+			this.boxBackground	= "green";
+
+
+		} else {
+
+			this.transform 		= "translateX(0%)";
+
+			this.boxBackground	= "grey";
+
+		}
+
+	}
+
+	boxClick( event ) {
+
+		this.updateState( event );
+
+
+	}
+
+	click( event ) {
+
+		this.updateState( event );
+
+	}
+
+
+	updateState( event ) {
+
+		if( this.value ) {
+
+			this.transform 		= "translateX(0%)";
+
+			this.boxBackground	= "grey";
+
+			this.value			= false;
+
+		} else {
+
+			this.transform 		= "translateX(130%)";
+
+			this.value			= true;
+
+			this.boxBackground	= "green";
+
+		}
+
+		if( this.change ) {
+
+			this.change( event );
+
+		}
+
+	}
+	
+}