if(!dojo._hasResource["dijit.Dialog"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. dojo._hasResource["dijit.Dialog"] = true; dojo.provide("dijit.Dialog"); dojo.require("dojo.dnd.TimedMoveable"); dojo.require("dojo.fx"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.form.Form"); dojo.requireLocalization("dijit", "common", null, "zh,pt,da,tr,ru,de,sv,ja,he,fi,nb,el,ar,ROOT,pt-pt,cs,fr,es,ko,nl,zh-tw,pl,it,hu"); dojo.declare( "dijit.DialogUnderlay", [dijit._Widget, dijit._Templated], { // summary: The component that grays out the screen behind the dialog // Template has two divs; outer div is used for fade-in/fade-out, and also to hold background iframe. // Inner div has opacity specified in CSS file. templateString: "
", attributeMap: {}, postCreate: function(){ // summary: Append the underlay to the body dojo.body().appendChild(this.domNode); this.bgIframe = new dijit.BackgroundIframe(this.domNode); }, layout: function(){ // summary: Sets the background to the size of the viewport // // description: // Sets the background to the size of the viewport (rather than the size // of the document) since we need to cover the whole browser window, even // if the document is only a few lines long. var viewport = dijit.getViewport(); var is = this.node.style, os = this.domNode.style; os.top = viewport.t + "px"; os.left = viewport.l + "px"; is.width = viewport.w + "px"; is.height = viewport.h + "px"; // process twice since the scroll bar may have been removed // by the previous resizing var viewport2 = dijit.getViewport(); if(viewport.w != viewport2.w){ is.width = viewport2.w + "px"; } if(viewport.h != viewport2.h){ is.height = viewport2.h + "px"; } }, show: function(){ // summary: Show the dialog underlay this.domNode.style.display = "block"; this.layout(); if(this.bgIframe.iframe){ this.bgIframe.iframe.style.display = "block"; } this._resizeHandler = this.connect(window, "onresize", "layout"); }, hide: function(){ // summary: hides the dialog underlay this.domNode.style.display = "none"; if(this.bgIframe.iframe){ this.bgIframe.iframe.style.display = "none"; } this.disconnect(this._resizeHandler); }, uninitialize: function(){ if(this.bgIframe){ this.bgIframe.destroy(); } } } ); dojo.declare("dijit._DialogMixin", null, { attributeMap: dijit._Widget.prototype.attributeMap, // execute: Function // User defined function to do stuff when the user hits the submit button execute: function(/*Object*/ formContents){}, // onCancel: Function // Callback when user has canceled dialog, to notify container // (user shouldn't override) onCancel: function(){}, // onExecute: Function // Callback when user is about to execute dialog, to notify container // (user shouldn't override) onExecute: function(){}, _onSubmit: function(){ // summary: callback when user hits submit button this.onExecute(); // notify container that we are about to execute this.execute(this.getValues()); }, _getFocusItems: function(/*Node*/ dialogNode){ // find focusable Items each time a dialog is opened var focusItem = dijit.getFirstInTabbingOrder(dialogNode); this._firstFocusItem = focusItem ? focusItem : dialogNode; focusItem = dijit.getLastInTabbingOrder(dialogNode); this._lastFocusItem = focusItem ? focusItem : this._firstFocusItem; if(dojo.isMoz && this._firstFocusItem.tagName.toLowerCase() == "input" && dojo.attr(this._firstFocusItem, "type").toLowerCase() == "file"){ //FF doesn't behave well when first element is input type=file, set first focusable to dialog container dojo.attr(dialogNode, "tabindex", "0"); this._firstFocusItem = dialogNode; } } } ); 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: // |
test content
// | ... // | var foo = new dijit.Dialog({ title: "test dialog" },dojo.byId("test")); // | foo.startup(); templateString: null, templateString:"
\n\t
\n\t${title}\n\t\n\t\tx\n\t\n\t
\n\t\t
\n
\n", // open: Boolean // is True or False depending on state of dialog open: false, // duration: Integer // The time in milliseconds it takes the dialog to fade in and out duration: 400, // 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, // _firstFocusItem: DomNode // The pointer to the first focusable node in the dialog _firstFocusItem:null, // _lastFocusItem: DomNode // The pointer to which node has focus prior to our dialog _lastFocusItem:null, // doLayout: 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, attributeMap: dojo.mixin(dojo.clone(dijit._Widget.prototype.attributeMap), {title: "titleBar"}), postCreate: function(){ dojo.body().appendChild(this.domNode); this.inherited(arguments); var _nlsResources = dojo.i18n.getLocalization("dijit", "common"); if(this.closeButtonNode){ this.closeButtonNode.setAttribute("title", _nlsResources.buttonCancel); } if(this.closeText){ this.closeText.setAttribute("title", _nlsResources.buttonCancel); } var s = this.domNode.style; s.visibility = "hidden"; s.position = "absolute"; s.display = ""; s.top = "-9999px"; this.connect(this, "onExecute", "hide"); this.connect(this, "onCancel", "hide"); this._modalconnects = []; }, onLoad: function(){ // summary: when href is specified we need to reposition the dialog after the data is loaded this._position(); this.inherited(arguments); }, _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) if(this.titleBar){ this._moveable = new dojo.dnd.TimedMoveable(this.domNode, { handle: this.titleBar, timeout: 0 }); } this._underlay = new dijit.DialogUnderlay({ id: this.id+"_underlay", "class": dojo.map(this["class"].split(/\s/), function(s){ return s+"_underlay"; }).join(" ") }); var node = this.domNode; this._fadeIn = dojo.fx.combine( [dojo.fadeIn({ node: node, duration: this.duration }), dojo.fadeIn({ node: this._underlay.domNode, duration: this.duration, onBegin: dojo.hitch(this._underlay, "show") }) ] ); this._fadeOut = dojo.fx.combine( [dojo.fadeOut({ node: node, duration: this.duration, onEnd: function(){ node.style.visibility="hidden"; node.style.top = "-9999px"; } }), dojo.fadeOut({ node: this._underlay.domNode, duration: this.duration, onEnd: dojo.hitch(this._underlay, "hide") }) ] ); }, uninitialize: function(){ if(this._fadeIn && this._fadeIn.status() == "playing"){ this._fadeIn.stop(); } if(this._fadeOut && this._fadeOut.status() == "playing"){ this._fadeOut.stop(); } if(this._underlay){ this._underlay.destroy(); } }, _position: function(){ // summary: position modal dialog in center of screen if(dojo.hasClass(dojo.body(),"dojoMove")){ return; } var viewport = dijit.getViewport(); var mb = dojo.marginBox(this.domNode); var style = this.domNode.style; style.left = Math.floor((viewport.l + (viewport.w - mb.w)/2)) + "px"; style.top = Math.floor((viewport.t + (viewport.h - mb.h)/2)) + "px"; }, _onKey: function(/*Event*/ evt){ // summary: handles the keyboard events for accessibility reasons if(evt.keyCode){ var node = evt.target; if (evt.keyCode == dojo.keys.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.keyCode == dojo.keys.TAB){ if(!singleFocusItem){ dijit.focus(this._lastFocusItem); // send focus to last item in dialog } dojo.stopEvent(evt); }else if(node == this._lastFocusItem && evt.keyCode == dojo.keys.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.keyCode == dojo.keys.ESCAPE){ this.hide(); }else{ return; // just let it go } } node = node.parentNode; } // this key is for the disabled document window if(evt.keyCode != dojo.keys.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(dojo.doc.documentElement, "onkeypress", this, "_onKey")); dojo.style(this.domNode, "opacity", 0); this.domNode.style.visibility=""; this.open = true; this._loadCheck(); // lazy load trigger this._position(); this._fadeIn.play(); this._savedFocus = dijit.getFocus(this); // find focusable Items each time dialog is shown since if dialog contains a widget the // first focusable items can change this._getFocusItems(this.domNode); // set timeout to allow the browser to render dialog setTimeout(dojo.hitch(this, function(){ dijit.focus(this._firstFocusItem); }), 50); }, 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)); } this.open = false; }, layout: function() { // summary: position the Dialog and the underlay if(this.domNode.style.visibility != "hidden"){ this._underlay.layout(); this._position(); } }, destroy: function(){ dojo.forEach(this._modalconnects, dojo.disconnect); if(this.refocus && this.open){ var fo = this._savedFocus; setTimeout(dojo.hitch(dijit,"focus",fo),25); } this.inherited(arguments); } } ); dojo.declare( "dijit.TooltipDialog", [dijit.layout.ContentPane, dijit._Templated, dijit.form._FormMixin, dijit._DialogMixin], { // summary: // Pops up a dialog that appears like a Tooltip // // title: String // Description of tooltip dialog (required for a11Y) title: "", // doLayout: Boolean // Don't change this parameter from the default value. // This ContentPane parameter doesn't make sense for TooltipDialog, since TooltipDialog // is never a child of a layout container, nor can you specify the size of // TooltipDialog in order to control the size of an inner widget. doLayout: false, // _firstFocusItem: DomNode // The pointer to the first focusable node in the dialog _firstFocusItem:null, // _lastFocusItem: DomNode // The domNode that had focus before we took it. _lastFocusItem: null, templateString: null, templateString:"
\n\t
\n\t\t
\n\t
\n\t
\n
\n", postCreate: function(){ this.inherited(arguments); this.connect(this.containerNode, "onkeypress", "_onKey"); this.containerNode.title = this.title; }, orient: function(/*DomNode*/ node, /*String*/ aroundCorner, /*String*/ corner){ // summary: configure widget to be displayed in given position relative to the button this.domNode.className="dijitTooltipDialog " +" dijitTooltipAB"+(corner.charAt(1)=='L'?"Left":"Right")+" dijitTooltip"+(corner.charAt(0)=='T' ? "Below" : "Above"); }, onOpen: function(/*Object*/ pos){ // summary: called when dialog is displayed this._getFocusItems(this.containerNode); this.orient(this.domNode,pos.aroundCorner, pos.corner); this._loadCheck(); // lazy load trigger dijit.focus(this._firstFocusItem); }, _onKey: function(/*Event*/ evt){ // summary: keep keyboard focus in dialog; close dialog on escape key var node = evt.target; if (evt.keyCode == dojo.keys.TAB){ this._getFocusItems(this.containerNode); } var singleFocusItem = (this._firstFocusItem == this._lastFocusItem); if(evt.keyCode == dojo.keys.ESCAPE){ this.onCancel(); }else if(node == this._firstFocusItem && evt.shiftKey && evt.keyCode == dojo.keys.TAB){ if(!singleFocusItem){ dijit.focus(this._lastFocusItem); // send focus to last item in dialog } dojo.stopEvent(evt); }else if(node == this._lastFocusItem && evt.keyCode == dojo.keys.TAB && !evt.shiftKey){ if(!singleFocusItem){ dijit.focus(this._firstFocusItem); // send focus to first item in dialog } dojo.stopEvent(evt); }else if(evt.keyCode == dojo.keys.TAB){ // we want the browser's default tab handling to move focus // but we don't want the tab to propagate upwards evt.stopPropagation(); } } } ); }