https://www.hussainiat.com/jquery/ui/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				.appendTo((document.forms[0] != null) ? document.forms[0] : document.body)
50				.hide()
51				.addClass(uiDialogClasses + options.dialogClass)
52				.css({
53					position: 'absolute',
54					overflow: 'hidden',
55					zIndex: options.zIndex
56				})
57				// setting tabIndex makes the div focusable
58				// setting outline to 0 prevents a border on focus in Mozilla
59				.attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
60					(options.closeOnEscape && event.keyCode
61						&& event.keyCode == $.ui.keyCode.ESCAPE && self.close(event));
62				})
63				.attr({
64					role: 'dialog',
65					'aria-labelledby': titleId
66				})
67				.mousedown(function(event) {
68					self.moveToTop(false, event);
69				}),
70
71			uiDialogContent = this.element
72				.show()
73				.removeAttr('title')
74				.addClass(
75					'ui-dialog-content ' +
76					'ui-widget-content')
77				.appendTo(uiDialog),
78
79			uiDialogTitlebar = (this.uiDialogTitlebar = $('<div></div>'))
80				.addClass(
81					'ui-dialog-titlebar ' +
82					'ui-widget-header ' +
83					'ui-corner-all ' +
84					'ui-helper-clearfix'
85				)
86				.prependTo(uiDialog),
87
88			uiDialogTitlebarClose = $('<a href="#"/>')
89				.addClass(
90					'ui-dialog-titlebar-close ' +
91					'ui-corner-all'
92				)
93				.attr('role', 'button')
94				.hover(
95					function() {
96						uiDialogTitlebarClose.addClass('ui-state-hover');
97					},
98					function() {
99						uiDialogTitlebarClose.removeClass('ui-state-hover');
100					}
101				)
102				.focus(function() {
103					uiDialogTitlebarClose.addClass('ui-state-focus');
104				})
105				.blur(function() {
106					uiDialogTitlebarClose.removeClass('ui-state-focus');
107				})
108				.mousedown(function(ev) {
109					ev.stopPropagation();
110				})
111				.click(function(event) {
112					self.close(event);
113					return false;
114				})
115				.appendTo(uiDialogTitlebar),
116
117			uiDialogTitlebarCloseText = (this.uiDialogTitlebarCloseText = $('<span/>'))
118				.addClass(
119					'ui-icon ' +
120					'ui-icon-closethick'
121				)
122				.text(options.closeText)
123				.appendTo(uiDialogTitlebarClose),
124
125			uiDialogTitle = $('<span/>')
126				.addClass('ui-dialog-title')
127				.attr('id', titleId)
128				.html(title)
129				.prependTo(uiDialogTitlebar);
130
131		uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
132
133		(options.draggable && $.fn.draggable && this._makeDraggable());
134		(options.resizable && $.fn.resizable && this._makeResizable());
135
136		this._createButtons(options.buttons);
137		this._isOpen = false;
138
139		(options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe());
140		(options.autoOpen && this.open());
141		
142	},
143
144	destroy: function() {
145		(this.overlay && this.overlay.destroy());
146		this.uiDialog.hide();
147		this.element
148			.unbind('.dialog')
149			.removeData('dialog')
150			.removeClass('ui-dialog-content ui-widget-content')
151			.hide().appendTo('body');
152		this.uiDialog.remove();
153
154		(this.originalTitle && this.element.attr('title', this.originalTitle));
155	},
156
157	close: function(event) {
158		var self = this;
159		
160		if (false === self._trigger('beforeclose', event)) {
161			return;
162		}
163
164		(self.overlay && self.overlay.destroy());
165		self.uiDialog.unbind('keypress.ui-dialog');
166
167		(self.options.hide
168			? self.uiDialog.hide(self.options.hide, function() {
169				self._trigger('close', event);
170			})
171			: self.uiDialog.hide() && self._trigger('close', event));
172
173		$.ui.dialog.overlay.resize();
174
175		self._isOpen = false;

176		
177		// adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
178		if (self.options.modal) {
179			var maxZ = 0;
180			$('.ui-dialog').each(function() {
181				if (this != self.uiDialog[0]) {
182					maxZ = Math.max(maxZ, $(this).css('z-index'));
183				}
184			});
185			$.ui.dialog.maxZ = maxZ;
186		}
187	},
188
189	isOpen: function() {
190		return this._isOpen;
191	},
192
193	// the force parameter allows us to move modal dialogs to their correct
194	// position on open
195	moveToTop: function(force, event) {
196
197		if ((this.options.modal && !force)
198			|| (!this.options.stack && !this.options.modal)) {
199			return this._trigger('focus', event);
200		}
201		
202		if (this.options.zIndex > $.ui.dialog.maxZ) {
203			$.ui.dialog.maxZ = this.options.zIndex;
204		}
205		(this.overlay && this.overlay.$el.css('z-index', $.ui.dialog.overlay.maxZ = ++$.ui.dialog.maxZ));
206
207		//Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed.
208		//  http://ui.jquery.com/bugs/ticket/3193
209		var saveScroll = { scrollTop: this.element.attr('scrollTop'), scrollLeft: this.element.attr('scrollLeft') };
210		this.uiDialog.css('z-index', ++$.ui.dialog.maxZ);
211		this.element.attr(saveScroll);
212		this._trigger('focus', event);
213	},
214
215	open: function() {
216		if (this._isOpen) { return; }
217
218		var options = this.options,
219			uiDialog = this.uiDialog;
220
221		this.overlay = options.modal ? new $.ui.dialog.overlay(this) : null;
222		//(uiDialog.next().length && uiDialog.appendTo('body'));
223		(uiDialog.next().length && uiDialog.appendTo('form'));
224		this._size();
225		this._position(options.position);
226		uiDialog.show(options.show);
227		this.moveToTop(true);
228
229		// prevent tabbing out of modal dialogs
230		(options.modal && uiDialog.bind('keypress.ui-dialog', function(event) {
231			if (event.keyCode != $.ui.keyCode.TAB) {
232				return;
233			}
234
235			var tabbables = $(':tabbable', this),
236				first = tabbables.filter(':first')[0],
237				last  = tabbables.filter(':last')[0];
238
239			if (event.target == last && !event.shiftKey) {
240				setTimeout(function() {
241					first.focus();
242				}, 1);
243			} else if (event.target == first && event.shiftKey) {
244				setTimeout(function() {
245					last.focus();
246				}, 1);
247			}
248		}));
249
250		// set focus to the first tabbable element in the content area or the first button
251		// if there are no tabbable elements, set focus on the dialog itself
252		$([])
253			.add(uiDialog.find('.ui-dialog-content :tabbable:first'))
254			.add(uiDialog.find('.ui-dialog-buttonpane :tabbable:first'))
255			.add(uiDialog)
256			.filter(':first')
257			.focus();
258
259		this._trigger('open');
260		this._isOpen = true;
261	},
262
263	_createButtons: function(buttons) {
264		var self = this,
265			hasButtons = false,
266			uiDialogButtonPane = $('<div></div>')
267				.addClass(
268					'ui-dialog-buttonpane ' +
269					'ui-widget-content ' +
270					'ui-helper-clearfix'
271				);
272
273		// if we already have a button pane, remove it
274		this.uiDialog.find('.ui-dialog-buttonpane').remove();
275
276		(typeof buttons == 'object' && buttons !== null &&
277			$.each(buttons, function() { return !(hasButtons = true); }));
278		if (hasButtons) {
279			$.each(buttons, function(name, fn) {
280				$('<button type="button"></button>')
281					.addClass(
282						'ui-state-default ' +
283						'ui-corner-all'
284					)
285					.text(name)
286					.click(function() { fn.apply(self.element[0], arguments); })
287					.hover(
288						function() {
289							$(this).addClass('ui-state-hover');
290						},
291						function() {
292							$(this).removeClass('ui-state-hover');
293						}
294					)
295					.focus(function() {
296						$(this).addClass('ui-state-focus');
297					})
298					.blur(function() {
299						$(this).removeClass('ui-state-focus');
300					})
301					.appendTo(uiDialogButtonPane);
302			});
303			uiDialogButtonPane.appendTo(this.uiDialog);
304		}
305	},
306
307	_makeDraggable: function() {
308		var self = this,
309			options = this.options,
310			heightBeforeDrag;
311
312		this.uiDialog.draggable({
313			cancel: '.ui-dialog-content',
314			handle: '.ui-dialog-titlebar',
315			containment: 'document',
316			start: function() {
317				heightBeforeDrag = options.height;
318				$(this).height($(this).height()).addClass("ui-dialog-dragging");
319				(options.dragStart && options.dragStart.apply(self.element[0], arguments));
320			},
321			drag: function() {

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