Skip to content
Permalink
Browse files

Dialog: Refactor _create, extracting title bar creation in _createTit…

…lebar
  • Loading branch information...
jzaefferer committed Nov 15, 2012
1 parent f0acaac commit 1d6ce644e0c7ba9b4b53b16aea4a91b2b24cc05c
Showing with 48 additions and 41 deletions.
  1. +48 −41 ui/jquery.ui.dialog.js
@@ -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;

0 comments on commit 1d6ce64

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