https://pse-journal.hr/js/jquery-ui-1.10.0.custom/development-bundle/ui/jquery.ui.dialog.js

1/*!
2 * jQuery UI Dialog 1.10.0
3 * http://jqueryui.com
4 *
5 * Copyright 2013 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.0",
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 that = this;
173
174		if ( !this._isOpen || this._trigger( "beforeClose", event ) === false ) {
175			return;
176		}
177
178		this._isOpen = false;
179		this._destroyOverlay();
180
181		if ( !this.opener.filter(":focusable").focus().length ) {
182			// Hiding a focused element doesn't trigger blur in WebKit
183			// so in case we have nothing to focus on, explicitly blur the active element
184			// https://bugs.webkit.org/show_bug.cgi?id=47182
185			$( this.document[0].activeElement ).blur();
186		}
187
188		this._hide( this.uiDialog, this.options.hide, function() {
189			that._trigger( "close", event );
190		});
191	},
192
193	isOpen: function() {
194		return this._isOpen;
195	},
196
197	moveToTop: function() {
198		this._moveToTop();
199	},
200
201	_moveToTop: function( event, silent ) {
202		var moved = !!this.uiDialog.nextAll(":visible").insertBefore( this.uiDialog ).length;
203		if ( moved && !silent ) {
204			this._trigger( "focus", event );
205		}
206		return moved;
207	},
208
209	open: function() {
210		if ( this._isOpen ) {
211			if ( this._moveToTop() ) {
212				this._focusTabbable();
213			}
214			return;
215		}
216
217		this.opener = $( this.document[0].activeElement );
218
219		this._size();
220		this._position();
221		this._createOverlay();
222		this._moveToTop( null, true );
223		this._show( this.uiDialog, this.options.show );
224
225		this._focusTabbable();
226
227		this._isOpen = true;
228		this._trigger("open");
229		this._trigger("focus");
230	},
231
232	_focusTabbable: function() {
233		// Set focus to the first match:
234		// 1. First element inside the dialog matching [autofocus]
235		// 2. Tabbable element inside the content element
236		// 3. Tabbable element inside the buttonpane
237		// 4. The close button
238		// 5. The dialog itself
239		var hasFocus = this.element.find("[autofocus]");
240		if ( !hasFocus.length ) {
241			hasFocus = this.element.find(":tabbable");
242		}
243		if ( !hasFocus.length ) {
244			hasFocus = this.uiDialogButtonPane.find(":tabbable");
245		}
246		if ( !hasFocus.length ) {
247			hasFocus = this.uiDialogTitlebarClose.filter(":tabbable");
248		}
249		if ( !hasFocus.length ) {
250			hasFocus = this.uiDialog;
251		}
252		hasFocus.eq( 0 ).focus();
253	},
254
255	_keepFocus: function( event ) {
256		function checkFocus() {
257			var activeElement = this.document[0].activeElement,
258				isActive = this.uiDialog[0] === activeElement ||
259					$.contains( this.uiDialog[0], activeElement );
260			if ( !isActive ) {
261				this._focusTabbable();
262			}
263		}
264		event.preventDefault();
265		checkFocus.call( this );
266		// support: IE
267		// IE <= 8 doesn't prevent moving focus even with event.preventDefault()
268		// so we check again later
269		this._delay( checkFocus );
270	},
271
272	_createWrapper: function() {
273		this.uiDialog = $("<div>")
274			.addClass( "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front " +
275				this.options.dialogClass )
276			.hide()
277			.attr({
278				// Setting tabIndex makes the div focusable
279				tabIndex: -1,
280				role: "dialog"
281			})
282			.appendTo( this._appendTo() );
283
284		this._on( this.uiDialog, {
285			keydown: function( event ) {
286				if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
287						event.keyCode === $.ui.keyCode.ESCAPE ) {
288					event.preventDefault();
289					this.close( event );
290					return;
291				}
292
293				// prevent tabbing out of dialogs
294				if ( event.keyCode !== $.ui.keyCode.TAB ) {
295					return;
296				}
297				var tabbables = this.uiDialog.find(":tabbable"),
298					first = tabbables.filter(":first"),
299					last  = tabbables.filter(":last");
300
301				if ( ( event.target === last[0] || event.target === this.uiDialog[0] ) && !event.shiftKey ) {
302					first.focus( 1 );
303					event.preventDefault();
304				} else if ( ( event.target === first[0] || event.target === this.uiDialog[0] ) && event.shiftKey ) {
305					last.focus( 1 );
306					event.preventDefault();
307				}
308			},
309			mousedown: function( event ) {
310				if ( this._moveToTop( event ) ) {
311					this._focusTabbable();
312				}
313			}
314		});
315
316		// We assume that any existing aria-describedby attribute means
317		// that the dialog content is marked up properly
318		// otherwise we brute force the content as the description
319		if ( !this.element.find("[aria-describedby]").length ) {
320			this.uiDialog.attr({
321				"aria-describedby": this.element.uniqueId().attr("id")
322			});
323		}
324	},
325
326	_createTitlebar: function() {
327		var uiDialogTitle;
328
329		this.uiDialogTitlebar = $("<div>")
330			.addClass("ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix")
331			.prependTo( this.uiDialog );
332		this._on( this.uiDialogTitlebar, {
333			mousedown: function( event ) {
334				// Don't prevent click on close button (#8838)
335				// Focusing a dialog that is partially scrolled out of view
336				// causes the browser to scroll it into view, preventing the click event
337				if ( !$( event.target ).closest(".ui-dialog-titlebar-close") ) {
338					// Dialog isn't getting focus when dragging (#8063)
339					this.uiDialog.focus();
340				}
341			}
342		});
343
344		this.uiDialogTitlebarClose = $("<button></button>")
345			.button({
346				label: this.options.closeText,
347				icons: {
348					primary: "ui-icon-closethick"
349				},
350				text: false
351			})
352			.addClass("ui-dialog-titlebar-close")
353			.appendTo( this.uiDialogTitlebar );
354		this._on( this.uiDialogTitlebarClose, {
355			click: function( event ) {
356				event.preventDefault();
357				this.close( event );
358			}
359		});
360
361		uiDialogTitle = $("<span>")
362			.uniqueId()
363			.addClass("ui-dialog-title")
364			.prependTo( this.uiDialogTitlebar );
365		this._title( uiDialogTitle );
366
367		this.uiDialog.attr({
368			"aria-labelledby": uiDialogTitle.attr("id")
369		});
370	},
371
372	_title: function( title ) {
373		if ( !this.options.title ) {
374			title.html("&#160;");
375		}
376		title.text( this.options.title );
377	},
378
379	_createButtonPane: function() {
380		this.uiDialogButtonPane = $("<div>")
381			.addClass("ui-dialog-buttonpane ui-widget-content ui-helper-clearfix");
382
383		this.uiButtonSet = $("<div>")
384			.addClass("ui-dialog-buttonset")
385			.appendTo( this.uiDialogButtonPane );
386
387		this._createButtons();
388	},
389
390	_createButtons: function() {
391		var that = this,
392			buttons = this.options.buttons;
393
394		// if we already have a button pane, remove it
395		this.uiDialogButtonPane.remove();
396		this.uiButtonSet.empty();
397
398		if ( $.isEmptyObject( buttons ) ) {
399			this.uiDialog.removeClass("ui-dialog-buttons");
400			return;
401		}
402
403		$.each( buttons, function( name, props ) {
404			var click, buttonOptions;
405			props = $.isFunction( props ) ?
406				{ click: props, text: name } :
407				props;
408			// Default to a non-submitting button
409			props = $.extend( { type: "button" }, props );
410			// Change the context for the click callback to be the main element
411			click = props.click;
412			props.click = function() {
413				click.apply( that.element[0], arguments );
414			};
415			buttonOptions = {
416				icons: props.icons,
417				text: props.showText
418			};
419			delete props.icons;
420			delete props.showText;
421			$( "<button></button>", props )
422				.button( buttonOptions )
423				.appendTo( that.uiButtonSet );
424		});
425		this.uiDialog.addClass("ui-dialog-buttons");
426		this.uiDialogButtonPane.appendTo( this.uiDialog );
427	},
428
429	_makeDraggable: function() {
430		var that = this,
431			options = this.options;
432
433		function filteredUi( ui ) {
434			return {
435				position: ui.position,
436				offset: ui.offset
437			};
438		}
439
440		this.uiDialog.draggable({
441			cancel: ".ui-dialog-content, .ui-dialog-titlebar-close",
442			handle: ".ui-dialog-titlebar",
443			containment: "document",
444			start: function( event, ui ) {
445				$( this ).addClass("ui-dialog-dragging");
446				that._trigger( "dragStart", event, filteredUi( ui ) );
447			},
448			drag: function( event, ui ) {
449				that._trigger( "drag", event, filteredUi( ui ) );
450			},
451			stop: function( event, ui ) {
452				options.position = [
453					ui.position.left - that.document.scrollLeft(),
454					ui.position.top - that.document.scrollTop()
455				];
456				$( this ).removeClass("ui-dialog-dragging");
457				that._trigger( "dragStop", event, filteredUi( ui ) );
458			}
459		});
460	},
461
462	_makeResizable: function() {
463		var that = this,
464			options = this.options,
465			handles = options.resizable,
466			// .ui-resizable has position: relative defined in the stylesheet
467			// but dialogs have to use absolute or fixed positioning
468			position = this.uiDialog.css("position"),
469			resizeHandles = typeof handles === "string" ?
470				handles	:
471				"n,e,s,w,se,sw,ne,nw";
472
473		function filteredUi( ui ) {
474			return {
475				originalPosition: ui.originalPosition,
476				originalSize: ui.originalSize,
477				position: ui.position,
478				size: ui.size
479			};
480		}
481
482		this.uiDialog.resizable({
483			cancel: ".ui-dialog-content",
484			containment: "document",
485			alsoResize: this.element,
486			maxWidth: options.maxWidth,
487			maxHeight: options.maxHeight,
488			minWidth: options.minWidth,
489			minHeight: this._minHeight(),
490			handles: resizeHandles,
491			start: function( event, ui ) {
492				$( this ).addClass("ui-dialog-resizing");
493				that._trigger( "resizeStart", event, filteredUi( ui ) );
494			},
495			resize: function( event, ui ) {
496				that._trigger( "resize", event, filteredUi( ui ) );
497			},
498			stop: function( event, ui ) {
499				options.height = $( this ).height();
500				options.width = $( this ).width();
501				$( this ).removeClass("ui-dialog-resizing");
502				that._trigger( "resizeStop", event, filteredUi( ui ) );
503			}
504		})
505		.css( "position", position );
506	},
507
508	_minHeight: function() {
509		var options = this.options;
510
511		return options.height === "auto" ?
512			options.minHeight :
513			Math.min( options.minHeight, options.height );
514	},
515
516	_position: function() {
517		// Need to show the dialog to get the actual offset in the position plugin
518		var isVisible = this.uiDialog.is(":visible");
519		if ( !isVisible ) {
520			this.uiDialog.show();
521		}
522		this.uiDialog.position( this.options.position );
523		if ( !isVisible ) {
524			this.uiDialog.hide();
525		}
526	},
527
528	_setOptions: function( options ) {
529		var that = this,
530			resize = false,
531			resizableOptions = {};
532
533		$.each( options, function( key, value ) {
534			that._setOption( key, value );
535
536			if ( key in sizeRelatedOptions ) {
537				resize = true;
538			}
539			if ( key in resizableRelatedOptions ) {
540				resizableOptions[ key ] = value;
541			}
542		});
543
544		if ( resize ) {
545			this._size();
546			this._position();
547		}
548		if ( this.uiDialog.is(":data(ui-resizable)") ) {
549			this.uiDialog.resizable( "option", resizableOptions );
550		}
551	},
552
553	_setOption: function( key, value ) {
554		/*jshint maxcomplexity:15*/
555		var isDraggable, isResizable,
556			uiDialog = this.uiDialog;
557
558		if ( key === "dialogClass" ) {
559			uiDialog
560				.removeClass( this.options.dialogClass )
561				.addClass( value );
562		}
563
564		if ( key === "disabled" ) {
565			return;
566		}
567
568		this._super( key, value );
569
570		if ( key === "appendTo" ) {
571			this.uiDialog.appendTo( this._appendTo() );
572		}
573
574		if ( key === "buttons" ) {
575			this._createButtons();
576		}
577
578		if ( key === "closeText" ) {
579			this.uiDialogTitlebarClose.button({
580				// Ensure that we always pass a string
581				label: "" + value
582			});
583		}
584
585		if ( key === "draggable" ) {
586			isDraggable = uiDialog.is(":data(ui-draggable)");
587			if ( isDraggable && !value ) {
588				uiDialog.draggable("destroy");
589			}
590
591			if ( !isDraggable && value ) {
592				this._makeDraggable();
593			}
594		}
595
596		if ( key === "position" ) {
597			this._position();
598		}
599
600		if ( key === "resizable" ) {
601			// currently resizable, becoming non-resizable
602			isResizable = uiDialog.is(":data(ui-resizable)");
603			if ( isResizable && !value ) {
604				uiDialog.resizable("destroy");
605			}
606
607			// currently resizable, changing handles
608			if ( isResizable && typeof value === "string" ) {
609				uiDialog.resizable( "option", "handles", value );
610			}
611
612			// currently non-resizable, becoming resizable
613			if ( !isResizable && value !== false ) {
614				this._makeResizable();
615			}
616		}
617
618		if ( key === "title" ) {
619			this._title( this.uiDialogTitlebar.find(".ui-dialog-title") );
620		}
621	},
622
623	_size: function() {
624		// If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
625		// divs will both have width and height set, so we need to reset them
626		var nonContentHeight, minContentHeight, maxContentHeight,
627			options = this.options;
628
629		// Reset content sizing
630		this.element.show().css({
631			width: "auto",
632			minHeight: 0,
633			maxHeight: "none",
634			height: 0
635		});
636
637		if ( options.minWidth > options.width ) {
638			options.width = options.minWidth;
639		}
640
641		// reset wrapper sizing
642		// determine the height of all the non-content elements
643		nonContentHeight = this.uiDialog.css({
644				height: "auto",
645				width: options.width
646			})
647			.outerHeight();
648		minContentHeight = Math.max( 0, options.minHeight - nonContentHeight );
649		maxContentHeight = typeof options.maxHeight === "number" ?
650			Math.max( 0, options.maxHeight - nonContentHeight ) :
651			"none";
652
653		if ( options.height === "auto" ) {
654			this.element.css({
655				minHeight: minContentHeight,
656				maxHeight: maxContentHeight,
657				height: "auto"
658			});
659		} else {
660			this.element.height( Math.max( 0, options.height - nonContentHeight ) );
661		}
662
663		if (this.uiDialog.is(":data(ui-resizable)") ) {
664			this.uiDialog.resizable( "option", "minHeight", this._minHeight() );
665		}
666	},
667
668	_createOverlay: function() {
669		if ( !this.options.modal ) {
670			return;
671		}
672
673		if ( !$.ui.dialog.overlayInstances ) {
674			// Prevent use of anchors and inputs.
675			// We use a delay in case the overlay is created from an
676			// event that we're going to be cancelling. (#2804)
677			this._delay(function() {
678				// Handle .dialog().dialog("close") (#4065)
679				if ( $.ui.dialog.overlayInstances ) {
680					this._on( this.document, {
681						focusin: function( event ) {
682							if ( !$( event.target ).closest(".ui-dialog").length ) {
683								event.preventDefault();
684								$(".ui-dialog:visible:last .ui-dialog-content")
685									.data("ui-dialog")._focusTabbable();
686							}
687						}
688					});
689				}
690			});
691		}
692