Timob 7218 Switch implementation.

apidoc/Titanium/UI/Switch.yml

@@ -7,6 +7,9 @@ description: |
 
     On iOS, the switch appears as an iOS on/off switch and doesn't have any text
     associated with it. 
+
+    On Mobile Web, a switch always has text associated with it, and appears as a
+    toggle button, similar to Android.
 
     Use the <Titanium.UI.createSwitch> method to create a switch.
 extends: Titanium.UI.View
@@ -22,14 +25,14 @@ properties:
   - name: color
     summary: Color to use for switch text.
     type: String
-    platforms: [android]
+    platforms: [android, mobileweb]
   - name: enabled
     summary: Set to `true` to enable the switch, `false` to disable the switch.
     type: Boolean
   - name: font
     summary: Font to use for the switch text.
     type: Font
-    platforms: [android]
+    platforms: [android, mobileweb]
   - name: style
     summary: Style of the switch, either checkbox or toggle button.
     description: |
@@ -43,7 +46,7 @@ properties:
         Text alignment, specified using one of the <Titanium.UI> text alignment constants: [TEXT_ALIGNMENT_LEFT](Titanium.UI.TEXT_ALIGNMENT_LEFT), [TEXT_ALIGNMENT_CENTER](Titanium.UI.TEXT_ALIGNMENT_CENTER), or [TEXT_ALIGNMENT_RIGHT](Titanium.UI.TEXT_ALIGNMENT_RIGHT).
     type: [String,Number]
     default: <Titanium.UI.TEXT_ALIGNMENT_CENTER>
-    platforms: [android]
+    platforms: [android, mobileweb]
   - name: title
     summary: text to display with checkbox. Used if style is <Ti.UI.Android.SWITCH_STYLE_CHECKBOX>
     type: String
@@ -53,13 +56,13 @@ properties:
     description: |
         Used if style is <Titanium.UI.Android.SWITCH_STYLE_TOGGLEBUTTON>
     type: String
-    platforms: [android]
+    platforms: [android, mobileweb]
   - name: titleOn
     summary: Text to display when a toggle button-style switch is toggled off.
     description: |
         Used if style is <Titanium.UI.Android.SWITCH_STYLE_TOGGLEBUTTON>
     type: String
-    platforms: [android]
+    platforms: [android, mobileweb]
   - name: value
     summary: Current switch value, `true` if the switch is on, and `false` if switch is
         off.
@@ -73,7 +76,7 @@ properties:
         [TEXT_VERTICAL_ALIGNMENT_TOP](Titanium.UI.TEXT_VERTICAL_ALIGNMENT_TOP).
     type: [Number,String]
     default: Titanium.UI.TEXT_VERTICAL_ALIGNMENT_CENTER
-    platforms: [android]
+    platforms: [android, mobileweb]
 
 examples:
   - title: Simple Switch Example

mobileweb/src/Ti/UI/Button.js

@@ -41,6 +41,21 @@ define("Ti/UI/Button", ["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/
 
 			this._setDefaultLook();
 
+			// Add the enabled/disabled dimmer
+			this._disabledDimmer = dom.create("div", {
+				className: "TiUISwitchDisableDimmer",
+				style: {
+					pointerEvents: "none",
+					opacity: 0,
+					backgroundColor: "white",
+					width: "100%",
+					height: "100%",
+					position: "absolute",
+					top: 0,
+					left: 0
+				}
+			}, this.domNode);
+
 			this.addEventListener("touchstart",function(){
 				if (this.selectedColor) {
 					setStyle(this._buttonTitle,"color",this.selectedColor);
@@ -62,22 +77,6 @@ define("Ti/UI/Button", ["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/
 
 		_defaultHeight: "auto",
 
-		backgroundColor: postDoBackground,
-
-			backgroundDisabledColor: postDoBackground,
-
-			backgroundDisabledImage: postDoBackground,
-
-			backgroundFocusedColor: postDoBackground,
-
-			backgroundFocusedImage: postDoBackground,
-
-			backgroundImage: postDoBackground,
-
-			backgroundSelectedColor: postDoBackground,
-
-			backgroundSelectedImage: postDoBackground,
-
 		_updateLook: function() {
 			if (this.backgroundColor || this.backgroundDisabledColor || this.backgroundDisabledImage || this.backgroundFocusedColor || 
 				this.backgroundFocusedImage || this.backgroundImage || this.backgroundSelectedColor || this.backgroundSelectedImage) {
@@ -106,6 +105,9 @@ define("Ti/UI/Button", ["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/
 				this.domNode.className = className.substring(0,className.length - " TiUIButtonDefault".length);
 				this.borderWidth = this._previousBorderWidth;
 				this.borderColor = this._previousBorderColor;
+				setStyle(this._disabledDimmer,{
+					opacity: 0
+				});
 			}
 		},
 
@@ -151,6 +153,27 @@ define("Ti/UI/Button", ["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/
 					return value;
 				}
 			},
+
+			enabled: {
+				set: function(value, oldValue) {
+
+					if (value !== oldValue) {
+						if (!value) {
+							this._hasDefaultLook && setStyle(this._disabledDimmer,{
+								opacity: 0.5
+							});
+						} else {
+							this._hasDefaultLook && setStyle(this._disabledDimmer,{
+								opacity: 0
+							});
+						}
+						this._setTouchEnabled(value);
+					}
+					return value;
+				},
+				value: true
+			},
+
 			image: {
 				set: function(value) {
 					require.on(this._buttonImage, "load", lang.hitch(this, function () {