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
89
ui/jquery.ui.dialog.js
vendored
89
ui/jquery.ui.dialog.js
vendored
@ -92,16 +92,17 @@ $.widget("ui.dialog", {
|
|||||||
};
|
};
|
||||||
var that = this,
|
var that = this,
|
||||||
options = this.options,
|
options = this.options,
|
||||||
title = options.title || " ",
|
|
||||||
uiDialogTitle,
|
|
||||||
uiDialogButtonPane;
|
uiDialogButtonPane;
|
||||||
|
|
||||||
// TODO extract into _createWrapper
|
// TODO extract into _createWrapper
|
||||||
this.uiDialog = $( "<div>" )
|
this.uiDialog = $( "<div>" )
|
||||||
.addClass( uiDialogClasses + options.dialogClass )
|
.addClass( uiDialogClasses + options.dialogClass )
|
||||||
.hide()
|
.hide()
|
||||||
// setting tabIndex makes the div focusable
|
.attr({
|
||||||
.attr( "tabIndex", -1)
|
// setting tabIndex makes the div focusable
|
||||||
|
tabIndex: -1,
|
||||||
|
role: "dialog"
|
||||||
|
})
|
||||||
.keydown(function( event ) {
|
.keydown(function( event ) {
|
||||||
if ( options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
|
if ( options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
|
||||||
event.keyCode === $.ui.keyCode.ESCAPE ) {
|
event.keyCode === $.ui.keyCode.ESCAPE ) {
|
||||||
@ -122,38 +123,7 @@ $.widget("ui.dialog", {
|
|||||||
.addClass( "ui-dialog-content ui-widget-content" )
|
.addClass( "ui-dialog-content ui-widget-content" )
|
||||||
.appendTo( this.uiDialog );
|
.appendTo( this.uiDialog );
|
||||||
|
|
||||||
// TODO extract this and the next two into a _createTitlebar method
|
this._createTitlebar();
|
||||||
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 );
|
|
||||||
|
|
||||||
// TODO extract this one and the next into a _createButtonPane method
|
// TODO extract this one and the next into a _createButtonPane method
|
||||||
uiDialogButtonPane = ( this.uiDialogButtonPane = $( "<div>" ) )
|
uiDialogButtonPane = ( this.uiDialogButtonPane = $( "<div>" ) )
|
||||||
@ -163,11 +133,6 @@ $.widget("ui.dialog", {
|
|||||||
.addClass( "ui-dialog-buttonset" )
|
.addClass( "ui-dialog-buttonset" )
|
||||||
.appendTo( uiDialogButtonPane );
|
.appendTo( uiDialogButtonPane );
|
||||||
|
|
||||||
// TODO move into _createWrapper
|
|
||||||
this.uiDialog.attr({
|
|
||||||
role: "dialog",
|
|
||||||
"aria-labelledby": uiDialogTitle.attr( "id" )
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO move into _createWrapper
|
// TODO move into _createWrapper
|
||||||
// We assume that any existing aria-describedby attribute means
|
// We assume that any existing aria-describedby attribute means
|
||||||
@ -358,6 +323,48 @@ $.widget("ui.dialog", {
|
|||||||
this._delay( checkFocus );
|
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() {
|
_createButtons: function() {
|
||||||
var that = this,
|
var that = this,
|
||||||
buttons = this.options.buttons;
|
buttons = this.options.buttons;
|
||||||
|
Loading…
Reference in New Issue
Block a user