forked from dojo/dijit-oldmirror
-
Notifications
You must be signed in to change notification settings - Fork 1
/
DialogUnderlay.js
186 lines (157 loc) · 5.85 KB
/
DialogUnderlay.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
define([
"dojo/_base/declare", // declare
"dojo/_base/lang", // lang.hitch
"dojo/aspect", // aspect.after
"dojo/dom-attr", // domAttr.set
"dojo/dom-construct",
"dojo/dom-style", // domStyle.getComputedStyle
"dojo/on",
"dojo/_base/window",
"dojo/window", // winUtils.getBox, winUtils.get
"./_WidgetBase",
"./_TemplatedMixin",
"./BackgroundIframe",
"./Viewport",
"./main" // for back-compat, exporting dijit._underlay (remove in 2.0)
], function(declare, lang, aspect, domAttr, domConstruct, domStyle, on,
win, winUtils, _WidgetBase, _TemplatedMixin, BackgroundIframe, Viewport, dijit){
// module:
// dijit/DialogUnderlay
var DialogUnderlay = declare("dijit.DialogUnderlay", [_WidgetBase, _TemplatedMixin], {
// summary:
// A component used to block input behind a `dijit/Dialog`.
//
// Normally this class should not be instantiated directly, but rather shown and hidden via
// DialogUnderlay.show() and DialogUnderlay.hide(). And usually the module is not accessed directly
// at all, since the underlay is shown and hidden by Dialog.DialogLevelManager.
//
// 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' tabIndex='0' 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": "",
// This will get overwritten as soon as show() is call, but leave an empty array in case hide() or destroy()
// is called first. The array is shared between instances but that's OK because we never write into it.
_modalConnects: [],
_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
this.inherited(arguments);
// Place myself as the first child of <body> so that I get focus if the user tabs in from the URL bar
domConstruct.place(this.domNode, this.ownerDocumentBody, "first");
// If user clicks the underlay, or tabs into it from the URL bar, then focus the top level Dialog.
// But be careful to ignore bubbled focus events from focus on menus, etc.
this.own(
on(this.node, "click, focus", lang.hitch(this, function(evt){
if(evt.target == this.node){
this.onFocus();
}
}))
);
},
onFocus: function(){
// Called when underlay is focused or clicked. Override to get notification
},
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(this.ownerDocument);
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.open = true;
this.layout();
this.bgIframe = new BackgroundIframe(this.domNode);
var win = winUtils.get(this.ownerDocument);
this._modalConnects = [
Viewport.on("resize", lang.hitch(this, "layout")),
on(win, "scroll", lang.hitch(this, "layout"))
];
},
hide: function(){
// summary:
// Hides the dialog underlay
this.bgIframe.destroy();
delete this.bgIframe;
this.domNode.style.display = "none";
while(this._modalConnects.length){ (this._modalConnects.pop()).remove(); }
this.open = false;
},
destroy: function(){
while(this._modalConnects.length){ (this._modalConnects.pop()).remove(); }
this.inherited(arguments);
}
});
DialogUnderlay.show = function(/*Object*/ attrs, /*Number*/ zIndex, /*Function?*/ onFocus){
// summary:
// Display the underlay with the given attributes set. If the underlay is already displayed,
// then adjust it's attributes as specified.
// attrs:
// The parameters to create DialogUnderlay with.
// zIndex:
// zIndex of the underlay
// onFocus:
// Function to call if the underlay is clicked or focused
var underlay = DialogUnderlay._singleton;
if(!underlay || underlay._destroyed){
underlay = dijit._underlay = DialogUnderlay._singleton = new DialogUnderlay(attrs);
}else{
if(attrs){ underlay.set(attrs); }
}
domStyle.set(underlay.domNode, 'zIndex', zIndex);
if(!underlay.open){
underlay.show();
}
underlay.onFocus = onFocus || function(){};
};
DialogUnderlay.hide = function(){
// summary:
// Hide the underlay.
// Guard code in case the underlay widget has already been destroyed
// because we are being called during page unload (when all widgets are destroyed)
var underlay = DialogUnderlay._singleton;
if(underlay && !underlay._destroyed){
underlay.hide();
}
};
return DialogUnderlay;
});