Selectmenu: refresh method, value option, code cleanup

2 files changed, 98 insertions, 96 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,55 +127,8 @@ $.widget( "ui.selectmenu", {
 				}
 				return ret;
 			});
-					
-		// create menu portion, append to body		
-		self.list = $( '<ul />', {
-			'class': 'ui-widget ui-widget-content',
-			'aria-hidden': true,
-			'aria-labelledby': self.ids[0],
-			role: 'listbox',
-			id: self.ids[1],
-		});
-		
-		self.listWrap = $( options.wrapperElement )
-			.addClass( self.widgetBaseClass + '-menu' )
-			.css("width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth)
-			.append( self.list )
-			.appendTo( options.appendTo );
-		
-		self._renderMenu( self.list, self._initSource() );
-		
-		self.list
-			.data( 'element.selectelemenu', self.element )
-			.menu({
-				select: function( event, ui ) {
-					var item = ui.item.data( "item.selectmenu" );
-					console.log(item);
-					
-					self.newelement.children( 'span.ui-button-text' ).text( item.label );
-					self._index( item.index );
-					self.close( event, true);
-				},
-				focus: function( event, ui ) {
-					var item = ui.item.data( "item.selectmenu" );
-					if ( !self.opened ) {
-						self.newelement.children( 'span.ui-button-text' ).text( item.label );
-						self._index( item.index );
-					}
-				}		
-			})			
-			.bind( 'mouseenter.selectelemenu', function() {
-				self.hover = true;
-			})
-			.bind( 'mouseleave .selectelemenu', function() {
-				self.hover = false;
-			});
 		
-		if ( options.dropdown ) {
-			self.list
-				.addClass( 'ui-corner-bottom' )
-				.removeClass( 'ui-corner-all' );
-		}
+		self.refresh();
 		
 		// document click closes menu
 		$( document ).bind( 'mousedown.selectmenu', function( event ) {
@@ -203,19 +158,16 @@ $.widget( "ui.selectmenu", {
 					
 		var currentItem = self._getCurrenItem();
 			
-		self.listWrap.addClass( self.widgetBaseClass + '-open' );
-		
+		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);
-			
+			var _offset = (self.list.offset().top  - currentItem.offset().top + (self.newelement.outerHeight() - currentItem.outerHeight()) / 2);			
 			$.extend( options.position, {
 				my: "left top",
 				at: "left top",
@@ -230,6 +182,61 @@ $.widget( "ui.selectmenu", {
 		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',
+			'aria-hidden': true,
+			'aria-labelledby': self.ids[0],
+			role: 'listbox',
+			id: self.ids[1],
+		});
+		
+		self.listWrap = $( options.wrapperElement )
+			.addClass( self.widgetBaseClass + '-menu' )
+			.css("width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth)
+			.append( self.list )
+			.appendTo( options.appendTo );
+		
+		self._initSource();
+		self._renderMenu( self.list, options.source );
+		
+		self.list
+			.data( 'element.selectelemenu', self.element )
+			.menu({
+				select: function( event, ui ) {
+					var item = ui.item.data( "item.selectmenu" );
+					console.log(item);
+					
+					self.newelement.children( 'span.ui-button-text' ).text( item.label );
+					self._index( item.index );
+					self.close( event, true);
+				},
+				focus: function( event, ui ) {
+					var item = ui.item.data( "item.selectmenu" );
+					if ( !self.opened ) {
+						self.newelement.children( 'span.ui-button-text' ).text( item.label );
+						self._index( item.index );
+					}
+				}		
+			})			
+			.bind( 'mouseenter.selectelemenu', function() {
+				self.hover = true;
+			})
+			.bind( 'mouseleave .selectelemenu', function() {
+				self.hover = false;
+			});
+		
+		if ( options.dropdown ) {
+			self.list
+				.addClass( 'ui-corner-bottom' )
+				.removeClass( 'ui-corner-all' );
+		}
+	},
+	
 	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;
 		}