source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/ui/jquery.ui.dialog.js@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

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