https://h235u.com/Scripts/ui/ui.dialog.js

1/*
2 * jQuery UI Dialog 1.7.2
3 *
4 * Copyright (c) 2009 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 *	ui.core.js
12 *	ui.draggable.js
13 *	ui.resizable.js
14 */
15(function($) {
16
17var 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	uiDialogClasses =
31		'ui-dialog ' +
32		'ui-widget ' +
33		'ui-widget-content ' +
34		'ui-corner-all ';
35
36$.widget("ui.dialog", {
37
38	_init: function() {
39		this.originalTitle = this.element.attr('title');
40
41		var self = this,
42			options = this.options,
43
44			title = options.title || this.originalTitle || ' ',
45			titleId = $.ui.dialog.getTitleId(this.element),
46
47			uiDialog = (this.uiDialog = $('<div/>'))
48				.appendTo(document.body)
49				.hide()
50				.addClass(uiDialogClasses + options.dialogClass)
51				.css({
52					position: 'absolute',
53					overflow: 'hidden',
54					zIndex: options.zIndex
55				})
56				// setting tabIndex makes the div focusable
57				// setting outline to 0 prevents a border on focus in Mozilla
58				.attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
59					(options.closeOnEscape && event.keyCode
60						&& event.keyCode == $.ui.keyCode.ESCAPE && self.close(event));
61				})
62				.attr({
63					role: 'dialog',
64					'aria-labelledby': titleId
65				})
66				.mousedown(function(event) {
67					self.moveToTop(false, event);
68				}),
69
70			uiDialogContent = this.element
71				.show()
72				.removeAttr('title')
73				.addClass(
74					'ui-dialog-content ' +
75					'ui-widget-content')
76				.appendTo(uiDialog),
77
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')
93				.hover(
94					function() {
95						uiDialogTitlebarClose.addClass('ui-state-hover');
96					},
97					function() {
98						uiDialogTitlebarClose.removeClass('ui-state-hover');
99					}
100				)
101				.focus(function() {
102					uiDialogTitlebarClose.addClass('ui-state-focus');
103				})
104				.blur(function() {
105					uiDialogTitlebarClose.removeClass('ui-state-focus');
106				})
107				.mousedown(function(ev) {
108					ev.stopPropagation();
109				})
110				.click(function(event) {
111					self.close(event);
112					return false;
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);
129
130		uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
131
132		(options.draggable && $.fn.draggable && this._makeDraggable());
133		(options.resizable && $.fn.resizable && this._makeResizable());
134
135		this._createButtons(options.buttons);
136		this._isOpen = false;
137
138		(options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe());
139		(options.autoOpen && this.open());
140		
141	},
142
143	destroy: function() {
144		(this.overlay && this.overlay.destroy());
145		this.uiDialog.hide();
146		this.element
147			.unbind('.dialog')
148			.removeData('dialog')
149			.removeClass('ui-dialog-content ui-widget-content')
150			.hide().appendTo('body');
151		this.uiDialog.remove();
152
153		(this.originalTitle && this.element.attr('title', this.originalTitle));
154	},
155
156	close: function(event) {
157		var self = this;
158		
159		if (false === self._trigger('beforeclose', event)) {
160			return;
161		}
162
163		(self.overlay && self.overlay.destroy());
164		self.uiDialog.unbind('keypress.ui-dialog');
165
166		(self.options.hide
167			? self.uiDialog.hide(self.options.hide, function() {
168				self._trigger('close', event);
169			})
170			: self.uiDialog.hide() && self._trigger('close', event));
171
172		$.ui.dialog.overlay.resize();
173
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		}
186	},
187
188	isOpen: function() {
189		return this._isOpen;
190	},
191
192	// the force parameter allows us to move modal dialogs to their correct
193	// position on open
194	moveToTop: function(force, event) {
195
196		if ((this.options.modal && !force)
197			|| (!this.options.stack && !this.options.modal)) {
198			return this._trigger('focus', event);
199		}
200		
201		if (this.options.zIndex > $.ui.dialog.maxZ) {
202			$.ui.dialog.maxZ = this.options.zIndex;
203		}
204		(this.overlay && this.overlay.$el.css('z-index', $.ui.dialog.overlay.maxZ = ++$.ui.dialog.maxZ));
205
206		//Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed.
207		//  http://ui.jquery.com/bugs/ticket/3193
208		var saveScroll = { scrollTop: this.element.attr('scrollTop'), scrollLeft: this.element.attr('scrollLeft') };
209		this.uiDialog.css('z-index', ++$.ui.dialog.maxZ);
210		this.element.attr(saveScroll);
211		this._trigger('focus', event);
212	},
213
214	open: function() {
215		if (this._isOpen) { return; }
216
217		var options = this.options,
218			uiDialog = this.uiDialog;
219
220		this.overlay = options.modal ? new $.ui.dialog.overlay(this) : null;
221		(uiDialog.next().length && uiDialog.appendTo('body'));
222		this._size();
223		this._position(options.position);
224		uiDialog.show(options.show);
225		this.moveToTop(true);
226
227		// prevent tabbing out of modal dialogs
228		(options.modal && uiDialog.bind('keypress.ui-dialog', function(event) {
229			if (event.keyCode != $.ui.keyCode.TAB) {
230				return;
231			}
232
233			var tabbables = $(':tabbable', this),
234				first = tabbables.filter(':first')[0],
235				last  = tabbables.filter(':last')[0];
236
237			if (event.target == last && !event.shiftKey) {
238				setTimeout(function() {
239					first.focus();
240				}, 1);
241			} else if (event.target == first && event.shiftKey) {
242				setTimeout(function() {
243					last.focus();
244				}, 1);
245			}
246		}));
247
248		// set focus to the first tabbable element in the content area or the first button
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');
258		this._isOpen = true;
259	},
260
261	_createButtons: function(buttons) {
262		var self = this,
263			hasButtons = false,
264			uiDialogButtonPane = $('<div></div>')
265				.addClass(
266					'ui-dialog-buttonpane ' +
267					'ui-widget-content ' +
268					'ui-helper-clearfix'
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); }));
276		if (hasButtons) {
277			$.each(buttons, function(name, fn) {
278				$('<button type="button"></button>')
279					.addClass(
280						'ui-state-default ' +
281						'ui-corner-all'
282					)
283					.text(name)
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					})
299					.appendTo(uiDialogButtonPane);
300			});
301			uiDialogButtonPane.appendTo(this.uiDialog);
302		}
303	},
304
305	_makeDraggable: function() {
306		var self = this,
307			options = this.options,
308			heightBeforeDrag;
309
310		this.uiDialog.draggable({
311			cancel: '.ui-dialog-content',
312			handle: '.ui-dialog-titlebar',
313			containment: 'document',
314			start: function() {
315				heightBeforeDrag = options.height;
316				$(this).height($(this).height()).addClass("ui-dialog-dragging");
317				(options.dragStart && options.dragStart.apply(self.element[0], arguments));
318			},
319			drag: function() {

320				(options.drag && options.drag.apply(self.element[0], arguments));
321			},
322			stop: function() {
323				$(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag);
324				(options.dragStop && options.dragStop.apply(self.element[0], arguments));
325				$.ui.dialog.overlay.resize();
326			}
327		});
328	},
329
330	_makeResizable: function(handles) {
331		handles = (handles === undefined ? this.options.resizable : handles);
332		var self = this,
333			options = this.options,
334			resizeHandles = typeof handles == 'string'
335				? handles
336				: 'n,e,s,w,se,sw,ne,nw';
337
338		this.uiDialog.resizable({
339			cancel: '.ui-dialog-content',
340			alsoResize: this.element,
341			maxWidth: options.maxWidth,
342			maxHeight: options.maxHeight,
343			minWidth: options.minWidth,
344			minHeight: options.minHeight,
345			start: function() {
346				$(this).addClass("ui-dialog-resizing");
347				(options.resizeStart && options.resizeStart.apply(self.element[0], arguments));
348			},
349			resize: function() {
350				(options.resize && options.resize.apply(self.element[0], arguments));
351			},
352			handles: resizeHandles,
353			stop: function() {
354				$(this).removeClass("ui-dialog-resizing");
355				options.height = $(this).height();
356				options.width = $(this).width();
357				(options.resizeStop && options.resizeStop.apply(self.element[0], arguments));
358				$.ui.dialog.overlay.resize();
359			}
360		})
361		.find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se');
362	},
363
364	_position: function(pos) {
365		var wnd = $(window), doc = $(document),
366			pTop = doc.scrollTop(), pLeft = doc.scrollLeft(),
367			minTop = pTop;
368
369		if ($.inArray(pos, ['center','top','right','bottom','left']) >= 0) {
370			pos = [
371				pos == 'right' || pos == 'left' ? pos : 'center',
372				pos == 'top' || pos == 'bottom' ? pos : 'middle'
373			];
374		}
375		if (pos.constructor != Array) {
376			pos = ['center', 'middle'];
377		}
378		if (pos[0].constructor == Number) {
379			pLeft += pos[0];
380		} else {
381			switch (pos[0]) {
382				case 'left':
383					pLeft += 0;
384					break;
385				case 'right':
386					pLeft += wnd.width() - this.uiDialog.outerWidth();
387					break;
388				default:
389				case 'center':
390					pLeft += (wnd.width() - this.uiDialog.outerWidth()) / 2;
391			}
392		}
393		if (pos[1].constructor == Number) {
394			pTop += pos[1];
395		} else {
396			switch (pos[1]) {
397				case 'top':
398					pTop += 0;
399					break;
400				case 'bottom':
401					pTop += wnd.height() - this.uiDialog.outerHeight();
402					break;
403				default:
404				case 'middle':
405					pTop += (wnd.height() - this.uiDialog.outerHeight()) / 2;
406			}
407		}
408
409		// prevent the dialog from being too high (make sure the titlebar
410		// is accessible)
411		pTop = Math.max(pTop, minTop);
412		this.uiDialog.css({top: pTop, left: pLeft});
413	},
414
415	_setData: function(key, value){
416		(setDataSwitch[key] && this.uiDialog.data(setDataSwitch[key], value));
417		switch (key) {
418			case "buttons":
419				this._createButtons(value);
420				break;
421			case "closeText":
422				this.uiDialogTitlebarCloseText.text(value);
423				break;
424			case "dialogClass":
425				this.uiDialog
426					.removeClass(this.options.dialogClass)
427					.addClass(uiDialogClasses + value);
428				break;
429			case "draggable":
430				(value
431					? this._makeDraggable()
432					: this.uiDialog.draggable('destroy'));
433				break;
434			case "height":
435				this.uiDialog.height(value);
436				break;
437			case "position":
438				this._position(value);
439				break;
440			case "resizable":
441				var uiDialog = this.uiDialog,
442					isResizable = this.uiDialog.is(':data(resizable)');
443
444				// currently resizable, becoming non-resizable
445				(isResizable && !value && uiDialog.resizable('destroy'));
446
447				// currently resizable, changing handles
448				(isResizable && typeof value == 'string' &&
449					uiDialog.resizable('option', 'handles', value));
450
451				// currently non-resizable, becoming resizable
452				(isResizable || this._makeResizable(value));
453				break;
454			case "title":
455				$(".ui-dialog-title", this.uiDialogTitlebar).html(value || ' ');
456				break;
457			case "width":
458				this.uiDialog.width(value);
459				break;
460		}
461
462		$.widget.prototype._setData.apply(this, arguments);
463	},
464
465	_size: function() {
466		/* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
467		 * divs will both have width and height set, so we need to reset them
468		 */
469		var options = this.options;
470
471		// reset content sizing
472		this.element.css({
473			height: 0,
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			});
493	}
494});
495
496$.extend($.ui.dialog, {
497	version: "1.7.2",
498	defaults: {
499		autoOpen: true,
500		bgiframe: false,
501		buttons: {},
502		closeOnEscape: true,
503		closeText: 'close',
504		dialogClass: '',
505		draggable: true,
506		hide: null,
507		height: 'auto',
508		maxHeight: false,
509		maxWidth: false,
510		minHeight: 150,
511		minWidth: 150,
512		modal: false,
513		position: 'center',
514		resizable: true,
515		show: null,
516		stack: true,
517		title: '',
518		width: 300,
519		zIndex: 1000
520	},
521
522	getter: 'isOpen',
523
524	uuid: 0,
525	maxZ: 0,
526
527	getTitleId: function($el) {
528		return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid);
529	},
530
531	overlay: function(dialog) {
532		this.$el = $.ui.dialog.overlay.create(dialog);
533	}
534});
535
536$.extend($.ui.dialog.overlay, {
537	instances: [],
538	maxZ: 0,
539	events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
540		function(event) { return event + '.dialog-overlay'; }).join(' '),
541	create: function(dialog) {
542		if (this.instances.length === 0) {
543			// prevent use of anchors and inputs
544			// we use a setTimeout in case the overlay is created from an
545			// event that we're going to be cancelling (see #2804)
546			setTimeout(function() {
547				// handle $(el).dialog().dialog('close') (see #4065)
548				if ($.ui.dialog.overlay.instances.length) {
549					$(document).bind($.ui.dialog.overlay.events, function(event) {
550						var dialogZ = $(event.target).parents('.ui-dialog').css('zIndex') || 0;
551						return (dialogZ > $.ui.dialog.overlay.maxZ);
552					});
553				}
554			}, 1);
555
556			// allow closing by pressing the escape key
557			$(document).bind('keydown.dialog-overlay', function(event) {
558				(dialog.options.closeOnEscape && event.keyCode
559						&& event.keyCode == $.ui.keyCode.ESCAPE && dialog.close(event));
560			});
561
562			// handle window resize
563			$(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
564		}
565
566		var $el = $('<div></div>').appendTo(document.body)
567			.addClass('ui-widget-overlay').css({
568				width: this.width(),
569				height: this.height()
570			});
571
572		(dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe());
573
574		this.instances.push($el);
575		return $el;
576	},
577
578	destroy: function($el) {
579		this.instances.splice($.inArray(this.instances, $el), 1);
580
581		if (this.instances.length === 0) {
582			$([document, window]).unbind('.dialog-overlay');
583		}
584
585		$el.remove();
586		
587		// adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
588		var maxZ = 0;
589		$.each(this.instances, function() {
590			maxZ = Math.max(maxZ, this.css('z-index'));
591		});
592		this.maxZ = maxZ;
593	},
594
595	height: function() {
596		// handle IE 6
597		if ($.browser.msie && $.browser.version < 7) {
598			var scrollHeight = Math.max(
599				document.documentElement.scrollHeight,
600				document.body.scrollHeight
601			);
602			var offsetHeight = Math.max(
603				document.documentElement.offsetHeight,
604				document.body.offsetHeight
605			);
606
607			if (scrollHeight < offsetHeight) {
608				return $(window).height() + 'px';
609			} else {
610				return scrollHeight + 'px';
611			}
612		// handle "good" browsers
613		} else {
614			return $(document).height() + 'px';
615		}
616	},
617
618	width: function() {
619		// handle IE 6
620		if ($.browser.msie && $.browser.version < 7) {
621			var scrollWidth = Math.max(
622				document.documentElement.scrollWidth,
623				document.body.scrollWidth
624			);
625			var offsetWidth = Math.max(
626				document.documentElement.offsetWidth,
627				document.body.offsetWidth
628			);
629
630			if (scrollWidth < offsetWidth) {
631				return $(window).width() + 'px';
632			} else {
633				return scrollWidth + 'px';
634			}
635		// handle "good" browsers
636		} else {
637			return $(document).width() + 'px';
638		}
639	},
640
641	resize: function() {
642		/* If the dialog is draggable and the user drags it past the
643		 * right edge of the window, the document becomes wider so we
644		 * need to stretch the overlay. If the user then drags the
645		 * dialog back to the left, the document will become narrower,
646		 * so we need to shrink the overlay to the appropriate size.
647		 * This is handled by shrinking the overlay before setting it
648		 * to the full document size.
649		 */
650		var $overlays = $([]);
651		$.each($.ui.dialog.overlay.instances, function() {
652			$overlays = $overlays.add(this);
653		});
654
655		$overlays.css({
656			width: 0,
657			height: 0
658		}).css({
659			width: $.ui.dialog.overlay.width(),
660			height: $.ui.dialog.overlay.height()
661		});
662	}
663});
664
665$.extend($.ui.dialog.overlay.prototype, {
666	destroy: function() {
667		$.ui.dialog.overlay.destroy(this.$el);
668	}
669});
670
671})(jQuery);