diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/dialog_common.js index 1a9b4e109..57d7aa0aa 100644 --- a/tests/unit/dialog/dialog_common.js +++ b/tests/unit/dialog/dialog_common.js @@ -2,7 +2,7 @@ TestHelpers.commonWidgetTests( "dialog", { defaults: { appendTo: "body", autoOpen: true, - buttons: {}, + buttons: [], closeOnEscape: true, closeText: 'close', disabled: false, diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 2553109ba..2c7c6b57a 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -19,8 +19,7 @@ */ (function( $, undefined ) { -var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ", - sizeRelatedOptions = { +var sizeRelatedOptions = { buttons: true, height: true, maxHeight: true, @@ -36,12 +35,12 @@ var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ui-fr minWidth: true }; -$.widget("ui.dialog", { +$.widget( "ui.dialog", { version: "@VERSION", options: { appendTo: "body", autoOpen: true, - buttons: {}, + buttons: [], closeOnEscape: true, closeText: "close", dialogClass: "", @@ -58,7 +57,7 @@ $.widget("ui.dialog", { at: "center", of: window, collision: "fit", - // ensure that the titlebar is never outside the document + // Ensure the titlebar is always visible using: function( pos ) { var topOffset = $( this ).css( pos ).offset().top; if ( topOffset < 0 ) { @@ -92,12 +91,12 @@ $.widget("ui.dialog", { maxHeight: this.element[0].style.maxHeight, height: this.element[0].style.height }; - this.originalTitle = this.element.attr( "title" ); - this.options.title = this.options.title || this.originalTitle; - this.oldPosition = { + this.originalPosition = { parent: this.element.parent(), index: this.element.parent().children().index( this.element ) }; + this.originalTitle = this.element.attr( "title" ); + this.options.title = this.options.title || this.originalTitle; this._createWrapper(); @@ -136,7 +135,7 @@ $.widget("ui.dialog", { _destroy: function() { var next, - oldPosition = this.oldPosition; + originalPosition = this.originalPosition; this._destroyOverlay(); @@ -144,7 +143,7 @@ $.widget("ui.dialog", { .removeUniqueId() .removeClass( "ui-dialog-content ui-widget-content" ) .css( this.originalCss ) - // without detaching first, the following becomes really slow + // Without detaching first, the following becomes really slow .detach(); this.uiDialog.stop( true, true ).remove(); @@ -153,12 +152,12 @@ $.widget("ui.dialog", { this.element.attr( "title", this.originalTitle ); } - next = oldPosition.parent.children().eq( oldPosition.index ); + 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 { - oldPosition.parent.append( this.element ); + originalPosition.parent.append( this.element ); } }, @@ -172,16 +171,11 @@ $.widget("ui.dialog", { close: function( event ) { var that = this; - if ( !this._isOpen ) { - return; - } - - if ( this._trigger( "beforeClose", event ) === false ) { + if ( !this._isOpen || this._trigger( "beforeClose", event ) === false ) { return; } this._isOpen = false; - this._destroyOverlay(); if ( !this.opener.filter( ":focusable" ).focus().length ) { @@ -206,7 +200,7 @@ $.widget("ui.dialog", { _moveToTop: function( event, silent ) { var moved = !!this.uiDialog.nextAll( ":visible" ).insertBefore( this.uiDialog ).length; - if ( !silent && moved ) { + if ( moved && !silent ) { this._trigger( "focus", event ); } return moved; @@ -233,29 +227,27 @@ $.widget("ui.dialog", { this._isOpen = true; this._trigger( "open" ); this._trigger( "focus" ); - - return this; }, _focusTabbable: function() { - // set focus to the first match: - // 1. first element inside the dialog matching [autofocus] - // 2. tabbable element inside the content element - // 3. tabbable element inside the buttonpane - // 4. the close button - // 5. the dialog itself + // Set focus to the first match: + // 1. First element inside the dialog matching [autofocus] + // 2. Tabbable element inside the content element + // 3. Tabbable element inside the buttonpane + // 4. The close button + // 5. The dialog itself var 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; - } - } - } + } + 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 ).focus(); }, @@ -279,10 +271,11 @@ $.widget("ui.dialog", { _createWrapper: function() { this.uiDialog = $( "
" ) - .addClass( uiDialogClasses + this.options.dialogClass ) + .addClass( "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front " + + this.options.dialogClass ) .hide() .attr({ - // setting tabIndex makes the div focusable + // Setting tabIndex makes the div focusable tabIndex: -1, role: "dialog" }) @@ -307,10 +300,10 @@ $.widget("ui.dialog", { if ( ( event.target === last[ 0 ] || event.target === this.uiDialog[ 0 ] ) && !event.shiftKey ) { first.focus( 1 ); - return false; + event.preventDefault(); } else if ( ( event.target === first[ 0 ] || event.target === this.uiDialog[ 0 ] ) && event.shiftKey ) { last.focus( 1 ); - return false; + event.preventDefault(); } }, mousedown: function( event ) { @@ -334,7 +327,7 @@ $.widget("ui.dialog", { var uiDialogTitle; this.uiDialogTitlebar = $( "
" ) - .addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ) + .addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ) .prependTo( this.uiDialog ); this._on( this.uiDialogTitlebar, { mousedown: function( event ) { @@ -359,7 +352,7 @@ $.widget("ui.dialog", { .addClass( "ui-dialog-titlebar-close" ) .appendTo( this.uiDialogTitlebar ); this._on( this.uiDialogTitlebarClose, { - "click": function( event ) { + click: function( event ) { event.preventDefault(); this.close( event ); } @@ -384,12 +377,12 @@ $.widget("ui.dialog", { }, _createButtonPane: function() { - var uiDialogButtonPane = ( this.uiDialogButtonPane = $( "
" ) ) + this.uiDialogButtonPane = $( "
" ) .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ); this.uiButtonSet = $( "
" ) .addClass( "ui-dialog-buttonset" ) - .appendTo( uiDialogButtonPane ); + .appendTo( this.uiDialogButtonPane ); this._createButtons(); }, @@ -402,34 +395,35 @@ $.widget("ui.dialog", { this.uiDialogButtonPane.remove(); this.uiButtonSet.empty(); - if ( !$.isEmptyObject( buttons ) ) { - $.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; - props.click = function() { - click.apply( that.element[0], arguments ); - }; - buttonOptions = { - icons: props.icons, - text: props.showText - }; - delete props.icons; - delete props.showText; - $( "", props ) - .button( buttonOptions ) - .appendTo( that.uiButtonSet ); - }); - this.uiDialog.addClass( "ui-dialog-buttons" ); - this.uiDialogButtonPane.appendTo( this.uiDialog ); - } else { + if ( $.isEmptyObject( buttons ) ) { this.uiDialog.removeClass( "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; + props.click = function() { + click.apply( that.element[0], arguments ); + }; + buttonOptions = { + icons: props.icons, + text: props.showText + }; + delete props.icons; + delete props.showText; + $( "", props ) + .button( buttonOptions ) + .appendTo( that.uiButtonSet ); + }); + this.uiDialog.addClass( "ui-dialog-buttons" ); + this.uiDialogButtonPane.appendTo( this.uiDialog ); }, _makeDraggable: function() { @@ -448,8 +442,7 @@ $.widget("ui.dialog", { handle: ".ui-dialog-titlebar", containment: "document", start: function( event, ui ) { - $( this ) - .addClass( "ui-dialog-dragging" ); + $( this ).addClass( "ui-dialog-dragging" ); that._trigger( "dragStart", event, filteredUi( ui ) ); }, drag: function( event, ui ) { @@ -460,8 +453,7 @@ $.widget("ui.dialog", { ui.position.left - that.document.scrollLeft(), ui.position.top - that.document.scrollTop() ]; - $( this ) - .removeClass( "ui-dialog-dragging" ); + $( this ).removeClass( "ui-dialog-dragging" ); that._trigger( "dragStop", event, filteredUi( ui ) ); } }); @@ -510,23 +502,19 @@ $.widget("ui.dialog", { that._trigger( "resizeStop", event, filteredUi( ui ) ); } }) - .css( "position", position ) - .find( ".ui-resizable-se" ) - .addClass( "ui-icon ui-icon-grip-diagonal-se" ); + .css( "position", position ); }, _minHeight: function() { var options = this.options; - if ( options.height === "auto" ) { - return options.minHeight; - } else { - return Math.min( options.minHeight, options.height ); - } + 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 + // 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(); @@ -539,8 +527,8 @@ $.widget("ui.dialog", { _setOptions: function( options ) { var that = this, - resizableOptions = {}, - resize = false; + resize = false, + resizableOptions = {}; $.each( options, function( key, value ) { that._setOption( key, value ); @@ -589,7 +577,7 @@ $.widget("ui.dialog", { if ( key === "closeText" ) { this.uiDialogTitlebarClose.button({ - // ensure that we always pass a string + // Ensure that we always pass a string label: "" + value }); } @@ -638,7 +626,7 @@ $.widget("ui.dialog", { var nonContentHeight, minContentHeight, maxContentHeight, options = this.options; - // reset content sizing + // Reset content sizing this.element.show().css({ width: "auto", minHeight: 0, @@ -681,18 +669,20 @@ $.widget("ui.dialog", { if ( !this.options.modal ) { return; } - if ( $.ui.dialog.overlayInstances === 0 ) { - // prevent use of anchors and inputs - // we use a setTimeout in case the overlay is created from an - // event that we're going to be cancelling (see #2804) + + if ( !$.ui.dialog.overlayInstances ) { + // Prevent use of anchors and inputs. + // We use a delay in case the overlay is created from an + // event that we're going to be cancelling. (#2804) this._delay(function() { - // handle $(el).dialog().dialog('close') (see #4065) + // Handle .dialog().dialog("close") (#4065) if ( $.ui.dialog.overlayInstances ) { this._on( this.document, { focusin: function( event ) { if ( !$( event.target ).closest( ".ui-dialog").length ) { event.preventDefault(); - $( ".ui-dialog:visible:last .ui-dialog-content" ).data( "ui-dialog" )._focusTabbable(); + $( ".ui-dialog:visible:last .ui-dialog-content" ) + .data( "ui-dialog" )._focusTabbable(); } } }); @@ -700,20 +690,22 @@ $.widget("ui.dialog", { }); } - var $el = this.overlay = $( "
" ).addClass( "ui-widget-overlay ui-front" ); - $el.appendTo( this.document[ 0 ].body ); - this._on( $el, { + this.overlay = $( "
" ) + .addClass( "ui-widget-overlay ui-front" ) + .appendTo( this.document[ 0 ].body ); + this._on( this.overlay, { mousedown: "_keepFocus" }); - $.ui.dialog.overlayInstances += 1; + $.ui.dialog.overlayInstances++; }, _destroyOverlay: function() { if ( !this.options.modal ) { return; } - $.ui.dialog.overlayInstances -= 1; - if ( $.ui.dialog.overlayInstances === 0 ) { + + $.ui.dialog.overlayInstances--; + if ( !$.ui.dialog.overlayInstances ) { this._off( this.document, "focusin" ); } this.overlay.remove();