lib/dijit/DialogUnderlay.js.uncompressed.js

   1 define("dijit/DialogUnderlay", [
   2         "dojo/_base/declare", // declare
   3         "dojo/dom-attr", // domAttr.set
   4         "dojo/_base/window", // win.body
   5         "dojo/window", // winUtils.getBox
   6         "./_Widget",
   7         "./_TemplatedMixin",
   8         "./BackgroundIframe"
   9 ], function(declare, domAttr, win, winUtils, _Widget, _TemplatedMixin, BackgroundIframe){
  10
  11 /*=====
  12         var _Widget = dijit._Widget;
  13         var _TemplatedMixin = dijit._TemplatedMixin;
  14 =====*/
  15
  16         // module:
  17         //              dijit/DialogUnderlay
  18         // summary:
  19         //              The component that blocks the screen behind a `dijit.Dialog`
  20
  21         return declare("dijit.DialogUnderlay", [_Widget, _TemplatedMixin], {
  22                 // summary:
  23                 //              The component that blocks the screen behind a `dijit.Dialog`
  24                 //
  25                 // description:
  26                 //              A component used to block input behind a `dijit.Dialog`. Only a single
  27                 //              instance of this widget is created by `dijit.Dialog`, and saved as
  28                 //              a reference to be shared between all Dialogs as `dijit._underlay`
  29                 //
  30                 //              The underlay itself can be styled based on and id:
  31                 //      |       #myDialog_underlay { background-color:red; }
  32                 //
  33                 //              In the case of `dijit.Dialog`, this id is based on the id of the Dialog,
  34                 //              suffixed with _underlay.
  35
  36                 // Template has two divs; outer div is used for fade-in/fade-out, and also to hold background iframe.
  37                 // Inner div has opacity specified in CSS file.
  38                 templateString: "<div class='dijitDialogUnderlayWrapper'><div class='dijitDialogUnderlay' data-dojo-attach-point='node'></div></div>",
  39
  40                 // Parameters on creation or updatable later
  41
  42                 // dialogId: String
  43                 //              Id of the dialog.... DialogUnderlay's id is based on this id
  44                 dialogId: "",
  45
  46                 // class: String
  47                 //              This class name is used on the DialogUnderlay node, in addition to dijitDialogUnderlay
  48                 "class": "",
  49
  50                 _setDialogIdAttr: function(id){
  51                         domAttr.set(this.node, "id", id + "_underlay");
  52                         this._set("dialogId", id);
  53                 },
  54
  55                 _setClassAttr: function(clazz){
  56                         this.node.className = "dijitDialogUnderlay " + clazz;
  57                         this._set("class", clazz);
  58                 },
  59
  60                 postCreate: function(){
  61                         // summary:
  62                         //              Append the underlay to the body
  63                         win.body().appendChild(this.domNode);
  64                 },
  65
  66                 layout: function(){
  67                         // summary:
  68                         //              Sets the background to the size of the viewport
  69                         //
  70                         // description:
  71                         //              Sets the background to the size of the viewport (rather than the size
  72                         //              of the document) since we need to cover the whole browser window, even
  73                         //              if the document is only a few lines long.
  74                         // tags:
  75                         //              private
  76
  77                         var is = this.node.style,
  78                                 os = this.domNode.style;
  79
  80                         // hide the background temporarily, so that the background itself isn't
  81                         // causing scrollbars to appear (might happen when user shrinks browser
  82                         // window and then we are called to resize)
  83                         os.display = "none";
  84
  85                         // then resize and show
  86                         var viewport = winUtils.getBox();
  87                         os.top = viewport.t + "px";
  88                         os.left = viewport.l + "px";
  89                         is.width = viewport.w + "px";
  90                         is.height = viewport.h + "px";
  91                         os.display = "block";
  92                 },
  93
  94                 show: function(){
  95                         // summary:
  96                         //              Show the dialog underlay
  97                         this.domNode.style.display = "block";
  98                         this.layout();
  99                         this.bgIframe = new BackgroundIframe(this.domNode);
 100                 },
 101
 102                 hide: function(){
 103                         // summary:
 104                         //              Hides the dialog underlay
 105                         this.bgIframe.destroy();
 106                         delete this.bgIframe;
 107                         this.domNode.style.display = "none";
 108                 }
 109         });
 110 });