Skip to content
Permalink
Browse files

Selectmenu: refresh method, value option, code cleanup

  • Loading branch information
fnagel committed Sep 24, 2011
1 parent d89e9b4 commit 1d9fac52f758579941691e202f47062b9e6c56df
Showing with 98 additions and 96 deletions.
  1. +2 −2 demos/selectmenu/default.html
  2. +96 −94 ui/jquery.ui.selectmenu.js
@@ -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>
@@ -21,58 +21,60 @@ $.widget( "ui.selectmenu", {
defaultElement: "<select>",
options: {
dropdown: true,
iconWidth: 26,
wrapperElement: "<div />",
appendTo: "body",
position: {
my: "left top",
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;
}

0 comments on commit 1d9fac5

Please sign in to comment.
You can’t perform that action at this time.