1 /* |
|
2 * jQuery UI Dialog 1.8.1 |
|
3 * |
|
4 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) |
|
5 * Dual licensed under the MIT (MIT-LICENSE.txt) |
|
6 * and GPL (GPL-LICENSE.txt) licenses. |
|
7 * |
|
8 * http://docs.jquery.com/UI/Dialog |
|
9 * |
|
10 * Depends: |
|
11 * jquery.ui.core.js |
|
12 * jquery.ui.widget.js |
|
13 * jquery.ui.button.js |
|
14 * jquery.ui.draggable.js |
|
15 * jquery.ui.mouse.js |
|
16 * jquery.ui.position.js |
|
17 * jquery.ui.resizable.js |
|
18 */ |
|
19 (function($) { |
|
20 |
|
21 var uiDialogClasses = |
|
22 'ui-dialog ' + |
|
23 'ui-widget ' + |
|
24 'ui-widget-content ' + |
|
25 'ui-corner-all '; |
|
26 |
|
27 $.widget("ui.dialog", { |
|
28 options: { |
|
29 autoOpen: true, |
|
30 buttons: {}, |
|
31 closeOnEscape: true, |
|
32 closeText: 'close', |
|
33 dialogClass: '', |
|
34 draggable: true, |
|
35 hide: null, |
|
36 height: 'auto', |
|
37 maxHeight: false, |
|
38 maxWidth: false, |
|
39 minHeight: 150, |
|
40 minWidth: 150, |
|
41 modal: false, |
|
42 position: 'center', |
|
43 resizable: true, |
|
44 show: null, |
|
45 stack: true, |
|
46 title: '', |
|
47 width: 300, |
|
48 zIndex: 1000 |
|
49 }, |
|
50 _create: function() { |
|
51 this.originalTitle = this.element.attr('title'); |
|
52 |
|
53 var self = this, |
|
54 options = self.options, |
|
55 |
|
56 title = options.title || self.originalTitle || ' ', |
|
57 titleId = $.ui.dialog.getTitleId(self.element), |
|
58 |
|
59 uiDialog = (self.uiDialog = $('<div></div>')) |
|
60 .appendTo(document.body) |
|
61 .hide() |
|
62 .addClass(uiDialogClasses + options.dialogClass) |
|
63 .css({ |
|
64 zIndex: options.zIndex |
|
65 }) |
|
66 // setting tabIndex makes the div focusable |
|
67 // setting outline to 0 prevents a border on focus in Mozilla |
|
68 .attr('tabIndex', -1).css('outline', 0).keydown(function(event) { |
|
69 if (options.closeOnEscape && event.keyCode && |
|
70 event.keyCode === $.ui.keyCode.ESCAPE) { |
|
71 |
|
72 self.close(event); |
|
73 event.preventDefault(); |
|
74 } |
|
75 }) |
|
76 .attr({ |
|
77 role: 'dialog', |
|
78 'aria-labelledby': titleId |
|
79 }) |
|
80 .mousedown(function(event) { |
|
81 self.moveToTop(false, event); |
|
82 }), |
|
83 |
|
84 uiDialogContent = self.element |
|
85 .show() |
|
86 .removeAttr('title') |
|
87 .addClass( |
|
88 'ui-dialog-content ' + |
|
89 'ui-widget-content') |
|
90 .appendTo(uiDialog), |
|
91 |
|
92 uiDialogTitlebar = (self.uiDialogTitlebar = $('<div></div>')) |
|
93 .addClass( |
|
94 'ui-dialog-titlebar ' + |
|
95 'ui-widget-header ' + |
|
96 'ui-corner-all ' + |
|
97 'ui-helper-clearfix' |
|
98 ) |
|
99 .prependTo(uiDialog), |
|
100 |
|
101 uiDialogTitlebarClose = $('<a href="#"></a>') |
|
102 .addClass( |
|
103 'ui-dialog-titlebar-close ' + |
|
104 'ui-corner-all' |
|
105 ) |
|
106 .attr('role', 'button') |
|
107 .hover( |
|
108 function() { |
|
109 uiDialogTitlebarClose.addClass('ui-state-hover'); |
|
110 }, |
|
111 function() { |
|
112 uiDialogTitlebarClose.removeClass('ui-state-hover'); |
|
113 } |
|
114 ) |
|
115 .focus(function() { |
|
116 uiDialogTitlebarClose.addClass('ui-state-focus'); |
|
117 }) |
|
118 .blur(function() { |
|
119 uiDialogTitlebarClose.removeClass('ui-state-focus'); |
|
120 }) |
|
121 .click(function(event) { |
|
122 self.close(event); |
|
123 return false; |
|
124 }) |
|
125 .appendTo(uiDialogTitlebar), |
|
126 |
|
127 uiDialogTitlebarCloseText = (self.uiDialogTitlebarCloseText = $('<span></span>')) |
|
128 .addClass( |
|
129 'ui-icon ' + |
|
130 'ui-icon-closethick' |
|
131 ) |
|
132 .text(options.closeText) |
|
133 .appendTo(uiDialogTitlebarClose), |
|
134 |
|
135 uiDialogTitle = $('<span></span>') |
|
136 .addClass('ui-dialog-title') |
|
137 .attr('id', titleId) |
|
138 .html(title) |
|
139 .prependTo(uiDialogTitlebar); |
|
140 |
|
141 //handling of deprecated beforeclose (vs beforeClose) option |
|
142 //Ticket #4669 http://dev.jqueryui.com/ticket/4669 |
|
143 //TODO: remove in 1.9pre |
|
144 if ($.isFunction(options.beforeclose) && !$.isFunction(options.beforeClose)) { |
|
145 options.beforeClose = options.beforeclose; |
|
146 } |
|
147 |
|
148 uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection(); |
|
149 |
|
150 if (options.draggable && $.fn.draggable) { |
|
151 self._makeDraggable(); |
|
152 } |
|
153 if (options.resizable && $.fn.resizable) { |
|
154 self._makeResizable(); |
|
155 } |
|
156 |
|
157 self._createButtons(options.buttons); |
|
158 self._isOpen = false; |
|
159 |
|
160 if ($.fn.bgiframe) { |
|
161 uiDialog.bgiframe(); |
|
162 } |
|
163 }, |
|
164 _init: function() { |
|
165 if ( this.options.autoOpen ) { |
|
166 this.open(); |
|
167 } |
|
168 }, |
|
169 |
|
170 destroy: function() { |
|
171 var self = this; |
|
172 |
|
173 if (self.overlay) { |
|
174 self.overlay.destroy(); |
|
175 } |
|
176 self.uiDialog.hide(); |
|
177 self.element |
|
178 .unbind('.dialog') |
|
179 .removeData('dialog') |
|
180 .removeClass('ui-dialog-content ui-widget-content') |
|
181 .hide().appendTo('body'); |
|
182 self.uiDialog.remove(); |
|
183 |
|
184 if (self.originalTitle) { |
|
185 self.element.attr('title', self.originalTitle); |
|
186 } |
|
187 |
|
188 return self; |
|
189 }, |
|
190 |
|
191 widget: function() { |
|
192 return this.uiDialog; |
|
193 }, |
|
194 |
|
195 close: function(event) { |
|
196 var self = this, |
|
197 maxZ; |
|
198 |
|
199 if (false === self._trigger('beforeClose', event)) { |
|
200 return; |
|
201 } |
|
202 |
|
203 if (self.overlay) { |
|
204 self.overlay.destroy(); |
|
205 } |
|
206 self.uiDialog.unbind('keypress.ui-dialog'); |
|
207 |
|
208 self._isOpen = false; |
|
209 |
|
210 if (self.options.hide) { |
|
211 self.uiDialog.hide(self.options.hide, function() { |
|
212 self._trigger('close', event); |
|
213 }); |
|
214 } else { |
|
215 self.uiDialog.hide(); |
|
216 self._trigger('close', event); |
|
217 } |
|
218 |
|
219 $.ui.dialog.overlay.resize(); |
|
220 |
|
221 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309) |
|
222 if (self.options.modal) { |
|
223 maxZ = 0; |
|
224 $('.ui-dialog').each(function() { |
|
225 if (this !== self.uiDialog[0]) { |
|
226 maxZ = Math.max(maxZ, $(this).css('z-index')); |
|
227 } |
|
228 }); |
|
229 $.ui.dialog.maxZ = maxZ; |
|
230 } |
|
231 |
|
232 return self; |
|
233 }, |
|
234 |
|
235 isOpen: function() { |
|
236 return this._isOpen; |
|
237 }, |
|
238 |
|
239 // the force parameter allows us to move modal dialogs to their correct |
|
240 // position on open |
|
241 moveToTop: function(force, event) { |
|
242 var self = this, |
|
243 options = self.options, |
|
244 saveScroll; |
|
245 |
|
246 if ((options.modal && !force) || |
|
247 (!options.stack && !options.modal)) { |
|
248 return self._trigger('focus', event); |
|
249 } |
|
250 |
|
251 if (options.zIndex > $.ui.dialog.maxZ) { |
|
252 $.ui.dialog.maxZ = options.zIndex; |
|
253 } |
|
254 if (self.overlay) { |
|
255 $.ui.dialog.maxZ += 1; |
|
256 self.overlay.$el.css('z-index', $.ui.dialog.overlay.maxZ = $.ui.dialog.maxZ); |
|
257 } |
|
258 |
|
259 //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed. |
|
260 // http://ui.jquery.com/bugs/ticket/3193 |
|
261 saveScroll = { scrollTop: self.element.attr('scrollTop'), scrollLeft: self.element.attr('scrollLeft') }; |
|
262 $.ui.dialog.maxZ += 1; |
|
263 self.uiDialog.css('z-index', $.ui.dialog.maxZ); |
|
264 self.element.attr(saveScroll); |
|
265 self._trigger('focus', event); |
|
266 |
|
267 return self; |
|
268 }, |
|
269 |
|
270 open: function() { |
|
271 if (this._isOpen) { return; } |
|
272 |
|
273 var self = this, |
|
274 options = self.options, |
|
275 uiDialog = self.uiDialog; |
|
276 |
|
277 self.overlay = options.modal ? new $.ui.dialog.overlay(self) : null; |
|
278 if (uiDialog.next().length) { |
|
279 uiDialog.appendTo('body'); |
|
280 } |
|
281 self._size(); |
|
282 self._position(options.position); |
|
283 uiDialog.show(options.show); |
|
284 self.moveToTop(true); |
|
285 |
|
286 // prevent tabbing out of modal dialogs |
|
287 if (options.modal) { |
|
288 uiDialog.bind('keypress.ui-dialog', function(event) { |
|
289 if (event.keyCode !== $.ui.keyCode.TAB) { |
|
290 return; |
|
291 } |
|
292 |
|
293 var tabbables = $(':tabbable', this), |
|
294 first = tabbables.filter(':first'), |
|
295 last = tabbables.filter(':last'); |
|
296 |
|
297 if (event.target === last[0] && !event.shiftKey) { |
|
298 first.focus(1); |
|
299 return false; |
|
300 } else if (event.target === first[0] && event.shiftKey) { |
|
301 last.focus(1); |
|
302 return false; |
|
303 } |
|
304 }); |
|
305 } |
|
306 |
|
307 // set focus to the first tabbable element in the content area or the first button |
|
308 // if there are no tabbable elements, set focus on the dialog itself |
|
309 $([]) |
|
310 .add(uiDialog.find('.ui-dialog-content :tabbable:first')) |
|
311 .add(uiDialog.find('.ui-dialog-buttonpane :tabbable:first')) |
|
312 .add(uiDialog) |
|
313 .filter(':first') |
|
314 .focus(); |
|
315 |
|
316 self._trigger('open'); |
|
317 self._isOpen = true; |
|
318 |
|
319 return self; |
|
320 }, |
|
321 |
|
322 _createButtons: function(buttons) { |
|
323 var self = this, |
|
324 hasButtons = false, |
|
325 uiDialogButtonPane = $('<div></div>') |
|
326 .addClass( |
|
327 'ui-dialog-buttonpane ' + |
|
328 'ui-widget-content ' + |
|
329 'ui-helper-clearfix' |
|
330 ); |
|
331 |
|
332 // if we already have a button pane, remove it |
|
333 self.uiDialog.find('.ui-dialog-buttonpane').remove(); |
|
334 |
|
335 if (typeof buttons === 'object' && buttons !== null) { |
|
336 $.each(buttons, function() { |
|
337 return !(hasButtons = true); |
|
338 }); |
|
339 } |
|
340 if (hasButtons) { |
|
341 $.each(buttons, function(name, fn) { |
|
342 var button = $('<button type="button"></button>') |
|
343 .text(name) |
|
344 .click(function() { fn.apply(self.element[0], arguments); }) |
|
345 .appendTo(uiDialogButtonPane); |
|
346 if ($.fn.button) { |
|
347 button.button(); |
|
348 } |
|
349 }); |
|
350 uiDialogButtonPane.appendTo(self.uiDialog); |
|
351 } |
|
352 }, |
|
353 |
|
354 _makeDraggable: function() { |
|
355 var self = this, |
|
356 options = self.options, |
|
357 doc = $(document), |
|
358 heightBeforeDrag; |
|
359 |
|
360 function filteredUi(ui) { |
|
361 return { |
|
362 position: ui.position, |
|
363 offset: ui.offset |
|
364 }; |
|
365 } |
|
366 |
|
367 self.uiDialog.draggable({ |
|
368 cancel: '.ui-dialog-content, .ui-dialog-titlebar-close', |
|
369 handle: '.ui-dialog-titlebar', |
|
370 containment: 'document', |
|
371 start: function(event, ui) { |
|
372 heightBeforeDrag = options.height === "auto" ? "auto" : $(this).height(); |
|
373 $(this).height($(this).height()).addClass("ui-dialog-dragging"); |
|
374 self._trigger('dragStart', event, filteredUi(ui)); |
|
375 }, |
|
376 drag: function(event, ui) { |
|
377 self._trigger('drag', event, filteredUi(ui)); |
|
378 }, |
|
379 stop: function(event, ui) { |
|
380 options.position = [ui.position.left - doc.scrollLeft(), |
|
381 ui.position.top - doc.scrollTop()]; |
|
382 $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag); |
|
383 self._trigger('dragStop', event, filteredUi(ui)); |
|
384 $.ui.dialog.overlay.resize(); |
|
385 } |
|
386 }); |
|
387 }, |
|
388 |
|
389 _makeResizable: function(handles) { |
|
390 handles = (handles === undefined ? this.options.resizable : handles); |
|
391 var self = this, |
|
392 options = self.options, |
|
393 // .ui-resizable has position: relative defined in the stylesheet |
|
394 // but dialogs have to use absolute or fixed positioning |
|
395 position = self.uiDialog.css('position'), |
|
396 resizeHandles = (typeof handles === 'string' ? |
|
397 handles : |
|
398 'n,e,s,w,se,sw,ne,nw' |
|
399 ); |
|
400 |
|
401 function filteredUi(ui) { |
|
402 return { |
|
403 originalPosition: ui.originalPosition, |
|
404 originalSize: ui.originalSize, |
|
405 position: ui.position, |
|
406 size: ui.size |
|
407 }; |
|
408 } |
|
409 |
|
410 self.uiDialog.resizable({ |
|
411 cancel: '.ui-dialog-content', |
|
412 containment: 'document', |
|
413 alsoResize: self.element, |
|
414 maxWidth: options.maxWidth, |
|
415 maxHeight: options.maxHeight, |
|
416 minWidth: options.minWidth, |
|
417 minHeight: self._minHeight(), |
|
418 handles: resizeHandles, |
|
419 start: function(event, ui) { |
|
420 $(this).addClass("ui-dialog-resizing"); |
|
421 self._trigger('resizeStart', event, filteredUi(ui)); |
|
422 }, |
|
423 resize: function(event, ui) { |
|
424 self._trigger('resize', event, filteredUi(ui)); |
|
425 }, |
|
426 stop: function(event, ui) { |
|
427 $(this).removeClass("ui-dialog-resizing"); |
|
428 options.height = $(this).height(); |
|
429 options.width = $(this).width(); |
|
430 self._trigger('resizeStop', event, filteredUi(ui)); |
|
431 $.ui.dialog.overlay.resize(); |
|
432 } |
|
433 }) |
|
434 .css('position', position) |
|
435 .find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se'); |
|
436 }, |
|
437 |
|
438 _minHeight: function() { |
|
439 var options = this.options; |
|
440 |
|
441 if (options.height === 'auto') { |
|
442 return options.minHeight; |
|
443 } else { |
|
444 return Math.min(options.minHeight, options.height); |
|
445 } |
|
446 }, |
|
447 |
|
448 _position: function(position) { |
|
449 var myAt = [], |
|
450 offset = [0, 0], |
|
451 isVisible; |
|
452 |
|
453 position = position || $.ui.dialog.prototype.options.position; |
|
454 |
|
455 // deep extending converts arrays to objects in jQuery <= 1.3.2 :-( |
|
456 // if (typeof position == 'string' || $.isArray(position)) { |
|
457 // myAt = $.isArray(position) ? position : position.split(' '); |
|
458 |
|
459 if (typeof position === 'string' || (typeof position === 'object' && '0' in position)) { |
|
460 myAt = position.split ? position.split(' ') : [position[0], position[1]]; |
|
461 if (myAt.length === 1) { |
|
462 myAt[1] = myAt[0]; |
|
463 } |
|
464 |
|
465 $.each(['left', 'top'], function(i, offsetPosition) { |
|
466 if (+myAt[i] === myAt[i]) { |
|
467 offset[i] = myAt[i]; |
|
468 myAt[i] = offsetPosition; |
|
469 } |
|
470 }); |
|
471 } else if (typeof position === 'object') { |
|
472 if ('left' in position) { |
|
473 myAt[0] = 'left'; |
|
474 offset[0] = position.left; |
|
475 } else if ('right' in position) { |
|
476 myAt[0] = 'right'; |
|
477 offset[0] = -position.right; |
|
478 } |
|
479 |
|
480 if ('top' in position) { |
|
481 myAt[1] = 'top'; |
|
482 offset[1] = position.top; |
|
483 } else if ('bottom' in position) { |
|
484 myAt[1] = 'bottom'; |
|
485 offset[1] = -position.bottom; |
|
486 } |
|
487 } |
|
488 |
|
489 // need to show the dialog to get the actual offset in the position plugin |
|
490 isVisible = this.uiDialog.is(':visible'); |
|
491 if (!isVisible) { |
|
492 this.uiDialog.show(); |
|
493 } |
|
494 this.uiDialog |
|
495 // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781 |
|
496 .css({ top: 0, left: 0 }) |
|
497 .position({ |
|
498 my: myAt.join(' '), |
|
499 at: myAt.join(' '), |
|
500 offset: offset.join(' '), |
|
501 of: window, |
|
502 collision: 'fit', |
|
503 // ensure that the titlebar is never outside the document |
|
504 using: function(pos) { |
|
505 var topOffset = $(this).css(pos).offset().top; |
|
506 if (topOffset < 0) { |
|
507 $(this).css('top', pos.top - topOffset); |
|
508 } |
|
509 } |
|
510 }); |
|
511 if (!isVisible) { |
|
512 this.uiDialog.hide(); |
|
513 } |
|
514 }, |
|
515 |
|
516 _setOption: function(key, value){ |
|
517 var self = this, |
|
518 uiDialog = self.uiDialog, |
|
519 isResizable = uiDialog.is(':data(resizable)'), |
|
520 resize = false; |
|
521 |
|
522 switch (key) { |
|
523 //handling of deprecated beforeclose (vs beforeClose) option |
|
524 //Ticket #4669 http://dev.jqueryui.com/ticket/4669 |
|
525 //TODO: remove in 1.9pre |
|
526 case "beforeclose": |
|
527 key = "beforeClose"; |
|
528 break; |
|
529 case "buttons": |
|
530 self._createButtons(value); |
|
531 break; |
|
532 case "closeText": |
|
533 // convert whatever was passed in to a string, for text() to not throw up |
|
534 self.uiDialogTitlebarCloseText.text("" + value); |
|
535 break; |
|
536 case "dialogClass": |
|
537 uiDialog |
|
538 .removeClass(self.options.dialogClass) |
|
539 .addClass(uiDialogClasses + value); |
|
540 break; |
|
541 case "disabled": |
|
542 if (value) { |
|
543 uiDialog.addClass('ui-dialog-disabled'); |
|
544 } else { |
|
545 uiDialog.removeClass('ui-dialog-disabled'); |
|
546 } |
|
547 break; |
|
548 case "draggable": |
|
549 if (value) { |
|
550 self._makeDraggable(); |
|
551 } else { |
|
552 uiDialog.draggable('destroy'); |
|
553 } |
|
554 break; |
|
555 case "height": |
|
556 resize = true; |
|
557 break; |
|
558 case "maxHeight": |
|
559 if (isResizable) { |
|
560 uiDialog.resizable('option', 'maxHeight', value); |
|
561 } |
|
562 resize = true; |
|
563 break; |
|
564 case "maxWidth": |
|
565 if (isResizable) { |
|
566 uiDialog.resizable('option', 'maxWidth', value); |
|
567 } |
|
568 resize = true; |
|
569 break; |
|
570 case "minHeight": |
|
571 if (isResizable) { |
|
572 uiDialog.resizable('option', 'minHeight', value); |
|
573 } |
|
574 resize = true; |
|
575 break; |
|
576 case "minWidth": |
|
577 if (isResizable) { |
|
578 uiDialog.resizable('option', 'minWidth', value); |
|
579 } |
|
580 resize = true; |
|
581 break; |
|
582 case "position": |
|
583 self._position(value); |
|
584 break; |
|
585 case "resizable": |
|
586 // currently resizable, becoming non-resizable |
|
587 if (isResizable && !value) { |
|
588 uiDialog.resizable('destroy'); |
|
589 } |
|
590 |
|
591 // currently resizable, changing handles |
|
592 if (isResizable && typeof value === 'string') { |
|
593 uiDialog.resizable('option', 'handles', value); |
|
594 } |
|
595 |
|
596 // currently non-resizable, becoming resizable |
|
597 if (!isResizable && value !== false) { |
|
598 self._makeResizable(value); |
|
599 } |
|
600 break; |
|
601 case "title": |
|
602 // convert whatever was passed in o a string, for html() to not throw up |
|
603 $(".ui-dialog-title", self.uiDialogTitlebar).html("" + (value || ' ')); |
|
604 break; |
|
605 case "width": |
|
606 resize = true; |
|
607 break; |
|
608 } |
|
609 |
|
610 $.Widget.prototype._setOption.apply(self, arguments); |
|
611 if (resize) { |
|
612 self._size(); |
|
613 } |
|
614 }, |
|
615 |
|
616 _size: function() { |
|
617 /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content |
|
618 * divs will both have width and height set, so we need to reset them |
|
619 */ |
|
620 var options = this.options, |
|
621 nonContentHeight; |
|
622 |
|
623 // reset content sizing |
|
624 // hide for non content measurement because height: 0 doesn't work in IE quirks mode (see #4350) |
|
625 this.element.css({ |
|
626 width: 'auto', |
|
627 minHeight: 0, |
|
628 height: 0 |
|
629 }); |
|
630 |
|
631 // reset wrapper sizing |
|
632 // determine the height of all the non-content elements |
|
633 nonContentHeight = this.uiDialog.css({ |
|
634 height: 'auto', |
|
635 width: options.width |
|
636 }) |
|
637 .height(); |
|
638 |
|
639 this.element |
|
640 .css(options.height === 'auto' ? { |
|
641 minHeight: Math.max(options.minHeight - nonContentHeight, 0), |
|
642 height: 'auto' |
|
643 } : { |
|
644 minHeight: 0, |
|
645 height: Math.max(options.height - nonContentHeight, 0) |
|
646 }) |
|
647 .show(); |
|
648 |
|
649 if (this.uiDialog.is(':data(resizable)')) { |
|
650 this.uiDialog.resizable('option', 'minHeight', this._minHeight()); |
|
651 } |
|
652 } |
|
653 }); |
|
654 |
|
655 $.extend($.ui.dialog, { |
|
656 version: "1.8.1", |
|
657 |
|
658 uuid: 0, |
|
659 maxZ: 0, |
|
660 |
|
661 getTitleId: function($el) { |
|
662 var id = $el.attr('id'); |
|
663 if (!id) { |
|
664 this.uuid += 1; |
|
665 id = this.uuid; |
|
666 } |
|
667 return 'ui-dialog-title-' + id; |
|
668 }, |
|
669 |
|
670 overlay: function(dialog) { |
|
671 this.$el = $.ui.dialog.overlay.create(dialog); |
|
672 } |
|
673 }); |
|
674 |
|
675 $.extend($.ui.dialog.overlay, { |
|
676 instances: [], |
|
677 // reuse old instances due to IE memory leak with alpha transparency (see #5185) |
|
678 oldInstances: [], |
|
679 maxZ: 0, |
|
680 events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','), |
|
681 function(event) { return event + '.dialog-overlay'; }).join(' '), |
|
682 create: function(dialog) { |
|
683 if (this.instances.length === 0) { |
|
684 // prevent use of anchors and inputs |
|
685 // we use a setTimeout in case the overlay is created from an |
|
686 // event that we're going to be cancelling (see #2804) |
|
687 setTimeout(function() { |
|
688 // handle $(el).dialog().dialog('close') (see #4065) |
|
689 if ($.ui.dialog.overlay.instances.length) { |
|
690 $(document).bind($.ui.dialog.overlay.events, function(event) { |
|
691 // stop events if the z-index of the target is < the z-index of the overlay |
|
692 return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ); |
|
693 }); |
|
694 } |
|
695 }, 1); |
|
696 |
|
697 // allow closing by pressing the escape key |
|
698 $(document).bind('keydown.dialog-overlay', function(event) { |
|
699 if (dialog.options.closeOnEscape && event.keyCode && |
|
700 event.keyCode === $.ui.keyCode.ESCAPE) { |
|
701 |
|
702 dialog.close(event); |
|
703 event.preventDefault(); |
|
704 } |
|
705 }); |
|
706 |
|
707 // handle window resize |
|
708 $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize); |
|
709 } |
|
710 |
|
711 var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay')) |
|
712 .appendTo(document.body) |
|
713 .css({ |
|
714 width: this.width(), |
|
715 height: this.height() |
|
716 }); |
|
717 |
|
718 if ($.fn.bgiframe) { |
|
719 $el.bgiframe(); |
|
720 } |
|
721 |
|
722 this.instances.push($el); |
|
723 return $el; |
|
724 }, |
|
725 |
|
726 destroy: function($el) { |
|
727 this.oldInstances.push(this.instances.splice($.inArray($el, this.instances), 1)[0]); |
|
728 |
|
729 if (this.instances.length === 0) { |
|
730 $([document, window]).unbind('.dialog-overlay'); |
|
731 } |
|
732 |
|
733 $el.remove(); |
|
734 |
|
735 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309) |
|
736 var maxZ = 0; |
|
737 $.each(this.instances, function() { |
|
738 maxZ = Math.max(maxZ, this.css('z-index')); |
|
739 }); |
|
740 this.maxZ = maxZ; |
|
741 }, |
|
742 |
|
743 height: function() { |
|
744 var scrollHeight, |
|
745 offsetHeight; |
|
746 // handle IE 6 |
|
747 if ($.browser.msie && $.browser.version < 7) { |
|
748 scrollHeight = Math.max( |
|
749 document.documentElement.scrollHeight, |
|
750 document.body.scrollHeight |
|
751 ); |
|
752 offsetHeight = Math.max( |
|
753 document.documentElement.offsetHeight, |
|
754 document.body.offsetHeight |
|
755 ); |
|
756 |
|
757 if (scrollHeight < offsetHeight) { |
|
758 return $(window).height() + 'px'; |
|
759 } else { |
|
760 return scrollHeight + 'px'; |
|
761 } |
|
762 // handle "good" browsers |
|
763 } else { |
|
764 return $(document).height() + 'px'; |
|
765 } |
|
766 }, |
|
767 |
|
768 width: function() { |
|
769 var scrollWidth, |
|
770 offsetWidth; |
|
771 // handle IE 6 |
|
772 if ($.browser.msie && $.browser.version < 7) { |
|
773 scrollWidth = Math.max( |
|
774 document.documentElement.scrollWidth, |
|
775 document.body.scrollWidth |
|
776 ); |
|
777 offsetWidth = Math.max( |
|
778 document.documentElement.offsetWidth, |
|
779 document.body.offsetWidth |
|
780 ); |
|
781 |
|
782 if (scrollWidth < offsetWidth) { |
|
783 return $(window).width() + 'px'; |
|
784 } else { |
|
785 return scrollWidth + 'px'; |
|
786 } |
|
787 // handle "good" browsers |
|
788 } else { |
|
789 return $(document).width() + 'px'; |
|
790 } |
|
791 }, |
|
792 |
|
793 resize: function() { |
|
794 /* If the dialog is draggable and the user drags it past the |
|
795 * right edge of the window, the document becomes wider so we |
|
796 * need to stretch the overlay. If the user then drags the |
|
797 * dialog back to the left, the document will become narrower, |
|
798 * so we need to shrink the overlay to the appropriate size. |
|
799 * This is handled by shrinking the overlay before setting it |
|
800 * to the full document size. |
|
801 */ |
|
802 var $overlays = $([]); |
|
803 $.each($.ui.dialog.overlay.instances, function() { |
|
804 $overlays = $overlays.add(this); |
|
805 }); |
|
806 |
|
807 $overlays.css({ |
|
808 width: 0, |
|
809 height: 0 |
|
810 }).css({ |
|
811 width: $.ui.dialog.overlay.width(), |
|
812 height: $.ui.dialog.overlay.height() |
|
813 }); |
|
814 } |
|
815 }); |
|
816 |
|
817 $.extend($.ui.dialog.overlay.prototype, { |
|
818 destroy: function() { |
|
819 $.ui.dialog.overlay.destroy(this.$el); |
|
820 } |
|
821 }); |
|
822 |
|
823 }(jQuery)); |
|