aboutsummaryrefslogtreecommitdiffstats
path: root/ui/widgets/dialog.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/widgets/dialog.js')
-rw-r--r--ui/widgets/dialog.js907
1 files changed, 907 insertions, 0 deletions
diff --git a/ui/widgets/dialog.js b/ui/widgets/dialog.js
new file mode 100644
index 000000000..96e004b6c
--- /dev/null
+++ b/ui/widgets/dialog.js
@@ -0,0 +1,907 @@
+/*!
+ * 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",
+ "../mouse",
+ "../resizable",
+ "../draggable",
+ "../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;
+ }
+
+ 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,
+ icons: {
+ primary: "ui-icon-closethick"
+ },
+ text: 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( "&#160;" );
+ }
+ },
+
+ _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 = {
+ icons: props.icons,
+ text: props.showText
+ };
+ delete props.icons;
+ delete props.showText;
+ delete props.click;
+
+ $( "<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;
+
+} ) );