| New file |
|---|
| 0,0 → 1,371 |
|---|
| 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.move"); |
| dojo.require("dojo.fx"); |
| |
| dojo.require("dijit._Widget"); |
| dojo.require("dijit._Templated"); |
| dojo.require("dijit.layout.ContentPane"); |
| dojo.require("dijit.form.Form"); |
| |
| dojo.declare( |
| "dijit.DialogUnderlay", |
| [dijit._Widget, dijit._Templated], |
| { |
| // summary: the thing 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: "<div class=dijitDialogUnderlayWrapper id='${id}_underlay'><div class=dijitDialogUnderlay dojoAttachPoint='node'></div></div>", |
| |
| postCreate: function(){ |
| dojo.body().appendChild(this.domNode); |
| this.bgIframe = new dijit.BackgroundIframe(this.domNode); |
| }, |
| |
| layout: function(){ |
| // summary |
| // 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(){ |
| 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(){ |
| 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.Dialog", |
| [dijit.layout.ContentPane, dijit._Templated, dijit.form._FormMixin], |
| { |
| // summary: |
| // 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.) |
| |
| templateString: null, |
| templateString:"<div class=\"dijitDialog\">\n\t<div dojoAttachPoint=\"titleBar\" class=\"dijitDialogTitleBar\" tabindex=\"0\" waiRole=\"dialog\">\n\t<span dojoAttachPoint=\"titleNode\" class=\"dijitDialogTitle\">${title}</span>\n\t<span dojoAttachPoint=\"closeButtonNode\" class=\"dijitDialogCloseIcon\" dojoAttachEvent=\"onclick: hide\">\n\t\t<span dojoAttachPoint=\"closeText\" class=\"closeText\">x</span>\n\t</span>\n\t</div>\n\t\t<div dojoAttachPoint=\"containerNode\" class=\"dijitDialogPaneContent\"></div>\n\t<span dojoAttachPoint=\"tabEnd\" dojoAttachEvent=\"onfocus:_cycleFocus\" tabindex=\"0\"></span>\n</div>\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, |
| |
| _lastFocusItem:null, |
| |
| attributeMap: dojo.mixin(dojo.clone(dijit._Widget.prototype.attributeMap), |
| {title: "titleBar"}), |
| |
| postCreate: function(){ |
| dojo.body().appendChild(this.domNode); |
| this.inherited("postCreate",arguments); |
| this.domNode.style.display="none"; |
| this.connect(this, "onExecute", "hide"); |
| this.connect(this, "onCancel", "hide"); |
| }, |
| |
| onLoad: function(){ |
| // summary: |
| // when href is specified we need to reposition the dialog after the data is loaded |
| this._position(); |
| this.inherited("onLoad",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) |
| |
| this._modalconnects = []; |
| |
| if(this.titleBar){ |
| this._moveable = new dojo.dnd.Moveable(this.domNode, { handle: this.titleBar }); |
| } |
| |
| this._underlay = new dijit.DialogUnderlay(); |
| |
| 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.display="none"; |
| } |
| }), |
| dojo.fadeOut({ |
| node: this._underlay.domNode, |
| duration: this.duration, |
| onEnd: dojo.hitch(this._underlay, "hide") |
| }) |
| ] |
| ); |
| }, |
| |
| uninitialize: function(){ |
| 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"; |
| }, |
| |
| _findLastFocus: function(/*Event*/ evt){ |
| // summary: called from onblur of dialog container to determine the last focusable item |
| this._lastFocused = evt.target; |
| }, |
| |
| _cycleFocus: function(/*Event*/ evt){ |
| // summary: when tabEnd receives focus, advance focus around to titleBar |
| |
| // on first focus to tabEnd, store the last focused item in dialog |
| if(!this._lastFocusItem){ |
| this._lastFocusItem = this._lastFocused; |
| } |
| this.titleBar.focus(); |
| }, |
| |
| _onKey: function(/*Event*/ evt){ |
| if(evt.keyCode){ |
| var node = evt.target; |
| // see if we are shift-tabbing from titleBar |
| if(node == this.titleBar && evt.shiftKey && evt.keyCode == dojo.keys.TAB){ |
| if(this._lastFocusItem){ |
| this._lastFocusItem.focus(); // send focus to last item in dialog if known |
| } |
| 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.titleBar.focus(); |
| }catch(e){/*squelch*/} |
| } |
| } |
| } |
| }, |
| |
| show: function(){ |
| // summary: display the dialog |
| |
| // 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(document.documentElement, "onkeypress", this, "_onKey")); |
| |
| // IE doesn't bubble onblur events - use ondeactivate instead |
| var ev = typeof(document.ondeactivate) == "object" ? "ondeactivate" : "onblur"; |
| this._modalconnects.push(dojo.connect(this.containerNode, ev, this, "_findLastFocus")); |
| |
| dojo.style(this.domNode, "opacity", 0); |
| this.domNode.style.display="block"; |
| this.open = true; |
| this._loadCheck(); // lazy load trigger |
| |
| this._position(); |
| |
| this._fadeIn.play(); |
| |
| this._savedFocus = dijit.getFocus(this); |
| |
| // set timeout to allow the browser to render dialog |
| setTimeout(dojo.hitch(this, function(){ |
| dijit.focus(this.titleBar); |
| }), 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 = []; |
| |
| this.connect(this._fadeOut,"onEnd",dojo.hitch(this,function(){ |
| dijit.focus(this._savedFocus); |
| })); |
| this.open = false; |
| }, |
| |
| layout: function() { |
| // summary: position the Dialog and the underlay |
| if(this.domNode.style.display == "block"){ |
| this._underlay.layout(); |
| this._position(); |
| } |
| } |
| } |
| ); |
| |
| dojo.declare( |
| "dijit.TooltipDialog", |
| [dijit.layout.ContentPane, dijit._Templated, dijit.form._FormMixin], |
| { |
| // summary: |
| // Pops up a dialog that appears like a Tooltip |
| // title: String |
| // Description of tooltip dialog (required for a11Y) |
| title: "", |
| |
| _lastFocusItem: null, |
| |
| templateString: null, |
| templateString:"<div class=\"dijitTooltipDialog\" >\n\t<div class=\"dijitTooltipContainer\">\n\t\t<div class =\"dijitTooltipContents dijitTooltipFocusNode\" dojoAttachPoint=\"containerNode\" tabindex=\"0\" waiRole=\"dialog\"></div>\n\t</div>\n\t<span dojoAttachPoint=\"tabEnd\" tabindex=\"0\" dojoAttachEvent=\"focus:_cycleFocus\"></span>\n\t<div class=\"dijitTooltipConnector\" ></div>\n</div>\n", |
| |
| postCreate: function(){ |
| this.inherited("postCreate",arguments); |
| this.connect(this.containerNode, "onkeypress", "_onKey"); |
| |
| // IE doesn't bubble onblur events - use ondeactivate instead |
| var ev = typeof(document.ondeactivate) == "object" ? "ondeactivate" : "onblur"; |
| this.connect(this.containerNode, ev, "_findLastFocus"); |
| this.containerNode.title=this.title; |
| }, |
| |
| orient: function(/*Object*/ 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.orient(pos.corner); |
| this._loadCheck(); // lazy load trigger |
| this.containerNode.focus(); |
| }, |
| |
| _onKey: function(/*Event*/ evt){ |
| // summary: keep keyboard focus in dialog; close dialog on escape key |
| if(evt.keyCode == dojo.keys.ESCAPE){ |
| this.onCancel(); |
| }else if(evt.target == this.containerNode && evt.shiftKey && evt.keyCode == dojo.keys.TAB){ |
| if (this._lastFocusItem){ |
| this._lastFocusItem.focus(); |
| } |
| 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(); |
| } |
| }, |
| |
| _findLastFocus: function(/*Event*/ evt){ |
| // summary: called from onblur of dialog container to determine the last focusable item |
| this._lastFocused = evt.target; |
| }, |
| |
| _cycleFocus: function(/*Event*/ evt){ |
| // summary: when tabEnd receives focus, advance focus around to containerNode |
| |
| // on first focus to tabEnd, store the last focused item in dialog |
| if(!this._lastFocusItem){ |
| this._lastFocusItem = this._lastFocused; |
| } |
| this.containerNode.focus(); |
| } |
| } |
| ); |
| |
| |
| } |