diff options
| -rw-r--r-- | tests/unit/dialog/dialog.html | 4 | ||||
| -rw-r--r-- | tests/unit/dialog/dialog_common.js | 6 | ||||
| -rw-r--r-- | tests/unit/dialog/dialog_common_deprecated.js | 47 | ||||
| -rw-r--r-- | tests/unit/dialog/dialog_core.js | 53 | ||||
| -rw-r--r-- | tests/unit/dialog/dialog_deprecated.html | 66 | ||||
| -rw-r--r-- | tests/unit/dialog/dialog_deprecated.js | 28 | ||||
| -rw-r--r-- | tests/unit/dialog/dialog_options.js | 20 | ||||
| -rw-r--r-- | ui/dialog.js | 85 |
8 files changed, 255 insertions, 54 deletions
diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html index 55da8c8f5..5434e6bfc 100644 --- a/tests/unit/dialog/dialog.html +++ b/tests/unit/dialog/dialog.html @@ -5,10 +5,14 @@ <title>jQuery UI Dialog Test Suite</title> <script src="../../jquery.js"></script> + <script> + $.uiBackCompat = false; + </script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> <script src="../../../external/qunit/qunit.js"></script> <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> <script src="../testsuite.js"></script> + <script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script> <script> TestHelpers.loadResources({ css: [ "core", "dialog" ], diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/dialog_common.js index 87f7f7d15..fc5105d74 100644 --- a/tests/unit/dialog/dialog_common.js +++ b/tests/unit/dialog/dialog_common.js @@ -3,11 +3,13 @@ TestHelpers.commonWidgetTests( "dialog", { appendTo: "body", autoOpen: true, buttons: [], - classes: {}, + classes: { + "ui-dialog": "ui-corner-all", + "ui-dialog-titlebar": "ui-corner-all" + }, closeOnEscape: true, closeText: "Close", disabled: false, - dialogClass: "", draggable: true, height: "auto", hide: null, diff --git a/tests/unit/dialog/dialog_common_deprecated.js b/tests/unit/dialog/dialog_common_deprecated.js new file mode 100644 index 000000000..9ecf6a459 --- /dev/null +++ b/tests/unit/dialog/dialog_common_deprecated.js @@ -0,0 +1,47 @@ +TestHelpers.commonWidgetTests( "dialog", { + defaults: { + appendTo: "body", + autoOpen: true, + buttons: [], + classes: { + "ui-dialog": "ui-corner-all", + "ui-dialog-titlebar": "ui-corner-all" + }, + closeOnEscape: true, + closeText: "close", + dialogClass: "", + disabled: false, + draggable: true, + height: "auto", + hide: null, + maxHeight: null, + maxWidth: null, + minHeight: 150, + minWidth: 150, + modal: false, + position: { + my: "center", + at: "center", + of: window, + collision: "fit", + using: $.ui.dialog.prototype.options.position.using + }, + resizable: true, + show: null, + title: null, + width: 300, + + // callbacks + beforeClose: null, + close: null, + create: null, + drag: null, + dragStart: null, + dragStop: null, + focus: null, + open: null, + resize: null, + resizeStart: null, + resizeStop: null + } +}); diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js index 56f1e3da8..f600722fc 100644 --- a/tests/unit/dialog/dialog_core.js +++ b/tests/unit/dialog/dialog_core.js @@ -7,11 +7,60 @@ // TODO add teardown callback to remove dialogs module("dialog: core"); +test( "markup structure", function( assert ) { + expect( 11 ); + + var element = $( "<div>" ).dialog({ + buttons: [ { + text: "Ok", + click: $.noop + } ] + }), + widget = element.dialog( "widget" ), + titlebar = widget.find( ".ui-dialog-titlebar" ), + title = titlebar.find( ".ui-dialog-title" ), + close = titlebar.find( ".ui-dialog-titlebar-close" ), + buttonpane = widget.find( ".ui-dialog-buttonpane" ), + buttonset = widget.find( ".ui-dialog-buttonset" ), + buttons = buttonset.find( ".ui-button" ); + + assert.hasClasses( widget, "ui-dialog ui-dialog-buttons ui-widget ui-widget-content" ); + assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" ); + equal( titlebar.length, 1, "Dialog has exactly one titlebar" ); + assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" ); + equal( close.length, 1, "Titlebar has exactly one close button" ); + equal( title.length, 1, "Titlebar has exactly one title" ); + assert.hasClasses( element, "ui-dialog-content ui-widget-content" ); + assert.hasClasses( buttonpane, "ui-dialog-buttonpane ui-widget-content" ); + equal( buttonpane.length, 1, "Dialog has exactly one buttonpane" ); + equal( buttonset.length, 1, "Buttonpane has exactly one buttonset" ); + equal( buttons.length, 1, "Buttonset contains exactly 1 button when created with 1" ); + +}); + +test( "markup structure - no buttons", function( assert ) { + expect( 7 ); + + var element = $( "<div>" ).dialog(), + widget = element.dialog( "widget" ), + titlebar = widget.find( ".ui-dialog-titlebar" ), + title = titlebar.find( ".ui-dialog-title" ), + close = titlebar.find( ".ui-dialog-titlebar-close" ); + + assert.hasClasses( widget, "ui-dialog ui-widget ui-widget-content" ); + assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" ); + equal( titlebar.length, 1, "Dialog has exactly one titlebar" ); + assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" ); + equal( close.length, 1, "Titlebar has exactly one close button" ); + equal( title.length, 1, "Titlebar has exactly one title" ); + assert.hasClasses( element, "ui-dialog-content ui-widget-content" ); +}); + test("title id", function() { expect(1); var titleId, - element = $("<div></div>").dialog(); + element = $("<div>").dialog(); titleId = element.dialog("widget").find(".ui-dialog-title").attr("id"); ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id"); @@ -21,7 +70,7 @@ test("title id", function() { test( "ARIA", function() { expect( 4 ); - var element = $( "<div></div>" ).dialog(), + var element = $( "<div>" ).dialog(), wrapper = element.dialog( "widget" ); equal( wrapper.attr( "role" ), "dialog", "dialog role" ); equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) ); diff --git a/tests/unit/dialog/dialog_deprecated.html b/tests/unit/dialog/dialog_deprecated.html new file mode 100644 index 000000000..b26c38e9a --- /dev/null +++ b/tests/unit/dialog/dialog_deprecated.html @@ -0,0 +1,66 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog Test Suite</title> + + <script src="../../jquery.js"></script> + <link rel="stylesheet" href="../../../external/qunit/qunit.css"> + <script src="../../../external/qunit/qunit.js"></script> + <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + <script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script> + <script> + TestHelpers.loadResources({ + css: [ "core", "dialog" ], + js: [ + "ui/core.js", + "ui/widget.js", + "ui/position.js", + "ui/mouse.js", + "ui/draggable.js", + "ui/resizable.js", + "ui/button.js", + "ui/effect.js", + "ui/effect-blind.js", + "ui/effect-clip.js", + "ui/effect-explode.js", + "ui/dialog.js" + ] + }); + </script> + + <script src="dialog_common_derecated.js"></script> + <script src="dialog_core.js"></script> + <script src="dialog_events.js"></script> + <script src="dialog_methods.js"></script> + <script src="dialog_options.js"></script> + <script src="dialog_deprecated.js"></script> + <script src="dialog_test_helpers.js"></script> + + <script src="../swarminject.js"></script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + <div id="dialog1"></div> + <div id="dialog2"></div> + <div id="form-dialog" title="Profile Information"> + <!-- create a spacer to ensure there's enough space to scroll --> + <div style="height: 250px;">...</div> + <fieldset> + <legend>Please share some personal information</legend> + <label for="favorite-animal">Your favorite animal</label><input id="favorite-animal"> + <label for="favorite-color">Your favorite color</label><input id="favorite-color"> + </fieldset> + <div role="group" aria-describedby="section2"> + <p id="section2">Some more (optional) information</p> + <label for="favorite-food">Favorite food</label><input id="favorite-food"> + </div> + </div> + <div class="wrap" id="wrap1"></div> + <div class="wrap" id="wrap2"></div> +</div> +</body> +</html> diff --git a/tests/unit/dialog/dialog_deprecated.js b/tests/unit/dialog/dialog_deprecated.js new file mode 100644 index 000000000..6a26c229e --- /dev/null +++ b/tests/unit/dialog/dialog_deprecated.js @@ -0,0 +1,28 @@ +(function( $ ) { + +module( "dialog (deprecated): options" ); + +test( "dialogClass", function() { + expect( 6 ); + + var element = $( "<div>" ).dialog(), + widget = element.dialog( "widget" ); + equal( widget.is( ".foo" ), false, "dialogClass not specified. class not added" ); + element.remove(); + + element = $( "<div>" ).dialog({ dialogClass: "foo" }); + widget = element.dialog( "widget" ); + equal( widget.is( ".foo" ), true, "dialogClass in init, foo class added" ); + element.dialog( "option", "dialogClass", "foobar" ); + equal( widget.is( ".foo" ), false, "dialogClass changed, previous one was removed" ); + equal( widget.is( ".foobar" ), true, "dialogClass changed, new one was added" ); + element.remove(); + + element = $( "<div>" ).dialog({ dialogClass: "foo bar" }); + widget = element.dialog( "widget" ); + equal( widget.is( ".foo" ), true, "dialogClass in init, two classes. foo class added" ); + equal( widget.is( ".bar" ), true, "dialogClass in init, two classes. bar class added" ); + element.remove(); +}); + +})( jQuery ); diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js index 6bab426fb..d9920b9fc 100644 --- a/tests/unit/dialog/dialog_options.js +++ b/tests/unit/dialog/dialog_options.js @@ -224,26 +224,6 @@ test("closeText", function() { element.remove(); }); -test("dialogClass", function() { - expect( 6 ); - - var element = $("<div></div>").dialog(); - equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added"); - element.remove(); - - element = $("<div></div>").dialog({ dialogClass: "foo" }); - equal(element.dialog("widget").is(".foo"), true, "dialogClass in init. foo class added"); - element.dialog( "option", "dialogClass", "foobar" ); - equal( element.dialog("widget").is(".foo"), false, "dialogClass changed, previous one was removed" ); - equal( element.dialog("widget").is(".foobar"), true, "dialogClass changed, new one was added" ); - element.remove(); - - element = $("<div></div>").dialog({ dialogClass: "foo bar" }); - equal(element.dialog("widget").is(".foo"), true, "dialogClass in init, two classes. foo class added"); - equal(element.dialog("widget").is(".bar"), true, "dialogClass in init, two classes. bar class added"); - element.remove(); -}); - test("draggable", function() { expect(4); diff --git a/ui/dialog.js b/ui/dialog.js index 166f68b0f..8f2fc583c 100644 --- a/ui/dialog.js +++ b/ui/dialog.js @@ -37,15 +37,18 @@ } }(function( $ ) { -return $.widget( "ui.dialog", { +$.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", - dialogClass: "", draggable: true, hide: null, height: "auto", @@ -122,9 +125,10 @@ return $.widget( "ui.dialog", { this.element .show() .removeAttr( "title" ) - .addClass( "ui-dialog-content ui-widget-content" ) .appendTo( this.uiDialog ); + this._addClass( "ui-dialog-content", "ui-widget-content" ); + this._createTitlebar(); this._createButtonPane(); @@ -163,7 +167,6 @@ return $.widget( "ui.dialog", { this.element .removeUniqueId() - .removeClass( "ui-dialog-content ui-widget-content" ) .css( this.originalCss ) // Without detaching first, the following becomes really slow .detach(); @@ -336,8 +339,6 @@ return $.widget( "ui.dialog", { _createWrapper: function() { this.uiDialog = $("<div>") - .addClass( "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front " + - this.options.dialogClass ) .hide() .attr({ // Setting tabIndex makes the div focusable @@ -346,6 +347,7 @@ return $.widget( "ui.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 && @@ -395,9 +397,9 @@ return $.widget( "ui.dialog", { _createTitlebar: function() { var uiDialogTitle; - this.uiDialogTitlebar = $( "<div>" ) - .addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ) - .prependTo( this.uiDialog ); + 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) @@ -421,8 +423,9 @@ return $.widget( "ui.dialog", { }, text: false }) - .addClass( "ui-dialog-titlebar-close" ) .appendTo( this.uiDialogTitlebar ); + + this._addClass( this.uiDialogTitlebarClose, "ui-dialog-titlebar-close" ); this._on( this.uiDialogTitlebarClose, { click: function( event ) { event.preventDefault(); @@ -430,12 +433,12 @@ return $.widget( "ui.dialog", { } }); - uiDialogTitle = $( "<span>" ) - .uniqueId() - .addClass( "ui-dialog-title" ) - .prependTo( this.uiDialogTitlebar ); + 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" ) }); @@ -449,12 +452,13 @@ return $.widget( "ui.dialog", { }, _createButtonPane: function() { - this.uiDialogButtonPane = $( "<div>" ) - .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ); + this.uiDialogButtonPane = $( "<div>" ); + this._addClass( this.uiDialogButtonPane, "ui-dialog-buttonpane", + "ui-widget-content ui-helper-clearfix" ); this.uiButtonSet = $( "<div>" ) - .addClass( "ui-dialog-buttonset" ) .appendTo( this.uiDialogButtonPane ); + this._addClass( this.uiButtonSet, "ui-dialog-buttonset" ); this._createButtons(); }, @@ -468,7 +472,7 @@ return $.widget( "ui.dialog", { this.uiButtonSet.empty(); if ( $.isEmptyObject( buttons ) || ($.isArray( buttons ) && !buttons.length) ) { - this.uiDialog.removeClass( "ui-dialog-buttons" ); + this._removeClass( this.uiDialog, "ui-dialog-buttons" ); return; } @@ -494,7 +498,7 @@ return $.widget( "ui.dialog", { .button( buttonOptions ) .appendTo( that.uiButtonSet ); }); - this.uiDialog.addClass( "ui-dialog-buttons" ); + this._addClass( this.uiDialog, "ui-dialog-buttons" ); this.uiDialogButtonPane.appendTo( this.uiDialog ); }, @@ -514,7 +518,7 @@ return $.widget( "ui.dialog", { handle: ".ui-dialog-titlebar", containment: "document", start: function( event, ui ) { - $( this ).addClass( "ui-dialog-dragging" ); + that._addClass( $( this ), "ui-dialog-dragging" ); that._blockFrames(); that._trigger( "dragStart", event, filteredUi( ui ) ); }, @@ -531,7 +535,7 @@ return $.widget( "ui.dialog", { "top" + (top >= 0 ? "+" : "") + top, of: that.window }; - $( this ).removeClass( "ui-dialog-dragging" ); + that._removeClass( $( this ), "ui-dialog-dragging" ); that._unblockFrames(); that._trigger( "dragStop", event, filteredUi( ui ) ); } @@ -568,7 +572,7 @@ return $.widget( "ui.dialog", { minHeight: this._minHeight(), handles: resizeHandles, start: function( event, ui ) { - $( this ).addClass( "ui-dialog-resizing" ); + that._addClass( $( this ), "ui-dialog-resizing" ); that._blockFrames(); that._trigger( "resizeStart", event, filteredUi( ui ) ); }, @@ -588,7 +592,7 @@ return $.widget( "ui.dialog", { "top" + (top >= 0 ? "+" : "") + top, of: that.window }; - $( this ).removeClass( "ui-dialog-resizing" ); + that._removeClass( $( this ), "ui-dialog-resizing" ); that._unblockFrames(); that._trigger( "resizeStop", event, filteredUi( ui ) ); } @@ -676,12 +680,6 @@ return $.widget( "ui.dialog", { var isDraggable, isResizable, uiDialog = this.uiDialog; - if ( key === "dialogClass" ) { - uiDialog - .removeClass( this.options.dialogClass ) - .addClass( value ); - } - if ( key === "disabled" ) { return; } @@ -850,8 +848,9 @@ return $.widget( "ui.dialog", { } this.overlay = $( "<div>" ) - .addClass( "ui-widget-overlay ui-front" ) .appendTo( this._appendTo() ); + + this._addClass( this.overlay, null, "ui-widget-overlay ui-front" ); this._on( this.overlay, { mousedown: "_keepFocus" }); @@ -881,4 +880,30 @@ return $.widget( "ui.dialog", { } }); +// 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; + })); |