Merge branch 'nativeselectmenu'

js/jquery.mobile.forms.select.js

@@ -18,7 +18,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 		menuPageTheme: 'b',
 		overlayTheme: 'a',
 		hidePlaceholderMenuItems: true,
-		closeText: 'Close'
+		closeText: 'Close',
+		useNativeMenu: false
 	},
 	_create: function(){
 
@@ -27,7 +28,6 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 			o = this.options,
 
 			select = this.element
-						.attr( "tabindex", "-1" )
 						.wrap( "<div class='ui-select'>" ),
 
 			selectID = select.attr( "id" ),
@@ -115,6 +115,9 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 
 			menuType;
 
+		// set to native menu
+		o.useNativeMenu = select.is( "[data-native]");
+
 		// add counter for multi selects
 		if( isMultiple ){
 			self.buttonCount = $('<span>')
@@ -155,46 +158,72 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 		select
 			.change(function(){
 				self.refresh();
-			})
-			.focus(function(){
-				$(this).blur();
-				button.focus();
 			});
 			
 		//unbind dialog destroy on close
 		menuPage.unbind("pagehide.dialog");
 
-		//button events
-		button
-			.bind( "touchstart" ,function( event ){
-				//set startTouches to cached copy of
-				$( this ).data( "startTouches", $.extend({}, event.originalEvent.touches[ 0 ]) );
-			})
-			.bind( $.support.touch ? "touchend" : "mouseup" , function( event ){
-				//if it's a scroll, don't open
-				if( $( this ).data( "moved" ) ){
-					$( this ).removeData( "moved" );
-				}
-				else{
-					self.open();
-				}
-				event.preventDefault();
-			})
-			.bind( "touchmove", function( event ){
-				//if touch moved enough, set data moved and don't open menu
-				var thisTouches = event.originalEvent.touches[ 0 ],
+		//support for using the native select menu with a custom button
+		if( o.useNativeMenu ){
+
+			select
+				.appendTo(button)
+				.bind( "touchstart mousedown", function( e ){
+					//add active class to button
+					button.addClass( $.mobile.activeBtnClass );
+
+					//ensure button isn't clicked
+					e.stopPropagation();
+				})
+				.bind( "focus mouseover", function(){
+					button.trigger( "mouseover" );
+				})
+				.bind( "blur mouseout", function(){
+					button
+						.trigger( "mouseout" )
+						.removeClass( $.mobile.activeBtnClass );
+				});
+
+			button.attr( "tabindex", "-1" );
+		} else {
+
+			select
+				.attr( "tabindex", "-1" )
+				.focus(function(){
+					$(this).blur();
+					button.focus();
+				});
+
+			//button events
+			button
+				.bind( "touchstart" , function( event ){
+					//set startTouches to cached copy of
+					$( this ).data( "startTouches", $.extend({}, event.originalEvent.touches[ 0 ]) );
+				})
+				.bind( $.support.touch ? "touchend" : "mouseup" , function( event ){
+					//if it's a scroll, don't open
+					if( $( this ).data( "moved" ) ){
+						$( this ).removeData( "moved" );
+					} else {
+						self.open();
+					}
+					event.preventDefault();
+				})
+				.bind( "touchmove", function( event ){
+					//if touch moved enough, set data moved and don't open menu
+					var thisTouches = event.originalEvent.touches[ 0 ],
 					startTouches = $( this ).data( "startTouches" ),
 					deltaX = Math.abs(thisTouches.pageX - startTouches.pageX),
 					deltaY = Math.abs(thisTouches.pageY - startTouches.pageY);
 
-				if( deltaX > 10 || deltaY > 10 ){
-					$( this ).data( "moved", true );
-				}
-			});
+					if( deltaX > 10 || deltaY > 10 ){
+						$( this ).data( "moved", true );
+					}
+				});
+		}
 
 		//events for list items
 		list.delegate("li:not(.ui-disabled, .ui-li-divider)", "click", function(event){
-
 			// clicking on the list item fires click on the link in listview.js.
 			// to prevent this handler from firing twice if the link isn't clicked on,
 			// short circuit unless the target is the link
@@ -227,16 +256,19 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 		});
 
 		//events on "screen" overlay + close button
-		screen.add( headerClose ).add( menuPageClose ).click(function(event){
-			self.close();
-			event.preventDefault();
+		screen
+			.add( headerClose )
+			.add( menuPageClose )
+			.bind("click", function(event){
+				self.close();
+				event.preventDefault();
 
-			// if the dialog's close icon was clicked, prevent the dialog's close
-			// handler from firing. selectmenu's should take precedence
-			if( $.contains(menuPageClose[0], event.target) ){
-				event.stopImmediatePropagation();
-			}
-		});
+				// if the dialog's close icon was clicked, prevent the dialog's close
+				// handler from firing. selectmenu's should take precedence
+				if( $.contains(menuPageClose[0], event.target) ){
+					event.stopImmediatePropagation();
+				}
+			});
 	},
 
 	_buildList: function(){
@@ -424,10 +456,15 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 
 			focusMenuItem();
 		}
+
+		// wait before the dialog can be closed
+		setTimeout(function(){
+		 	self.isOpen = true;
+		}, 400);
 	},
 
 	close: function(){
-		if( this.options.disabled ){ return; }
+		if( this.options.disabled || !this.isOpen ){ return; }
 		var self = this;
 
 		function focusButton(){
@@ -451,6 +488,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 			focusButton();
 		}
 
+		// allow the dialog to be closed again
+		this.isOpen = false;
 	},
 
 	disable: function(){

tests/unit/select/index.html

@@ -61,6 +61,15 @@
 </style>
 
 <div id="foo" data-role="page">
+	<div data-role="fieldcontain" id="select-choice-few-container">
+		<select name="select-choice-few" id="select-choice-few">
+			<option value="standard">Standard: 7 day</option>
+			<option value="rush">Rush: 3 days</option>
+			<option value="express">Express: next day</option>
+			<option value="overnight">Overnight</option>
+		</select>
+	</div>
+
 	<div data-role="fieldcontain" id="select-choice-many-container">
 		<label for="select-choice-many" class="select">Your state:</label>
 		<select name="select-choice-many" id="select-choice-many">

tests/unit/select/select_events.js

@@ -22,4 +22,36 @@
 		select.trigger(mouseUpTouchEnd);
 		same(menu.parents('.ui-dialog').length, 1);
 	});
+
+	test( "firing an immediate click on the select screen overlay doesn't close it", function(){
+		$.Event.prototype.originalEvent = {
+			touches: [ 'foo' ]
+		};
+
+		$("#select-choice-few-button").trigger(mouseUpTouchEnd);
+		$(".ui-selectmenu-screen").click();
+		same($("#select-choice-few-menu").parent(".ui-selectmenu-hidden").length, 0);
+	});
+
+	test( "firing a click at least 400 ms later on the select screen overlay does close it", function(){
+		$.Event.prototype.originalEvent = {
+			touches: [ 'foo' ]
+		};
+
+		$("#select-choice-few-button").trigger(mouseUpTouchEnd);
+
+		// click the first menu item
+		setTimeout(function(){
+			$("#select-choice-few-menu a:first").click();
+		}, 400);
+
+		// verify the menu is hidden
+		setTimeout(function(){
+			same($("#select-choice-few-menu").parent(".ui-selectmenu-hidden").length, 1);
+			start();
+		}, 500);
+
+		stop();
+	});
+
 })(jQuery);

themes/default/jquery.mobile.forms.select.css

@@ -3,8 +3,10 @@
 * Copyright (c) jQuery Project
 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
 */
-.ui-select { display: block; }
+.ui-select { display: block; position: relative; }
 .ui-select select { position: absolute; left: -9999px; top: -9999px; }
+.ui-select a select { cursor: pointer; -webkit-appearance: button; left: 0; top:0; width: 100%; height: 100%; opacity: 0; }
+
 .ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; } 
 .ui-select .ui-btn-icon-right .ui-icon { right: 15px;  }