source: Dev/branches/rest-dojo-ui/client/dijit/Dialog.js @ 256

define([
        "require",
        "dojo/_base/array", // array.forEach array.indexOf array.map
        "dojo/_base/connect", // connect._keypress
        "dojo/_base/declare", // declare
        "dojo/_base/Deferred", // Deferred
        "dojo/dom", // dom.isDescendant
        "dojo/dom-class", // domClass.add domClass.contains
        "dojo/dom-geometry", // domGeometry.position
        "dojo/dom-style", // domStyle.set
        "dojo/_base/event", // event.stop
        "dojo/_base/fx", // fx.fadeIn fx.fadeOut
        "dojo/i18n", // i18n.getLocalization
        "dojo/_base/kernel", // kernel.isAsync
        "dojo/keys",
        "dojo/_base/lang", // lang.mixin lang.hitch
        "dojo/on",
        "dojo/ready",
        "dojo/_base/sniff", // has("ie") has("opera")
        "dojo/_base/window", // win.body
        "dojo/window", // winUtils.getBox
        "dojo/dnd/Moveable", // Moveable
        "dojo/dnd/TimedMoveable", // TimedMoveable
        "./focus",
        "./_base/manager",      // manager.defaultDuration
        "./_Widget",
        "./_TemplatedMixin",
        "./_CssStateMixin",
        "./form/_FormMixin",
        "./_DialogMixin",
        "./DialogUnderlay",
        "./layout/ContentPane",
        "dojo/text!./templates/Dialog.html",
        ".",                    // for back-compat, exporting dijit._underlay (remove in 2.0)
        "dojo/i18n!./nls/common"
], function(require, array, connect, declare, Deferred,
                        dom, domClass, domGeometry, domStyle, event, fx, i18n, kernel, keys, lang, on, ready, has, win, winUtils,
                        Moveable, TimedMoveable, focus, manager, _Widget, _TemplatedMixin, _CssStateMixin, _FormMixin, _DialogMixin,
                        DialogUnderlay, ContentPane, template, dijit){
        
/*=====
        var _Widget = dijit._Widget;
        var _TemplatedMixin = dijit._TemplatedMixin;
        var _CssStateMixin = dijit._CssStateMixin;
        var _FormMixin = dijit.form._FormMixin;
        var _DialogMixin = dijit._DialogMixin;
=====*/ 


        // module:
        //              dijit/Dialog
        // summary:
        //              A modal dialog Widget


        /*=====
        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.
        };
        =====*/

        var _DialogBase = declare("dijit._DialogBase", [_TemplatedMixin, _FormMixin, _DialogMixin, _CssStateMixin], {
                // 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:
                // |    <div data-dojo-type="dijit.Dialog" data-dojo-props="href: 'test.html'"></div>
                //
                // example:
                // |    var foo = new dijit.Dialog({ title: "test dialog", content: "test content" };
                // |    dojo.body().appendChild(foo.domNode);
                // |    foo.startup();

                templateString: template,

                baseClass: "dijitDialog",

                cssStateNodes: {
                        closeButtonNode: "dijitDialogCloseIcon"
                },

                // Map widget attributes to DOMNode attributes.
                _setTitleAttr: [
                        { node: "titleNode", type: "innerHTML" },
                        { node: "titleBar", type: "attribute" }
                ],

                // open: [readonly] 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: manager.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,

                //aria-describedby: String
                //              Allows the user to add an aria-describedby attribute onto the dialog.   The value should
                //              be the id of the container element of text that describes the dialog purpose (usually
                //              the first text in the dialog).
                //              <div data-dojo-type="dijit.Dialog" aria-describedby="intro" .....>
                //                      <div id="intro">Introductory text</div>
                //                      <div>rest of dialog contents</div>
                //              </div>
                "aria-describedby":"",

                postMixInProperties: function(){
                        var _nlsResources = i18n.getLocalization("dijit", "common");
                        lang.mixin(this, _nlsResources);
                        this.inherited(arguments);
                },

                postCreate: function(){
                        domStyle.set(this.domNode, {
                                display: "none",
                                position:"absolute"
                        });
                        win.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 overridden.
                        // tags:
                        //              callback

                        // when href is specified we need to reposition the dialog after the data is loaded
                        // and find the focusable elements
                        this._position();
                        if(this.autofocus && DialogLevelManager.isTop(this)){
                                this._getFocusItems(this.domNode);
                                focus.focus(this._firstFocusItem);
                        }
                        this.inherited(arguments);
                },

                _endDrag: function(){
                        // summary:
                        //              Called after dragging the Dialog. Saves the position of the dialog in the viewport,
                        //              and also adjust position to be fully within the viewport, so user doesn't lose access to handle
                        var nodePosition = domGeometry.position(this.domNode),
                                viewport = winUtils.getBox();
                        nodePosition.y = Math.min(Math.max(nodePosition.y, 0), (viewport.h - nodePosition.h));
                        nodePosition.x = Math.min(Math.max(nodePosition.x, 0), (viewport.w - nodePosition.w));
                        this._relativePosition = nodePosition;
                        this._position();
                },

                _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 = new ((has("ie") == 6) ? TimedMoveable // prevent overload, see #5285
                                        : Moveable)(node, { handle: this.titleBar });
                                this.connect(this._moveable, "onMoveStop", "_endDrag");
                        }else{
                                domClass.add(node,"dijitDialogFixed");
                        }

                        this.underlayAttrs = {
                                dialogId: this.id,
                                "class": array.map(this["class"].split(/\s/), function(s){ return s+"_underlay"; }).join(" ")
                        };
                },

                _size: function(){
                        // summary:
                        //              If necessary, shrink dialog contents so dialog fits in viewport
                        // tags:
                        //              private

                        this._checkIfSingleChild();

                        // If we resized the dialog contents earlier, reset them back to original size, so
                        // that if the user later increases the viewport size, the dialog can display w/out a scrollbar.
                        // Need to do this before the domGeometry.position(this.domNode) call below.
                        if(this._singleChild){
                                if(this._singleChildOriginalStyle){
                                        this._singleChild.domNode.style.cssText = this._singleChildOriginalStyle;
                                }
                                delete this._singleChildOriginalStyle;
                        }else{
                                domStyle.set(this.containerNode, {
                                        width:"auto",
                                        height:"auto"
                                });
                        }

                        var bb = domGeometry.position(this.domNode);
                        var viewport = winUtils.getBox();
                        if(bb.w >= viewport.w || bb.h >= viewport.h){
                                // Reduce size of dialog contents so that dialog fits in viewport

                                var w = Math.min(bb.w, Math.floor(viewport.w * 0.75)),
                                        h = Math.min(bb.h, Math.floor(viewport.h * 0.75));

                                if(this._singleChild && this._singleChild.resize){
                                        this._singleChildOriginalStyle = this._singleChild.domNode.style.cssText;
                                        this._singleChild.resize({w: w, h: h});
                                }else{
                                        domStyle.set(this.containerNode, {
                                                width: w + "px",
                                                height: h + "px",
                                                overflow: "auto",
                                                position: "relative"    // workaround IE bug moving scrollbar or dragging dialog
                                        });
                                }
                        }else{
                                if(this._singleChild && this._singleChild.resize){
                                        this._singleChild.resize();
                                }
                        }
                },

                _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.
                        if(!domClass.contains(win.body(), "dojoMove")){ // don't do anything if called during auto-scroll
                                var node = this.domNode,
                                        viewport = winUtils.getBox(),
                                        p = this._relativePosition,
                                        bb = p ? null : domGeometry.position(node),
                                        l = Math.floor(viewport.l + (p ? p.x : (viewport.w - bb.w) / 2)),
                                        t = Math.floor(viewport.t + (p ? p.y : (viewport.h - bb.h) / 2))
                                ;
                                domStyle.set(node,{
                                        left: l + "px",
                                        top: t + "px"
                                });
                        }
                },

                _onKey: function(/*Event*/ evt){
                        // summary:
                        //              Handles the keyboard events for accessibility reasons
                        // tags:
                        //              private

                        if(evt.charOrCode){
                                var node = evt.target;
                                if(evt.charOrCode === 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.charOrCode === keys.TAB){
                                        if(!singleFocusItem){
                                                focus.focus(this._lastFocusItem); // send focus to last item in dialog
                                        }
                                        event.stop(evt);
                                }else if(node == this._lastFocusItem && evt.charOrCode === keys.TAB && !evt.shiftKey){
                                        if(!singleFocusItem){
                                                focus.focus(this._firstFocusItem); // send focus to first item in dialog
                                        }
                                        event.stop(evt);
                                }else{
                                        // see if the key is for the dialog
                                        while(node){
                                                if(node == this.domNode || domClass.contains(node, "dijitPopup")){
                                                        if(evt.charOrCode == keys.ESCAPE){
                                                                this.onCancel();
                                                        }else{
                                                                return; // just let it go
                                                        }
                                                }
                                                node = node.parentNode;
                                        }
                                        // this key is for the disabled document window
                                        if(evt.charOrCode !== keys.TAB){ // allow tabbing into the dialog for a11y
                                                event.stop(evt);
                                        // opera won't tab to a div
                                        }else if(!has("opera")){
                                                try{
                                                        this._firstFocusItem.focus();
                                                }catch(e){ /*squelch*/ }
                                        }
                                }
                        }
                },

                show: function(){
                        // summary:
                        //              Display the dialog
                        // returns: dojo.Deferred
                        //              Deferred object that resolves when the display animation is complete

                        if(this.open){ return; }

                        if(!this._started){
                                this.startup();
                        }

                        // first time we show the dialog, there's some initialization stuff to do
                        if(!this._alreadyInitialized){
                                this._setup();
                                this._alreadyInitialized=true;
                        }

                        if(this._fadeOutDeferred){
                                this._fadeOutDeferred.cancel();
                        }

                        this._modalconnects.push(on(window, "scroll", lang.hitch(this, "layout")));
                        this._modalconnects.push(on(window, "resize", lang.hitch(this, function(){
                                // IE gives spurious resize events and can actually get stuck
                                // in an infinite loop if we don't ignore them
                                var viewport = winUtils.getBox();
                                if(!this._oldViewport ||
                                                viewport.h != this._oldViewport.h ||
                                                viewport.w != this._oldViewport.w){
                                        this.layout();
                                        this._oldViewport = viewport;
                                }
                        })));
                        this._modalconnects.push(on(this.domNode, connect._keypress, lang.hitch(this, "_onKey")));

                        domStyle.set(this.domNode, {
                                opacity:0,
                                display:""
                        });

                        this._set("open", true);
                        this._onShow(); // lazy load trigger

                        this._size();
                        this._position();

                        // fade-in Animation object, setup below
                        var fadeIn;

                        this._fadeInDeferred = new Deferred(lang.hitch(this, function(){
                                fadeIn.stop();
                                delete this._fadeInDeferred;
                        }));

                        fadeIn = fx.fadeIn({
                                node: this.domNode,
                                duration: this.duration,
                                beforeBegin: lang.hitch(this, function(){
                                        DialogLevelManager.show(this, this.underlayAttrs);
                                }),
                                onEnd: lang.hitch(this, function(){
                                        if(this.autofocus && DialogLevelManager.isTop(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);
                                                focus.focus(this._firstFocusItem);
                                        }
                                        this._fadeInDeferred.callback(true);
                                        delete this._fadeInDeferred;
                                })
                        }).play();

                        return this._fadeInDeferred;
                },

                hide: function(){
                        // summary:
                        //              Hide the dialog
                        // returns: dojo.Deferred
                        //              Deferred object that resolves when the hide animation is complete

                        // if we haven't been initialized yet then we aren't showing and we can just return
                        if(!this._alreadyInitialized){
                                return;
                        }
                        if(this._fadeInDeferred){
                                this._fadeInDeferred.cancel();
                        }

                        // fade-in Animation object, setup below
                        var fadeOut;

                        this._fadeOutDeferred = new Deferred(lang.hitch(this, function(){
                                fadeOut.stop();
                                delete this._fadeOutDeferred;
                        }));
                        // fire onHide when the promise resolves.
                        this._fadeOutDeferred.then(lang.hitch(this, 'onHide'));

                        fadeOut = fx.fadeOut({
                                node: this.domNode,
                                duration: this.duration,
                                onEnd: lang.hitch(this, function(){
                                        this.domNode.style.display = "none";
                                        DialogLevelManager.hide(this);
                                        this._fadeOutDeferred.callback(true);
                                        delete this._fadeOutDeferred;
                                })
                         }).play();

                        if(this._scrollConnected){
                                this._scrollConnected = false;
                        }
                        var h;
                        while(h = this._modalconnects.pop()){
                                h.remove();
                        }

                        if(this._relativePosition){
                                delete this._relativePosition;
                        }
                        this._set("open", false);

                        return this._fadeOutDeferred;
                },

                layout: function(){
                        // summary:
                        //              Position the Dialog and the underlay
                        // tags:
                        //              private
                        if(this.domNode.style.display != "none"){
                                if(dijit._underlay){    // avoid race condition during show()
                                        dijit._underlay.layout();
                                }
                                this._position();
                        }
                },

                destroy: function(){
                        if(this._fadeInDeferred){
                                this._fadeInDeferred.cancel();
                        }
                        if(this._fadeOutDeferred){
                                this._fadeOutDeferred.cancel();
                        }
                        if(this._moveable){
                                this._moveable.destroy();
                        }
                        var h;
                        while(h = this._modalconnects.pop()){
                                h.remove();
                        }

                        DialogLevelManager.hide(this);

                        this.inherited(arguments);
                }
        });

        var Dialog = declare("dijit.Dialog", [ContentPane, _DialogBase], {});
        Dialog._DialogBase = _DialogBase;       // for monkey patching

        var DialogLevelManager = Dialog._DialogLevelManager = {
                // summary:
                //              Controls the various active "levels" on the page, starting with the
                //              stuff initially visible on the page (at z-index 0), and then having an entry for
                //              each Dialog shown.

                _beginZIndex: 950,

                show: function(/*dijit._Widget*/ dialog, /*Object*/ underlayAttrs){
                        // summary:
                        //              Call right before fade-in animation for new dialog.
                        //              Saves current focus, displays/adjusts underlay for new dialog,
                        //              and sets the z-index of the dialog itself.
                        //
                        //              New dialog will be displayed on top of all currently displayed dialogs.
                        //
                        //              Caller is responsible for setting focus in new dialog after the fade-in
                        //              animation completes.

                        // Save current focus
                        ds[ds.length-1].focus = focus.curNode;

                        // Display the underlay, or if already displayed then adjust for this new dialog
                        var underlay = dijit._underlay;
                        if(!underlay || underlay._destroyed){
                                underlay = dijit._underlay = new DialogUnderlay(underlayAttrs);
                        }else{
                                underlay.set(dialog.underlayAttrs);
                        }

                        // Set z-index a bit above previous dialog
                        var zIndex = ds[ds.length-1].dialog ? ds[ds.length-1].zIndex + 2 : Dialog._DialogLevelManager._beginZIndex;
                        if(ds.length == 1){     // first dialog
                                underlay.show();
                        }
                        domStyle.set(dijit._underlay.domNode, 'zIndex', zIndex - 1);

                        // Dialog
                        domStyle.set(dialog.domNode, 'zIndex', zIndex);

                        ds.push({dialog: dialog, underlayAttrs: underlayAttrs, zIndex: zIndex});
                },

                hide: function(/*dijit._Widget*/ dialog){
                        // summary:
                        //              Called when the specified dialog is hidden/destroyed, after the fade-out
                        //              animation ends, in order to reset page focus, fix the underlay, etc.
                        //              If the specified dialog isn't open then does nothing.
                        //
                        //              Caller is responsible for either setting display:none on the dialog domNode,
                        //              or calling dijit.popup.hide(), or removing it from the page DOM.

                        if(ds[ds.length-1].dialog == dialog){
                                // Removing the top (or only) dialog in the stack, return focus
                                // to previous dialog

                                ds.pop();

                                var pd = ds[ds.length-1];       // the new active dialog (or the base page itself)

                                // Adjust underlay
                                if(ds.length == 1){
                                        // Returning to original page.
                                        // Hide the underlay, unless the underlay widget has already been destroyed
                                        // because we are being called during page unload (when all widgets are destroyed)
                                        if(!dijit._underlay._destroyed){
                                                dijit._underlay.hide();
                                        }
                                }else{
                                        // Popping back to previous dialog, adjust underlay
                                        domStyle.set(dijit._underlay.domNode, 'zIndex', pd.zIndex - 1);
                                        dijit._underlay.set(pd.underlayAttrs);
                                }

                                // Adjust focus
                                if(dialog.refocus){
                                        // If we are returning control to a previous dialog but for some reason
                                        // that dialog didn't have a focused field, set focus to first focusable item.
                                        // This situation could happen if two dialogs appeared at nearly the same time,
                                        // since a dialog doesn't set it's focus until the fade-in is finished.
                                        var focus = pd.focus;
                                        if(pd.dialog && (!focus || !dom.isDescendant(focus, pd.dialog.domNode))){
                                                pd.dialog._getFocusItems(pd.dialog.domNode);
                                                focus = pd.dialog._firstFocusItem;
                                        }

                                        if(focus){
                                                focus.focus();
                                        }
                                }
                        }else{
                                // Removing a dialog out of order (#9944, #10705).
                                // Don't need to mess with underlay or z-index or anything.
                                var idx = array.indexOf(array.map(ds, function(elem){return elem.dialog}), dialog);
                                if(idx != -1){
                                        ds.splice(idx, 1);
                                }
                        }
                },

                isTop: function(/*dijit._Widget*/ dialog){
                        // summary:
                        //              Returns true if specified Dialog is the top in the task
                        return ds[ds.length-1].dialog == dialog;
                }
        };

        // Stack representing the various active "levels" on the page, starting with the
        // stuff initially visible on the page (at z-index 0), and then having an entry for
        // each Dialog shown.
        // Each element in stack has form {
        //              dialog: dialogWidget,
        //              focus: returnFromGetFocus(),
        //              underlayAttrs: attributes to set on underlay (when this widget is active)
        // }
        var ds = Dialog._dialogStack = [
                {dialog: null, focus: null, underlayAttrs: null}        // entry for stuff at z-index: 0
        ];

        // Back compat w/1.6, remove for 2.0
        if(!kernel.isAsync){
                ready(0, function(){
                        var requires = ["dijit/TooltipDialog"];
                        require(requires);      // use indirection so modules not rolled into a build
                });
        }

        return Dialog;
});