add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / dom / Layer.js

/**\r
 * An extended {@link Ext.dom.Element} object that supports a shadow and shim\r
 *\r
 * @deprecated 5.1.0 Ext.dom.Element now includes support for shadow and shim\r
 * see {@link Ext.dom.Element#enableShadow enableShadow} and\r
 * {@link Ext.dom.Element#enableShim enableShim}\r
 */\r
Ext.define('Ext.dom.Layer', {\r
    extend: 'Ext.Element',\r
    alternateClassName: 'Ext.Layer',\r
\r
    /**\r
     * @cfg {String/Boolean} [shadow=false]\r
     * True to automatically create an {@link Ext.Shadow}, or a string indicating the\r
     * shadow's display {@link Ext.Shadow#mode}. False to disable the shadow.\r
     */\r
\r
    /**\r
     * @cfg {String/Boolean} [shim=false]\r
     * True to automatically create a {@link Ext.dom.Shim}.\r
     */\r
\r
    /**\r
     * @cfg {Object} [dh={tag: 'div', cls: 'x-layer'}]\r
     * DomHelper object config to create element with.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [constrain=true]\r
     * False to disable constrain to viewport.\r
     */\r
\r
    /**\r
     * @cfg {String} cls\r
     * CSS class to add to the element\r
     */\r
\r
    /**\r
     * @cfg {Number} [zindex=11000]\r
     * Starting z-index.\r
     */\r
\r
    /**\r
     * @cfg {Number} [shadowOffset=4]\r
     * Number of pixels to offset the shadow\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [useDisplay=false]\r
     * Defaults to use css offsets to hide the Layer. Specify <tt>true</tt>\r
     * to use css style <tt>'display:none;'</tt> to hide the Layer.\r
     */\r
\r
    /**\r
     * @cfg {String} visibilityCls\r
     * The CSS class name to add in order to hide this Layer if this layer\r
     * is configured with <code>{@link #hideMode}: 'asclass'</code>\r
     */\r
\r
    /**\r
     * @cfg {String} hideMode\r
     * A String which specifies how this Layer will be hidden.\r
     * Values may be:\r
     *\r
     * - `'display'` : The Component will be hidden using the `display: none` style.\r
     * - `'visibility'` : The Component will be hidden using the `visibility: hidden` style.\r
     * - `'offsets'` : The Component will be hidden by absolutely positioning it out of the visible area\r
     *   of the document. This is useful when a hidden Component must maintain measurable dimensions.\r
     *   Hiding using `display` results in a Component having zero dimensions.\r
     */\r
\r
    isLayer: true,\r
\r
    /**\r
     * Creates new Layer.\r
     * @param {Object} [config] An object with config options.\r
     * @param {String/HTMLElement} [existingEl] Uses an existing DOM element.\r
     * If the element is not found it creates it.\r
     */\r
    constructor: function(config, existingEl) {\r
        config = config || {};\r
        var me = this,\r
            dh = Ext.DomHelper,\r
            cp = config.parentEl,\r
            pel = cp ? Ext.getDom(cp) : document.body,\r
            hm = config.hideMode,\r
            cls = Ext.baseCSSPrefix + (config.fixed ? 'fixed-layer' : 'layer'),\r
            dom, id, element, shadowConfig;\r
\r
        if (existingEl) {\r
            dom = Ext.getDom(existingEl);\r
            if (!dom.parentNode) {\r
                pel.appendChild(dom);\r
            }\r
        }\r
\r
        if (!dom) {\r
            dom = dh.append(pel, config.dh || {\r
                tag: 'div',\r
                cls: cls // primarily to give el 'position:absolute' or, if fixed, 'position:fixed'\r
            });\r
        }\r
\r
        if (config.id) {\r
            dom.id = config.id;\r
        }\r
        id = dom.id;\r
\r
        if (id) {\r
            element = Ext.cache[id];\r
            if (element) {\r
                // if we have an existing Ext.Element in the cache for this same dom\r
                // element, delete it, so that it can be replaced by this layer instance\r
                // when we callParent below.\r
                delete Ext.cache[id];\r
                element.dom = null;\r
            }\r
        }\r
        this.callParent([dom]);\r
\r
        if (existingEl) {\r
            me.addCls(cls);\r
        }\r
\r
        if (config.preventSync) {\r
            me.preventSync = true;\r
        }\r
\r
        if (config.cls) {\r
            me.addCls(config.cls);\r
        }\r
        me.constrain = config.constrain !== false;\r
\r
        // Allow Components to pass their hide mode down to the Layer if they are floating.\r
        // Otherwise, allow useDisplay to override the default hiding method which is visibility.\r
        // TODO: Have ExtJS's Element implement visibilityMode by using classes as in Mobile.\r
        if (hm) {\r
            me.setVisibilityMode(Ext.Element[hm.toUpperCase()]);\r
        } else if (config.useDisplay) {\r
            me.setVisibilityMode(Ext.Element.DISPLAY);\r
        } else {\r
            me.setVisibilityMode(Ext.Element.VISIBILITY);\r
        }\r
\r
        if (config.shadow) {\r
            me.shadowOffset = config.shadowOffset || 4;\r
            shadowConfig = {\r
                offset: me.shadowOffset,\r
                fixed: config.fixed\r
            };\r
\r
            if (config.shadow !== true) {\r
                shadowConfig.mode = config.shadow;\r
            }\r
\r
            me.enableShadow(shadowConfig);\r
        } else {\r
            me.shadowOffset = 0;\r
        }\r
\r
        if (config.shim) {\r
            me.enableShim({\r
                fixed: config.fixed\r
            });\r
        }\r
\r
        // Keep the following only for cases where Ext.Layer would be instantiated\r
        // directly.  We don't ever pass hidden in the config in the framework\r
        // since this is handled by the Component lifecycle.\r
        if (config.hidden === true) {\r
            me.hide();\r
        } else if (config.hidden === false) {\r
            me.show();\r
        }\r
    }\r
});\r