13 * ui.resizable.js |
13 * ui.resizable.js |
14 */ |
14 */ |
15 (function($) { |
15 (function($) { |
16 |
16 |
17 var setDataSwitch = { |
17 var setDataSwitch = { |
18 dragStart: "start.draggable", |
18 dragStart: "start.draggable", |
19 drag: "drag.draggable", |
19 drag: "drag.draggable", |
20 dragStop: "stop.draggable", |
20 dragStop: "stop.draggable", |
21 maxHeight: "maxHeight.resizable", |
21 maxHeight: "maxHeight.resizable", |
22 minHeight: "minHeight.resizable", |
22 minHeight: "minHeight.resizable", |
23 maxWidth: "maxWidth.resizable", |
23 maxWidth: "maxWidth.resizable", |
24 minWidth: "minWidth.resizable", |
24 minWidth: "minWidth.resizable", |
25 resizeStart: "start.resizable", |
25 resizeStart: "start.resizable", |
26 resize: "drag.resizable", |
26 resize: "drag.resizable", |
27 resizeStop: "stop.resizable" |
27 resizeStop: "stop.resizable" |
28 }; |
28 }, |
|
29 |
|
30 uiDialogClasses = |
|
31 'ui-dialog ' + |
|
32 'ui-widget ' + |
|
33 'ui-widget-content ' + |
|
34 'ui-corner-all '; |
29 |
35 |
30 $.widget("ui.dialog", { |
36 $.widget("ui.dialog", { |
31 |
37 |
32 _init: function() { |
38 _init: function() { |
33 this.originalTitle = this.element.attr('title'); |
39 this.originalTitle = this.element.attr('title'); |
34 this.options.title = this.options.title || this.originalTitle; |
|
35 |
40 |
36 var self = this, |
41 var self = this, |
37 options = this.options, |
42 options = this.options, |
38 |
43 |
39 uiDialogContent = this.element |
44 title = options.title || this.originalTitle || ' ', |
40 .removeAttr('title') |
|
41 .addClass('ui-dialog-content') |
|
42 .wrap('<div></div>') |
|
43 .wrap('<div></div>'), |
|
44 |
|
45 uiDialogContainer = (this.uiDialogContainer = uiDialogContent.parent()) |
|
46 .addClass('ui-dialog-container') |
|
47 .css({ |
|
48 position: 'relative', |
|
49 width: '100%', |
|
50 height: '100%' |
|
51 }), |
|
52 |
|
53 uiDialogTitlebar = (this.uiDialogTitlebar = $('<div></div>')) |
|
54 .addClass('ui-dialog-titlebar') |
|
55 .mousedown(function() { |
|
56 self.moveToTop(); |
|
57 }) |
|
58 .prependTo(uiDialogContainer), |
|
59 |
|
60 uiDialogTitlebarClose = $('<a href="#"/>') |
|
61 .addClass('ui-dialog-titlebar-close') |
|
62 .attr('role', 'button') |
|
63 .appendTo(uiDialogTitlebar), |
|
64 |
|
65 uiDialogTitlebarCloseText = (this.uiDialogTitlebarCloseText = $('<span/>')) |
|
66 .text(options.closeText) |
|
67 .appendTo(uiDialogTitlebarClose), |
|
68 |
|
69 title = options.title || ' ', |
|
70 titleId = $.ui.dialog.getTitleId(this.element), |
45 titleId = $.ui.dialog.getTitleId(this.element), |
71 uiDialogTitle = $('<span/>') |
46 |
72 .addClass('ui-dialog-title') |
47 uiDialog = (this.uiDialog = $('<div/>')) |
73 .attr('id', titleId) |
|
74 .html(title) |
|
75 .prependTo(uiDialogTitlebar), |
|
76 |
|
77 uiDialog = (this.uiDialog = uiDialogContainer.parent()) |
|
78 .appendTo(document.body) |
48 .appendTo(document.body) |
79 .hide() |
49 .hide() |
80 .addClass('ui-dialog') |
50 .addClass(uiDialogClasses + options.dialogClass) |
81 .addClass(options.dialogClass) |
|
82 .css({ |
51 .css({ |
83 position: 'absolute', |
52 position: 'absolute', |
84 width: options.width, |
|
85 height: options.height, |
|
86 overflow: 'hidden', |
53 overflow: 'hidden', |
87 zIndex: options.zIndex |
54 zIndex: options.zIndex |
88 }) |
55 }) |
89 // setting tabIndex makes the div focusable |
56 // setting tabIndex makes the div focusable |
90 // setting outline to 0 prevents a border on focus in Mozilla |
57 // setting outline to 0 prevents a border on focus in Mozilla |
91 .attr('tabIndex', -1).css('outline', 0).keydown(function(ev) { |
58 .attr('tabIndex', -1).css('outline', 0).keydown(function(event) { |
92 (options.closeOnEscape && ev.keyCode |
59 (options.closeOnEscape && event.keyCode |
93 && ev.keyCode == $.ui.keyCode.ESCAPE && self.close()); |
60 && event.keyCode == $.ui.keyCode.ESCAPE && self.close(event)); |
94 }) |
61 }) |
95 .attr({ |
62 .attr({ |
96 role: 'dialog', |
63 role: 'dialog', |
97 'aria-labelledby': titleId |
64 'aria-labelledby': titleId |
98 }) |
65 }) |
99 .mouseup(function() { |
66 .mousedown(function(event) { |
100 self.moveToTop(); |
67 self.moveToTop(false, event); |
101 }), |
68 }), |
102 |
69 |
103 uiDialogButtonPane = (this.uiDialogButtonPane = $('<div></div>')) |
70 uiDialogContent = this.element |
104 .addClass('ui-dialog-buttonpane') |
71 .show() |
105 .css({ |
72 .removeAttr('title') |
106 position: 'absolute', |
73 .addClass( |
107 bottom: 0 |
74 'ui-dialog-content ' + |
108 }) |
75 'ui-widget-content') |
109 .appendTo(uiDialog), |
76 .appendTo(uiDialog), |
110 |
77 |
111 uiDialogTitlebarClose = $('.ui-dialog-titlebar-close', uiDialogTitlebar) |
78 uiDialogTitlebar = (this.uiDialogTitlebar = $('<div></div>')) |
|
79 .addClass( |
|
80 'ui-dialog-titlebar ' + |
|
81 'ui-widget-header ' + |
|
82 'ui-corner-all ' + |
|
83 'ui-helper-clearfix' |
|
84 ) |
|
85 .prependTo(uiDialog), |
|
86 |
|
87 uiDialogTitlebarClose = $('<a href="#"/>') |
|
88 .addClass( |
|
89 'ui-dialog-titlebar-close ' + |
|
90 'ui-corner-all' |
|
91 ) |
|
92 .attr('role', 'button') |
112 .hover( |
93 .hover( |
113 function() { |
94 function() { |
114 $(this).addClass('ui-dialog-titlebar-close-hover'); |
95 uiDialogTitlebarClose.addClass('ui-state-hover'); |
115 }, |
96 }, |
116 function() { |
97 function() { |
117 $(this).removeClass('ui-dialog-titlebar-close-hover'); |
98 uiDialogTitlebarClose.removeClass('ui-state-hover'); |
118 } |
99 } |
119 ) |
100 ) |
|
101 .focus(function() { |
|
102 uiDialogTitlebarClose.addClass('ui-state-focus'); |
|
103 }) |
|
104 .blur(function() { |
|
105 uiDialogTitlebarClose.removeClass('ui-state-focus'); |
|
106 }) |
120 .mousedown(function(ev) { |
107 .mousedown(function(ev) { |
121 ev.stopPropagation(); |
108 ev.stopPropagation(); |
122 }) |
109 }) |
123 .click(function() { |
110 .click(function(event) { |
124 self.close(); |
111 self.close(event); |
125 return false; |
112 return false; |
126 }); |
113 }) |
|
114 .appendTo(uiDialogTitlebar), |
|
115 |
|
116 uiDialogTitlebarCloseText = (this.uiDialogTitlebarCloseText = $('<span/>')) |
|
117 .addClass( |
|
118 'ui-icon ' + |
|
119 'ui-icon-closethick' |
|
120 ) |
|
121 .text(options.closeText) |
|
122 .appendTo(uiDialogTitlebarClose), |
|
123 |
|
124 uiDialogTitle = $('<span/>') |
|
125 .addClass('ui-dialog-title') |
|
126 .attr('id', titleId) |
|
127 .html(title) |
|
128 .prependTo(uiDialogTitlebar); |
127 |
129 |
128 uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection(); |
130 uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection(); |
129 |
131 |
130 (options.draggable && $.fn.draggable && this._makeDraggable()); |
132 (options.draggable && $.fn.draggable && this._makeDraggable()); |
131 (options.resizable && $.fn.resizable && this._makeResizable()); |
133 (options.resizable && $.fn.resizable && this._makeResizable()); |
133 this._createButtons(options.buttons); |
135 this._createButtons(options.buttons); |
134 this._isOpen = false; |
136 this._isOpen = false; |
135 |
137 |
136 (options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe()); |
138 (options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe()); |
137 (options.autoOpen && this.open()); |
139 (options.autoOpen && this.open()); |
|
140 |
138 }, |
141 }, |
139 |
142 |
140 destroy: function() { |
143 destroy: function() { |
141 (this.overlay && this.overlay.destroy()); |
144 (this.overlay && this.overlay.destroy()); |
142 this.uiDialog.hide(); |
145 this.uiDialog.hide(); |
143 this.element |
146 this.element |
144 .unbind('.dialog') |
147 .unbind('.dialog') |
145 .removeData('dialog') |
148 .removeData('dialog') |
146 .removeClass('ui-dialog-content') |
149 .removeClass('ui-dialog-content ui-widget-content') |
147 .hide().appendTo('body'); |
150 .hide().appendTo('body'); |
148 this.uiDialog.remove(); |
151 this.uiDialog.remove(); |
149 |
152 |
150 (this.originalTitle && this.element.attr('title', this.originalTitle)); |
153 (this.originalTitle && this.element.attr('title', this.originalTitle)); |
151 }, |
154 }, |
152 |
155 |
153 close: function() { |
156 close: function(event) { |
154 if (false === this._trigger('beforeclose', null, { options: this.options })) { |
157 var self = this; |
|
158 |
|
159 if (false === self._trigger('beforeclose', event)) { |
155 return; |
160 return; |
156 } |
161 } |
157 |
162 |
158 (this.overlay && this.overlay.destroy()); |
163 (self.overlay && self.overlay.destroy()); |
159 this.uiDialog |
164 self.uiDialog.unbind('keypress.ui-dialog'); |
160 .hide(this.options.hide) |
165 |
161 .unbind('keypress.ui-dialog'); |
166 (self.options.hide |
162 |
167 ? self.uiDialog.hide(self.options.hide, function() { |
163 this._trigger('close', null, { options: this.options }); |
168 self._trigger('close', event); |
|
169 }) |
|
170 : self.uiDialog.hide() && self._trigger('close', event)); |
|
171 |
164 $.ui.dialog.overlay.resize(); |
172 $.ui.dialog.overlay.resize(); |
165 |
173 |
166 this._isOpen = false; |
174 self._isOpen = false; |
|
175 |
|
176 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309) |
|
177 if (self.options.modal) { |
|
178 var maxZ = 0; |
|
179 $('.ui-dialog').each(function() { |
|
180 if (this != self.uiDialog[0]) { |
|
181 maxZ = Math.max(maxZ, $(this).css('z-index')); |
|
182 } |
|
183 }); |
|
184 $.ui.dialog.maxZ = maxZ; |
|
185 } |
167 }, |
186 }, |
168 |
187 |
169 isOpen: function() { |
188 isOpen: function() { |
170 return this._isOpen; |
189 return this._isOpen; |
171 }, |
190 }, |
172 |
191 |
173 // the force parameter allows us to move modal dialogs to their correct |
192 // the force parameter allows us to move modal dialogs to their correct |
174 // position on open |
193 // position on open |
175 moveToTop: function(force) { |
194 moveToTop: function(force, event) { |
176 |
195 |
177 if ((this.options.modal && !force) |
196 if ((this.options.modal && !force) |
178 || (!this.options.stack && !this.options.modal)) { |
197 || (!this.options.stack && !this.options.modal)) { |
179 return this._trigger('focus', null, { options: this.options }); |
198 return this._trigger('focus', event); |
180 } |
199 } |
181 |
200 |
182 var maxZ = this.options.zIndex, options = this.options; |
201 if (this.options.zIndex > $.ui.dialog.maxZ) { |
183 $('.ui-dialog:visible').each(function() { |
202 $.ui.dialog.maxZ = this.options.zIndex; |
184 maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10) || options.zIndex); |
203 } |
185 }); |
204 (this.overlay && this.overlay.$el.css('z-index', $.ui.dialog.overlay.maxZ = ++$.ui.dialog.maxZ)); |
186 (this.overlay && this.overlay.$el.css('z-index', ++maxZ)); |
|
187 |
205 |
188 //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed. |
206 //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed. |
189 // http://ui.jquery.com/bugs/ticket/3193 |
207 // http://ui.jquery.com/bugs/ticket/3193 |
190 var saveScroll = { scrollTop: this.element.attr('scrollTop'), scrollLeft: this.element.attr('scrollLeft') }; |
208 var saveScroll = { scrollTop: this.element.attr('scrollTop'), scrollLeft: this.element.attr('scrollLeft') }; |
191 this.uiDialog.css('z-index', ++maxZ); |
209 this.uiDialog.css('z-index', ++$.ui.dialog.maxZ); |
192 this.element.attr(saveScroll); |
210 this.element.attr(saveScroll); |
193 this._trigger('focus', null, { options: this.options }); |
211 this._trigger('focus', event); |
194 }, |
212 }, |
195 |
213 |
196 open: function() { |
214 open: function() { |
197 if (this._isOpen) { return; } |
215 if (this._isOpen) { return; } |
198 |
216 |
199 this.overlay = this.options.modal ? new $.ui.dialog.overlay(this) : null; |
217 var options = this.options, |
200 (this.uiDialog.next().length && this.uiDialog.appendTo('body')); |
218 uiDialog = this.uiDialog; |
201 this._position(this.options.position); |
219 |
202 this.uiDialog.show(this.options.show); |
220 this.overlay = options.modal ? new $.ui.dialog.overlay(this) : null; |
203 (this.options.autoResize && this._size()); |
221 (uiDialog.next().length && uiDialog.appendTo('body')); |
|
222 this._size(); |
|
223 this._position(options.position); |
|
224 uiDialog.show(options.show); |
204 this.moveToTop(true); |
225 this.moveToTop(true); |
205 |
226 |
206 // prevent tabbing out of modal dialogs |
227 // prevent tabbing out of modal dialogs |
207 (this.options.modal && this.uiDialog.bind('keypress.ui-dialog', function(event) { |
228 (options.modal && uiDialog.bind('keypress.ui-dialog', function(event) { |
208 if (event.keyCode != $.ui.keyCode.TAB) { |
229 if (event.keyCode != $.ui.keyCode.TAB) { |
209 return; |
230 return; |
210 } |
231 } |
211 |
232 |
212 var tabbables = $(':tabbable', this), |
233 var tabbables = $(':tabbable', this), |
222 last.focus(); |
243 last.focus(); |
223 }, 1); |
244 }, 1); |
224 } |
245 } |
225 })); |
246 })); |
226 |
247 |
227 this.uiDialog.find(':tabbable:first').focus(); |
248 // set focus to the first tabbable element in the content area or the first button |
228 this._trigger('open', null, { options: this.options }); |
249 // if there are no tabbable elements, set focus on the dialog itself |
|
250 $([]) |
|
251 .add(uiDialog.find('.ui-dialog-content :tabbable:first')) |
|
252 .add(uiDialog.find('.ui-dialog-buttonpane :tabbable:first')) |
|
253 .add(uiDialog) |
|
254 .filter(':first') |
|
255 .focus(); |
|
256 |
|
257 this._trigger('open'); |
229 this._isOpen = true; |
258 this._isOpen = true; |
230 }, |
259 }, |
231 |
260 |
232 _createButtons: function(buttons) { |
261 _createButtons: function(buttons) { |
233 var self = this, |
262 var self = this, |
234 hasButtons = false, |
263 hasButtons = false, |
235 uiDialogButtonPane = this.uiDialogButtonPane; |
264 uiDialogButtonPane = $('<div></div>') |
236 |
265 .addClass( |
237 // remove any existing buttons |
266 'ui-dialog-buttonpane ' + |
238 uiDialogButtonPane.empty().hide(); |
267 'ui-widget-content ' + |
239 |
268 'ui-helper-clearfix' |
240 $.each(buttons, function() { return !(hasButtons = true); }); |
269 ); |
|
270 |
|
271 // if we already have a button pane, remove it |
|
272 this.uiDialog.find('.ui-dialog-buttonpane').remove(); |
|
273 |
|
274 (typeof buttons == 'object' && buttons !== null && |
|
275 $.each(buttons, function() { return !(hasButtons = true); })); |
241 if (hasButtons) { |
276 if (hasButtons) { |
242 uiDialogButtonPane.show(); |
|
243 $.each(buttons, function(name, fn) { |
277 $.each(buttons, function(name, fn) { |
244 $('<button type="button"></button>') |
278 $('<button type="button"></button>') |
|
279 .addClass( |
|
280 'ui-state-default ' + |
|
281 'ui-corner-all' |
|
282 ) |
245 .text(name) |
283 .text(name) |
246 .click(function() { fn.apply(self.element[0], arguments); }) |
284 .click(function() { fn.apply(self.element[0], arguments); }) |
|
285 .hover( |
|
286 function() { |
|
287 $(this).addClass('ui-state-hover'); |
|
288 }, |
|
289 function() { |
|
290 $(this).removeClass('ui-state-hover'); |
|
291 } |
|
292 ) |
|
293 .focus(function() { |
|
294 $(this).addClass('ui-state-focus'); |
|
295 }) |
|
296 .blur(function() { |
|
297 $(this).removeClass('ui-state-focus'); |
|
298 }) |
247 .appendTo(uiDialogButtonPane); |
299 .appendTo(uiDialogButtonPane); |
248 }); |
300 }); |
|
301 uiDialogButtonPane.appendTo(this.uiDialog); |
249 } |
302 } |
250 }, |
303 }, |
251 |
304 |
252 _makeDraggable: function() { |
305 _makeDraggable: function() { |
253 var self = this, |
306 var self = this, |
254 options = this.options; |
307 options = this.options, |
|
308 heightBeforeDrag; |
255 |
309 |
256 this.uiDialog.draggable({ |
310 this.uiDialog.draggable({ |
257 cancel: '.ui-dialog-content', |
311 cancel: '.ui-dialog-content', |
258 helper: options.dragHelper, |
|
259 handle: '.ui-dialog-titlebar', |
312 handle: '.ui-dialog-titlebar', |
|
313 containment: 'document', |
260 start: function() { |
314 start: function() { |
261 self.moveToTop(); |
315 heightBeforeDrag = options.height; |
|
316 $(this).height($(this).height()).addClass("ui-dialog-dragging"); |
262 (options.dragStart && options.dragStart.apply(self.element[0], arguments)); |
317 (options.dragStart && options.dragStart.apply(self.element[0], arguments)); |
263 }, |
318 }, |
264 drag: function() { |
319 drag: function() { |
265 (options.drag && options.drag.apply(self.element[0], arguments)); |
320 (options.drag && options.drag.apply(self.element[0], arguments)); |
266 }, |
321 }, |
267 stop: function() { |
322 stop: function() { |
|
323 $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag); |
268 (options.dragStop && options.dragStop.apply(self.element[0], arguments)); |
324 (options.dragStop && options.dragStop.apply(self.element[0], arguments)); |
269 $.ui.dialog.overlay.resize(); |
325 $.ui.dialog.overlay.resize(); |
270 } |
326 } |
271 }); |
327 }); |
272 }, |
328 }, |
279 ? handles |
335 ? handles |
280 : 'n,e,s,w,se,sw,ne,nw'; |
336 : 'n,e,s,w,se,sw,ne,nw'; |
281 |
337 |
282 this.uiDialog.resizable({ |
338 this.uiDialog.resizable({ |
283 cancel: '.ui-dialog-content', |
339 cancel: '.ui-dialog-content', |
284 helper: options.resizeHelper, |
340 alsoResize: this.element, |
285 maxWidth: options.maxWidth, |
341 maxWidth: options.maxWidth, |
286 maxHeight: options.maxHeight, |
342 maxHeight: options.maxHeight, |
287 minWidth: options.minWidth, |
343 minWidth: options.minWidth, |
288 minHeight: options.minHeight, |
344 minHeight: options.minHeight, |
289 start: function() { |
345 start: function() { |
|
346 $(this).addClass("ui-dialog-resizing"); |
290 (options.resizeStart && options.resizeStart.apply(self.element[0], arguments)); |
347 (options.resizeStart && options.resizeStart.apply(self.element[0], arguments)); |
291 }, |
348 }, |
292 resize: function() { |
349 resize: function() { |
293 (options.autoResize && self._size.apply(self)); |
|
294 (options.resize && options.resize.apply(self.element[0], arguments)); |
350 (options.resize && options.resize.apply(self.element[0], arguments)); |
295 }, |
351 }, |
296 handles: resizeHandles, |
352 handles: resizeHandles, |
297 stop: function() { |
353 stop: function() { |
298 (options.autoResize && self._size.apply(self)); |
354 $(this).removeClass("ui-dialog-resizing"); |
|
355 options.height = $(this).height(); |
|
356 options.width = $(this).width(); |
299 (options.resizeStop && options.resizeStop.apply(self.element[0], arguments)); |
357 (options.resizeStop && options.resizeStop.apply(self.element[0], arguments)); |
300 $.ui.dialog.overlay.resize(); |
358 $.ui.dialog.overlay.resize(); |
301 } |
359 } |
302 }); |
360 }) |
|
361 .find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se'); |
303 }, |
362 }, |
304 |
363 |
305 _position: function(pos) { |
364 _position: function(pos) { |
306 var wnd = $(window), doc = $(document), |
365 var wnd = $(window), doc = $(document), |
307 pTop = doc.scrollTop(), pLeft = doc.scrollLeft(), |
366 pTop = doc.scrollTop(), pLeft = doc.scrollLeft(), |
400 |
461 |
401 $.widget.prototype._setData.apply(this, arguments); |
462 $.widget.prototype._setData.apply(this, arguments); |
402 }, |
463 }, |
403 |
464 |
404 _size: function() { |
465 _size: function() { |
405 var container = this.uiDialogContainer, |
466 /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content |
406 titlebar = this.uiDialogTitlebar, |
467 * divs will both have width and height set, so we need to reset them |
407 content = this.element, |
468 */ |
408 tbMargin = (parseInt(content.css('margin-top'), 10) || 0) |
469 var options = this.options; |
409 + (parseInt(content.css('margin-bottom'), 10) || 0), |
470 |
410 lrMargin = (parseInt(content.css('margin-left'), 10) || 0) |
471 // reset content sizing |
411 + (parseInt(content.css('margin-right'), 10) || 0); |
472 this.element.css({ |
412 content.height(container.height() - titlebar.outerHeight() - tbMargin); |
473 height: 0, |
413 content.width(container.width() - lrMargin); |
474 minHeight: 0, |
|
475 width: 'auto' |
|
476 }); |
|
477 |
|
478 // reset wrapper sizing |
|
479 // determine the height of all the non-content elements |
|
480 var nonContentHeight = this.uiDialog.css({ |
|
481 height: 'auto', |
|
482 width: options.width |
|
483 }) |
|
484 .height(); |
|
485 |
|
486 this.element |
|
487 .css({ |
|
488 minHeight: Math.max(options.minHeight - nonContentHeight, 0), |
|
489 height: options.height == 'auto' |
|
490 ? 'auto' |
|
491 : Math.max(options.height - nonContentHeight, 0) |
|
492 }); |
414 } |
493 } |
415 |
|
416 }); |
494 }); |
417 |
495 |
418 $.extend($.ui.dialog, { |
496 $.extend($.ui.dialog, { |
419 version: "1.6", |
497 version: "1.7.2", |
420 defaults: { |
498 defaults: { |
421 autoOpen: true, |
499 autoOpen: true, |
422 autoResize: true, |
|
423 bgiframe: false, |
500 bgiframe: false, |
424 buttons: {}, |
501 buttons: {}, |
425 closeOnEscape: true, |
502 closeOnEscape: true, |
426 closeText: 'close', |
503 closeText: 'close', |
|
504 dialogClass: '', |
427 draggable: true, |
505 draggable: true, |
428 height: 200, |
506 hide: null, |
429 minHeight: 100, |
507 height: 'auto', |
|
508 maxHeight: false, |
|
509 maxWidth: false, |
|
510 minHeight: 150, |
430 minWidth: 150, |
511 minWidth: 150, |
431 modal: false, |
512 modal: false, |
432 overlay: {}, |
|
433 position: 'center', |
513 position: 'center', |
434 resizable: true, |
514 resizable: true, |
|
515 show: null, |
435 stack: true, |
516 stack: true, |
|
517 title: '', |
436 width: 300, |
518 width: 300, |
437 zIndex: 1000 |
519 zIndex: 1000 |
438 }, |
520 }, |
439 |
521 |
440 getter: 'isOpen', |
522 getter: 'isOpen', |
441 |
523 |
442 uuid: 0, |
524 uuid: 0, |
|
525 maxZ: 0, |
443 |
526 |
444 getTitleId: function($el) { |
527 getTitleId: function($el) { |
445 return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid); |
528 return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid); |
446 }, |
529 }, |
447 |
530 |
450 } |
533 } |
451 }); |
534 }); |
452 |
535 |
453 $.extend($.ui.dialog.overlay, { |
536 $.extend($.ui.dialog.overlay, { |
454 instances: [], |
537 instances: [], |
|
538 maxZ: 0, |
455 events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','), |
539 events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','), |
456 function(event) { return event + '.dialog-overlay'; }).join(' '), |
540 function(event) { return event + '.dialog-overlay'; }).join(' '), |
457 create: function(dialog) { |
541 create: function(dialog) { |
458 if (this.instances.length === 0) { |
542 if (this.instances.length === 0) { |
459 // prevent use of anchors and inputs |
543 // prevent use of anchors and inputs |
460 // we use a setTimeout in case the overlay is created from an |
544 // we use a setTimeout in case the overlay is created from an |
461 // event that we're going to be cancelling (see #2804) |
545 // event that we're going to be cancelling (see #2804) |
462 setTimeout(function() { |
546 setTimeout(function() { |
463 $('a, :input').bind($.ui.dialog.overlay.events, function() { |
547 // handle $(el).dialog().dialog('close') (see #4065) |
464 // allow use of the element if inside a dialog and |
548 if ($.ui.dialog.overlay.instances.length) { |
465 // - there are no modal dialogs |
549 $(document).bind($.ui.dialog.overlay.events, function(event) { |
466 // - there are modal dialogs, but we are in front of the topmost modal |
550 var dialogZ = $(event.target).parents('.ui-dialog').css('zIndex') || 0; |
467 var allow = false; |
551 return (dialogZ > $.ui.dialog.overlay.maxZ); |
468 var $dialog = $(this).parents('.ui-dialog'); |
552 }); |
469 if ($dialog.length) { |
553 } |
470 var $overlays = $('.ui-dialog-overlay'); |
|
471 if ($overlays.length) { |
|
472 var maxZ = parseInt($overlays.css('z-index'), 10); |
|
473 $overlays.each(function() { |
|
474 maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10)); |
|
475 }); |
|
476 allow = parseInt($dialog.css('z-index'), 10) > maxZ; |
|
477 } else { |
|
478 allow = true; |
|
479 } |
|
480 } |
|
481 return allow; |
|
482 }); |
|
483 }, 1); |
554 }, 1); |
484 |
555 |
485 // allow closing by pressing the escape key |
556 // allow closing by pressing the escape key |
486 $(document).bind('keydown.dialog-overlay', function(event) { |
557 $(document).bind('keydown.dialog-overlay', function(event) { |
487 (dialog.options.closeOnEscape && event.keyCode |
558 (dialog.options.closeOnEscape && event.keyCode |
488 && event.keyCode == $.ui.keyCode.ESCAPE && dialog.close()); |
559 && event.keyCode == $.ui.keyCode.ESCAPE && dialog.close(event)); |
489 }); |
560 }); |
490 |
561 |
491 // handle window resize |
562 // handle window resize |
492 $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize); |
563 $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize); |
493 } |
564 } |
494 |
565 |
495 var $el = $('<div></div>').appendTo(document.body) |
566 var $el = $('<div></div>').appendTo(document.body) |
496 .addClass('ui-dialog-overlay').css($.extend({ |
567 .addClass('ui-widget-overlay').css({ |
497 borderWidth: 0, margin: 0, padding: 0, |
|
498 position: 'absolute', top: 0, left: 0, |
|
499 width: this.width(), |
568 width: this.width(), |
500 height: this.height() |
569 height: this.height() |
501 }, dialog.options.overlay)); |
570 }); |
502 |
571 |
503 (dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe()); |
572 (dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe()); |
504 |
573 |
505 this.instances.push($el); |
574 this.instances.push($el); |
506 return $el; |
575 return $el; |