/** @module delite/DialogUnderlay */
define([
"./register",
"./Widget",
"./BackgroundIframe",
"./Viewport",
"./theme!./DialogUnderlay/themes/{{theme}}/DialogUnderlay.css"
], function (register, Widget, BackgroundIframe, Viewport) {
// TODO: having show() methods on the instance and also on the module is confusing,
// at least when looking at the API doc page. Should one be renamed?
/**
* A component used to block input behind a Dialog widget.
*
* Normally this widget 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 the Dialog.
*
* @class module:delite/DialogUnderlay
*/
var DialogUnderlay = register("d-dialog-underlay", [HTMLElement, Widget],
/** @lends module:delite/DialogUnderlay# */ {
// 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: [],
render: function () {
// Outer div is used for fade-in/fade-out, and also to hold background iframe.
// Inner div has opacity specified in CSS file.
this.className = "d-dialog-underlay";
},
postRender: function () {
// Append the underlay to the body
this.ownerDocument.body.appendChild(this);
},
/**
* 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.
* @private
*/
layout: function () {
var s = this.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)
s.display = "none";
// then resize and show
// could alternately use $(window).scrollTop() and $(window).height(), etc.
var html = this.ownerDocument.documentElement;
s.width = html.clientWidth + "px";
s.height = html.clientHeight + "px";
s.display = "";
},
/**
* Show the dialog underlay (instance method).
*/
show: function () {
if (!this._open) {
this.style.display = "block";
this._open = true;
this.layout();
this.bgIframe = new BackgroundIframe(this);
this._modalConnects = [
Viewport.on("resize", function () { this.layout(); }.bind(this))
];
}
},
/**
* Hide the dialog underlay (instance method).
*/
hide: function () {
if (this._open) {
this.bgIframe.destroy();
delete this.bgIframe;
this.style.display = "none";
while (this._modalConnects.length) {
(this._modalConnects.pop()).remove();
}
this._open = false;
}
},
destroy: function () {
while (this._modalConnects.length) {
(this._modalConnects.pop()).remove();
}
}
});
/**
* Static method to display the underlay with the given attributes set. If the underlay is already displayed,
* then adjust it's attributes as specified.
* @memberof module:delite/DialogUnderlay
* @param {Object} attrs - The parameters to create DialogUnderlay with.
* @param {number} zIndex - z-index of the underlay.
*/
DialogUnderlay.show = function (attrs, zIndex) {
var underlay = DialogUnderlay._singleton;
if (!underlay || underlay._destroyed) {
underlay = DialogUnderlay._singleton = new DialogUnderlay(attrs);
} else {
if (attrs) {
underlay.mix(attrs);
}
}
underlay.style.zIndex = zIndex;
underlay.show();
};
/**
* Static method to hide the underlay.
* @memberof module:delite/DialogUnderlay
*/
DialogUnderlay.hide = function () {
// 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;
});