Skip to content

Commit bd39567

Browse files
committed
Dialog: Inline code review
1 parent 1241b28 commit bd39567

File tree

1 file changed

+53
-5
lines changed

1 file changed

+53
-5
lines changed

ui/jquery.ui.dialog.js

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,30 +68,48 @@ $.widget("ui.dialog", {
6868
resizable: true,
6969
show: null,
7070
title: "",
71-
width: 300
71+
width: 300,
72+
73+
// callbacks
74+
beforeClose: null,
75+
close: null,
76+
drag: null,
77+
dragStart: null,
78+
dragStop: null,
79+
focus: null,
80+
open: null,
81+
resize: null,
82+
resizeStart: null,
83+
resizeStop: null
7284
},
7385

7486
_create: function() {
7587
this.originalTitle = this.element.attr( "title" );
7688
// #5742 - .attr() might return a DOMElement
89+
// TODO WTF?
7790
if ( typeof this.originalTitle !== "string" ) {
7891
this.originalTitle = "";
7992
}
8093
this.oldPosition = {
8194
parent: this.element.parent(),
8295
index: this.element.parent().children().index( this.element )
8396
};
97+
// TODO don't overwrite options
8498
this.options.title = this.options.title || this.originalTitle;
8599
var that = this,
86100
options = this.options,
87101

102+
// TODO make this the default for the title option?
88103
title = options.title || " ",
104+
// TODO should use this.uiDialog instead
89105
uiDialog,
106+
// TODO should use this.uiDialogTitlebar instead
90107
uiDialogTitlebar,
91108
uiDialogTitlebarClose,
92109
uiDialogTitle,
93110
uiDialogButtonPane;
94111

112+
// TODO extract into _createWrapper
95113
uiDialog = ( this.uiDialog = $( "<div>" ) )
96114
.addClass( uiDialogClasses + options.dialogClass )
97115
.hide()
@@ -115,9 +133,10 @@ $.widget("ui.dialog", {
115133
.addClass( "ui-dialog-content ui-widget-content" )
116134
.appendTo( uiDialog );
117135

136+
// TODO extract this and the next three into a _createTitlebar method
118137
uiDialogTitlebar = ( this.uiDialogTitlebar = $( "<div>" ) )
119-
.addClass( "ui-dialog-titlebar ui-widget-header " +
120-
"ui-corner-all ui-helper-clearfix" )
138+
.addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" )
139+
// TODO use _on, call _focusTabbable or _keepFocus
121140
.bind( "mousedown", function() {
122141
// Dialog isn't getting focus when dragging (#8063)
123142
uiDialog.focus();
@@ -144,18 +163,21 @@ $.widget("ui.dialog", {
144163
.html( title )
145164
.prependTo( uiDialogTitlebar );
146165

166+
// TODO extract this one and the next into a _createButtonPane method
147167
uiDialogButtonPane = ( this.uiDialogButtonPane = $( "<div>" ) )
148168
.addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" );
149169

150170
( this.uiButtonSet = $( "<div>" ) )
151171
.addClass( "ui-dialog-buttonset" )
152172
.appendTo( uiDialogButtonPane );
153173

174+
// TODO move into _createWrapper
154175
uiDialog.attr({
155176
role: "dialog",
156177
"aria-labelledby": uiDialogTitle.attr( "id" )
157178
});
158179

180+
// TODO move into _createWrapper
159181
// We assume that any existing aria-describedby attribute means
160182
// that the dialog content is marked up properly
161183
// otherwise we brute force the content as the description
@@ -165,7 +187,11 @@ $.widget("ui.dialog", {
165187
});
166188
}
167189

190+
// TODO use andSelf()
191+
// TODO get rid of this?! why do we need to disable selection anyway?
168192
uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection();
193+
194+
// TODO use button? or at least a button element, so that SPACE works?
169195
this._hoverable( uiDialogTitlebarClose );
170196
this._focusable( uiDialogTitlebarClose );
171197

@@ -176,10 +202,14 @@ $.widget("ui.dialog", {
176202
this._makeResizable();
177203
}
178204

205+
// TODO merge with _createButtonPane?
179206
this._createButtons( options.buttons );
207+
180208
this._isOpen = false;
181209

182210
// prevent tabbing out of dialogs
211+
// TODO move into _createWrapper
212+
// TODO fix formatting
183213
this._on( uiDialog, { keydown: function( event ) {
184214
if ( event.keyCode !== $.ui.keyCode.TAB ) {
185215
return;
@@ -217,13 +247,15 @@ $.widget("ui.dialog", {
217247
.removeUniqueId()
218248
.removeClass( "ui-dialog-content ui-widget-content" )
219249
.hide()
250+
// TODO restore old position directly, instead of appending to body first
220251
.appendTo( "body" );
221252
this.uiDialog.remove();
222253

223254
if ( this.originalTitle ) {
224255
this.element.attr( "title", this.originalTitle );
225256
}
226257

258+
// TODO do this before removing the wrapper
227259
next = oldPosition.parent.children().eq( oldPosition.index );
228260
// Don't try to place the dialog next to itself (#8613)
229261
if ( next.length && next[ 0 ] !== this.element[ 0 ] ) {
@@ -244,6 +276,7 @@ $.widget("ui.dialog", {
244276
return;
245277
}
246278

279+
// TODO fix yoda-if
247280
if ( false === this._trigger( "beforeClose", event ) ) {
248281
return;
249282
}
@@ -261,6 +294,7 @@ $.widget("ui.dialog", {
261294
$( this.document[ 0 ].activeElement ).blur();
262295
}
263296

297+
// TODO shouldn't _hide restore `this` to the instance? would also help tooltip
264298
this._hide( this.uiDialog, this.options.hide, function() {
265299
that._trigger( "close", event );
266300
});
@@ -279,11 +313,14 @@ $.widget("ui.dialog", {
279313

280314
open: function() {
281315
if ( this._isOpen ) {
316+
// TODO don't pass silent flag? should probably trigger focus when moving to top again
282317
this.moveToTop( null, true );
318+
// TODO run this only when dialog wasn't focused?
283319
this._focusTabbable();
284320
return;
285321
}
286322

323+
// TODO remove useless tmp vars
287324
var options = this.options,
288325
uiDialog = this.uiDialog;
289326

@@ -304,6 +341,7 @@ $.widget("ui.dialog", {
304341
return this;
305342
},
306343

344+
// TODO check if dialog already has focus, merge with _keepFocus
307345
_focusTabbable: function() {
308346
// set focus to the first tabbable element in the content area or the first button
309347
// if there are no tabbable elements, set focus on the dialog itself
@@ -342,6 +380,7 @@ $.widget("ui.dialog", {
342380
this.uiDialogButtonPane.remove();
343381
this.uiButtonSet.empty();
344382

383+
// TODO use jQuery.isEmptyObject()
345384
if ( typeof buttons === "object" && buttons !== null ) {
346385
$.each( buttons, function() {
347386
return !(hasButtons = true);
@@ -360,6 +399,7 @@ $.widget("ui.dialog", {
360399
})
361400
.appendTo( that.uiButtonSet );
362401
if ( $.fn.button ) {
402+
// TODO allow passing through button options
363403
button.button();
364404
}
365405
});
@@ -405,6 +445,7 @@ $.widget("ui.dialog", {
405445
});
406446
},
407447

448+
// TODO why are handles passed by _setOption??
408449
_makeResizable: function( handles ) {
409450
handles = (handles === undefined ? this.options.resizable : handles);
410451
var that = this,
@@ -469,6 +510,7 @@ $.widget("ui.dialog", {
469510
isVisible;
470511

471512
if ( position ) {
513+
// TODO we don't support 1.3.2 anymore, clean this mess up
472514
// deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
473515
// if (typeof position == 'string' || $.isArray(position)) {
474516
// myAt = $.isArray(position) ? position : position.split(' ');
@@ -548,9 +590,11 @@ $.widget("ui.dialog", {
548590
case "dialogClass":
549591
uiDialog
550592
.removeClass( this.options.dialogClass )
593+
// TODO why adding uiDialogClasses again? we didn't remove those
551594
.addClass( uiDialogClasses + value );
552595
break;
553596
case "disabled":
597+
// TODO use toggleClass( "ui-dialog-disabled", value )
554598
if ( value ) {
555599
uiDialog.addClass( "ui-dialog-disabled" );
556600
} else {
@@ -588,7 +632,8 @@ $.widget("ui.dialog", {
588632
}
589633
break;
590634
case "title":
591-
// convert whatever was passed in o a string, for html() to not throw up
635+
// convert whatever was passed in to a string, for html() to not throw up
636+
// TODO deduplicate this (see _create)
592637
$( ".ui-dialog-title", this.uiDialogTitlebar )
593638
.html( "" + ( value || "&#160;" ) );
594639
break;
@@ -640,8 +685,8 @@ $.widget("ui.dialog", {
640685
});
641686

642687
$.extend($.ui.dialog, {
688+
// TODO remove these
643689
uuid: 0,
644-
645690
getTitleId: function($el) {
646691
var id = $el.attr( "id" );
647692
if ( !id ) {
@@ -651,17 +696,20 @@ $.extend($.ui.dialog, {
651696
return "ui-dialog-title-" + id;
652697
},
653698

699+
// TODO move to dialog instance method
654700
overlay: function( dialog ) {
655701
this.$el = $.ui.dialog.overlay.create( dialog );
656702
}
657703
});
658704

705+
// TODO get rid of instance list, at least the oldInstance stuff, and inline as dialog methods
659706
$.extend( $.ui.dialog.overlay, {
660707
instances: [],
661708
// reuse old instances due to IE memory leak with alpha transparency (see #5185)
662709
oldInstances: [],
663710
create: function( dialog ) {
664711
if ( this.instances.length === 0 ) {
712+
// TODO get rid of the timeout, which should remove the need for the #4065 workaround as well
665713
// prevent use of anchors and inputs
666714
// we use a setTimeout in case the overlay is created from an
667715
// event that we're going to be cancelling (see #2804)

0 commit comments

Comments
 (0)