https://occtonet3.occto.or.jp/public/dfw/RP11/OCCTO/sdCommon/jsp/js/jquery/ui/jquery.ui.dialog.js

1/*!
2 * jQuery UI Dialog 1.10.4
3 * http://jqueryui.com
4 *
5 * Copyright 2014 jQuery Foundation and other contributors
6 * Released under the MIT license.
7 * http://jquery.org/license
8 *
9 * http://api.jqueryui.com/dialog/
10 *
11 * Depends:
12 *	jquery.ui.core.js
13 *	jquery.ui.widget.js
14 *  jquery.ui.button.js
15 *	jquery.ui.draggable.js
16 *	jquery.ui.mouse.js
17 *	jquery.ui.position.js
18 *	jquery.ui.resizable.js
19 */
20(function( $, undefined ) {
21
22var sizeRelatedOptions = {
23		buttons: true,
24		height: true,
25		maxHeight: true,
26		maxWidth: true,
27		minHeight: true,
28		minWidth: true,
29		width: true
30	},
31	resizableRelatedOptions = {
32		maxHeight: true,
33		maxWidth: true,
34		minHeight: true,
35		minWidth: true
36	};
37
38$.widget( "ui.dialog", {
39	version: "1.10.4",
40	options: {
41		appendTo: "body",
42		autoOpen: true,
43		buttons: [],
44		closeOnEscape: true,
45		closeText: "close",
46		dialogClass: "",
47		draggable: true,
48		hide: null,
49		height: "auto",
50		maxHeight: null,
51		maxWidth: null,
52		minHeight: 150,
53		minWidth: 150,
54		modal: false,
55		position: {
56			my: "center",
57			at: "center",
58			of: window,
59			collision: "fit",
60			// Ensure the titlebar is always visible
61			using: function( pos ) {
62				var topOffset = $( this ).css( pos ).offset().top;
63				if ( topOffset < 0 ) {
64					$( this ).css( "top", pos.top - topOffset );
65				}
66			}
67		},
68		resizable: true,
69		show: null,
70		title: null,
71		width: 300,
72
73		// callbacks
74		beforeClose: null,
75		close: null,
76		drag: null,
77		dragStart: null,
78		dragStop: null,
79		focus: null,
80		open: null,
81		resize: null,
82		resizeStart: null,
83		resizeStop: null
84	},
85
86	_create: function() {
87		this.originalCss = {
88			display: this.element[0].style.display,
89			width: this.element[0].style.width,
90			minHeight: this.element[0].style.minHeight,
91			maxHeight: this.element[0].style.maxHeight,
92			height: this.element[0].style.height
93		};
94		this.originalPosition = {
95			parent: this.element.parent(),
96			index: this.element.parent().children().index( this.element )
97		};
98		this.originalTitle = this.element.attr("title");
99		this.options.title = this.options.title || this.originalTitle;
100
101		this._createWrapper();
102
103		this.element
104			.show()
105			.removeAttr("title")
106			.addClass("ui-dialog-content ui-widget-content")
107			.appendTo( this.uiDialog );
108
109		this._createTitlebar();
110		this._createButtonPane();
111
112		if ( this.options.draggable && $.fn.draggable ) {
113			this._makeDraggable();
114		}
115		if ( this.options.resizable && $.fn.resizable ) {
116			this._makeResizable();
117		}
118
119		this._isOpen = false;
120	},
121
122	_init: function() {
123		if ( this.options.autoOpen ) {
124			this.open();
125		}
126	},
127
128	_appendTo: function() {
129		var element = this.options.appendTo;
130		if ( element && (element.jquery || element.nodeType) ) {
131			return $( element );
132		}
133		return this.document.find( element || "body" ).eq( 0 );
134	},
135
136	_destroy: function() {
137		var next,
138			originalPosition = this.originalPosition;
139
140		this._destroyOverlay();
141
142		this.element
143			.removeUniqueId()
144			.removeClass("ui-dialog-content ui-widget-content")
145			.css( this.originalCss )
146			// Without detaching first, the following becomes really slow
147			.detach();
148
149		this.uiDialog.stop( true, true ).remove();
150
151		if ( this.originalTitle ) {
152			this.element.attr( "title", this.originalTitle );
153		}
154
155		next = originalPosition.parent.children().eq( originalPosition.index );
156		// Don't try to place the dialog next to itself (#8613)
157		if ( next.length && next[0] !== this.element[0] ) {
158			next.before( this.element );
159		} else {
160			originalPosition.parent.append( this.element );
161		}
162	},
163
164	widget: function() {
165		return this.uiDialog;
166	},
167
168	disable: $.noop,
169	enable: $.noop,
170
171	close: function( event ) {
172		var activeElement,
173			that = this;
174
175		if ( !this._isOpen || this._trigger( "beforeClose", event ) === false ) {
176			return;
177		}
178
179		this._isOpen = false;
180		this._destroyOverlay();
181
182		if ( !this.opener.filter(":focusable").focus().length ) {
183
184			// support: IE9
185			// IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
186			try {
187				activeElement = this.document[ 0 ].activeElement;
188
189				// Support: IE9, IE10
190				// If the <body> is blurred, IE will switch windows, see #4520
191				if ( activeElement && activeElement.nodeName.toLowerCase() !== "body" ) {
192
193					// Hiding a focused element doesn't trigger blur in WebKit
194					// so in case we have nothing to focus on, explicitly blur the active element
195					// https://bugs.webkit.org/show_bug.cgi?id=47182
196					$( activeElement ).blur();
197				}
198			} catch ( error ) {}
199		}
200
201		this._hide( this.uiDialog, this.options.hide, function() {
202			that._trigger( "close", event );
203		});
204	},
205
206	isOpen: function() {
207		return this._isOpen;
208	},
209
210	moveToTop: function() {
211		this._moveToTop();
212	},
213
214	_moveToTop: function( event, silent ) {
215		var moved = !!this.uiDialog.nextAll(":visible").insertBefore( this.uiDialog ).length;
216		if ( moved && !silent ) {
217			this._trigger( "focus", event );
218		}
219		return moved;
220	},
221
222	open: function() {
223		var that = this;
224		if ( this._isOpen ) {
225			if ( this._moveToTop() ) {
226				this._focusTabbable();
227			}
228			return;
229		}
230
231		this._isOpen = true;
232		this.opener = $( this.document[0].activeElement );
233
234		this._size();
235		this._position();
236		this._createOverlay();
237		this._moveToTop( null, true );
238		this._show( this.uiDialog, this.options.show, function() {
239			that._focusTabbable();
240			that._trigger("focus");
241		});
242
243		this._trigger("open");
244	},
245
246	_focusTabbable: function() {
247		// Set focus to the first match:
248		// 1. First element inside the dialog matching [autofocus]
249		// 2. Tabbable element inside the content element
250		// 3. Tabbable element inside the buttonpane
251		// 4. The close button
252		// 5. The dialog itself
253		var hasFocus = this.element.find("[autofocus]");
254		if ( !hasFocus.length ) {
255			hasFocus = this.element.find(":tabbable");
256		}
257		if ( !hasFocus.length ) {
258			hasFocus = this.uiDialogButtonPane.find(":tabbable");
259		}
260		if ( !hasFocus.length ) {
261			hasFocus = this.uiDialogTitlebarClose.filter(":tabbable");
262		}
263		if ( !hasFocus.length ) {
264			hasFocus = this.uiDialog;
265		}
266		hasFocus.eq( 0 ).focus();
267	},
268
269	_keepFocus: function( event ) {
270		function checkFocus() {
271			var activeElement = this.document[0].activeElement,
272				isActive = this.uiDialog[0] === activeElement ||
273					$.contains( this.uiDialog[0], activeElement );
274			if ( !isActive ) {
275				this._focusTabbable();
276			}
277		}
278		event.preventDefault();
279		checkFocus.call( this );
280		// support: IE
281		// IE <= 8 doesn't prevent moving focus even with event.preventDefault()
282		// so we check again later
283		this._delay( checkFocus );
284	},
285
286	_createWrapper: function() {
287		this.uiDialog = $("<div>")
288			.addClass( "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front " +
289				this.options.dialogClass )
290			.hide()
291			.attr({
292				// Setting tabIndex makes the div focusable
293				tabIndex: -1,
294				role: "dialog"
295			})
296			.appendTo( this._appendTo() );
297
298		this._on( this.uiDialog, {
299			keydown: function( event ) {
300				if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
301						event.keyCode === $.ui.keyCode.ESCAPE ) {
302					event.preventDefault();
303					this.close( event );
304					return;
305				}
306
307				// prevent tabbing out of dialogs
308				if ( event.keyCode !== $.ui.keyCode.TAB ) {
309					return;
310				}
311				var tabbables = this.uiDialog.find(":tabbable"),
312					first = tabbables.filter(":first"),
313					last  = tabbables.filter(":last");
314
315				if ( ( event.target === last[0] || event.target === this.uiDialog[0] ) && !event.shiftKey ) {
316					first.focus( 1 );
317					event.preventDefault();
318				} else if ( ( event.target === first[0] || event.target === this.uiDialog[0] ) && event.shiftKey ) {
319					last.focus( 1 );
320					event.preventDefault();
321				}
322			},
323			mousedown: function( event ) {
324				if ( this._moveToTop( event ) ) {
325					this._focusTabbable();
326				}
327			}
328		});
329
330		// We assume that any existing aria-describedby attribute means
331		// that the dialog content is marked up properly
332		// otherwise we brute force the content as the description
333		if ( !this.element.find("[aria-describedby]").length ) {
334			this.uiDialog.attr({
335				"aria-describedby": this.element.uniqueId().attr("id")
336			});
337		}
338	},
339
340	_createTitlebar: function() {
341		var uiDialogTitle;
342
343		this.uiDialogTitlebar = $("<div>")
344			.addClass("ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix")
345			.prependTo( this.uiDialog );
346		this._on( this.uiDialogTitlebar, {
347			mousedown: function( event ) {
348				// Don't prevent click on close button (#8838)
349				// Focusing a dialog that is partially scrolled out of view
350				// causes the browser to scroll it into view, preventing the click event
351				if ( !$( event.target ).closest(".ui-dialog-titlebar-close") ) {
352					// Dialog isn't getting focus when dragging (#8063)
353					this.uiDialog.focus();
354				}
355			}
356		});
357
358		// support: IE
359		// Use type="button" to prevent enter keypresses in textboxes from closing the
360		// dialog in IE (#9312)
361		this.uiDialogTitlebarClose = $( "<button type='button'></button>" )
362			.button({
363				label: this.options.closeText,
364				icons: {
365					primary: "ui-icon-closethick"
366				},
367				text: false
368			})
369			.addClass("ui-dialog-titlebar-close")
370			.appendTo( this.uiDialogTitlebar );
371		this._on( this.uiDialogTitlebarClose, {
372			click: function( event ) {
373				event.preventDefault();
374				this.close( event );
375			}
376		});
377
378		uiDialogTitle = $("<span>")
379			.uniqueId()
380			.addClass("ui-dialog-title")
381			.prependTo( this.uiDialogTitlebar );
382		this._title( uiDialogTitle );
383
384		this.uiDialog.attr({
385			"aria-labelledby": uiDialogTitle.attr("id")
386		});
387	},
388
389	_title: function( title ) {
390		if ( !this.options.title ) {
391			title.html("&#160;");
392		}
393		title.text( this.options.title );
394	},
395
396	_createButtonPane: function() {
397		this.uiDialogButtonPane = $("<div>")
398			.addClass("ui-dialog-buttonpane ui-widget-content ui-helper-clearfix");
399
400		this.uiButtonSet = $("<div>")
401			.addClass("ui-dialog-buttonset")
402			.appendTo( this.uiDialogButtonPane );
403
404		this._createButtons();
405	},
406
407	_createButtons: function() {
408		var that = this,
409			buttons = this.options.buttons;
410
411		// if we already have a button pane, remove it
412		this.uiDialogButtonPane.remove();
413		this.uiButtonSet.empty();
414
415		if ( $.isEmptyObject( buttons ) || ($.isArray( buttons ) && !buttons.length) ) {
416			this.uiDialog.removeClass("ui-dialog-buttons");
417			return;
418		}
419
420		$.each( buttons, function( name, props ) {
421			var click, buttonOptions;
422			props = $.isFunction( props ) ?
423				{ click: props, text: name } :
424				props;
425			// Default to a non-submitting button
426			props = $.extend( { type: "button" }, props );
427			// Change the context for the click callback to be the main element
428			click = props.click;
429			props.click = function() {
430				click.apply( that.element[0], arguments );
431			};
432			buttonOptions = {
433				icons: props.icons,
434				text: props.showText
435			};
436			delete props.icons;
437			delete props.showText;
438			$( "<button></button>", props )
439				.button( buttonOptions )
440				.appendTo( that.uiButtonSet );
441		});
442		this.uiDialog.addClass("ui-dialog-buttons");
443		this.uiDialogButtonPane.appendTo( this.uiDialog );
444	},
445
446	_makeDraggable: function() {
447		var that = this,
448			options = this.options;
449
450		function filteredUi( ui ) {
451			return {
452				position: ui.position,
453				offset: ui.offset
454			};
455		}
456
457		this.uiDialog.draggable({
458			cancel: ".ui-dialog-content, .ui-dialog-titlebar-close",
459			handle: ".ui-dialog-titlebar",
460			containment: "document",
461			start: function( event, ui ) {
462				$( this ).addClass("ui-dialog-dragging");
463				that._blockFrames();
464				that._trigger( "dragStart", event, filteredUi( ui ) );
465			},
466			drag: function( event, ui ) {
467				that._trigger( "drag", event, filteredUi( ui ) );
468			},
469			stop: function( event, ui ) {
470				options.position = [
471					ui.position.left - that.document.scrollLeft(),
472					ui.position.top - that.document.scrollTop()
473				];
474				$( this ).removeClass("ui-dialog-dragging");
475				that._unblockFrames();
476				that._trigger( "dragStop", event, filteredUi( ui ) );
477			}
478		});
479	},
480
481	_makeResizable: function() {
482		var that = this,
483			options = this.options,
484			handles = options.resizable,
485			// .ui-resizable has position: relative defined in the stylesheet
486			// but dialogs have to use absolute or fixed positioning
487			position = this.uiDialog.css("position"),
488			resizeHandles = typeof handles === "string" ?
489				handles	:
490				"n,e,s,w,se,sw,ne,nw";
491
492		function filteredUi( ui ) {
493			return {
494				originalPosition: ui.originalPosition,
495				originalSize: ui.originalSize,
496				position: ui.position,
497				size: ui.size
498			};
499		}
500
501		this.uiDialog.resizable({
502			cancel: ".ui-dialog-content",
503			containment: "document",
504			alsoResize: this.element,
505			maxWidth: options.maxWidth,
506			maxHeight: options.maxHeight,
507			minWidth: options.minWidth,
508			minHeight: this._minHeight(),
509			handles: resizeHandles,
510			start: function( event, ui ) {
511				$( this ).addClass("ui-dialog-resizing");
512				that._blockFrames();
513				that._trigger( "resizeStart", event, filteredUi( ui ) );
514			},
515			resize: function( event, ui ) {
516				that._trigger( "resize", event, filteredUi( ui ) );
517			},
518			stop: function( event, ui ) {
519				options.height = $( this ).height();
520				options.width = $( this ).width();
521				$( this ).removeClass("ui-dialog-resizing");
522				that._unblockFrames();
523				that._trigger( "resizeStop", event, filteredUi( ui ) );
524			}
525		})
526		.css( "position", position );
527	},
528
529	_minHeight: function() {
530		var options = this.options;
531
532		return options.height === "auto" ?
533			options.minHeight :
534			Math.min( options.minHeight, options.height );
535	},
536
537	_position: function() {
538		// Need to show the dialog to get the actual offset in the position plugin
539		var isVisible = this.uiDialog.is(":visible");
540		if ( !isVisible ) {
541			this.uiDialog.show();
542		}
543		this.uiDialog.position( this.options.position );
544		if ( !isVisible ) {
545			this.uiDialog.hide();
546		}
547	},
548
549	_setOptions: function( options ) {
550		var that = this,
551			resize = false,
552			resizableOptions = {};
553
554		$.each( options, function( key, value ) {
555			that._setOption( key, value );
556
557			if ( key in sizeRelatedOptions ) {
558				resize = true;
559			}
560			if ( key in resizableRelatedOptions ) {
561				resizableOptions[ key ] = value;
562			}
563		});
564
565		if ( resize ) {
566			this._size();
567			this._position();
568		}
569		if ( this.uiDialog.is(":data(ui-resizable)") ) {
570			this.uiDialog.resizable( "option", resizableOptions );
571		}
572	},
573
574	_setOption: function( key, value ) {
575		var isDraggable, isResizable,
576			uiDialog = this.uiDialog;
577
578		if ( key === "dialogClass" ) {
579			uiDialog
580				.removeClass( this.options.dialogClass )
581				.addClass( value );
582		}
583
584		if ( key === "disabled" ) {
585			return;
586		}
587
588		this._super( key, value );
589
590		if ( key === "appendTo" ) {
591			this.uiDialog.appendTo( this._appendTo() );
592		}
593
594		if ( key === "buttons" ) {
595			this._createButtons();
596		}
597
598		if ( key === "closeText" ) {
599			this.uiDialogTitlebarClose.button({
600				// Ensure that we always pass a string
601				label: "" + value
602			});
603		}
604
605		if ( key === "draggable" ) {
606			isDraggable = uiDialog.is(":data(ui-draggable)");
607			if ( isDraggable && !value ) {
608				uiDialog.draggable("destroy");
609			}
610
611			if ( !isDraggable && value ) {
612				this._makeDraggable();
613			}
614		}
615
616		if ( key === "position" ) {
617			this._position();
618		}
619
620		if ( key === "resizable" ) {
621			// currently resizable, becoming non-resizable
622			isResizable = uiDialog.is(":data(ui-resizable)");
623			if ( isResizable && !value ) {
624				uiDialog.resizable("destroy");
625			}
626
627			// currently resizable, changing handles
628			if ( isResizable && typeof value === "string" ) {
629				uiDialog.resizable( "option", "handles", value );
630			}
631
632			// currently non-resizable, becoming resizable
633			if ( !isResizable && value !== false ) {
634				this._makeResizable();
635			}
636		}
637
638		if ( key === "title" ) {
639			this._title( this.uiDialogTitlebar.find(".ui-dialog-title") );
640		}
641	},
642
643	_size: function() {
644		// If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
645		// divs will both have width and height set, so we need to reset them
646		var nonContentHeight, minContentHeight, maxContentHeight,
647			options = this.options;
648
649		// Reset content sizing
650		this.element.show().css({
651			width: "auto",
652			minHeight: 0,
653			maxHeight: "none",
654			height: 0
655		});
656
657		if ( options.minWidth > options.width ) {
658			options.width = options.minWidth;
659		}
660
661		// reset wrapper sizing
662		// determine the height of all the non-content elements
663		nonContentHeight = this.uiDialog.css({
664				height: "auto",
665				width: options.width
666			})
667			.outerHeight();
668		minContentHeight = Math.max( 0, options.minHeight - nonContentHeight );
669		maxContentHeight = typeof options.maxHeight === "number" ?
670			Math.max( 0, options.maxHeight - nonContentHeight ) :
671			"none";
672
673		if ( options.height === "auto" ) {
674			this.element.css({
675				minHeight: minContentHeight,
676				maxHeight: maxContentHeight,
677				height: "auto"
678			});
679		} else {
680			this.element.height( Math.max( 0, options.height - nonContentHeight ) );
681		}
682
683		if (this.uiDialog.is(":data(ui-resizable)") ) {
684			this.uiDialog.resizable( "option", "minHeight", this._minHeight() );
685		}
686	},
687
688	_blockFrames: function() {
689		this.iframeBlocks = this.document.find( "iframe" ).map(function() {
690			var iframe = $( this );
691
692			return $( "<div>" )
693				.css({
694					position: "absolute",
695					width: iframe.outerWidth(),
696					height: iframe.outerHeight()
697				})
698				.appendTo( iframe.parent() )
699				.offset( iframe.offset() )[0];
700		});
701	},
702
703	_unblockFrames: function() {
704		if ( this.iframeBlocks ) {
705			this.iframeBlocks.remove();
706			delete this.iframeBlocks;
707		}
708	},
709
710	_allowInteraction: function( event ) {
711		if ( $( event.target ).closest(".ui-dialog").length ) {
712			return true;
713		}
714
715		// TODO: Remove hack when datepicker implements
716		// the .ui-front logic (#8989)
717		return !!$( event.target ).closest(".ui-datepicker").length;
718	},
719
720	_createOverlay: function() {
721		if ( !this.options.modal ) {
722			return;
723		}
724
725		var that = this,
726			widgetFullName = this.widgetFullName;
727		if ( !$.ui.dialog.overlayInstances ) {
728			// Prevent use of anchors and inputs.
729			// We use a delay in case the overlay is created from an
730			// event that we're going to be cancelling. (#2804)
731			this._delay(function() {
732				// Handle .dialog().dialog("close") (#4065)
733				if ( $.ui.dialog.overlayInstances ) {
734					this.document.bind( "focusin.dialog", function( event ) {
735						if ( !that._allowInteraction( event ) ) {
736							event.preventDefault();
737							$(".ui-dialog:visible:last .ui-dialog-content")
738								.data( widgetFullName )._focusTabbable();
739						}
740					});
741				}
742			});
743		}
744