mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Dialog: Extracting wrapper creation into _createWrapper. Merging the two keydown handlers into one.
This commit is contained in:
parent
4c9caa8169
commit
625a111fb9
124
ui/jquery.ui.dialog.js
vendored
124
ui/jquery.ui.dialog.js
vendored
@ -90,81 +90,26 @@ $.widget("ui.dialog", {
|
|||||||
parent: this.element.parent(),
|
parent: this.element.parent(),
|
||||||
index: this.element.parent().children().index( this.element )
|
index: this.element.parent().children().index( this.element )
|
||||||
};
|
};
|
||||||
var that = this,
|
|
||||||
options = this.options,
|
|
||||||
uiDialogButtonPane;
|
|
||||||
|
|
||||||
// TODO extract into _createWrapper
|
this._createWrapper();
|
||||||
this.uiDialog = $( "<div>" )
|
|
||||||
.addClass( uiDialogClasses + options.dialogClass )
|
|
||||||
.hide()
|
|
||||||
.attr({
|
|
||||||
// setting tabIndex makes the div focusable
|
|
||||||
tabIndex: -1,
|
|
||||||
role: "dialog"
|
|
||||||
})
|
|
||||||
.keydown(function( event ) {
|
|
||||||
if ( options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
|
|
||||||
event.keyCode === $.ui.keyCode.ESCAPE ) {
|
|
||||||
that.close( event );
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.mousedown(function( event ) {
|
|
||||||
if ( that._moveToTop( event ) ) {
|
|
||||||
that._focusTabbable();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.appendTo( this.document[ 0 ].body );
|
|
||||||
|
|
||||||
this.element
|
this.element
|
||||||
.show()
|
.show()
|
||||||
.removeAttr( "title" )
|
.removeAttr( "title" )
|
||||||
.addClass( "ui-dialog-content ui-widget-content" )
|
.addClass( "ui-dialog-content ui-widget-content" )
|
||||||
.appendTo( this.uiDialog );
|
.appendTo( this.uiDialog );
|
||||||
|
|
||||||
this._createTitlebar();
|
this._createTitlebar();
|
||||||
this._createButtonPane();
|
this._createButtonPane();
|
||||||
|
|
||||||
// TODO move into _createWrapper
|
if ( this.options.draggable && $.fn.draggable ) {
|
||||||
// We assume that any existing aria-describedby attribute means
|
|
||||||
// that the dialog content is marked up properly
|
|
||||||
// otherwise we brute force the content as the description
|
|
||||||
if ( !this.element.find( "[aria-describedby]" ).length ) {
|
|
||||||
this.uiDialog.attr({
|
|
||||||
"aria-describedby": this.element.uniqueId().attr( "id" )
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.draggable && $.fn.draggable ) {
|
|
||||||
this._makeDraggable();
|
this._makeDraggable();
|
||||||
}
|
}
|
||||||
if ( options.resizable && $.fn.resizable ) {
|
if ( this.options.resizable && $.fn.resizable ) {
|
||||||
this._makeResizable();
|
this._makeResizable();
|
||||||
}
|
}
|
||||||
|
|
||||||
this._isOpen = false;
|
this._isOpen = false;
|
||||||
|
|
||||||
// prevent tabbing out of dialogs
|
|
||||||
// TODO move into _createWrapper
|
|
||||||
// TODO fix formatting
|
|
||||||
this._on( this.uiDialog, { keydown: function( event ) {
|
|
||||||
if ( event.keyCode !== $.ui.keyCode.TAB ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var tabbables = $( ":tabbable", this.uiDialog ),
|
|
||||||
first = tabbables.filter( ":first" ),
|
|
||||||
last = tabbables.filter( ":last" );
|
|
||||||
|
|
||||||
if ( ( event.target === last[ 0 ] || event.target === this.uiDialog[ 0 ] ) && !event.shiftKey ) {
|
|
||||||
first.focus( 1 );
|
|
||||||
return false;
|
|
||||||
} else if ( ( event.target === first[ 0 ] || event.target === this.uiDialog[ 0 ] ) && event.shiftKey ) {
|
|
||||||
last.focus( 1 );
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_init: function() {
|
_init: function() {
|
||||||
@ -312,6 +257,59 @@ $.widget("ui.dialog", {
|
|||||||
this._delay( checkFocus );
|
this._delay( checkFocus );
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_createWrapper: function() {
|
||||||
|
this.uiDialog = $( "<div>" )
|
||||||
|
.addClass( uiDialogClasses + this.options.dialogClass )
|
||||||
|
.hide()
|
||||||
|
.attr({
|
||||||
|
// setting tabIndex makes the div focusable
|
||||||
|
tabIndex: -1,
|
||||||
|
role: "dialog"
|
||||||
|
})
|
||||||
|
.appendTo( this.document[ 0 ].body );
|
||||||
|
|
||||||
|
this._on( this.uiDialog, {
|
||||||
|
keydown: function( event ) {
|
||||||
|
if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
|
||||||
|
event.keyCode === $.ui.keyCode.ESCAPE ) {
|
||||||
|
event.preventDefault();
|
||||||
|
this.close( event );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// prevent tabbing out of dialogs
|
||||||
|
if ( event.keyCode !== $.ui.keyCode.TAB ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var tabbables = $( ":tabbable", this.uiDialog ),
|
||||||
|
first = tabbables.filter( ":first" ),
|
||||||
|
last = tabbables.filter( ":last" );
|
||||||
|
|
||||||
|
if ( ( event.target === last[ 0 ] || event.target === this.uiDialog[ 0 ] ) && !event.shiftKey ) {
|
||||||
|
first.focus( 1 );
|
||||||
|
return false;
|
||||||
|
} else if ( ( event.target === first[ 0 ] || event.target === this.uiDialog[ 0 ] ) && event.shiftKey ) {
|
||||||
|
last.focus( 1 );
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mousedown: function( event ) {
|
||||||
|
if ( this._moveToTop( event ) ) {
|
||||||
|
this._focusTabbable();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// We assume that any existing aria-describedby attribute means
|
||||||
|
// that the dialog content is marked up properly
|
||||||
|
// otherwise we brute force the content as the description
|
||||||
|
if ( !this.element.find( "[aria-describedby]" ).length ) {
|
||||||
|
this.uiDialog.attr({
|
||||||
|
"aria-describedby": this.element.uniqueId().attr( "id" )
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
_createTitlebar: function() {
|
_createTitlebar: function() {
|
||||||
var uiDialogTitle;
|
var uiDialogTitle;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user