Dialog: Refactor _create, extracting title bar creation in _createTitlebar

This commit is contained in:
Jörn Zaefferer 2012-11-15 23:20:00 +01:00
parent f0acaac230
commit 1d6ce644e0

View File

@ -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()
// setting tabIndex makes the div focusable
.attr( "tabIndex", -1)
.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 ) {
@ -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 || "&#160;" )
.prependTo( this.uiDialogTitlebar );
this.uiDialog.attr({
"aria-labelledby": uiDialogTitle.attr( "id" )
});
},
_createButtons: function() {
var that = this,
buttons = this.options.buttons;