Timob 7199 Option dialog implementation

apidoc/Titanium/UI/OptionDialog.yml

@@ -3,7 +3,7 @@ name: Titanium.UI.OptionDialog
 summary: The Option Dialog is created by <Titanium.UI.createOptionDialog> and allows you to show a modal dialog of one or more options to the user.
 extends: Titanium.Proxy
 since: "0.8"
-platforms: [android, iphone, ipad]
+
 methods:
   - name: show
     summary: cause the dialog to become visible

mobileweb/src/Ti/UI.js

@@ -222,8 +222,8 @@ define("Ti/UI", ["Ti/_/dom", "Ti/_/Evented", "Ti/_/lang", "Ti/_/ready", "Ti/_/st
 			return new Ti.UI.Label(args);
 		},
 
-		createOptionDialog: function() {
-			console.debug('Method "Titanium.UI.createOptionDialog" is not implemented yet.');
+		createOptionDialog: function(args) {
+			return new Ti.UI.OptionDialog(args);
 		},
 
 		createPicker: function(args) {

mobileweb/src/Ti/UI/AlertDialog.js

@@ -60,6 +60,9 @@ define("Ti/UI/AlertDialog", ["Ti/_/declare", "Ti/_/Evented"], function(declare,
 					title: title,
 					index: index
 				});
+				if (index === self.cancel) {
+					button.domNode.className += " TiUIButtonCancel";
+				}
 				alertDialog.add(button);
 				button.addEventListener("singletap",function(){
 					alertWindow.close();

mobileweb/src/Ti/UI/OptionDialog.js

@@ -0,0 +1,127 @@
+define("Ti/UI/OptionDialog", ["Ti/_/declare", "Ti/_/Evented"], function(declare, Evented) {
+
+	var undef;
+
+	return declare("Ti.UI.OptionDialog", Evented, {
+		show: function() {
+
+			// Create the window and a background to dim the current view
+			var optionsWindow = this._optionsWindow = Ti.UI.createWindow();
+			var dimmingView = Ti.UI.createView({
+				backgroundColor: "black",
+				opacity: 0,
+				left: 0,
+				top: 0,
+				right: 0,
+				bottom: 0
+			});
+			optionsWindow.add(dimmingView);
+
+			// Create the options dialog itself
+			var optionsDialog = Ti.UI.createView({
+				width: "100%",
+				height: "auto",
+				bottom: 0,
+				backgroundColor: "white",
+				layout: "vertical",
+				opacity: 0
+			});
+			optionsWindow.add(optionsDialog);
+
+			// Add the title
+			optionsDialog.add(Ti.UI.createLabel({
+				text: this.title,
+				font: {fontWeight: "bold"},
+				left: 5,
+				right: 5,
+				top: 5,
+				height: "auto",
+				textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
+			}));
+
+			var self = this;
+			function addButton(title, index, bottom) {
+				var button = Ti.UI.createButton({
+					left: 5,
+					right: 5,
+					top: 5,
+					bottom: bottom,
+					height: "auto",
+					title: title,
+					index: index
+				});
+				if (index === self.destructive) {
+					button.domNode.className += " TiUIButtonDestructive";
+				} else if (index === self.cancel) {
+					button.domNode.className += " TiUIButtonCancel";
+				}
+				optionsDialog.add(button);
+				button.addEventListener("singletap",function(){
+					optionsWindow.close();
+					self._optionsWindow = undef;
+					self.fireEvent("click",{
+						index: index,
+						cancel: self.cancel,
+						destructive: self.destructive
+					});
+				});
+			}
+
+			// Add the buttons
+			var options = this.options,
+				i = 0;
+			if (require.is(options,"Array")) {
+				for (; i < options.length; i++) {
+					addButton(options[i], i, i === options.length - 1 ? 5 : 0);
+				}
+			}
+
+			// Show the options dialog
+			optionsWindow.open();
+
+			// Animate the background after waiting for the first layout to occur
+			setTimeout(function(){
+				optionsDialog.animate({
+					bottom: -optionsDialog._measuredHeight,
+					opacity: 1,
+					duration: 0
+				});
+				dimmingView.animate({
+					opacity: 0.5,
+					duration: 150
+				}, function(){
+					setTimeout(function(){
+						optionsDialog.animate({
+							bottom: 0,
+							duration: 150
+						});
+					},0);
+				});
+			},30);
+		},
+
+		properties: {
+
+			cancel: -1,
+
+			destructive: -1,
+
+			options: undef,
+
+			title: "",
+
+			titleid: {
+				get: function(value) {
+					console.debug('Property "Titanium.UI.optionsDialog#.titleid" is not implemented yet.');
+					return value;
+				},
+				set: function(value) {
+					console.debug('Property "Titanium.UI.optionsDialog#.titleid" is not implemented yet.');
+					return value;
+				}
+			}
+		}
+
+	});
+
+});

mobileweb/src/titanium.css

@@ -151,6 +151,86 @@ textarea {
 		to(#fff));
 }
 
+.TiUIButtonDestructive {
+	background: -moz-linear-gradient(
+		top,
+		#f00 0%,
+		#f00 50%,
+		#a00);
+	background: -webkit-gradient(
+		linear, left top, left bottom, 
+		from(#f00),
+		color-stop(0.50, #f00),
+		to(#a00));
+	color: white;
+}
+
+.TiUIButtonDestructive:hover {
+	background: -moz-linear-gradient(
+		top,
+		#f00 0%,
+		#f00 50%,
+		#700);
+	background: -webkit-gradient(
+		linear, left top, left bottom, 
+		from(#f00),
+		color-stop(0.50, #f00),
+		to(#700));
+}
+
+.TiUIButtonDestructive:active {
+	background: -moz-linear-gradient(
+		top,
+		#a00 0%,
+		#f00 50%,
+		#f00);
+	background: -webkit-gradient(
+		linear, left top, left bottom, 
+		from(#b00),
+		color-stop(0.50, #f00),
+		to(#f00));
+}
+
+.TiUIButtonCancel {
+	background: -moz-linear-gradient(
+		top,
+		#666 0%,
+		#666 50%,
+		#333);
+	background: -webkit-gradient(
+		linear, left top, left bottom, 
+		from(#666),
+		color-stop(0.50, #666),
+		to(#333));
+	color: white;
+}
+
+.TiUIButtonCancel:hover {
+	background: -moz-linear-gradient(
+		top,
+		#666 0%,
+		#666 50%,
+		#222);
+	background: -webkit-gradient(
+		linear, left top, left bottom, 
+		from(#666),
+		color-stop(0.50, #666),
+		to(#222));
+}
+
+.TiUIButtonCancel:active {
+	background: -moz-linear-gradient(
+		top,
+		#333 0%,
+		#666 50%,
+		#666);
+	background: -webkit-gradient(
+		linear, left top, left bottom, 
+		from(#333),
+		color-stop(0.50, #666),
+		to(#666));
+}
+
 .TiUITab {
 	background-color: silver;
 	border: solid 1px black;

support/mobileweb/compiler.py

@@ -126,6 +126,7 @@ def __init__(self,project_dir,deploytype):
 				'Ti/UI/Button.js',
 				'Ti/UI/ImageView.js',
 				'Ti/UI/Label.js',
+				'Ti/UI/OptionDialog.js',
 				'Ti/UI/ScrollableView.js',
 				'Ti/UI/ScrollView.js',
 				'Ti/UI/Slider.js',