library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Dialog: Add classes option

Browse Source 
Ref #7053
Ref gh-1411
This commit is contained in:
Alexander Schmitz 2014-12-03 11:23:59 -05:00
parent cff1fb2a13
commit 6f4884f6f5
8 changed files with 255 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
tests/unit/dialog/dialog.html
View File

@ -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" ],

6
tests/unit/dialog/dialog_common.js
View File

@ -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,

47
tests/unit/dialog/dialog_common_deprecated.js Normal file
View File

@ -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
}
});

53
tests/unit/dialog/dialog_core.js
View File

@ -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" ) );

66
tests/unit/dialog/dialog_deprecated.html Normal file
View File

@ -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>

28
tests/unit/dialog/dialog_deprecated.js Normal file
View File

@ -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 );

20
tests/unit/dialog/dialog_options.js
View File

@ -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);

85
ui/dialog.js
View File

@ -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;
}));