mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
cb69f0025f
Collapses "UI Core" and "Core" into just "Core". Fixes bad paths for CSS dependencies. Regressed when moving widgets into the widgets subfolder.
929 lines
22 KiB
JavaScript
929 lines
22 KiB
JavaScript
/*!
|
|
* jQuery UI Dialog @VERSION
|
|
* http://jqueryui.com
|
|
*
|
|
* Copyright jQuery Foundation and other contributors
|
|
* Released under the MIT license.
|
|
* http://jquery.org/license
|
|
*/
|
|
|
|
//>>label: Dialog
|
|
//>>group: Widgets
|
|
//>>description: Displays customizable dialog windows.
|
|
//>>docs: http://api.jqueryui.com/dialog/
|
|
//>>demos: http://jqueryui.com/dialog/
|
|
//>>css.structure: ../../themes/base/core.css
|
|
//>>css.structure: ../../themes/base/dialog.css
|
|
//>>css.theme: ../../themes/base/theme.css
|
|
|
|
( function( factory ) {
|
|
if ( typeof define === "function" && define.amd ) {
|
|
|
|
// AMD. Register as an anonymous module.
|
|
define( [
|
|
"jquery",
|
|
"./button",
|
|
"./draggable",
|
|
"./mouse",
|
|
"./resizable",
|
|
"../focusable",
|
|
"../keycode",
|
|
"../position",
|
|
"../safe-active-element",
|
|
"../safe-blur",
|
|
"../tabbable",
|
|
"../unique-id",
|
|
"../version",
|
|
"../widget"
|
|
], factory );
|
|
} else {
|
|
|
|
// Browser globals
|
|
factory( jQuery );
|
|
}
|
|
}( function( $ ) {
|
|
|
|
$.widget( "ui.dialog", {
|
|
version: "@VERSION",
|
|
options: {
|
|
appendTo: "body",
|
|
autoOpen: true,
|
|
buttons: [],
|
|
classes: {
|
|
"ui-dialog": "ui-corner-all",
|
|
"ui-dialog-titlebar": "ui-corner-all"
|
|
},
|
|
closeOnEscape: true,
|
|
closeText: "Close",
|
|
draggable: true,
|
|
hide: null,
|
|
height: "auto",
|
|
maxHeight: null,
|
|
maxWidth: null,
|
|
minHeight: 150,
|
|
minWidth: 150,
|
|
modal: false,
|
|
position: {
|
|
my: "center",
|
|
at: "center",
|
|
of: window,
|
|
collision: "fit",
|
|
|
|
// Ensure the titlebar is always visible
|
|
using: function( pos ) {
|
|
var topOffset = $( this ).css( pos ).offset().top;
|
|
if ( topOffset < 0 ) {
|
|
$( this ).css( "top", pos.top - topOffset );
|
|
}
|
|
}
|
|
},
|
|
resizable: true,
|
|
show: null,
|
|
title: null,
|
|
width: 300,
|
|
|
|
// Callbacks
|
|
beforeClose: null,
|
|
close: null,
|
|
drag: null,
|
|
dragStart: null,
|
|
dragStop: null,
|
|
focus: null,
|
|
open: null,
|
|
resize: null,
|
|
resizeStart: null,
|
|
resizeStop: null
|
|
},
|
|
|
|
sizeRelatedOptions: {
|
|
buttons: true,
|
|
height: true,
|
|
maxHeight: true,
|
|
maxWidth: true,
|
|
minHeight: true,
|
|
minWidth: true,
|
|
width: true
|
|
},
|
|
|
|
resizableRelatedOptions: {
|
|
maxHeight: true,
|
|
maxWidth: true,
|
|
minHeight: true,
|
|
minWidth: true
|
|
},
|
|
|
|
_create: function() {
|
|
this.originalCss = {
|
|
display: this.element[ 0 ].style.display,
|
|
width: this.element[ 0 ].style.width,
|
|
minHeight: this.element[ 0 ].style.minHeight,
|
|
maxHeight: this.element[ 0 ].style.maxHeight,
|
|
height: this.element[ 0 ].style.height
|
|
};
|
|
this.originalPosition = {
|
|
parent: this.element.parent(),
|
|
index: this.element.parent().children().index( this.element )
|
|
};
|
|
this.originalTitle = this.element.attr( "title" );
|
|
if ( this.options.title == null && this.originalTitle != null ) {
|
|
this.options.title = this.originalTitle;
|
|
}
|
|
|
|
// Dialogs can't be disabled
|
|
if ( this.options.disabled ) {
|
|
this.options.disabled = false;
|
|
}
|
|
|
|
this._createWrapper();
|
|
|
|
this.element
|
|
.show()
|
|
.removeAttr( "title" )
|
|
.appendTo( this.uiDialog );
|
|
|
|
this._addClass( "ui-dialog-content", "ui-widget-content" );
|
|
|
|
this._createTitlebar();
|
|
this._createButtonPane();
|
|
|
|
if ( this.options.draggable && $.fn.draggable ) {
|
|
this._makeDraggable();
|
|
}
|
|
if ( this.options.resizable && $.fn.resizable ) {
|
|
this._makeResizable();
|
|
}
|
|
|
|
this._isOpen = false;
|
|
|
|
this._trackFocus();
|
|
},
|
|
|
|
_init: function() {
|
|
if ( this.options.autoOpen ) {
|
|
this.open();
|
|
}
|
|
},
|
|
|
|
_appendTo: function() {
|
|
var element = this.options.appendTo;
|
|
if ( element && ( element.jquery || element.nodeType ) ) {
|
|
return $( element );
|
|
}
|
|
return this.document.find( element || "body" ).eq( 0 );
|
|
},
|
|
|
|
_destroy: function() {
|
|
var next,
|
|
originalPosition = this.originalPosition;
|
|
|
|
this._untrackInstance();
|
|
this._destroyOverlay();
|
|
|
|
this.element
|
|
.removeUniqueId()
|
|
.css( this.originalCss )
|
|
|
|
// Without detaching first, the following becomes really slow
|
|
.detach();
|
|
|
|
this.uiDialog.remove();
|
|
|
|
if ( this.originalTitle ) {
|
|
this.element.attr( "title", this.originalTitle );
|
|
}
|
|
|
|
next = originalPosition.parent.children().eq( originalPosition.index );
|
|
|
|
// Don't try to place the dialog next to itself (#8613)
|
|
if ( next.length && next[ 0 ] !== this.element[ 0 ] ) {
|
|
next.before( this.element );
|
|
} else {
|
|
originalPosition.parent.append( this.element );
|
|
}
|
|
},
|
|
|
|
widget: function() {
|
|
return this.uiDialog;
|
|
},
|
|
|
|
disable: $.noop,
|
|
enable: $.noop,
|
|
|
|
close: function( event ) {
|
|
var that = this;
|
|
|
|
if ( !this._isOpen || this._trigger( "beforeClose", event ) === false ) {
|
|
return;
|
|
}
|
|
|
|
this._isOpen = false;
|
|
this._focusedElement = null;
|
|
this._destroyOverlay();
|
|
this._untrackInstance();
|
|
|
|
if ( !this.opener.filter( ":focusable" ).trigger( "focus" ).length ) {
|
|
|
|
// Hiding a focused element doesn't trigger blur in WebKit
|
|
// so in case we have nothing to focus on, explicitly blur the active element
|
|
// https://bugs.webkit.org/show_bug.cgi?id=47182
|
|
$.ui.safeBlur( $.ui.safeActiveElement( this.document[ 0 ] ) );
|
|
}
|
|
|
|
this._hide( this.uiDialog, this.options.hide, function() {
|
|
that._trigger( "close", event );
|
|
} );
|
|
},
|
|
|
|
isOpen: function() {
|
|
return this._isOpen;
|
|
},
|
|
|
|
moveToTop: function() {
|
|
this._moveToTop();
|
|
},
|
|
|
|
_moveToTop: function( event, silent ) {
|
|
var moved = false,
|
|
zIndices = this.uiDialog.siblings( ".ui-front:visible" ).map( function() {
|
|
return +$( this ).css( "z-index" );
|
|
} ).get(),
|
|
zIndexMax = Math.max.apply( null, zIndices );
|
|
|
|
if ( zIndexMax >= +this.uiDialog.css( "z-index" ) ) {
|
|
this.uiDialog.css( "z-index", zIndexMax + 1 );
|
|
moved = true;
|
|
}
|
|
|
|
if ( moved && !silent ) {
|
|
this._trigger( "focus", event );
|
|
}
|
|
return moved;
|
|
},
|
|
|
|
open: function() {
|
|
var that = this;
|
|
if ( this._isOpen ) {
|
|
if ( this._moveToTop() ) {
|
|
this._focusTabbable();
|
|
}
|
|
return;
|
|
}
|
|
|
|
this._isOpen = true;
|
|
this.opener = $( $.ui.safeActiveElement( this.document[ 0 ] ) );
|
|
|
|
this._size();
|
|
this._position();
|
|
this._createOverlay();
|
|
this._moveToTop( null, true );
|
|
|
|
// Ensure the overlay is moved to the top with the dialog, but only when
|
|
// opening. The overlay shouldn't move after the dialog is open so that
|
|
// modeless dialogs opened after the modal dialog stack properly.
|
|
if ( this.overlay ) {
|
|
this.overlay.css( "z-index", this.uiDialog.css( "z-index" ) - 1 );
|
|
}
|
|
|
|
this._show( this.uiDialog, this.options.show, function() {
|
|
that._focusTabbable();
|
|
that._trigger( "focus" );
|
|
} );
|
|
|
|
// Track the dialog immediately upon openening in case a focus event
|
|
// somehow occurs outside of the dialog before an element inside the
|
|
// dialog is focused (#10152)
|
|
this._makeFocusTarget();
|
|
|
|
this._trigger( "open" );
|
|
},
|
|
|
|
_focusTabbable: function() {
|
|
|
|
// Set focus to the first match:
|
|
// 1. An element that was focused previously
|
|
// 2. First element inside the dialog matching [autofocus]
|
|
// 3. Tabbable element inside the content element
|
|
// 4. Tabbable element inside the buttonpane
|
|
// 5. The close button
|
|
// 6. The dialog itself
|
|
var hasFocus = this._focusedElement;
|
|
if ( !hasFocus ) {
|
|
hasFocus = this.element.find( "[autofocus]" );
|
|
}
|
|
if ( !hasFocus.length ) {
|
|
hasFocus = this.element.find( ":tabbable" );
|
|
}
|
|
if ( !hasFocus.length ) {
|
|
hasFocus = this.uiDialogButtonPane.find( ":tabbable" );
|
|
}
|
|
if ( !hasFocus.length ) {
|
|
hasFocus = this.uiDialogTitlebarClose.filter( ":tabbable" );
|
|
}
|
|
if ( !hasFocus.length ) {
|
|
hasFocus = this.uiDialog;
|
|
}
|
|
hasFocus.eq( 0 ).trigger( "focus" );
|
|
},
|
|
|
|
_keepFocus: function( event ) {
|
|
function checkFocus() {
|
|
var activeElement = $.ui.safeActiveElement( this.document[ 0 ] ),
|
|
isActive = this.uiDialog[ 0 ] === activeElement ||
|
|
$.contains( this.uiDialog[ 0 ], activeElement );
|
|
if ( !isActive ) {
|
|
this._focusTabbable();
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
checkFocus.call( this );
|
|
|
|
// support: IE
|
|
// IE <= 8 doesn't prevent moving focus even with event.preventDefault()
|
|
// so we check again later
|
|
this._delay( checkFocus );
|
|
},
|
|
|
|
_createWrapper: function() {
|
|
this.uiDialog = $( "<div>" )
|
|
.hide()
|
|
.attr( {
|
|
|
|
// Setting tabIndex makes the div focusable
|
|
tabIndex: -1,
|
|
role: "dialog"
|
|
} )
|
|
.appendTo( this._appendTo() );
|
|
|
|
this._addClass( this.uiDialog, "ui-dialog", "ui-widget ui-widget-content ui-front" );
|
|
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 || event.isDefaultPrevented() ) {
|
|
return;
|
|
}
|
|
var tabbables = this.uiDialog.find( ":tabbable" ),
|
|
first = tabbables.filter( ":first" ),
|
|
last = tabbables.filter( ":last" );
|
|
|
|
if ( ( event.target === last[ 0 ] || event.target === this.uiDialog[ 0 ] ) && !event.shiftKey ) {
|
|
this._delay( function() {
|
|
first.trigger( "focus" );
|
|
} );
|
|
event.preventDefault();
|
|
} else if ( ( event.target === first[ 0 ] || event.target === this.uiDialog[ 0 ] ) && event.shiftKey ) {
|
|
this._delay( function() {
|
|
last.trigger( "focus" );
|
|
} );
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
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() {
|
|
var uiDialogTitle;
|
|
|
|
this.uiDialogTitlebar = $( "<div>" );
|
|
this._addClass( this.uiDialogTitlebar,
|
|
"ui-dialog-titlebar", "ui-widget-header ui-helper-clearfix" );
|
|
this._on( this.uiDialogTitlebar, {
|
|
mousedown: function( event ) {
|
|
|
|
// Don't prevent click on close button (#8838)
|
|
// Focusing a dialog that is partially scrolled out of view
|
|
// causes the browser to scroll it into view, preventing the click event
|
|
if ( !$( event.target ).closest( ".ui-dialog-titlebar-close" ) ) {
|
|
|
|
// Dialog isn't getting focus when dragging (#8063)
|
|
this.uiDialog.trigger( "focus" );
|
|
}
|
|
}
|
|
} );
|
|
|
|
// Support: IE
|
|
// Use type="button" to prevent enter keypresses in textboxes from closing the
|
|
// dialog in IE (#9312)
|
|
this.uiDialogTitlebarClose = $( "<button type='button'></button>" )
|
|
.button( {
|
|
label: this.options.closeText,
|
|
icon: "ui-icon-closethick",
|
|
showLabel: false
|
|
} )
|
|
.appendTo( this.uiDialogTitlebar );
|
|
|
|
this._addClass( this.uiDialogTitlebarClose, "ui-dialog-titlebar-close" );
|
|
this._on( this.uiDialogTitlebarClose, {
|
|
click: function( event ) {
|
|
event.preventDefault();
|
|
this.close( event );
|
|
}
|
|
} );
|
|
|
|
uiDialogTitle = $( "<span>" ).uniqueId().prependTo( this.uiDialogTitlebar );
|
|
this._addClass( uiDialogTitle, "ui-dialog-title" );
|
|
this._title( uiDialogTitle );
|
|
|
|
this.uiDialogTitlebar.prependTo( this.uiDialog );
|
|
|
|
this.uiDialog.attr( {
|
|
"aria-labelledby": uiDialogTitle.attr( "id" )
|
|
} );
|
|
},
|
|
|
|
_title: function( title ) {
|
|
if ( this.options.title ) {
|
|
title.text( this.options.title );
|
|
} else {
|
|
title.html( " " );
|
|
}
|
|
},
|
|
|
|
_createButtonPane: function() {
|
|
this.uiDialogButtonPane = $( "<div>" );
|
|
this._addClass( this.uiDialogButtonPane, "ui-dialog-buttonpane",
|
|
"ui-widget-content ui-helper-clearfix" );
|
|
|
|
this.uiButtonSet = $( "<div>" )
|
|
.appendTo( this.uiDialogButtonPane );
|
|
this._addClass( this.uiButtonSet, "ui-dialog-buttonset" );
|
|
|
|
this._createButtons();
|
|
},
|
|
|
|
_createButtons: function() {
|
|
var that = this,
|
|
buttons = this.options.buttons;
|
|
|
|
// If we already have a button pane, remove it
|
|
this.uiDialogButtonPane.remove();
|
|
this.uiButtonSet.empty();
|
|
|
|
if ( $.isEmptyObject( buttons ) || ( $.isArray( buttons ) && !buttons.length ) ) {
|
|
this._removeClass( this.uiDialog, "ui-dialog-buttons" );
|
|
return;
|
|
}
|
|
|
|
$.each( buttons, function( name, props ) {
|
|
var click, buttonOptions;
|
|
props = $.isFunction( props ) ?
|
|
{ click: props, text: name } :
|
|
props;
|
|
|
|
// Default to a non-submitting button
|
|
props = $.extend( { type: "button" }, props );
|
|
|
|
// Change the context for the click callback to be the main element
|
|
click = props.click;
|
|
buttonOptions = {
|
|
icon: props.icon,
|
|
iconPosition: props.iconPosition,
|
|
showLabel: props.showLabel
|
|
};
|
|
|
|
delete props.click;
|
|
delete props.icon;
|
|
delete props.iconPosition;
|
|
delete props.showLabel;
|
|
|
|
$( "<button></button>", props )
|
|
.button( buttonOptions )
|
|
.appendTo( that.uiButtonSet )
|
|
.on( "click", function() {
|
|
click.apply( that.element[ 0 ], arguments );
|
|
} );
|
|
} );
|
|
this._addClass( this.uiDialog, "ui-dialog-buttons" );
|
|
this.uiDialogButtonPane.appendTo( this.uiDialog );
|
|
},
|
|
|
|
_makeDraggable: function() {
|
|
var that = this,
|
|
options = this.options;
|
|
|
|
function filteredUi( ui ) {
|
|
return {
|
|
position: ui.position,
|
|
offset: ui.offset
|
|
};
|
|
}
|
|
|
|
this.uiDialog.draggable( {
|
|
cancel: ".ui-dialog-content, .ui-dialog-titlebar-close",
|
|
handle: ".ui-dialog-titlebar",
|
|
containment: "document",
|
|
start: function( event, ui ) {
|
|
that._addClass( $( this ), "ui-dialog-dragging" );
|
|
that._blockFrames();
|
|
that._trigger( "dragStart", event, filteredUi( ui ) );
|
|
},
|
|
drag: function( event, ui ) {
|
|
that._trigger( "drag", event, filteredUi( ui ) );
|
|
},
|
|
stop: function( event, ui ) {
|
|
var left = ui.offset.left - that.document.scrollLeft(),
|
|
top = ui.offset.top - that.document.scrollTop();
|
|
|
|
options.position = {
|
|
my: "left top",
|
|
at: "left" + ( left >= 0 ? "+" : "" ) + left + " " +
|
|
"top" + ( top >= 0 ? "+" : "" ) + top,
|
|
of: that.window
|
|
};
|
|
that._removeClass( $( this ), "ui-dialog-dragging" );
|
|
that._unblockFrames();
|
|
that._trigger( "dragStop", event, filteredUi( ui ) );
|
|
}
|
|
} );
|
|
},
|
|
|
|
_makeResizable: function() {
|
|
var that = this,
|
|
options = this.options,
|
|
handles = options.resizable,
|
|
|
|
// .ui-resizable has position: relative defined in the stylesheet
|
|
// but dialogs have to use absolute or fixed positioning
|
|
position = this.uiDialog.css( "position" ),
|
|
resizeHandles = typeof handles === "string" ?
|
|
handles :
|
|
"n,e,s,w,se,sw,ne,nw";
|
|
|
|
function filteredUi( ui ) {
|
|
return {
|
|
originalPosition: ui.originalPosition,
|
|
originalSize: ui.originalSize,
|
|
position: ui.position,
|
|
size: ui.size
|
|
};
|
|
}
|
|
|
|
this.uiDialog.resizable( {
|
|
cancel: ".ui-dialog-content",
|
|
containment: "document",
|
|
alsoResize: this.element,
|
|
maxWidth: options.maxWidth,
|
|
maxHeight: options.maxHeight,
|
|
minWidth: options.minWidth,
|
|
minHeight: this._minHeight(),
|
|
handles: resizeHandles,
|
|
start: function( event, ui ) {
|
|
that._addClass( $( this ), "ui-dialog-resizing" );
|
|
that._blockFrames();
|
|
that._trigger( "resizeStart", event, filteredUi( ui ) );
|
|
},
|
|
resize: function( event, ui ) {
|
|
that._trigger( "resize", event, filteredUi( ui ) );
|
|
},
|
|
stop: function( event, ui ) {
|
|
var offset = that.uiDialog.offset(),
|
|
left = offset.left - that.document.scrollLeft(),
|
|
top = offset.top - that.document.scrollTop();
|
|
|
|
options.height = that.uiDialog.height();
|
|
options.width = that.uiDialog.width();
|
|
options.position = {
|
|
my: "left top",
|
|
at: "left" + ( left >= 0 ? "+" : "" ) + left + " " +
|
|
"top" + ( top >= 0 ? "+" : "" ) + top,
|
|
of: that.window
|
|
};
|
|
that._removeClass( $( this ), "ui-dialog-resizing" );
|
|
that._unblockFrames();
|
|
that._trigger( "resizeStop", event, filteredUi( ui ) );
|
|
}
|
|
} )
|
|
.css( "position", position );
|
|
},
|
|
|
|
_trackFocus: function() {
|
|
this._on( this.widget(), {
|
|
focusin: function( event ) {
|
|
this._makeFocusTarget();
|
|
this._focusedElement = $( event.target );
|
|
}
|
|
} );
|
|
},
|
|
|
|
_makeFocusTarget: function() {
|
|
this._untrackInstance();
|
|
this._trackingInstances().unshift( this );
|
|
},
|
|
|
|
_untrackInstance: function() {
|
|
var instances = this._trackingInstances(),
|
|
exists = $.inArray( this, instances );
|
|
if ( exists !== -1 ) {
|
|
instances.splice( exists, 1 );
|
|
}
|
|
},
|
|
|
|
_trackingInstances: function() {
|
|
var instances = this.document.data( "ui-dialog-instances" );
|
|
if ( !instances ) {
|
|
instances = [];
|
|
this.document.data( "ui-dialog-instances", instances );
|
|
}
|
|
return instances;
|
|
},
|
|
|
|
_minHeight: function() {
|
|
var options = this.options;
|
|
|
|
return options.height === "auto" ?
|
|
options.minHeight :
|
|
Math.min( options.minHeight, options.height );
|
|
},
|
|
|
|
_position: function() {
|
|
|
|
// Need to show the dialog to get the actual offset in the position plugin
|
|
var isVisible = this.uiDialog.is( ":visible" );
|
|
if ( !isVisible ) {
|
|
this.uiDialog.show();
|
|
}
|
|
this.uiDialog.position( this.options.position );
|
|
if ( !isVisible ) {
|
|
this.uiDialog.hide();
|
|
}
|
|
},
|
|
|
|
_setOptions: function( options ) {
|
|
var that = this,
|
|
resize = false,
|
|
resizableOptions = {};
|
|
|
|
$.each( options, function( key, value ) {
|
|
that._setOption( key, value );
|
|
|
|
if ( key in that.sizeRelatedOptions ) {
|
|
resize = true;
|
|
}
|
|
if ( key in that.resizableRelatedOptions ) {
|
|
resizableOptions[ key ] = value;
|
|
}
|
|
} );
|
|
|
|
if ( resize ) {
|
|
this._size();
|
|
this._position();
|
|
}
|
|
if ( this.uiDialog.is( ":data(ui-resizable)" ) ) {
|
|
this.uiDialog.resizable( "option", resizableOptions );
|
|
}
|
|
},
|
|
|
|
_setOption: function( key, value ) {
|
|
var isDraggable, isResizable,
|
|
uiDialog = this.uiDialog;
|
|
|
|
if ( key === "disabled" ) {
|
|
return;
|
|
}
|
|
|
|
this._super( key, value );
|
|
|
|
if ( key === "appendTo" ) {
|
|
this.uiDialog.appendTo( this._appendTo() );
|
|
}
|
|
|
|
if ( key === "buttons" ) {
|
|
this._createButtons();
|
|
}
|
|
|
|
if ( key === "closeText" ) {
|
|
this.uiDialogTitlebarClose.button( {
|
|
|
|
// Ensure that we always pass a string
|
|
label: "" + value
|
|
} );
|
|
}
|
|
|
|
if ( key === "draggable" ) {
|
|
isDraggable = uiDialog.is( ":data(ui-draggable)" );
|
|
if ( isDraggable && !value ) {
|
|
uiDialog.draggable( "destroy" );
|
|
}
|
|
|
|
if ( !isDraggable && value ) {
|
|
this._makeDraggable();
|
|
}
|
|
}
|
|
|
|
if ( key === "position" ) {
|
|
this._position();
|
|
}
|
|
|
|
if ( key === "resizable" ) {
|
|
|
|
// currently resizable, becoming non-resizable
|
|
isResizable = uiDialog.is( ":data(ui-resizable)" );
|
|
if ( isResizable && !value ) {
|
|
uiDialog.resizable( "destroy" );
|
|
}
|
|
|
|
// Currently resizable, changing handles
|
|
if ( isResizable && typeof value === "string" ) {
|
|
uiDialog.resizable( "option", "handles", value );
|
|
}
|
|
|
|
// Currently non-resizable, becoming resizable
|
|
if ( !isResizable && value !== false ) {
|
|
this._makeResizable();
|
|
}
|
|
}
|
|
|
|
if ( key === "title" ) {
|
|
this._title( this.uiDialogTitlebar.find( ".ui-dialog-title" ) );
|
|
}
|
|
},
|
|
|
|
_size: function() {
|
|
|
|
// If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
|
|
// divs will both have width and height set, so we need to reset them
|
|
var nonContentHeight, minContentHeight, maxContentHeight,
|
|
options = this.options;
|
|
|
|
// Reset content sizing
|
|
this.element.show().css( {
|
|
width: "auto",
|
|
minHeight: 0,
|
|
maxHeight: "none",
|
|
height: 0
|
|
} );
|
|
|
|
if ( options.minWidth > options.width ) {
|
|
options.width = options.minWidth;
|
|
}
|
|
|
|
// Reset wrapper sizing
|
|
// determine the height of all the non-content elements
|
|
nonContentHeight = this.uiDialog.css( {
|
|
height: "auto",
|
|
width: options.width
|
|
} )
|
|
.outerHeight();
|
|
minContentHeight = Math.max( 0, options.minHeight - nonContentHeight );
|
|
maxContentHeight = typeof options.maxHeight === "number" ?
|
|
Math.max( 0, options.maxHeight - nonContentHeight ) :
|
|
"none";
|
|
|
|
if ( options.height === "auto" ) {
|
|
this.element.css( {
|
|
minHeight: minContentHeight,
|
|
maxHeight: maxContentHeight,
|
|
height: "auto"
|
|
} );
|
|
} else {
|
|
this.element.height( Math.max( 0, options.height - nonContentHeight ) );
|
|
}
|
|
|
|
if ( this.uiDialog.is( ":data(ui-resizable)" ) ) {
|
|
this.uiDialog.resizable( "option", "minHeight", this._minHeight() );
|
|
}
|
|
},
|
|
|
|
_blockFrames: function() {
|
|
this.iframeBlocks = this.document.find( "iframe" ).map( function() {
|
|
var iframe = $( this );
|
|
|
|
return $( "<div>" )
|
|
.css( {
|
|
position: "absolute",
|
|
width: iframe.outerWidth(),
|
|
height: iframe.outerHeight()
|
|
} )
|
|
.appendTo( iframe.parent() )
|
|
.offset( iframe.offset() )[ 0 ];
|
|
} );
|
|
},
|
|
|
|
_unblockFrames: function() {
|
|
if ( this.iframeBlocks ) {
|
|
this.iframeBlocks.remove();
|
|
delete this.iframeBlocks;
|
|
}
|
|
},
|
|
|
|
_allowInteraction: function( event ) {
|
|
if ( $( event.target ).closest( ".ui-dialog" ).length ) {
|
|
return true;
|
|
}
|
|
|
|
// TODO: Remove hack when datepicker implements
|
|
// the .ui-front logic (#8989)
|
|
return !!$( event.target ).closest( ".ui-datepicker" ).length;
|
|
},
|
|
|
|
_createOverlay: function() {
|
|
if ( !this.options.modal ) {
|
|
return;
|
|
}
|
|
|
|
// We use a delay in case the overlay is created from an
|
|
// event that we're going to be cancelling (#2804)
|
|
var isOpening = true;
|
|
this._delay( function() {
|
|
isOpening = false;
|
|
} );
|
|
|
|
if ( !this.document.data( "ui-dialog-overlays" ) ) {
|
|
|
|
// Prevent use of anchors and inputs
|
|
// Using _on() for an event handler shared across many instances is
|
|
// safe because the dialogs stack and must be closed in reverse order
|
|
this._on( this.document, {
|
|
focusin: function( event ) {
|
|
if ( isOpening ) {
|
|
return;
|
|
}
|
|
|
|
if ( !this._allowInteraction( event ) ) {
|
|
event.preventDefault();
|
|
this._trackingInstances()[ 0 ]._focusTabbable();
|
|
}
|
|
}
|
|
} );
|
|
}
|
|
|
|
this.overlay = $( "<div>" )
|
|
.appendTo( this._appendTo() );
|
|
|
|
this._addClass( this.overlay, null, "ui-widget-overlay ui-front" );
|
|
this._on( this.overlay, {
|
|
mousedown: "_keepFocus"
|
|
} );
|
|
this.document.data( "ui-dialog-overlays",
|
|
( this.document.data( "ui-dialog-overlays" ) || 0 ) + 1 );
|
|
},
|
|
|
|
_destroyOverlay: function() {
|
|
if ( !this.options.modal ) {
|
|
return;
|
|
}
|
|
|
|
if ( this.overlay ) {
|
|
var overlays = this.document.data( "ui-dialog-overlays" ) - 1;
|
|
|
|
if ( !overlays ) {
|
|
this._off( this.document, "focusin" );
|
|
this.document.removeData( "ui-dialog-overlays" );
|
|
} else {
|
|
this.document.data( "ui-dialog-overlays", overlays );
|
|
}
|
|
|
|
this.overlay.remove();
|
|
this.overlay = null;
|
|
}
|
|
}
|
|
} );
|
|
|
|
// DEPRECATED
|
|
// TODO: switch return back to widget declaration at top of file when this is removed
|
|
if ( $.uiBackCompat !== false ) {
|
|
|
|
// Backcompat for dialogClass option
|
|
$.widget( "ui.dialog", $.ui.dialog, {
|
|
options: {
|
|
dialogClass: ""
|
|
},
|
|
_createWrapper: function() {
|
|
this._super();
|
|
this.uiDialog.addClass( this.options.dialogClass );
|
|
},
|
|
_setOption: function( key, value ) {
|
|
if ( key === "dialogClass" ) {
|
|
this.uiDialog
|
|
.removeClass( this.options.dialogClass )
|
|
.addClass( value );
|
|
}
|
|
this._superApply( arguments );
|
|
}
|
|
} );
|
|
}
|
|
|
|
return $.ui.dialog;
|
|
|
|
} ) );
|