/** An enhanced popup with built-in scrim and z-index handling. To avoid obscuring popup contents, scrims require the dialog to be floating; otherwise, they won't render. Modal popups get a transparent scrim by default, unless the modal popup isn't floating. To get a translucent scrim when modal, specify _scrim: true, scrimWhenModal: false_. */ enyo.kind({ name: "onyx.Popup", kind: "Popup", classes: "onyx-popup", published: { /** Determines whether a scrim will appear when the dialog is modal. Note that modal scrims are transparent, so you won't see them. */ scrimWhenModal: true, //* Determines whether or not to display a scrim. Only displays scrims //* when floating. scrim: false, /** Optional class name to apply to the scrim. Be aware that the scrim is a singleton and you will be modifying the scrim instance used for other popups. */ scrimClassName: "" }, //* @protected statics: { count: 0 }, defaultZ: 120, showingChanged: function() { if(this.showing) { onyx.Popup.count++; this.applyZIndex(); } else { if(onyx.Popup.count > 0) { onyx.Popup.count--; } } this.showHideScrim(this.showing); this.inherited(arguments); }, showHideScrim: function(inShow) { if (this.floating && (this.scrim || (this.modal && this.scrimWhenModal))) { var scrim = this.getScrim(); if (inShow) { // move scrim to just under the popup to obscure rest of screen var i = this.getScrimZIndex(); this._scrimZ = i; scrim.showAtZIndex(i); } else { scrim.hideAtZIndex(this._scrimZ); } enyo.call(scrim, "addRemoveClass", [this.scrimClassName, scrim.showing]); } }, getScrimZIndex: function() { // Position scrim directly below popup return this.findZIndex()-1; }, getScrim: function() { // show a transparent scrim for modal popups if scrimWhenModal is true // if scrim is true, then show a regular scrim. if (this.modal && this.scrimWhenModal && !this.scrim) { return onyx.scrimTransparent.make(); } return onyx.scrim.make(); }, applyZIndex: function() { // Adjust the zIndex so that popups will properly stack on each other. this._zIndex = onyx.Popup.count * 2 + this.findZIndex() + 1; // leave room for scrim this.applyStyle("z-index", this._zIndex); }, findZIndex: function() { // a default z value var z = this.defaultZ; if (this._zIndex) { z = this._zIndex; } else if (this.hasNode()) { // Re-use existing zIndex if it has one z = Number(enyo.dom.getComputedStyleValue(this.node, "z-index")) || z; } return (this._zIndex = z); } });