Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed

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();
                }
        }       
);


}