Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
Revision Log

source: Dev/trunk/src/client/dijit/Dialog.js @ 532

Last change on this file since 532 was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 21.5 KB

Line
1	define([
2	"require",
3	"dojo/_base/array", // array.forEach array.indexOf array.map
4	"dojo/aspect",
5	"dojo/_base/declare", // declare
6	"dojo/Deferred", // Deferred
7	"dojo/dom", // dom.isDescendant
8	"dojo/dom-class", // domClass.add domClass.contains
9	"dojo/dom-geometry", // domGeometry.position
10	"dojo/dom-style", // domStyle.set
11	"dojo/_base/fx", // fx.fadeIn fx.fadeOut
12	"dojo/i18n", // i18n.getLocalization
13	"dojo/keys",
14	"dojo/_base/lang", // lang.mixin lang.hitch
15	"dojo/on",
16	"dojo/ready",
17	"dojo/sniff", // has("ie") has("opera") has("dijit-legacy-requires")
18	"dojo/window", // winUtils.getBox, winUtils.get
19	"dojo/dnd/Moveable", // Moveable
20	"dojo/dnd/TimedMoveable", // TimedMoveable
21	"./focus",
22	"./_base/manager", // manager.defaultDuration
23	"./_Widget",
24	"./_TemplatedMixin",
25	"./_CssStateMixin",
26	"./form/_FormMixin",
27	"./_DialogMixin",
28	"./DialogUnderlay",
29	"./layout/ContentPane",
30	"dojo/text!./templates/Dialog.html",
31	"dojo/i18n!./nls/common"
32	], function(require, array, aspect, declare, Deferred,
33	dom, domClass, domGeometry, domStyle, fx, i18n, keys, lang, on, ready, has, winUtils,
34	Moveable, TimedMoveable, focus, manager, _Widget, _TemplatedMixin, _CssStateMixin, _FormMixin, _DialogMixin,
35	DialogUnderlay, ContentPane, template){
36
37	// module:
38	// dijit/Dialog
39
40	var _DialogBase = declare("dijit._DialogBase" + (has("dojo-bidi") ? "_NoBidi" : ""), [_TemplatedMixin, _FormMixin, _DialogMixin, _CssStateMixin], {
41	templateString: template,
42
43	baseClass: "dijitDialog",
44
45	cssStateNodes: {
46	closeButtonNode: "dijitDialogCloseIcon"
47	},
48
49	// Map widget attributes to DOMNode attributes.
50	_setTitleAttr: { node: "titleNode", type: "innerHTML" },
51
52	// open: [readonly] Boolean
53	// True if Dialog is currently displayed on screen.
54	open: false,
55
56	// duration: Integer
57	// The time in milliseconds it takes the dialog to fade in and out
58	duration: manager.defaultDuration,
59
60	// refocus: Boolean
61	// A Toggle to modify the default focus behavior of a Dialog, which
62	// is to re-focus the element which had focus before being opened.
63	// False will disable refocusing. Default: true
64	refocus: true,
65
66	// autofocus: Boolean
67	// A Toggle to modify the default focus behavior of a Dialog, which
68	// is to focus on the first dialog element after opening the dialog.
69	// False will disable autofocusing. Default: true
70	autofocus: true,
71
72	// _firstFocusItem: [private readonly] DomNode
73	// The pointer to the first focusable node in the dialog.
74	// Set by `dijit/_DialogMixin._getFocusItems()`.
75	_firstFocusItem: null,
76
77	// _lastFocusItem: [private readonly] DomNode
78	// The pointer to which node has focus prior to our dialog.
79	// Set by `dijit/_DialogMixin._getFocusItems()`.
80	_lastFocusItem: null,
81
82	// doLayout: [protected] Boolean
83	// Don't change this parameter from the default value.
84	// This ContentPane parameter doesn't make sense for Dialog, since Dialog
85	// is never a child of a layout container, nor can you specify the size of
86	// Dialog in order to control the size of an inner widget.
87	doLayout: false,
88
89	// draggable: Boolean
90	// Toggles the movable aspect of the Dialog. If true, Dialog
91	// can be dragged by it's title. If false it will remain centered
92	// in the viewport.
93	draggable: true,
94	_setDraggableAttr: function(/Boolean/ val){
95	// Avoid _WidgetBase behavior of copying draggable attribute to this.domNode,
96	// as that prevents text select on modern browsers (#14452)
97	this._set("draggable", val);
98	},
99
100	// maxRatio: Number
101	// Maximum size to allow the dialog to expand to, relative to viewport size
102	maxRatio: 0.9,
103
104	// closable: Boolean
105	// Dialog show [x] icon to close itself, and ESC key will close the dialog.
106	closable: true,
107	_setClosableAttr: function(val){
108	this.closeButtonNode.style.display = val ? "" : "none";
109	this._set("closable", val);
110	},
111
112	postMixInProperties: function(){
113	var _nlsResources = i18n.getLocalization("dijit", "common");
114	lang.mixin(this, _nlsResources);
115	this.inherited(arguments);
116	},
117
118	postCreate: function(){
119	domStyle.set(this.domNode, {
120	display: "none",
121	position: "absolute"
122	});
123	this.ownerDocumentBody.appendChild(this.domNode);
124
125	this.inherited(arguments);
126
127	aspect.after(this, "onExecute", lang.hitch(this, "hide"), true);
128	aspect.after(this, "onCancel", lang.hitch(this, "hide"), true);
129
130	this._modalconnects = [];
131	},
132
133	onLoad: function(){
134	// summary:
135	// Called when data has been loaded from an href.
136	// Unlike most other callbacks, this function can be connected to (via `dojo.connect`)
137	// but should not be overridden.
138	// tags:
139	// callback
140
141	// when href is specified we need to reposition the dialog after the data is loaded
142	// and find the focusable elements
143	this._size();
144	this._position();
145
146	if(this.autofocus && DialogLevelManager.isTop(this)){
147	this._getFocusItems(this.domNode);
148	focus.focus(this._firstFocusItem);
149	}
150
151	this.inherited(arguments);
152	},
153
154	focus: function(){
155	this._getFocusItems(this.domNode);
156	focus.focus(this._firstFocusItem);
157	},
158
159	_endDrag: function(){
160	// summary:
161	// Called after dragging the Dialog. Saves the position of the dialog in the viewport,
162	// and also adjust position to be fully within the viewport, so user doesn't lose access to handle
163	var nodePosition = domGeometry.position(this.domNode),
164	viewport = winUtils.getBox(this.ownerDocument);
165	nodePosition.y = Math.min(Math.max(nodePosition.y, 0), (viewport.h - nodePosition.h));
166	nodePosition.x = Math.min(Math.max(nodePosition.x, 0), (viewport.w - nodePosition.w));
167	this._relativePosition = nodePosition;
168	this._position();
169	},
170
171	_setup: function(){
172	// summary:
173	// Stuff we need to do before showing the Dialog for the first
174	// time (but we defer it until right beforehand, for
175	// performance reasons).
176	// tags:
177	// private
178
179	var node = this.domNode;
180
181	if(this.titleBar && this.draggable){
182	this._moveable = new ((has("ie") == 6) ? TimedMoveable // prevent overload, see #5285
183	: Moveable)(node, { handle: this.titleBar });
184	aspect.after(this._moveable, "onMoveStop", lang.hitch(this, "_endDrag"), true);
185	}else{
186	domClass.add(node, "dijitDialogFixed");
187	}
188
189	this.underlayAttrs = {
190	dialogId: this.id,
191	"class": array.map(this["class"].split(/\s/),function(s){
192	return s + "_underlay";
193	}).join(" "),
194	_onKeyDown: lang.hitch(this, "_onKey"),
195	ownerDocument: this.ownerDocument
196	};
197	},
198
199	_size: function(){
200	// summary:
201	// If necessary, shrink dialog contents so dialog fits in viewport.
202	// tags:
203	// private
204
205	this._checkIfSingleChild();
206
207	// If we resized the dialog contents earlier, reset them back to original size, so
208	// that if the user later increases the viewport size, the dialog can display w/out a scrollbar.
209	// Need to do this before the domGeometry.position(this.domNode) call below.
210	if(this._singleChild){
211	if(typeof this._singleChildOriginalStyle != "undefined"){
212	this._singleChild.domNode.style.cssText = this._singleChildOriginalStyle;
213	delete this._singleChildOriginalStyle;
214	}
215	}else{
216	domStyle.set(this.containerNode, {
217	width: "auto",
218	height: "auto"
219	});
220	}
221
222	var bb = domGeometry.position(this.domNode);
223
224	// Get viewport size but then reduce it by a bit; Dialog should always have some space around it
225	// to indicate that it's a popup. This will also compensate for possible scrollbars on viewport.
226	var viewport = winUtils.getBox(this.ownerDocument);
227	viewport.w *= this.maxRatio;
228	viewport.h *= this.maxRatio;
229
230	if(bb.w >= viewport.w \|\| bb.h >= viewport.h){
231	// Reduce size of dialog contents so that dialog fits in viewport
232
233	var containerSize = domGeometry.position(this.containerNode),
234	w = Math.min(bb.w, viewport.w) - (bb.w - containerSize.w),
235	h = Math.min(bb.h, viewport.h) - (bb.h - containerSize.h);
236
237	if(this._singleChild && this._singleChild.resize){
238	if(typeof this._singleChildOriginalStyle == "undefined"){
239	this._singleChildOriginalStyle = this._singleChild.domNode.style.cssText;
240	}
241	this._singleChild.resize({w: w, h: h});
242	}else{
243	domStyle.set(this.containerNode, {
244	width: w + "px",
245	height: h + "px",
246	overflow: "auto",
247	position: "relative" // workaround IE bug moving scrollbar or dragging dialog
248	});
249	}
250	}else{
251	if(this._singleChild && this._singleChild.resize){
252	this._singleChild.resize();
253	}
254	}
255	},
256
257	_position: function(){
258	// summary:
259	// Position the dialog in the viewport. If no relative offset
260	// in the viewport has been determined (by dragging, for instance),
261	// center the dialog. Otherwise, use the Dialog's stored relative offset,
262	// adjusted by the viewport's scroll.
263	if(!domClass.contains(this.ownerDocumentBody, "dojoMove")){ // don't do anything if called during auto-scroll
264	var node = this.domNode,
265	viewport = winUtils.getBox(this.ownerDocument),
266	p = this._relativePosition,
267	bb = p ? null : domGeometry.position(node),
268	l = Math.floor(viewport.l + (p ? p.x : (viewport.w - bb.w) / 2)),
269	t = Math.floor(viewport.t + (p ? p.y : (viewport.h - bb.h) / 2))
270	;
271	domStyle.set(node, {
272	left: l + "px",
273	top: t + "px"
274	});
275	}
276	},
277
278	_onKey: function(/Event/ evt){
279	// summary:
280	// Handles the keyboard events for accessibility reasons
281	// tags:
282	// private
283
284	if(evt.keyCode == keys.TAB){
285	this._getFocusItems(this.domNode);
286	var node = evt.target;
287	if(this._firstFocusItem == this._lastFocusItem){
288	// don't move focus anywhere, but don't allow browser to move focus off of dialog either
289	evt.stopPropagation();
290	evt.preventDefault();
291	}else if(node == this._firstFocusItem && evt.shiftKey){
292	// if we are shift-tabbing from first focusable item in dialog, send focus to last item
293	focus.focus(this._lastFocusItem);
294	evt.stopPropagation();
295	evt.preventDefault();
296	}else if(node == this._lastFocusItem && !evt.shiftKey){
297	// if we are tabbing from last focusable item in dialog, send focus to first item
298	focus.focus(this._firstFocusItem);
299	evt.stopPropagation();
300	evt.preventDefault();
301	}
302	}else if(this.closable && evt.keyCode == keys.ESCAPE){
303	this.onCancel();
304	evt.stopPropagation();
305	evt.preventDefault();
306	}
307	},
308
309	show: function(){
310	// summary:
311	// Display the dialog
312	// returns: dojo/promise/Promise
313	// Promise object that resolves when the display animation is complete
314
315	if(this.open){
316	return;
317	}
318
319	if(!this._started){
320	this.startup();
321	}
322
323	// first time we show the dialog, there's some initialization stuff to do
324	if(!this._alreadyInitialized){
325	this._setup();
326	this._alreadyInitialized = true;
327	}
328
329	if(this._fadeOutDeferred){
330	// There's a hide() operation in progress, so cancel it, but still call DialogLevelManager.hide()
331	// as though the hide() completed, in preparation for the DialogLevelManager.show() call below.
332	this._fadeOutDeferred.cancel();
333	DialogLevelManager.hide(this);
334	}
335
336	// Recenter Dialog if user scrolls browser. Connecting to document doesn't work on IE, need to use window.
337	var win = winUtils.get(this.ownerDocument);
338	this._modalconnects.push(on(win, "scroll", lang.hitch(this, "resize")));
339
340	this._modalconnects.push(on(this.domNode, "keydown", lang.hitch(this, "_onKey")));
341
342	domStyle.set(this.domNode, {
343	opacity: 0,
344	display: ""
345	});
346
347	this._set("open", true);
348	this._onShow(); // lazy load trigger
349
350	this._size();
351	this._position();
352
353	// fade-in Animation object, setup below
354	var fadeIn;
355
356	this._fadeInDeferred = new Deferred(lang.hitch(this, function(){
357	fadeIn.stop();
358	delete this._fadeInDeferred;
359	}));
360
361	// If delay is 0, code below will delete this._fadeInDeferred instantly, so grab promise while we can.
362	var promise = this._fadeInDeferred.promise;
363
364	fadeIn = fx.fadeIn({
365	node: this.domNode,
366	duration: this.duration,
367	beforeBegin: lang.hitch(this, function(){
368	DialogLevelManager.show(this, this.underlayAttrs);
369	}),
370	onEnd: lang.hitch(this, function(){
371	if(this.autofocus && DialogLevelManager.isTop(this)){
372	// find focusable items each time dialog is shown since if dialog contains a widget the
373	// first focusable items can change
374	this._getFocusItems(this.domNode);
375	focus.focus(this._firstFocusItem);
376	}
377	this._fadeInDeferred.resolve(true);
378	delete this._fadeInDeferred;
379	})
380	}).play();
381
382	return promise;
383	},
384
385	hide: function(){
386	// summary:
387	// Hide the dialog
388	// returns: dojo/promise/Promise
389	// Promise object that resolves when the display animation is complete
390
391	// If we haven't been initialized yet then we aren't showing and we can just return.
392	// Likewise if we are already hidden, or are currently fading out.
393	if(!this._alreadyInitialized \|\| !this.open){
394	return;
395	}
396	if(this._fadeInDeferred){
397	this._fadeInDeferred.cancel();
398	}
399
400	// fade-in Animation object, setup below
401	var fadeOut;
402
403	this._fadeOutDeferred = new Deferred(lang.hitch(this, function(){
404	fadeOut.stop();
405	delete this._fadeOutDeferred;
406	}));
407
408	// fire onHide when the promise resolves.
409	this._fadeOutDeferred.then(lang.hitch(this, 'onHide'));
410
411	// If delay is 0, code below will delete this._fadeOutDeferred instantly, so grab promise while we can.
412	var promise = this._fadeOutDeferred.promise;
413
414	fadeOut = fx.fadeOut({
415	node: this.domNode,
416	duration: this.duration,
417	onEnd: lang.hitch(this, function(){
418	this.domNode.style.display = "none";
419	DialogLevelManager.hide(this);
420	this._fadeOutDeferred.resolve(true);
421	delete this._fadeOutDeferred;
422	})
423	}).play();
424
425	if(this._scrollConnected){
426	this._scrollConnected = false;
427	}
428	var h;
429	while(h = this._modalconnects.pop()){
430	h.remove();
431	}
432
433	if(this._relativePosition){
434	delete this._relativePosition;
435	}
436	this._set("open", false);
437
438	return promise;
439	},
440
441	resize: function(){
442	// summary:
443	// Called when viewport scrolled or size changed. Adjust Dialog as necessary to keep it visible.
444	// tags:
445	// private
446	if(this.domNode.style.display != "none"){
447	this._size();
448	if(!has("touch")){
449	// If the user has scrolled the display then reposition the Dialog. But don't do it for touch
450	// devices, because it will counteract when a keyboard pops up and then the browser auto-scrolls
451	// the focused node into view.
452	this._position();
453	}
454	}
455	},
456
457	destroy: function(){
458	if(this._fadeInDeferred){
459	this._fadeInDeferred.cancel();
460	}
461	if(this._fadeOutDeferred){
462	this._fadeOutDeferred.cancel();
463	}
464	if(this._moveable){
465	this._moveable.destroy();
466	}
467	var h;
468	while(h = this._modalconnects.pop()){
469	h.remove();
470	}
471
472	DialogLevelManager.hide(this);
473
474	this.inherited(arguments);
475	}
476	});
477
478	if(has("dojo-bidi")){
479	_DialogBase = declare("dijit._DialogBase", _DialogBase, {
480	_setTitleAttr: function(/String/ title){
481	this._set("title", title);
482	this.titleNode.innerHTML = title;
483	this.applyTextDir(this.titleNode);
484	},
485
486	_setTextDirAttr: function(textDir){
487	if(this._created && this.textDir != textDir){
488	this._set("textDir", textDir);
489	this.set("title", this.title);
490	}
491	}
492	});
493	}
494
495	var Dialog = declare("dijit.Dialog", [ContentPane, _DialogBase], {
496	// summary:
497	// A modal dialog Widget.
498	// description:
499	// Pops up a modal dialog window, blocking access to the screen
500	// and also graying out the screen Dialog is extended from
501	// ContentPane so it supports all the same parameters (href, etc.).
502	// example:
503	// \| <div data-dojo-type="dijit/Dialog" data-dojo-props="href: 'test.html'"></div>
504	// example:
505	// \| var foo = new Dialog({ title: "test dialog", content: "test content" });
506	// \| foo.placeAt(win.body());
507	// \| foo.startup();
508	});
509	Dialog._DialogBase = _DialogBase; // for monkey patching and dojox/widget/DialogSimple
510
511	var DialogLevelManager = Dialog._DialogLevelManager = {
512	// summary:
513	// Controls the various active "levels" on the page, starting with the
514	// stuff initially visible on the page (at z-index 0), and then having an entry for
515	// each Dialog shown.
516
517	_beginZIndex: 950,
518
519	show: function(/dijit/_WidgetBase/ dialog, /Object/ underlayAttrs){
520	// summary:
521	// Call right before fade-in animation for new dialog.
522	// Saves current focus, displays/adjusts underlay for new dialog,
523	// and sets the z-index of the dialog itself.
524	//
525	// New dialog will be displayed on top of all currently displayed dialogs.
526	//
527	// Caller is responsible for setting focus in new dialog after the fade-in
528	// animation completes.
529
530	// Save current focus
531	ds[ds.length - 1].focus = focus.curNode;
532
533	// Set z-index a bit above previous dialog
534	var zIndex = ds[ds.length - 1].dialog ? ds[ds.length - 1].zIndex + 2 : Dialog._DialogLevelManager._beginZIndex;
535	domStyle.set(dialog.domNode, 'zIndex', zIndex);
536
537	// Display the underlay, or if already displayed then adjust for this new dialog
538	DialogUnderlay.show(underlayAttrs, zIndex - 1);
539
540	ds.push({dialog: dialog, underlayAttrs: underlayAttrs, zIndex: zIndex});
541	},
542
543	hide: function(/dijit/_WidgetBase/ dialog){
544	// summary:
545	// Called when the specified dialog is hidden/destroyed, after the fade-out
546	// animation ends, in order to reset page focus, fix the underlay, etc.
547	// If the specified dialog isn't open then does nothing.
548	//
549	// Caller is responsible for either setting display:none on the dialog domNode,
550	// or calling dijit/popup.hide(), or removing it from the page DOM.
551
552	if(ds[ds.length - 1].dialog == dialog){
553	// Removing the top (or only) dialog in the stack, return focus
554	// to previous dialog
555
556	ds.pop();
557
558	var pd = ds[ds.length - 1]; // the new active dialog (or the base page itself)
559
560	// Adjust underlay
561	if(ds.length == 1){
562	// Returning to original page. Hide the underlay.
563	DialogUnderlay.hide();
564	}else{
565	// Popping back to previous dialog, adjust underlay.
566	DialogUnderlay.show(pd.underlayAttrs, pd.zIndex - 1);
567	}
568
569	// Adjust focus.
570	// TODO: regardless of setting of dialog.refocus, if the exeucte() method set focus somewhere,
571	// don't shift focus back to button. Note that execute() runs at the start of the fade-out but
572	// this code runs later, at the end of the fade-out. Menu has code like this.
573	if(dialog.refocus){
574	// If we are returning control to a previous dialog but for some reason
575	// that dialog didn't have a focused field, set focus to first focusable item.
576	// This situation could happen if two dialogs appeared at nearly the same time,
577	// since a dialog doesn't set it's focus until the fade-in is finished.
578	var focus = pd.focus;
579	if(pd.dialog && (!focus \|\| !dom.isDescendant(focus, pd.dialog.domNode))){
580	pd.dialog._getFocusItems(pd.dialog.domNode);
581	focus = pd.dialog._firstFocusItem;
582	}
583
584	if(focus){
585	// Refocus the button that spawned the Dialog. This will fail in corner cases including
586	// page unload on IE, because the dijit/form/Button that launched the Dialog may get destroyed
587	// before this code runs. (#15058)
588	try{
589	focus.focus();
590	}catch(e){
591	}
592	}
593	}
594	}else{
595	// Removing a dialog out of order (#9944, #10705).
596	// Don't need to mess with underlay or z-index or anything.
597	var idx = array.indexOf(array.map(ds, function(elem){
598	return elem.dialog;
599	}), dialog);
600	if(idx != -1){
601	ds.splice(idx, 1);
602	}
603	}
604	},
605
606	isTop: function(/dijit/_WidgetBase/ dialog){
607	// summary:
608	// Returns true if specified Dialog is the top in the task
609	return ds[ds.length - 1].dialog == dialog;
610	}
611	};
612
613	// Stack representing the various active "levels" on the page, starting with the
614	// stuff initially visible on the page (at z-index 0), and then having an entry for
615	// each Dialog shown.
616	// Each element in stack has form {
617	// dialog: dialogWidget,
618	// focus: returnFromGetFocus(),
619	// underlayAttrs: attributes to set on underlay (when this widget is active)
620	// }
621	var ds = Dialog._dialogStack = [
622	{dialog: null, focus: null, underlayAttrs: null} // entry for stuff at z-index: 0
623	];
624
625	// If focus was accidentally removed from the dialog, such as if the user clicked a blank
626	// area of the screen, or clicked the browser's address bar and then tabbed into the page,
627	// then refocus. Won't do anything if focus was removed because the Dialog was closed, or
628	// because a new Dialog popped up on top of the old one, or when focus moves to popups
629	focus.watch("curNode", function(attr, oldNode, node){
630	// Note: if no dialogs, ds.length==1 but ds[ds.length-1].dialog is null
631	var topDialog = ds[ds.length - 1].dialog;
632
633	// If a node was focused, and there's a Dialog currently showing, and not in the process of fading out...
634	// Ignore focus events on other document though because it's likely an Editor inside of the Dialog.
635	if(node && topDialog && !topDialog._fadeOutDeferred && node.ownerDocument == topDialog.ownerDocument){
636	// If the node that was focused is inside the dialog or in a popup, even a context menu that isn't
637	// technically a descendant of the the dialog, don't do anything.
638	do{
639	if(node == topDialog.domNode \|\| domClass.contains(node, "dijitPopup")){ return; }
640	}while(node = node.parentNode);
641
642	// Otherwise, return focus to the dialog. Use a delay to avoid confusing dijit/focus code's
643	// own tracking of focus.
644	topDialog.focus();
645	}
646	});
647
648	// Back compat w/1.6, remove for 2.0
649	if(has("dijit-legacy-requires")){
650	ready(0, function(){
651	var requires = ["dijit/TooltipDialog"];
652	require(requires); // use indirection so modules not rolled into a build
653	});
654	}
655
656	return Dialog;
657	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: