mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Dialog: Refactor _create, extracting title bar creation in _createTitlebar
This commit is contained in:
parent
f0acaac230
commit
1d6ce644e0
87
ui/jquery.ui.dialog.js
vendored
87
ui/jquery.ui.dialog.js
vendored
@ -92,16 +92,17 @@ $.widget("ui.dialog", {
|
||||
};
|
||||
var that = this,
|
||||
options = this.options,
|
||||
title = options.title || " ",
|
||||
uiDialogTitle,
|
||||
uiDialogButtonPane;
|
||||
|
||||
// TODO extract into _createWrapper
|
||||
this.uiDialog = $( "<div>" )
|
||||
.addClass( uiDialogClasses + options.dialogClass )
|
||||
.hide()
|
||||
.attr({
|
||||
// setting tabIndex makes the div focusable
|
||||
.attr( "tabIndex", -1)
|
||||
tabIndex: -1,
|
||||
role: "dialog"
|
||||
})
|
||||
.keydown(function( event ) {
|
||||
if ( options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
|
||||
event.keyCode === $.ui.keyCode.ESCAPE ) {
|
||||
@ -122,38 +123,7 @@ $.widget("ui.dialog", {
|
||||
.addClass( "ui-dialog-content ui-widget-content" )
|
||||
.appendTo( this.uiDialog );
|
||||
|
||||
// TODO extract this and the next two into a _createTitlebar method
|
||||
this.uiDialogTitlebar = $( "<div>" )
|
||||
.addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" )
|
||||
.prependTo( this.uiDialog );
|
||||
this._on( this.uiDialogTitlebar, {
|
||||
mousedown: function() {
|
||||
// TODO call _focusTabbable or _keepFocus
|
||||
// Dialog isn't getting focus when dragging (#8063)
|
||||
this.uiDialog.focus();
|
||||
}
|
||||
});
|
||||
|
||||
this.uiDialogTitlebarClose = $( "<button></button>" )
|
||||
.button({
|
||||
label: options.closeText,
|
||||
icons: {
|
||||
primary: "ui-icon-closethick"
|
||||
},
|
||||
text: false
|
||||
})
|
||||
.addClass( "ui-dialog-titlebar-close" )
|
||||
.click(function( event ) {
|
||||
event.preventDefault();
|
||||
that.close( event );
|
||||
})
|
||||
.appendTo( this.uiDialogTitlebar );
|
||||
|
||||
uiDialogTitle = $( "<span>" )
|
||||
.uniqueId()
|
||||
.addClass( "ui-dialog-title" )
|
||||
.html( title )
|
||||
.prependTo( this.uiDialogTitlebar );
|
||||
this._createTitlebar();
|
||||
|
||||
// TODO extract this one and the next into a _createButtonPane method
|
||||
uiDialogButtonPane = ( this.uiDialogButtonPane = $( "<div>" ) )
|
||||
@ -163,11 +133,6 @@ $.widget("ui.dialog", {
|
||||
.addClass( "ui-dialog-buttonset" )
|
||||
.appendTo( uiDialogButtonPane );
|
||||
|
||||
// TODO move into _createWrapper
|
||||
this.uiDialog.attr({
|
||||
role: "dialog",
|
||||
"aria-labelledby": uiDialogTitle.attr( "id" )
|
||||
});
|
||||
|
||||
// TODO move into _createWrapper
|
||||
// We assume that any existing aria-describedby attribute means
|
||||
@ -358,6 +323,48 @@ $.widget("ui.dialog", {
|
||||
this._delay( checkFocus );
|
||||
},
|
||||
|
||||
_createTitlebar: function() {
|
||||
var uiDialogTitle;
|
||||
|
||||
this.uiDialogTitlebar = $( "<div>" )
|
||||
.addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" )
|
||||
.prependTo( this.uiDialog );
|
||||
this._on( this.uiDialogTitlebar, {
|
||||
mousedown: function() {
|
||||
// TODO call _focusTabbable or _keepFocus
|
||||
// Dialog isn't getting focus when dragging (#8063)
|
||||
this.uiDialog.focus();
|
||||
}
|
||||
});
|
||||
|
||||
this.uiDialogTitlebarClose = $( "<button></button>" )
|
||||
.button({
|
||||
label: this.options.closeText,
|
||||
icons: {
|
||||
primary: "ui-icon-closethick"
|
||||
},
|
||||
text: false
|
||||
})
|
||||
.addClass( "ui-dialog-titlebar-close" )
|
||||
.appendTo( this.uiDialogTitlebar );
|
||||
this._on( this.uiDialogTitlebarClose, {
|
||||
"click": function( event ) {
|
||||
event.preventDefault();
|
||||
this.close( event );
|
||||
}
|
||||
});
|
||||
|
||||
uiDialogTitle = $( "<span>" )
|
||||
.uniqueId()
|
||||
.addClass( "ui-dialog-title" )
|
||||
.html( this.options.title || " " )
|
||||
.prependTo( this.uiDialogTitlebar );
|
||||
|
||||
this.uiDialog.attr({
|
||||
"aria-labelledby": uiDialogTitle.attr( "id" )
|
||||
});
|
||||
},
|
||||
|
||||
_createButtons: function() {
|
||||
var that = this,
|
||||
buttons = this.options.buttons;
|
||||
|
Loading…
Reference in New Issue
Block a user