|
1 /* |
|
2 * jQuery UI Dialog 1.6 |
|
3 * |
|
4 * Copyright (c) 2008 AUTHORS.txt (http://ui.jquery.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 * ui.core.js |
|
12 * ui.draggable.js |
|
13 * ui.resizable.js |
|
14 */ |
|
15 (function($) { |
|
16 |
|
17 var setDataSwitch = { |
|
18 dragStart: "start.draggable", |
|
19 drag: "drag.draggable", |
|
20 dragStop: "stop.draggable", |
|
21 maxHeight: "maxHeight.resizable", |
|
22 minHeight: "minHeight.resizable", |
|
23 maxWidth: "maxWidth.resizable", |
|
24 minWidth: "minWidth.resizable", |
|
25 resizeStart: "start.resizable", |
|
26 resize: "drag.resizable", |
|
27 resizeStop: "stop.resizable" |
|
28 }; |
|
29 |
|
30 $.widget("ui.dialog", { |
|
31 |
|
32 _init: function() { |
|
33 this.originalTitle = this.element.attr('title'); |
|
34 this.options.title = this.options.title || this.originalTitle; |
|
35 |
|
36 var self = this, |
|
37 options = this.options, |
|
38 |
|
39 uiDialogContent = this.element |
|
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), |
|
71 uiDialogTitle = $('<span/>') |
|
72 .addClass('ui-dialog-title') |
|
73 .attr('id', titleId) |
|
74 .html(title) |
|
75 .prependTo(uiDialogTitlebar), |
|
76 |
|
77 uiDialog = (this.uiDialog = uiDialogContainer.parent()) |
|
78 .appendTo(document.body) |
|
79 .hide() |
|
80 .addClass('ui-dialog') |
|
81 .addClass(options.dialogClass) |
|
82 .css({ |
|
83 position: 'absolute', |
|
84 width: options.width, |
|
85 height: options.height, |
|
86 overflow: 'hidden', |
|
87 zIndex: options.zIndex |
|
88 }) |
|
89 // setting tabIndex makes the div focusable |
|
90 // setting outline to 0 prevents a border on focus in Mozilla |
|
91 .attr('tabIndex', -1).css('outline', 0).keydown(function(ev) { |
|
92 (options.closeOnEscape && ev.keyCode |
|
93 && ev.keyCode == $.ui.keyCode.ESCAPE && self.close()); |
|
94 }) |
|
95 .attr({ |
|
96 role: 'dialog', |
|
97 'aria-labelledby': titleId |
|
98 }) |
|
99 .mouseup(function() { |
|
100 self.moveToTop(); |
|
101 }), |
|
102 |
|
103 uiDialogButtonPane = (this.uiDialogButtonPane = $('<div></div>')) |
|
104 .addClass('ui-dialog-buttonpane') |
|
105 .css({ |
|
106 position: 'absolute', |
|
107 bottom: 0 |
|
108 }) |
|
109 .appendTo(uiDialog), |
|
110 |
|
111 uiDialogTitlebarClose = $('.ui-dialog-titlebar-close', uiDialogTitlebar) |
|
112 .hover( |
|
113 function() { |
|
114 $(this).addClass('ui-dialog-titlebar-close-hover'); |
|
115 }, |
|
116 function() { |
|
117 $(this).removeClass('ui-dialog-titlebar-close-hover'); |
|
118 } |
|
119 ) |
|
120 .mousedown(function(ev) { |
|
121 ev.stopPropagation(); |
|
122 }) |
|
123 .click(function() { |
|
124 self.close(); |
|
125 return false; |
|
126 }); |
|
127 |
|
128 uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection(); |
|
129 |
|
130 (options.draggable && $.fn.draggable && this._makeDraggable()); |
|
131 (options.resizable && $.fn.resizable && this._makeResizable()); |
|
132 |
|
133 this._createButtons(options.buttons); |
|
134 this._isOpen = false; |
|
135 |
|
136 (options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe()); |
|
137 (options.autoOpen && this.open()); |
|
138 }, |
|
139 |
|
140 destroy: function() { |
|
141 (this.overlay && this.overlay.destroy()); |
|
142 this.uiDialog.hide(); |
|
143 this.element |
|
144 .unbind('.dialog') |
|
145 .removeData('dialog') |
|
146 .removeClass('ui-dialog-content') |
|
147 .hide().appendTo('body'); |
|
148 this.uiDialog.remove(); |
|
149 |
|
150 (this.originalTitle && this.element.attr('title', this.originalTitle)); |
|
151 }, |
|
152 |
|
153 close: function() { |
|
154 if (false === this._trigger('beforeclose', null, { options: this.options })) { |
|
155 return; |
|
156 } |
|
157 |
|
158 (this.overlay && this.overlay.destroy()); |
|
159 this.uiDialog |
|
160 .hide(this.options.hide) |
|
161 .unbind('keypress.ui-dialog'); |
|
162 |
|
163 this._trigger('close', null, { options: this.options }); |
|
164 $.ui.dialog.overlay.resize(); |
|
165 |
|
166 this._isOpen = false; |
|
167 }, |
|
168 |
|
169 isOpen: function() { |
|
170 return this._isOpen; |
|
171 }, |
|
172 |
|
173 // the force parameter allows us to move modal dialogs to their correct |
|
174 // position on open |
|
175 moveToTop: function(force) { |
|
176 |
|
177 if ((this.options.modal && !force) |
|
178 || (!this.options.stack && !this.options.modal)) { |
|
179 return this._trigger('focus', null, { options: this.options }); |
|
180 } |
|
181 |
|
182 var maxZ = this.options.zIndex, options = this.options; |
|
183 $('.ui-dialog:visible').each(function() { |
|
184 maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10) || options.zIndex); |
|
185 }); |
|
186 (this.overlay && this.overlay.$el.css('z-index', ++maxZ)); |
|
187 |
|
188 //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed. |
|
189 // http://ui.jquery.com/bugs/ticket/3193 |
|
190 var saveScroll = { scrollTop: this.element.attr('scrollTop'), scrollLeft: this.element.attr('scrollLeft') }; |
|
191 this.uiDialog.css('z-index', ++maxZ); |
|
192 this.element.attr(saveScroll); |
|
193 this._trigger('focus', null, { options: this.options }); |
|
194 }, |
|
195 |
|
196 open: function() { |
|
197 if (this._isOpen) { return; } |
|
198 |
|
199 this.overlay = this.options.modal ? new $.ui.dialog.overlay(this) : null; |
|
200 (this.uiDialog.next().length && this.uiDialog.appendTo('body')); |
|
201 this._position(this.options.position); |
|
202 this.uiDialog.show(this.options.show); |
|
203 (this.options.autoResize && this._size()); |
|
204 this.moveToTop(true); |
|
205 |
|
206 // prevent tabbing out of modal dialogs |
|
207 (this.options.modal && this.uiDialog.bind('keypress.ui-dialog', function(event) { |
|
208 if (event.keyCode != $.ui.keyCode.TAB) { |
|
209 return; |
|
210 } |
|
211 |
|
212 var tabbables = $(':tabbable', this), |
|
213 first = tabbables.filter(':first')[0], |
|
214 last = tabbables.filter(':last')[0]; |
|
215 |
|
216 if (event.target == last && !event.shiftKey) { |
|
217 setTimeout(function() { |
|
218 first.focus(); |
|
219 }, 1); |
|
220 } else if (event.target == first && event.shiftKey) { |
|
221 setTimeout(function() { |
|
222 last.focus(); |
|
223 }, 1); |
|
224 } |
|
225 })); |
|
226 |
|
227 this.uiDialog.find(':tabbable:first').focus(); |
|
228 this._trigger('open', null, { options: this.options }); |
|
229 this._isOpen = true; |
|
230 }, |
|
231 |
|
232 _createButtons: function(buttons) { |
|
233 var self = this, |
|
234 hasButtons = false, |
|
235 uiDialogButtonPane = this.uiDialogButtonPane; |
|
236 |
|
237 // remove any existing buttons |
|
238 uiDialogButtonPane.empty().hide(); |
|
239 |
|
240 $.each(buttons, function() { return !(hasButtons = true); }); |
|
241 if (hasButtons) { |
|
242 uiDialogButtonPane.show(); |
|
243 $.each(buttons, function(name, fn) { |
|
244 $('<button type="button"></button>') |
|
245 .text(name) |
|
246 .click(function() { fn.apply(self.element[0], arguments); }) |
|
247 .appendTo(uiDialogButtonPane); |
|
248 }); |
|
249 } |
|
250 }, |
|
251 |
|
252 _makeDraggable: function() { |
|
253 var self = this, |
|
254 options = this.options; |
|
255 |
|
256 this.uiDialog.draggable({ |
|
257 cancel: '.ui-dialog-content', |
|
258 helper: options.dragHelper, |
|
259 handle: '.ui-dialog-titlebar', |
|
260 start: function() { |
|
261 self.moveToTop(); |
|
262 (options.dragStart && options.dragStart.apply(self.element[0], arguments)); |
|
263 }, |
|
264 drag: function() { |
|
265 (options.drag && options.drag.apply(self.element[0], arguments)); |
|
266 }, |
|
267 stop: function() { |
|
268 (options.dragStop && options.dragStop.apply(self.element[0], arguments)); |
|
269 $.ui.dialog.overlay.resize(); |
|
270 } |
|
271 }); |
|
272 }, |
|
273 |
|
274 _makeResizable: function(handles) { |
|
275 handles = (handles === undefined ? this.options.resizable : handles); |
|
276 var self = this, |
|
277 options = this.options, |
|
278 resizeHandles = typeof handles == 'string' |
|
279 ? handles |
|
280 : 'n,e,s,w,se,sw,ne,nw'; |
|
281 |
|
282 this.uiDialog.resizable({ |
|
283 cancel: '.ui-dialog-content', |
|
284 helper: options.resizeHelper, |
|
285 maxWidth: options.maxWidth, |
|
286 maxHeight: options.maxHeight, |
|
287 minWidth: options.minWidth, |
|
288 minHeight: options.minHeight, |
|
289 start: function() { |
|
290 (options.resizeStart && options.resizeStart.apply(self.element[0], arguments)); |
|
291 }, |
|
292 resize: function() { |
|
293 (options.autoResize && self._size.apply(self)); |
|
294 (options.resize && options.resize.apply(self.element[0], arguments)); |
|
295 }, |
|
296 handles: resizeHandles, |
|
297 stop: function() { |
|
298 (options.autoResize && self._size.apply(self)); |
|
299 (options.resizeStop && options.resizeStop.apply(self.element[0], arguments)); |
|
300 $.ui.dialog.overlay.resize(); |
|
301 } |
|
302 }); |
|
303 }, |
|
304 |
|
305 _position: function(pos) { |
|
306 var wnd = $(window), doc = $(document), |
|
307 pTop = doc.scrollTop(), pLeft = doc.scrollLeft(), |
|
308 minTop = pTop; |
|
309 |
|
310 if ($.inArray(pos, ['center','top','right','bottom','left']) >= 0) { |
|
311 pos = [ |
|
312 pos == 'right' || pos == 'left' ? pos : 'center', |
|
313 pos == 'top' || pos == 'bottom' ? pos : 'middle' |
|
314 ]; |
|
315 } |
|
316 if (pos.constructor != Array) { |
|
317 pos = ['center', 'middle']; |
|
318 } |
|
319 if (pos[0].constructor == Number) { |
|
320 pLeft += pos[0]; |
|
321 } else { |
|
322 switch (pos[0]) { |
|
323 case 'left': |
|
324 pLeft += 0; |
|
325 break; |
|
326 case 'right': |
|
327 pLeft += wnd.width() - this.uiDialog.outerWidth(); |
|
328 break; |
|
329 default: |
|
330 case 'center': |
|
331 pLeft += (wnd.width() - this.uiDialog.outerWidth()) / 2; |
|
332 } |
|
333 } |
|
334 if (pos[1].constructor == Number) { |
|
335 pTop += pos[1]; |
|
336 } else { |
|
337 switch (pos[1]) { |
|
338 case 'top': |
|
339 pTop += 0; |
|
340 break; |
|
341 case 'bottom': |
|
342 // Opera check fixes #3564, can go away with jQuery 1.3 |
|
343 pTop += ($.browser.opera ? window.innerHeight : wnd.height()) - this.uiDialog.outerHeight(); |
|
344 break; |
|
345 default: |
|
346 case 'middle': |
|
347 // Opera check fixes #3564, can go away with jQuery 1.3 |
|
348 pTop += (($.browser.opera ? window.innerHeight : wnd.height()) - this.uiDialog.outerHeight()) / 2; |
|
349 } |
|
350 } |
|
351 |
|
352 // prevent the dialog from being too high (make sure the titlebar |
|
353 // is accessible) |
|
354 pTop = Math.max(pTop, minTop); |
|
355 this.uiDialog.css({top: pTop, left: pLeft}); |
|
356 }, |
|
357 |
|
358 _setData: function(key, value){ |
|
359 (setDataSwitch[key] && this.uiDialog.data(setDataSwitch[key], value)); |
|
360 switch (key) { |
|
361 case "buttons": |
|
362 this._createButtons(value); |
|
363 break; |
|
364 case "closeText": |
|
365 this.uiDialogTitlebarCloseText.text(value); |
|
366 break; |
|
367 case "draggable": |
|
368 (value |
|
369 ? this._makeDraggable() |
|
370 : this.uiDialog.draggable('destroy')); |
|
371 break; |
|
372 case "height": |
|
373 this.uiDialog.height(value); |
|
374 break; |
|
375 case "position": |
|
376 this._position(value); |
|
377 break; |
|
378 case "resizable": |
|
379 var uiDialog = this.uiDialog, |
|
380 isResizable = this.uiDialog.is(':data(resizable)'); |
|
381 |
|
382 // currently resizable, becoming non-resizable |
|
383 (isResizable && !value && uiDialog.resizable('destroy')); |
|
384 |
|
385 // currently resizable, changing handles |
|
386 (isResizable && typeof value == 'string' && |
|
387 uiDialog.resizable('option', 'handles', value)); |
|
388 |
|
389 // currently non-resizable, becoming resizable |
|
390 (isResizable || this._makeResizable(value)); |
|
391 |
|
392 break; |
|
393 case "title": |
|
394 $(".ui-dialog-title", this.uiDialogTitlebar).html(value || ' '); |
|
395 break; |
|
396 case "width": |
|
397 this.uiDialog.width(value); |
|
398 break; |
|
399 } |
|
400 |
|
401 $.widget.prototype._setData.apply(this, arguments); |
|
402 }, |
|
403 |
|
404 _size: function() { |
|
405 var container = this.uiDialogContainer, |
|
406 titlebar = this.uiDialogTitlebar, |
|
407 content = this.element, |
|
408 tbMargin = (parseInt(content.css('margin-top'), 10) || 0) |
|
409 + (parseInt(content.css('margin-bottom'), 10) || 0), |
|
410 lrMargin = (parseInt(content.css('margin-left'), 10) || 0) |
|
411 + (parseInt(content.css('margin-right'), 10) || 0); |
|
412 content.height(container.height() - titlebar.outerHeight() - tbMargin); |
|
413 content.width(container.width() - lrMargin); |
|
414 } |
|
415 |
|
416 }); |
|
417 |
|
418 $.extend($.ui.dialog, { |
|
419 version: "1.6", |
|
420 defaults: { |
|
421 autoOpen: true, |
|
422 autoResize: true, |
|
423 bgiframe: false, |
|
424 buttons: {}, |
|
425 closeOnEscape: true, |
|
426 closeText: 'close', |
|
427 draggable: true, |
|
428 height: 200, |
|
429 minHeight: 100, |
|
430 minWidth: 150, |
|
431 modal: false, |
|
432 overlay: {}, |
|
433 position: 'center', |
|
434 resizable: true, |
|
435 stack: true, |
|
436 width: 300, |
|
437 zIndex: 1000 |
|
438 }, |
|
439 |
|
440 getter: 'isOpen', |
|
441 |
|
442 uuid: 0, |
|
443 |
|
444 getTitleId: function($el) { |
|
445 return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid); |
|
446 }, |
|
447 |
|
448 overlay: function(dialog) { |
|
449 this.$el = $.ui.dialog.overlay.create(dialog); |
|
450 } |
|
451 }); |
|
452 |
|
453 $.extend($.ui.dialog.overlay, { |
|
454 instances: [], |
|
455 events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','), |
|
456 function(event) { return event + '.dialog-overlay'; }).join(' '), |
|
457 create: function(dialog) { |
|
458 if (this.instances.length === 0) { |
|
459 // prevent use of anchors and inputs |
|
460 // we use a setTimeout in case the overlay is created from an |
|
461 // event that we're going to be cancelling (see #2804) |
|
462 setTimeout(function() { |
|
463 $('a, :input').bind($.ui.dialog.overlay.events, function() { |
|
464 // allow use of the element if inside a dialog and |
|
465 // - there are no modal dialogs |
|
466 // - there are modal dialogs, but we are in front of the topmost modal |
|
467 var allow = false; |
|
468 var $dialog = $(this).parents('.ui-dialog'); |
|
469 if ($dialog.length) { |
|
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); |
|
484 |
|
485 // allow closing by pressing the escape key |
|
486 $(document).bind('keydown.dialog-overlay', function(event) { |
|
487 (dialog.options.closeOnEscape && event.keyCode |
|
488 && event.keyCode == $.ui.keyCode.ESCAPE && dialog.close()); |
|
489 }); |
|
490 |
|
491 // handle window resize |
|
492 $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize); |
|
493 } |
|
494 |
|
495 var $el = $('<div></div>').appendTo(document.body) |
|
496 .addClass('ui-dialog-overlay').css($.extend({ |
|
497 borderWidth: 0, margin: 0, padding: 0, |
|
498 position: 'absolute', top: 0, left: 0, |
|
499 width: this.width(), |
|
500 height: this.height() |
|
501 }, dialog.options.overlay)); |
|
502 |
|
503 (dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe()); |
|
504 |
|
505 this.instances.push($el); |
|
506 return $el; |
|
507 }, |
|
508 |
|
509 destroy: function($el) { |
|
510 this.instances.splice($.inArray(this.instances, $el), 1); |
|
511 |
|
512 if (this.instances.length === 0) { |
|
513 $('a, :input').add([document, window]).unbind('.dialog-overlay'); |
|
514 } |
|
515 |
|
516 $el.remove(); |
|
517 }, |
|
518 |
|
519 height: function() { |
|
520 // handle IE 6 |
|
521 if ($.browser.msie && $.browser.version < 7) { |
|
522 var scrollHeight = Math.max( |
|
523 document.documentElement.scrollHeight, |
|
524 document.body.scrollHeight |
|
525 ); |
|
526 var offsetHeight = Math.max( |
|
527 document.documentElement.offsetHeight, |
|
528 document.body.offsetHeight |
|
529 ); |
|
530 |
|
531 if (scrollHeight < offsetHeight) { |
|
532 return $(window).height() + 'px'; |
|
533 } else { |
|
534 return scrollHeight + 'px'; |
|
535 } |
|
536 // handle Opera |
|
537 } else if ($.browser.opera) { |
|
538 return Math.max( |
|
539 window.innerHeight, |
|
540 $(document).height() |
|
541 ) + 'px'; |
|
542 // handle "good" browsers |
|
543 } else { |
|
544 return $(document).height() + 'px'; |
|
545 } |
|
546 }, |
|
547 |
|
548 width: function() { |
|
549 // handle IE 6 |
|
550 if ($.browser.msie && $.browser.version < 7) { |
|
551 var scrollWidth = Math.max( |
|
552 document.documentElement.scrollWidth, |
|
553 document.body.scrollWidth |
|
554 ); |
|
555 var offsetWidth = Math.max( |
|
556 document.documentElement.offsetWidth, |
|
557 document.body.offsetWidth |
|
558 ); |
|
559 |
|
560 if (scrollWidth < offsetWidth) { |
|
561 return $(window).width() + 'px'; |
|
562 } else { |
|
563 return scrollWidth + 'px'; |
|
564 } |
|
565 // handle Opera |
|
566 } else if ($.browser.opera) { |
|
567 return Math.max( |
|
568 window.innerWidth, |
|
569 $(document).width() |
|
570 ) + 'px'; |
|
571 // handle "good" browsers |
|
572 } else { |
|
573 return $(document).width() + 'px'; |
|
574 } |
|
575 }, |
|
576 |
|
577 resize: function() { |
|
578 /* If the dialog is draggable and the user drags it past the |
|
579 * right edge of the window, the document becomes wider so we |
|
580 * need to stretch the overlay. If the user then drags the |
|
581 * dialog back to the left, the document will become narrower, |
|
582 * so we need to shrink the overlay to the appropriate size. |
|
583 * This is handled by shrinking the overlay before setting it |
|
584 * to the full document size. |
|
585 */ |
|
586 var $overlays = $([]); |
|
587 $.each($.ui.dialog.overlay.instances, function() { |
|
588 $overlays = $overlays.add(this); |
|
589 }); |
|
590 |
|
591 $overlays.css({ |
|
592 width: 0, |
|
593 height: 0 |
|
594 }).css({ |
|
595 width: $.ui.dialog.overlay.width(), |
|
596 height: $.ui.dialog.overlay.height() |
|
597 }); |
|
598 } |
|
599 }); |
|
600 |
|
601 $.extend($.ui.dialog.overlay.prototype, { |
|
602 destroy: function() { |
|
603 $.ui.dialog.overlay.destroy(this.$el); |
|
604 } |
|
605 }); |
|
606 |
|
607 })(jQuery); |