Skip to content

Commit

Permalink
Dialog: Use button widget for close button (was already listed as dep…
Browse files Browse the repository at this point in the history 
…endency)
  • Loading branch information
@jzaefferer
jzaefferer committed Nov 26, 2012
1 parent 0848040 commit 83a9f21
Show file tree
Hide file tree
Showing 14 changed files with 32 additions and 31 deletions.
1 change: 1 addition & 0 deletions demos/dialog/animated.html
View file
Expand Up @@ -11,6 +11,7 @@
<script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script> <script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script> <script src="../../ui/jquery.ui.effect-blind.js"></script>
Expand Down
1 change: 1 addition & 0 deletions demos/dialog/default.html
View file
Expand Up @@ -11,6 +11,7 @@
<script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>
Expand Down
1 change: 1 addition & 0 deletions demos/dialog/modal-confirmation.html
View file
Expand Up @@ -11,6 +11,7 @@
<script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>
Expand Down
7 changes: 4 additions & 3 deletions demos/dialog/modal-form.html
View file
Expand Up @@ -12,6 +12,7 @@
<script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script> <script src="../../ui/jquery.ui.effect.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
Expand Down Expand Up @@ -86,10 +87,10 @@


if ( bValid ) { if ( bValid ) {
$( "#users tbody" ).append( "<tr>" + $( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" + "<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" + "<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" + "<td>" + password.val() + "</td>" +
"</tr>" ); "</tr>" );
$( this ).dialog( "close" ); $( this ).dialog( "close" );
} }
}, },
Expand Down
1 change: 1 addition & 0 deletions demos/dialog/modal-message.html
View file
Expand Up @@ -12,6 +12,7 @@
<script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>
Expand Down
1 change: 1 addition & 0 deletions demos/dialog/modal.html
View file
Expand Up @@ -11,6 +11,7 @@
<script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>
Expand Down
1 change: 1 addition & 0 deletions tests/unit/dialog/dialog.html
View file
Expand Up @@ -19,6 +19,7 @@
"ui/jquery.ui.mouse.js", "ui/jquery.ui.mouse.js",
"ui/jquery.ui.draggable.js", "ui/jquery.ui.draggable.js",
"ui/jquery.ui.resizable.js", "ui/jquery.ui.resizable.js",
"ui/jquery.ui.button.js",
"ui/jquery.ui.dialog.js" "ui/jquery.ui.dialog.js"
] ]
}); });
Expand Down
8 changes: 4 additions & 4 deletions tests/unit/dialog/dialog_options.js
View file
Expand Up @@ -35,7 +35,7 @@ test("buttons", function() {
}, },
el = $('<div></div>').dialog({ buttons: buttons }); el = $('<div></div>').dialog({ buttons: buttons });


btn = $("button", el.dialog('widget')); btn = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(btn.length, 2, "number of buttons"); equal(btn.length, 2, "number of buttons");


i = 0; i = 0;
Expand All @@ -61,7 +61,7 @@ test("buttons", function() {
el.dialog("option", "buttons", newButtons); el.dialog("option", "buttons", newButtons);
deepEqual(el.dialog("option", "buttons"), newButtons, '.dialog("option", "buttons", ...) setter'); deepEqual(el.dialog("option", "buttons"), newButtons, '.dialog("option", "buttons", ...) setter');


btn = $("button", el.dialog('widget')); btn = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(btn.length, 1, "number of buttons after setter"); equal(btn.length, 1, "number of buttons after setter");
btn.trigger('click'); btn.trigger('click');


Expand All @@ -72,7 +72,7 @@ test("buttons", function() {
}); });


el.dialog("option", "buttons", null); el.dialog("option", "buttons", null);
btn = $("button", el.dialog('widget')); btn = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(btn.length, 0, "all buttons have been removed"); equal(btn.length, 0, "all buttons have been removed");
equal(el.find(".ui-dialog-buttonset").length, 0, "buttonset has been removed"); equal(el.find(".ui-dialog-buttonset").length, 0, "buttonset has been removed");
equal(el.parent().hasClass('ui-dialog-buttons'), false, "dialog wrapper removes class about having buttons"); equal(el.parent().hasClass('ui-dialog-buttons'), false, "dialog wrapper removes class about having buttons");
Expand All @@ -97,7 +97,7 @@ test("buttons - advanced", function() {
] ]
}); });


buttons = el.dialog('widget').find("button"); buttons = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(buttons.length, 1, "correct number of buttons"); equal(buttons.length, 1, "correct number of buttons");
equal(buttons.attr("id"), "my-button-id", "correct id"); equal(buttons.attr("id"), "my-button-id", "correct id");
equal(buttons.text(), "a button", "correct label"); equal(buttons.text(), "a button", "correct label");
Expand Down
1 change: 1 addition & 0 deletions tests/visual/dialog/animated.html
View file
Expand Up @@ -11,6 +11,7 @@
<script src="../../../ui/jquery.ui.draggable.js"></script> <script src="../../../ui/jquery.ui.draggable.js"></script>
<script src="../../../ui/jquery.ui.position.js"></script> <script src="../../../ui/jquery.ui.position.js"></script>
<script src="../../../ui/jquery.ui.resizable.js"></script> <script src="../../../ui/jquery.ui.resizable.js"></script>
<script src="../../../ui/jquery.ui.button.js"></script>
<script src="../../../ui/jquery.ui.dialog.js"></script> <script src="../../../ui/jquery.ui.dialog.js"></script>
<script src="../../../ui/jquery.ui.effect.js"></script> <script src="../../../ui/jquery.ui.effect.js"></script>
<script src="../../../ui/jquery.ui.effect-blind.js"></script> <script src="../../../ui/jquery.ui.effect-blind.js"></script>
Expand Down
1 change: 1 addition & 0 deletions tests/visual/dialog/complex-dialogs.html
View file
Expand Up @@ -11,6 +11,7 @@
<script src="../../../ui/jquery.ui.draggable.js"></script> <script src="../../../ui/jquery.ui.draggable.js"></script>
<script src="../../../ui/jquery.ui.position.js"></script> <script src="../../../ui/jquery.ui.position.js"></script>
<script src="../../../ui/jquery.ui.resizable.js"></script> <script src="../../../ui/jquery.ui.resizable.js"></script>
<script src="../../../ui/jquery.ui.button.js"></script>
<script src="../../../ui/jquery.ui.dialog.js"></script> <script src="../../../ui/jquery.ui.dialog.js"></script>


<!-- stuff needed to make things complex --> <!-- stuff needed to make things complex -->
Expand Down
1 change: 1 addition & 0 deletions tests/visual/dialog/form.html
View file
Expand Up @@ -11,6 +11,7 @@
<script src="../../../ui/jquery.ui.draggable.js"></script> <script src="../../../ui/jquery.ui.draggable.js"></script>
<script src="../../../ui/jquery.ui.position.js"></script> <script src="../../../ui/jquery.ui.position.js"></script>
<script src="../../../ui/jquery.ui.resizable.js"></script> <script src="../../../ui/jquery.ui.resizable.js"></script>
<script src="../../../ui/jquery.ui.button.js"></script>
<script src="../../../ui/jquery.ui.dialog.js"></script> <script src="../../../ui/jquery.ui.dialog.js"></script>
<script src="../../../ui/jquery.ui.effect.js"></script> <script src="../../../ui/jquery.ui.effect.js"></script>
<script src="../../../ui/jquery.ui.effect-blind.js"></script> <script src="../../../ui/jquery.ui.effect-blind.js"></script>
Expand Down
1 change: 1 addition & 0 deletions tests/visual/dialog/performance.html
View file
Expand Up @@ -11,6 +11,7 @@
<script src="../../../ui/jquery.ui.mouse.js"></script> <script src="../../../ui/jquery.ui.mouse.js"></script>
<script src="../../../ui/jquery.ui.draggable.js"></script> <script src="../../../ui/jquery.ui.draggable.js"></script>
<script src="../../../ui/jquery.ui.resizable.js"></script> <script src="../../../ui/jquery.ui.resizable.js"></script>
<script src="../../../ui/jquery.ui.button.js"></script>
<script src="../../../ui/jquery.ui.dialog.js"></script> <script src="../../../ui/jquery.ui.dialog.js"></script>
<script> <script>
$(function() { $(function() {
Expand Down
12 changes: 2 additions & 10 deletions themes/base/jquery.ui.dialog.css
View file
Expand Up @@ -29,18 +29,10 @@
position: absolute; position: absolute;
right: .3em; right: .3em;
top: 50%; top: 50%;
width: 19px; width: 21px;
margin: -10px 0 0 0; margin: -10px 0 0 0;
padding: 1px; padding: 1px;
height: 18px; height: 20px;
}
.ui-dialog .ui-dialog-titlebar-close span {
display: block;
margin: 1px;
}
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
padding: 0;
} }
.ui-dialog .ui-dialog-content { .ui-dialog .ui-dialog-content {
position: relative; position: relative;
Expand Down
26 changes: 12 additions & 14 deletions ui/jquery.ui.dialog.js
View file
Expand Up @@ -99,7 +99,6 @@ $.widget("ui.dialog", {
uiDialog, uiDialog,
// TODO should use this.uiDialogTitlebar instead // TODO should use this.uiDialogTitlebar instead
uiDialogTitlebar, uiDialogTitlebar,
uiDialogTitlebarClose,
uiDialogTitle, uiDialogTitle,
uiDialogButtonPane; uiDialogButtonPane;


Expand Down Expand Up @@ -139,20 +138,21 @@ $.widget("ui.dialog", {
}) })
.prependTo( uiDialog ); .prependTo( uiDialog );


uiDialogTitlebarClose = $( "<a href='#'></a>" ) this.uiDialogTitlebarClose = $( "<button></button>" )
.addClass( "ui-dialog-titlebar-close ui-corner-all" ) .button({
.attr( "role", "button" ) label: options.closeText,
icons: {
primary: "ui-icon-closethick"
},
text: false
})
.addClass( "ui-dialog-titlebar-close" )
.click(function( event ) { .click(function( event ) {
event.preventDefault(); event.preventDefault();
that.close( event ); that.close( event );
}) })
.appendTo( uiDialogTitlebar ); .appendTo( uiDialogTitlebar );


( this.uiDialogTitlebarCloseText = $( "<span>" ) )
.addClass( "ui-icon ui-icon-closethick" )
.text( options.closeText )
.appendTo( uiDialogTitlebarClose );

uiDialogTitle = $( "<span>" ) uiDialogTitle = $( "<span>" )
.uniqueId() .uniqueId()
.addClass( "ui-dialog-title" ) .addClass( "ui-dialog-title" )
Expand Down Expand Up @@ -183,10 +183,6 @@ $.widget("ui.dialog", {
}); });
} }


// TODO use button? or at least a button element, so that SPACE works?
this._hoverable( uiDialogTitlebarClose );
this._focusable( uiDialogTitlebarClose );

if ( options.draggable && $.fn.draggable ) { if ( options.draggable && $.fn.draggable ) {
this._makeDraggable(); this._makeDraggable();
} }
Expand Down Expand Up @@ -575,7 +571,9 @@ $.widget("ui.dialog", {
break; break;
case "closeText": case "closeText":
// ensure that we always pass a string // ensure that we always pass a string
this.uiDialogTitlebarCloseText.text( "" + value ); this.uiDialogTitlebarClose.button({
label: "" + value
});
break; break;
case "dialogClass": case "dialogClass":
uiDialog uiDialog
Expand Down

0 comments on commit 83a9f21

Please sign in to comment.