dojo.provide("dijit.Dialog"); dojo.require("dojo.dnd.move"); dojo.require("dojo.dnd.TimedMoveable"); dojo.require("dojo.fx"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dijit.form._FormMixin"); dojo.require("dijit._DialogMixin"); dojo.require("dijit.DialogUnderlay"); dojo.require("dijit.layout.ContentPane"); dojo.requireLocalization("dijit", "common"); /*===== dijit._underlay = function(kwArgs){ // summary: // A shared instance of a `dijit.DialogUnderlay` // // description: // A shared instance of a `dijit.DialogUnderlay` created and // used by `dijit.Dialog`, though never created until some Dialog // or subclass thereof is shown. }; =====*/ dojo.declare( "dijit.Dialog", [dijit.layout.ContentPane, dijit._Templated, dijit.form._FormMixin, dijit._DialogMixin], { // summary: // A modal dialog Widget // // description: // Pops up a modal dialog window, blocking access to the screen // and also graying out the screen Dialog is extended from // ContentPane so it supports all the same parameters (href, etc.) // // example: // |
// // example: // | var foo = new dijit.Dialog({ title: "test dialog", content: "test content" }; // | dojo.body().appendChild(foo.domNode); // | foo.startup(); templateString: null, templatePath: dojo.moduleUrl("dijit", "templates/Dialog.html"), attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, { title: [ { node: "titleNode", type: "innerHTML" }, { node: "titleBar", type: "attribute" } ] }), // open: Boolean // True if Dialog is currently displayed on screen. open: false, // duration: Integer // The time in milliseconds it takes the dialog to fade in and out duration: dijit.defaultDuration, // refocus: Boolean // A Toggle to modify the default focus behavior of a Dialog, which // is to re-focus the element which had focus before being opened. // False will disable refocusing. Default: true refocus: true, // autofocus: Boolean // A Toggle to modify the default focus behavior of a Dialog, which // is to focus on the first dialog element after opening the dialog. // False will disable autofocusing. Default: true autofocus: true, // _firstFocusItem: [private] [readonly] DomNode // The pointer to the first focusable node in the dialog. // Set by `dijit._DialogMixin._getFocusItems`. _firstFocusItem: null, // _lastFocusItem: [private] [readonly] DomNode // The pointer to which node has focus prior to our dialog. // Set by `dijit._DialogMixin._getFocusItems`. _lastFocusItem: null, // doLayout: [protected] Boolean // Don't change this parameter from the default value. // This ContentPane parameter doesn't make sense for Dialog, since Dialog // is never a child of a layout container, nor can you specify the size of // Dialog in order to control the size of an inner widget. doLayout: false, // draggable: Boolean // Toggles the moveable aspect of the Dialog. If true, Dialog // can be dragged by it's title. If false it will remain centered // in the viewport. draggable: true, // _fixSizes: Boolean // Does this Dialog attempt to restore the width and height after becoming too small? _fixSizes: true, postMixInProperties: function(){ var _nlsResources = dojo.i18n.getLocalization("dijit", "common"); dojo.mixin(this, _nlsResources); this.inherited(arguments); }, postCreate: function(){ dojo.style(this.domNode, { visibility:"hidden", position:"absolute", display:"", top:"-9999px" }); dojo.body().appendChild(this.domNode); this.inherited(arguments); this.connect(this, "onExecute", "hide"); this.connect(this, "onCancel", "hide"); this._modalconnects = []; }, onLoad: function(){ // summary: // Called when data has been loaded from an href. // Unlike most other callbacks, this function can be connected to (via `dojo.connect`) // but should *not* be overriden. // tags: // callback // when href is specified we need to reposition the dialog after the data is loaded this._position(); this.inherited(arguments); }, _endDrag: function(e){ // summary: // Called after dragging the Dialog. Calculates the relative offset // of the Dialog in relation to the viewport. // tags: // private if(e && e.node && e.node === this.domNode){ var vp = dijit.getViewport(); var p = e._leftTop || dojo.coords(e.node,true); this._relativePosition = { t: p.t - vp.t, l: p.l - vp.l } } }, _setup: function(){ // summary: // Stuff we need to do before showing the Dialog for the first // time (but we defer it until right beforehand, for // performance reasons). // tags: // private var node = this.domNode; if(this.titleBar && this.draggable){ this._moveable = (dojo.isIE == 6) ? new dojo.dnd.TimedMoveable(node, { handle: this.titleBar }) : // prevent overload, see #5285 new dojo.dnd.Moveable(node, { handle: this.titleBar, timeout: 0 }); dojo.subscribe("/dnd/move/stop",this,"_endDrag"); }else{ dojo.addClass(node,"dijitDialogFixed"); } var underlayAttrs = { dialogId: this.id, "class": dojo.map(this["class"].split(/\s/), function(s){ return s+"_underlay"; }).join(" ") }; var underlay = dijit._underlay; if(!underlay){ underlay = dijit._underlay = new dijit.DialogUnderlay(underlayAttrs); } this._fadeIn = dojo.fadeIn({ node: node, duration: this.duration, beforeBegin: function(){ underlay.attr(underlayAttrs); underlay.show(); }, onEnd: dojo.hitch(this, function(){ if(this.autofocus){ // find focusable Items each time dialog is shown since if dialog contains a widget the // first focusable items can change this._getFocusItems(this.domNode); dijit.focus(this._firstFocusItem); } }) }); this._fadeOut = dojo.fadeOut({ node: node, duration: this.duration, onEnd: function(){ node.style.visibility="hidden"; node.style.top = "-9999px"; dijit._underlay.hide(); } }); }, uninitialize: function(){ var wasPlaying = false; if(this._fadeIn && this._fadeIn.status() == "playing"){ wasPlaying = true; this._fadeIn.stop(); } if(this._fadeOut && this._fadeOut.status() == "playing"){ wasPlaying = true; this._fadeOut.stop(); } if(this.open || wasPlaying){ dijit._underlay.hide(); } if(this._moveable){ this._moveable.destroy(); } }, _size: function(){ // summary: // Make sure the dialog is small enough to fit in viewport. // tags: // private var mb = dojo.marginBox(this.domNode); var viewport = dijit.getViewport(); if(mb.w >= viewport.w || mb.h >= viewport.h){ dojo.style(this.containerNode, { width: Math.min(mb.w, Math.floor(viewport.w * 0.75))+"px", height: Math.min(mb.h, Math.floor(viewport.h * 0.75))+"px", overflow: "auto", position: "relative" // workaround IE bug moving scrollbar or dragging dialog }); } }, _position: function(){ // summary: // Position modal dialog in the viewport. If no relative offset // in the viewport has been determined (by dragging, for instance), // center the node. Otherwise, use the Dialog's stored relative offset, // and position the node to top: left: values based on the viewport. // tags: // private if(!dojo.hasClass(dojo.body(),"dojoMove")){ var node = this.domNode; var viewport = dijit.getViewport(); var p = this._relativePosition; var mb = p ? null : dojo.marginBox(node); dojo.style(node,{ left: Math.floor(viewport.l + (p ? p.l : (viewport.w - mb.w) / 2)) + "px", top: Math.floor(viewport.t + (p ? p.t : (viewport.h - mb.h) / 2)) + "px" }); } }, _onKey: function(/*Event*/ evt){ // summary: // Handles the keyboard events for accessibility reasons // tags: // private if(evt.charOrCode){ var dk = dojo.keys; var node = evt.target; if (evt.charOrCode === dk.TAB){ this._getFocusItems(this.domNode); } var singleFocusItem = (this._firstFocusItem == this._lastFocusItem); // see if we are shift-tabbing from first focusable item on dialog if(node == this._firstFocusItem && evt.shiftKey && evt.charOrCode === dk.TAB){ if(!singleFocusItem){ dijit.focus(this._lastFocusItem); // send focus to last item in dialog } dojo.stopEvent(evt); }else if(node == this._lastFocusItem && evt.charOrCode === dk.TAB && !evt.shiftKey){ if (!singleFocusItem){ dijit.focus(this._firstFocusItem); // send focus to first item in dialog } dojo.stopEvent(evt); }else{ // see if the key is for the dialog while(node){ if(node == this.domNode){ if(evt.charOrCode == dk.ESCAPE){ this.onCancel(); }else{ return; // just let it go } } node = node.parentNode; } // this key is for the disabled document window if(evt.charOrCode !== dk.TAB){ // allow tabbing into the dialog for a11y dojo.stopEvent(evt); // opera won't tab to a div }else if(!dojo.isOpera){ try{ this._firstFocusItem.focus(); }catch(e){ /*squelch*/ } } } } }, show: function(){ // summary: // Display the dialog if(this.open){ return; } // first time we show the dialog, there's some initialization stuff to do if(!this._alreadyInitialized){ this._setup(); this._alreadyInitialized=true; } if(this._fadeOut.status() == "playing"){ this._fadeOut.stop(); } this._modalconnects.push(dojo.connect(window, "onscroll", this, "layout")); this._modalconnects.push(dojo.connect(window, "onresize", this, function(){ // IE gives spurious resize events and can actually get stuck // in an infinite loop if we don't ignore them var viewport = dijit.getViewport(); if(!this._oldViewport || viewport.h != this._oldViewport.h || viewport.w != this._oldViewport.w){ this.layout(); this._oldViewport = viewport; } })); this._modalconnects.push(dojo.connect(dojo.doc.documentElement, "onkeypress", this, "_onKey")); dojo.style(this.domNode, { opacity:0, visibility:"" }); if(this._fixSizes){ dojo.style(this.containerNode, { // reset width and height so that _size():marginBox works correctly width:"auto", height:"auto" }); } this.open = true; this._onShow(); // lazy load trigger this._size(); this._position(); this._fadeIn.play(); this._savedFocus = dijit.getFocus(this); }, hide: function(){ // summary: // Hide the dialog // if we haven't been initialized yet then we aren't showing and we can just return if(!this._alreadyInitialized){ return; } if(this._fadeIn.status() == "playing"){ this._fadeIn.stop(); } this._fadeOut.play(); if (this._scrollConnected){ this._scrollConnected = false; } dojo.forEach(this._modalconnects, dojo.disconnect); this._modalconnects = []; if(this.refocus){ this.connect(this._fadeOut,"onEnd",dojo.hitch(dijit,"focus",this._savedFocus)); } if(this._relativePosition){ delete this._relativePosition; } this.open = false; }, layout: function() { // summary: // Position the Dialog and the underlay // tags: // private if(this.domNode.style.visibility != "hidden"){ dijit._underlay.layout(); this._position(); } }, destroy: function(){ dojo.forEach(this._modalconnects, dojo.disconnect); if(this.refocus && this.open){ setTimeout(dojo.hitch(dijit,"focus",this._savedFocus), 25); } this.inherited(arguments); }, _onCloseEnter: function(){ // summary: // Called when user hovers over close icon // tags: // private dojo.addClass(this.closeButtonNode, "dijitDialogCloseIcon-hover"); }, _onCloseLeave: function(){ // summary: // Called when user stops hovering over close icon // tags: // private dojo.removeClass(this.closeButtonNode, "dijitDialogCloseIcon-hover"); } } ); // For back-compat. TODO: remove in 2.0 dojo.require("dijit.TooltipDialog");