library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'selectmenu-review' of https://github.com/scottgonzalez/jquery-ui into selectmenu

Browse Source
This commit is contained in:
Felix Nagel 2013-09-25 21:29:15 +02:00
commit fd776f4224
1 changed files with 61 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
ui/jquery.ui.selectmenu.js vendored
View File

@ -57,7 +57,7 @@ $.widget( "ui.selectmenu", {
_drawButton: function() { _drawButton: function() {
var tabindex = this.element.attr( "tabindex" ); var tabindex = this.element.attr( "tabindex" );
// Fix existing label // Associate existing label with the new button
this.label = $( "label[for='" + this.ids.element + "']" ).attr( "for", this.ids.button ); this.label = $( "label[for='" + this.ids.element + "']" ).attr( "for", this.ids.button );
this._on( this.label, { this._on( this.label, {
click: function( event ) { click: function( event ) {
@ -66,7 +66,7 @@ $.widget( "ui.selectmenu", {
} }
}); });
// Hide original select tag // Hide original select element
this.element.hide(); this.element.hide();
// Create button // Create button
@ -101,7 +101,7 @@ $.widget( "ui.selectmenu", {
_drawMenu: function() { _drawMenu: function() {
var that = this; var that = this;
// Create menu portion, append to body // Create menu
this.menu = $( "<ul>", { this.menu = $( "<ul>", {
"aria-hidden": "true", "aria-hidden": "true",
"aria-labelledby": this.ids.button, "aria-labelledby": this.ids.button,
@ -110,28 +110,24 @@ $.widget( "ui.selectmenu", {
// Wrap menu // Wrap menu
this.menuWrap = $( "<div>", { this.menuWrap = $( "<div>", {
"class": "ui-selectmenu-menu ui-front", "class": "ui-selectmenu-menu ui-front",
outerWidth: this.button.outerWidth() outerWidth: this.button.outerWidth()
}) })
.append( this.menu ) .append( this.menu )
.appendTo( this._appendTo() ); .appendTo( this._appendTo() );
// Init menu widget // Initialize menu widget
this.menuInstance = this.menu.menu({ this.menuInstance = this.menu.menu({
role: "listbox",
select: function( event, ui ) { select: function( event, ui ) {
var item = ui.item.data( "ui-selectmenu-item" ); var item = ui.item.data( "ui-selectmenu-item" );
that._select( item, event ); that._select( item, event );
if ( that.isOpen ) {
event.preventDefault();
that.close( event );
}
}, },
focus: function( event, ui ) { focus: function( event, ui ) {
var item = ui.item.data( "ui-selectmenu-item" ); var item = ui.item.data( "ui-selectmenu-item" );
// prevent inital focus from firing and checks if its a newly focused item // Prevent inital focus from firing and checks if its a newly focused item
if ( that.focusIndex != null && item.index !== that.focusIndex ) { if ( that.focusIndex != null && item.index !== that.focusIndex ) {
that._trigger( "focus", event, { item: item } ); that._trigger( "focus", event, { item: item } );
if ( !that.isOpen ) { if ( !that.isOpen ) {
@ -140,16 +136,18 @@ $.widget( "ui.selectmenu", {
} }
that.focusIndex = item.index; that.focusIndex = item.index;
that.button.attr( "aria-activedescendant", that.menuItems.eq( item.index ).attr( "id" ) ); that.button.attr( "aria-activedescendant",
}, that.menuItems.eq( item.index ).attr( "id" ) );
role: "listbox" }
}) })
.menu( "instance" ); .menu( "instance" );
// adjust menu styles to dropdown // Adjust menu styles to dropdown
this.menu.addClass( "ui-corner-bottom" ).removeClass( "ui-corner-all" ); this.menu.addClass( "ui-corner-bottom" ).removeClass( "ui-corner-all" );
// Unbind uneeded Menu events // TODO: Can we make this cleaner?
// If not, at least update the comment to say what we're removing
// Unbind uneeded menu events
this.menuInstance._off( this.menu, "mouseleave" ); this.menuInstance._off( this.menu, "mouseleave" );
// Cancel the menu's collapseAll on document click // Cancel the menu's collapseAll on document click
@ -171,19 +169,19 @@ $.widget( "ui.selectmenu", {
this._readOptions( options ); this._readOptions( options );
this._renderMenu( this.menu, this.items ); this._renderMenu( this.menu, this.items );
this.menu.menu( "refresh" ); this.menuInstance.refresh();
this.menuItems = this.menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).find( "a" ); this.menuItems = this.menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).find( "a" );
item = this._getSelectedItem(); item = this._getSelectedItem();
// Make sure menu is selected item aware // Update the menu to have the correct item focused
this.menu.menu( "focus", null, item ); this.menuInstance.focus( null, item );
this._setAria( item.data( "ui-selectmenu-item" ) ); this._setAria( item.data( "ui-selectmenu-item" ) );
this._setText( this.buttonText, item.text() ); this._setText( this.buttonText, item.text() );
// Set disabled state // Set disabled state
this._setOption( "disabled", !!this.element.prop( "disabled" ) ); this._setOption( "disabled", this.element.prop( "disabled" ) );
}, },
open: function( event ) { open: function( event ) {
@ -191,12 +189,14 @@ $.widget( "ui.selectmenu", {
return; return;
} }
// Support: IE6-IE9 click doesn't trigger focus on the button // If this is the first time the menu is being opened, render the items
if ( !this.menuItems ) { if ( !this.menuItems ) {
this.refresh(); this.refresh();
} else { } else {
// TODO: Why is this necessary?
// Shouldn't the underlying menu always have accurate state?
this.menu.find( ".ui-state-focus" ).removeClass( "ui-state-focus" ); this.menu.find( ".ui-state-focus" ).removeClass( "ui-state-focus" );
this.menu.menu( "focus", null, this._getSelectedItem() ); this.menuInstance.focus( null, this._getSelectedItem() );
} }
this.isOpen = true; this.isOpen = true;
@ -245,9 +245,13 @@ $.widget( "ui.selectmenu", {
$.each( items, function( index, item ) { $.each( items, function( index, item ) {
if ( item.optgroup !== currentOptgroup ) { if ( item.optgroup !== currentOptgroup ) {
$( "<li>", { $( "<li>", {
"class": "ui-selectmenu-optgroup" + ( item.element.parent( "optgroup" ).attr( "disabled" ) ? " ui-state-disabled" : "" ), "class": "ui-selectmenu-optgroup" +
( item.element.parent( "optgroup" ).attr( "disabled" ) ?
" ui-state-disabled" :
"" ),
text: item.optgroup text: item.optgroup
}).appendTo( ul ); })
.appendTo( ul );
currentOptgroup = item.optgroup; currentOptgroup = item.optgroup;
} }
that._renderItemData( ul, item ); that._renderItemData( ul, item );
@ -283,7 +287,8 @@ $.widget( "ui.selectmenu", {
// Set focus manually for first or last item // Set focus manually for first or last item
this.menu.menu( "focus", event, this.menuItems[ direction ]() ); this.menu.menu( "focus", event, this.menuItems[ direction ]() );
} else { } else {
if ( direction === "previous" && this.menu.menu( "isFirstItem" ) || direction === "next" && this.menu.menu( "isLastItem" ) ) { if ( direction === "previous" && this.menu.menu( "isFirstItem" ) ||
direction === "next" && this.menu.menu( "isLastItem" ) ) {
return; return;
} }
@ -313,30 +318,25 @@ $.widget( "ui.selectmenu", {
}, },
_buttonEvents: { _buttonEvents: {
focus: function() { focusin: function() {
// Init Menu on first focus // Delay rendering the menu items until the button receives focus
this.refresh(); if ( !this.menuItems ) {
// Reset focus class as its removed by ui.widget._setOption this.refresh();
this.button.addClass( "ui-state-focus" ); }
this._off( this.button, "focus" ); this._off( this.button, "focusin" );
},
click: function( event ) {
this._toggle( event );
event.preventDefault();
}, },
click: "_toggle",
keydown: function( event ) { keydown: function( event ) {
var prevDef = true; var preventDefault = true;
switch ( event.keyCode ) { switch ( event.keyCode ) {
case $.ui.keyCode.TAB: case $.ui.keyCode.TAB:
case $.ui.keyCode.ESCAPE: case $.ui.keyCode.ESCAPE:
if ( this.isOpen ) { this.close( event );
this.close( event ); preventDefault = false;
}
prevDef = false;
break; break;
case $.ui.keyCode.ENTER: case $.ui.keyCode.ENTER:
if ( this.isOpen ) { if ( this.isOpen ) {
this.menu.menu( "select", event ); this.menuInstance.select( event );
} }
break; break;
case $.ui.keyCode.UP: case $.ui.keyCode.UP:
@ -355,7 +355,7 @@ $.widget( "ui.selectmenu", {
break; break;
case $.ui.keyCode.SPACE: case $.ui.keyCode.SPACE:
if ( this.isOpen ) { if ( this.isOpen ) {
this.menu.menu( "select", event ); this.menuInstance.select( event );
} else { } else {
this._toggle( event ); this._toggle( event );
} }
@ -376,9 +376,10 @@ $.widget( "ui.selectmenu", {
break; break;
default: default:
this.menu.trigger( event ); this.menu.trigger( event );
prevDef = false; preventDefault = false;
} }
if ( prevDef ) {
if ( preventDefault ) {
event.preventDefault(); event.preventDefault();
} }
} }
@ -386,6 +387,7 @@ $.widget( "ui.selectmenu", {
_select: function( item, event ) { _select: function( item, event ) {
var oldIndex = this.element[ 0 ].selectedIndex; var oldIndex = this.element[ 0 ].selectedIndex;
// Change native select element // Change native select element
this.element[ 0 ].selectedIndex = item.index; this.element[ 0 ].selectedIndex = item.index;
this._setText( this.buttonText, item.label ); this._setText( this.buttonText, item.label );
@ -395,6 +397,8 @@ $.widget( "ui.selectmenu", {
if ( item.index !== oldIndex ) { if ( item.index !== oldIndex ) {
this._trigger( "change", event, { item: item } ); this._trigger( "change", event, { item: item } );
} }
this.close( event );
}, },
_setAria: function( item ) { _setAria: function( item ) {
@ -421,17 +425,16 @@ $.widget( "ui.selectmenu", {
this.menuWrap.appendTo( this._appendTo() ); this.menuWrap.appendTo( this._appendTo() );
} }
if ( key === "disabled" ) { if ( key === "disabled" ) {
this.menu.menu( "option", "disabled", value ); this.menuInstance.option( "disabled", value );
this.button this.button
.toggleClass( "ui-state-disabled", !!value ) .toggleClass( "ui-state-disabled", value )
.attr( "aria-disabled", value ); .attr( "aria-disabled", value );
this.element.prop( "disabled", value );
if ( value ) { if ( value ) {
this.element.attr( "disabled", "disabled" );
this.button.attr( "tabindex", -1 ); this.button.attr( "tabindex", -1 );
this.close(); this.close();
} else { } else {
this.element.removeAttr( "disabled" );
this.button.attr( "tabindex", 0 ); this.button.attr( "tabindex", 0 );
} }
} }
@ -458,14 +461,16 @@ $.widget( "ui.selectmenu", {
}, },
_toggleAttr: function(){ _toggleAttr: function(){
this.button.toggleClass( "ui-corner-top", this.isOpen ).toggleClass( "ui-corner-all", !this.isOpen ); this.button
.toggleClass( "ui-corner-top", this.isOpen )
.toggleClass( "ui-corner-all", !this.isOpen );
this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen ); this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen );
this.menu.attr( "aria-hidden", !this.isOpen); this.menu.attr( "aria-hidden", !this.isOpen );
this.button.attr( "aria-expanded", this.isOpen); this.button.attr( "aria-expanded", this.isOpen );
}, },
_getCreateOptions: function() { _getCreateOptions: function() {
return { disabled: !!this.element.prop( "disabled" ) }; return { disabled: this.element.prop( "disabled" ) };
}, },
_readOptions: function( options ) { _readOptions: function( options ) {