107 lines
3 KiB
JavaScript
107 lines
3 KiB
JavaScript
|
dojo.provide("dijit.DialogUnderlay");
|
||
|
|
|
||
|
|
dojo.require("dijit._Widget");
|
||
|
|
dojo.require("dijit._Templated");
|
||
|
|
|
||
|
|
dojo.declare(
|
||
|
|
"dijit.DialogUnderlay",
|
||
|
|
[dijit._Widget, dijit._Templated],
|
||
|
|
{
|
||
|
|
// 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' dojoAttachPoint='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": "",
|
||
|
|
|
||
|
|
attributeMap: { id: "domNode" },
|
||
|
|
|
||
|
|
_setDialogIdAttr: function(id){
|
||
|
|
dojo.attr(this.node, "id", id + "_underlay");
|
||
|
|
},
|
||
|
|
|
||
|
|
_setClassAttr: function(clazz){
|
||
|
|
this.node.className = "dijitDialogUnderlay " + clazz;
|
||
|
|
},
|
||
|
|
|
||
|
|
postCreate: function(){
|
||
|
|
// summary:
|
||
|
|
// Append the underlay to the body
|
||
|
|
dojo.body().appendChild(this.domNode);
|
||
|
|
this.bgIframe = new dijit.BackgroundIframe(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 = dijit.getViewport();
|
||
|
|
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();
|
||
|
|
if(this.bgIframe.iframe){
|
||
|
|
this.bgIframe.iframe.style.display = "block";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function(){
|
||
|
|
// summary:
|
||
|
|
// Hides the dialog underlay
|
||
|
|
this.domNode.style.display = "none";
|
||
|
|
if(this.bgIframe.iframe){
|
||
|
|
this.bgIframe.iframe.style.display = "none";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
uninitialize: function(){
|
||
|
|
if(this.bgIframe){
|
||
|
|
this.bgIframe.destroy();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|