From 1d9fac52f758579941691e202f47062b9e6c56df Mon Sep 17 00:00:00 2001
From: Felix Nagel <info@felixnagel.com>
Date: Sat, 24 Sep 2011 03:08:03 +0200
Subject: [PATCH] Selectmenu: refresh method, value option, code cleanup

---
 demos/selectmenu/default.html |   4 +-
 ui/jquery.ui.selectmenu.js    | 192 +++++++++++++++++-----------------
 2 files changed, 99 insertions(+), 97 deletions(-)

diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html
index f7325dd41..cbeb62710 100644
--- a/demos/selectmenu/default.html
+++ b/demos/selectmenu/default.html
@@ -40,8 +40,8 @@
 		<label for="speedA">Select a Speed:</label>
 		<select name="speedA" id="speedA">
 			<option value="Slower">Slower</option>
-			<option value="Slow" selected="selected">Slow</option>
-			<option value="Medium">Medium</option>
+			<option value="Slow">Slow</option>
+			<option value="Medium" selected="selected">Medium</option>
 			<option value="Fast">Fast</option>
 			<option value="Faster">Faster</option>
 		</select>
diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js
index a0aa14ca7..4db5f6d56 100644
--- a/ui/jquery.ui.selectmenu.js
+++ b/ui/jquery.ui.selectmenu.js
@@ -21,6 +21,7 @@ $.widget( "ui.selectmenu", {
 	defaultElement: "<select>",
 	options: {
 		dropdown: true,
+		iconWidth: 26,
 		wrapperElement: "<div />",
 		appendTo: "body",
 		position: {
@@ -28,51 +29,52 @@ $.widget( "ui.selectmenu", {
 			at: "left bottom",
 			collision: "none"
 		},
-		source: null,
-
-		iconWidth: 26,
-		
+		source: null,	
 		// callbacks
 		open: null,
 		focus: null,
 		select: null,
 		close: null,
-		change: null
+		change: null,
 	},
 
 	_create: function() {
 		var self = this,
 			options = this.options,
-			tabindex = this.element.attr( 'tabindex' );
-		
-		// set a default id value, generate a new random one if not set by developer
-		var selectmenuId = self.element.attr( 'id' ) || 'ui-selectmenu-' + Math.random().toString( 16 ).slice( 2, 10 );
-
+			tabindex = this.element.attr( 'tabindex' )
+			// set a default id value, generate a new random one if not set by developer
+			selectmenuId = self.element.attr( 'id' ) || 'ui-selectmenu-' + Math.random().toString( 16 ).slice( 2, 10 );
+			
 		// quick array of button and menu id's
 		self.ids = [ selectmenuId + '-button', selectmenuId + '-menu' ];
 		
 		// get options
 		self.items = self.element.find( 'option' );
 		
+		// set options value 		
+		options.value = self.element[0].value;
+		
 		// catch click event of the label
 		self.element.bind( 'click.selectmenu',  function() {
 			self.newelement.focus();			
 			return false;
-		});
+		})
+		.hide();
 		
 		// create button
 		self.newelement = $( '<a />', {
 				href: '#' + selectmenuId,
 				tabindex: ( tabindex ? tabindex : self.element.attr( 'disabled' ) ? 1 : 0 ),
-				'aria-haspopup': true,
-				'aria-owns': self.ids[ 1 ],
+				id: self.ids[ 0 ],
 				css: {
 					width: self.element.width()
-				}				
+				},
+				'aria-owns': self.ids[ 1 ],
+				'aria-haspopup': true	
 			})
 			.addClass( self.widgetBaseClass + '-button' )
 			.button({
-				label: self.items.eq( self.element[0].selectedIndex ).text(),
+				label: self.items.eq( self.element[ 0 ].selectedIndex ).text(),
 				icons: {
 					primary: ( options.dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' )
 				}
@@ -83,7 +85,7 @@ $.widget( "ui.selectmenu", {
 			.insertAfter( self.element );	
 			
 		self.newelement
-			.bind( 'mousedown.selectmenu' , function(event) {
+			.bind( 'mousedown.selectmenu' , function( event ) {
 				self._toggle( event );
 				return false;
 			})
@@ -101,14 +103,14 @@ $.widget( "ui.selectmenu", {
 						self._toggle(event);
 						break;
 					case $.ui.keyCode.UP:
-						if (event.altKey) {
+						if ( event.altKey ) {
 							self._toggle( event );
 						} else {
 							self._previous();
 						}
 						break;
 					case $.ui.keyCode.DOWN:
-						if (event.altKey) {
+						if ( event.altKey ) {
 							self._toggle( event );
 						} else {
 							self._next();
@@ -125,7 +127,65 @@ $.widget( "ui.selectmenu", {
 				}
 				return ret;
 			});
+		
+		self.refresh();
+		
+		// document click closes menu
+		$( document ).bind( 'mousedown.selectmenu', function( event ) {
+			if ( self.opened && !self.hover) {	
+				window.setTimeout( function() {
+					self.close( event );
+				}, 200 );
+			}
+		});	
+			
+	},
+	
+	open: function( event ) {		
+		var self = this,
+			options = this.options;
+			
+		// close all other selectmenus		
+		$( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() {
+			$( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' );
+		});
 					
+		if ( options.dropdown ) {
+			self.newelement
+				.addClass( 'ui-corner-top' )
+				.removeClass( 'ui-corner-all' );
+		}		
+					
+		var currentItem = self._getCurrenItem();
+			
+		self.listWrap.addClass( self.widgetBaseClass + '-open' );		
+		self.list.focus().menu( "focus", null, currentItem );
+	
+		if ( !options.dropdown ) {
+			// center current item
+			if ( self.list.css("overflow") == "auto" ) {
+				self.list.scrollTop( self.list.scrollTop() + currentItem.position().top - self.list.outerHeight()/2 + currentItem.outerHeight()/2 );
+			}			
+			// calculate offset
+			var _offset = (self.list.offset().top  - currentItem.offset().top + (self.newelement.outerHeight() - currentItem.outerHeight()) / 2);			
+			$.extend( options.position, {
+				my: "left top",
+				at: "left top",
+				offset: "0 " + _offset
+			});
+		}
+			
+		self.listWrap.position( $.extend({
+			of: this.newelementWrap
+		}, options.position ));
+		
+		this.opened = true;
+	},	
+	
+	refresh: function() {		
+		var self = this,
+			options = this.options;
+				
 		// create menu portion, append to body		
 		self.list = $( '<ul />', {
 			'class': 'ui-widget ui-widget-content',
@@ -141,7 +201,8 @@ $.widget( "ui.selectmenu", {
 			.append( self.list )
 			.appendTo( options.appendTo );
 		
-		self._renderMenu( self.list, self._initSource() );
+		self._initSource();
+		self._renderMenu( self.list, options.source );
 		
 		self.list
 			.data( 'element.selectelemenu', self.element )
@@ -174,62 +235,8 @@ $.widget( "ui.selectmenu", {
 				.addClass( 'ui-corner-bottom' )
 				.removeClass( 'ui-corner-all' );
 		}
-		
-		// document click closes menu
-		$( document ).bind( 'mousedown.selectmenu', function( event ) {
-			if ( self.opened && !self.hover) {	
-				window.setTimeout( function() {
-					self.close( event );
-				}, 200 );
-			}
-		});	
-			
 	},
 	
-	open: function( event ) {		
-		var self = this,
-			options = this.options;
-			
-		// close all other selectmenus		
-		$( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() {
-			$( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' );
-		});
-					
-		if ( options.dropdown ) {
-			self.newelement
-				.addClass( 'ui-corner-top' )
-				.removeClass( 'ui-corner-all' );
-		}		
-					
-		var currentItem = self._getCurrenItem();
-			
-		self.listWrap.addClass( self.widgetBaseClass + '-open' );
-		
-		self.list.focus().menu( "focus", null, currentItem );
-	
-		if ( !options.dropdown ) {
-			// center current item
-			if ( self.list.css("overflow") == "auto" ) {
-				self.list.scrollTop( self.list.scrollTop() + currentItem.position().top - self.list.outerHeight()/2 + currentItem.outerHeight()/2 );
-			}
-			
-			// calculate offset
-			var _offset = (self.list.offset().top  - currentItem.offset().top + (self.newelement.outerHeight() - currentItem.outerHeight()) / 2);
-			
-			$.extend( options.position, {
-				my: "left top",
-				at: "left top",
-				offset: "0 " + _offset
-			});
-		}
-			
-		self.listWrap.position( $.extend({
-			of: this.newelementWrap
-		}, options.position ));
-		
-		this.opened = true;
-	},	
-	
 	close: function( event, focus ) {		
 		var self = this,
 			options = this.options;
@@ -299,39 +306,34 @@ $.widget( "ui.selectmenu", {
 		if ( key === "appendTo" ) {
 			this.listWrap.appendTo( $( value || "body", this.element[0].ownerDocument )[0] );
 		}
+		if ( key === "value" && value) {
+			this.element[0].value = value;
+		}
 	},
 	
 	_initSource: function() {
-		var data = [];		
-		
-		$.each( this.items, function( index, item ) {
-			var option = $( item );
-			data.push({
-				index: index,
-				value: option.attr( 'value' ),
-				label: option.text(),
-				optgroup: option.parent("optgroup").attr("label") || false
-			});
-		});		
-		
-		// console.log(data);
-		return data;
+		if ( !$.isArray( this.options.source ) ) {
+			var data = [];		
+			$.each( this.items, function( index, item ) {
+				var option = $( item );
+				data.push({
+					index: index,
+					value: option.attr( 'value' ),
+					label: option.text(),
+					optgroup: option.parent("optgroup").attr("label") || false
+				});
+			});					
+			this.options.source = data;
+		}
 	},
 	
 	_destroy: function() {
 	},
 	
-	_value: function( newValue ) {
-		if (arguments.length) {
-			this.element[0].value = newValue;
-		} else {
-			return this.element[0].value;
-		}
-	},
-	
 	_index: function( newIndex ) {
 		if ( arguments.length ) {
 				this.element[0].selectedIndex = newIndex;
+				self.options.value = this._getCurrenItem().attr( "value" );
 		} else {
 			return this.element[0].selectedIndex;
 		}