source: Dev/branches/rest-dojo-ui/client/dijit/DialogUnderlay.js @ 274

define([
        "dojo/_base/declare", // declare
        "dojo/dom-attr", // domAttr.set
        "dojo/_base/window", // win.body
        "dojo/window", // winUtils.getBox
        "./_Widget",
        "./_TemplatedMixin",
        "./BackgroundIframe"
], function(declare, domAttr, win, winUtils, _Widget, _TemplatedMixin, BackgroundIframe){

/*=====
        var _Widget = dijit._Widget;
        var _TemplatedMixin = dijit._TemplatedMixin;
=====*/

        // module:
        //              dijit/DialogUnderlay
        // summary:
        //              The component that blocks the screen behind a `dijit.Dialog`

        return declare("dijit.DialogUnderlay", [_Widget, _TemplatedMixin], {
                // summary:
                //              The component that blocks the screen behind a `dijit.Dialog`
                //
                // description:
                //              A component used to block input behind a `dijit.Dialog`. Only a single
                //              instance of this widget is created by `dijit.Dialog`, and saved as
                //              a reference to be shared between all Dialogs as `dijit._underlay`
                //
                //              The underlay itself can be styled based on and id:
                //      |       #myDialog_underlay { background-color:red; }
                //
                //              In the case of `dijit.Dialog`, this id is based on the id of the Dialog,
                //              suffixed with _underlay.

                // 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'><div class='dijitDialogUnderlay' data-dojo-attach-point='node'></div></div>",

                // Parameters on creation or updatable later

                // dialogId: String
                //              Id of the dialog.... DialogUnderlay's id is based on this id
                dialogId: "",

                // class: String
                //              This class name is used on the DialogUnderlay node, in addition to dijitDialogUnderlay
                "class": "",

                _setDialogIdAttr: function(id){
                        domAttr.set(this.node, "id", id + "_underlay");
                        this._set("dialogId", id);
                },

                _setClassAttr: function(clazz){
                        this.node.className = "dijitDialogUnderlay " + clazz;
                        this._set("class", clazz);
                },

                postCreate: function(){
                        // summary:
                        //              Append the underlay to the body
                        win.body().appendChild(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.
                        // tags:
                        //              private

                        var is = this.node.style,
                                os = this.domNode.style;

                        // hide the background temporarily, so that the background itself isn't
                        // causing scrollbars to appear (might happen when user shrinks browser
                        // window and then we are called to resize)
                        os.display = "none";

                        // then resize and show
                        var viewport = winUtils.getBox();
                        os.top = viewport.t + "px";
                        os.left = viewport.l + "px";
                        is.width = viewport.w + "px";
                        is.height = viewport.h + "px";
                        os.display = "block";
                },

                show: function(){
                        // summary:
                        //              Show the dialog underlay
                        this.domNode.style.display = "block";
                        this.layout();
                        this.bgIframe = new BackgroundIframe(this.domNode);
                },

                hide: function(){
                        // summary:
                        //              Hides the dialog underlay
                        this.bgIframe.destroy();
                        delete this.bgIframe;
                        this.domNode.style.display = "none";
                }
        });
});