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