add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / Panel.js

/**\r
 * Panels are most useful as Overlays - containers that float over your application. They contain extra styling such\r
 * that when you {@link #showBy} another component, the container will appear in a rounded black box with a 'tip'\r
 * pointing to a reference component.\r
 *\r
 * If you don't need this extra functionality, you should use {@link Ext.Container} instead. See the\r
 * [Overlays example](#!/example/overlays) for more use cases.\r
 *\r
 *      @example miniphone preview\r
 *\r
 *      var button = Ext.create('Ext.Button', {\r
 *           text: 'Button',\r
 *           id: 'rightButton'\r
 *      });\r
 *\r
 *      Ext.create('Ext.Container', {\r
 *          fullscreen: true,\r
 *          items: [\r
 *              {\r
 *                   docked: 'top',\r
 *                   xtype: 'titlebar',\r
 *                   items: [\r
 *                       button\r
 *                   ]\r
 *               }\r
 *          ]\r
 *      });\r
 *\r
 *      Ext.create('Ext.Panel', {\r
 *          html: 'Floating Panel',\r
 *          left: 0,\r
 *          padding: 10\r
 *      }).showBy(button);\r
 *\r
 */\r
Ext.define('Ext.Panel', {\r
    extend: 'Ext.Container',\r
    xtype: 'panel',\r
\r
    requires: [\r
        'Ext.util.LineSegment'\r
    ],\r
\r
    alternateClassName: 'Ext.panel.Panel',\r
\r
    defaultBindProperty: 'title',\r
\r
    isPanel: true,\r
\r
    config: {\r
        baseCls: Ext.baseCSSPrefix + 'panel',\r
\r
        /**\r
         * @cfg border\r
         * @inheritdoc\r
         */\r
        border: false,\r
\r
        /**\r
         * @cfg {Number/Boolean/String} bodyPadding\r
         * A shortcut for setting a padding style on the body element. The value can either be\r
         * a number to be applied to all sides, or a normal CSS string describing padding.\r
         */\r
        bodyPadding: null,\r
\r
        /**\r
         * @cfg {Boolean} bodyBorder\r
         * - `true` to enable the border around the panel body (as defined by the theme)\r
         * Note that even when enabled, the bodyBorder is only visible when there are docked\r
         * items around the edges of the panel.  Where the bodyBorder touches the panel's outer\r
         * border it is automatically collapsed into a single border.\r
         *\r
         * - `false` to disable the body border\r
         *\r
         * - `null` - use the value of {@link #border} as the value for bodyBorder\r
         */\r
        bodyBorder: null,\r
\r
        header: null,\r
\r
        icon: null,\r
\r
        iconCls: null,\r
\r
        title: null,\r
\r
        tools: null\r
    },\r
\r
    manageBorders: true,\r
\r
    getElementConfig: function() {\r
        return {\r
            reference: 'element',\r
            classList: ['x-container', 'x-unsized'],\r
            children: [\r
                {\r
                    reference: 'innerElement',\r
                    className: 'x-inner'\r
                },\r
                {\r
                    reference: 'tipElement',\r
                    className: 'x-anchor',\r
                    hidden: true\r
                }\r
            ]\r
        };\r
    },\r
\r
    /**\r
     * Adds a CSS class to the body element. If not rendered, the class will\r
     * be added when the panel is rendered.\r
     * @param {String} cls The class to add\r
     * @return {Ext.panel.Panel} this\r
     */\r
    addBodyCls: function(cls) {\r
        this.innerElement.addCls(cls);\r
        return this;\r
    },\r
\r
    /**\r
     * Removes a CSS class from the body element.\r
     * @param {String} cls The class to remove\r
     * @return {Ext.panel.Panel} this\r
     */\r
    removeBodyCls: function(cls) {\r
        this.innerElement.removeCls(cls);\r
        return this;\r
    },\r
\r
    applyBodyPadding: function(bodyPadding) {\r
        if (bodyPadding === true) {\r
            bodyPadding = 5;\r
        }\r
\r
        if (bodyPadding) {\r
            bodyPadding = Ext.dom.Element.unitizeBox(bodyPadding);\r
        }\r
\r
        return bodyPadding;\r
    },\r
\r
    addTool: function (tool) {\r
        var header = this.ensureHeader(),  // creates if header !== false\r
            items;\r
\r
        if (header) {\r
            items = header.createTools(Ext.Array.from(tool), this);\r
\r
            if (items && items.length) {\r
                items = header.add(items);\r
            }\r
        }\r
\r
        return items;\r
    },\r
\r
    applyHeader: function (newHeader, oldHeader) {\r
        var me = this,\r
            header = oldHeader;\r
\r
        if (newHeader === false) {\r
            if (header) {\r
                me.remove(header);\r
                header = null;\r
            }\r
        } else if (newHeader) {\r
            if (header) {\r
                if (newHeader !== true) {\r
                    header.setConfig(newHeader);\r
                }\r
            } else {\r
                // add() will ensure we sort the header to the front by its "weight"\r
\r
                header = me.add(me.createHeader(newHeader));\r
            }\r
        }\r
\r
        return header || null;\r
    },\r
\r
    applyTools: function (tools) {\r
        var header = this.ensureHeader(),  // creates if header !== false\r
            items;\r
\r
        if (header) {\r
            // Remove all tools (since we are the impl of a setTools([...]) call)\r
            header.clearTools();\r
\r
            items = header.createTools(tools, this);\r
\r
            if (items && items.length) {\r
                header.add(items);\r
            }\r
        }\r
\r
        // we don't return anything since the tools are "stored" on the Header\r
    },\r
\r
    createHeader: function (config) {\r
        var me = this,\r
            ret = {\r
                xtype: 'panelheader',\r
                docked: 'top',\r
                ui: me.getUi()\r
            },\r
            icon, title;\r
\r
        if (config && config !== true) {\r
            Ext.merge(ret, config);\r
        }\r
\r
        if (me.initialized) {\r
            // Only attempt to configure title if we are not currently initializing.\r
            // During initialization the updater for title will run if present and apply\r
            // it to the header so there is no work to be done here.\r
            title = me.getTitle();\r
\r
            if (title != null) {\r
                if (typeof title === 'string') {\r
                    title = {\r
                        text: title\r
                    };\r
                }\r
\r
                Ext.merge(ret, {\r
                    title: title\r
                });\r
            }\r
\r
            icon = me.getIconCls();\r
            if (icon != null) {\r
                ret.iconCls = icon;\r
            } else {\r
                icon = me.getIcon();\r
                if (icon != null) {\r
                    ret.icon = icon;\r
                }\r
            }\r
        }\r
\r
        return ret;\r
    },\r
\r
    updateBorder: function(border, oldBorder) {\r
        this.callParent([ border, oldBorder ]);\r
\r
        if (this.getBodyBorder() === null) {\r
            this.setBodyBorderEnabled(border !== false);\r
        }\r
    },\r
\r
    updateBodyPadding: function(newBodyPadding) {\r
        this.innerElement.setStyle('padding', newBodyPadding);\r
    },\r
\r
    updateBodyBorder: function(bodyBorder) {\r
        var border = (bodyBorder === null) ? this.getBorder() : bodyBorder;\r
\r
        this.setBodyBorderEnabled(bodyBorder !== false);\r
    },\r
\r
    updateIcon: function (icon) {\r
        var header = this.ensureHeader();  // creates if header !== false\r
\r
        if (header) {\r
            header.setIcon(icon);\r
        }\r
    },\r
\r
    updateIconCls: function (icon) {\r
        var header = this.ensureHeader();  // creates if header !== false\r
\r
        if (header) {\r
            header.setIconCls(icon);\r
        }\r
    },\r
\r
    updateTitle: function (title) {\r
        var header = this.ensureHeader();  // creates if header !== false\r
\r
        if (header) {\r
            header.setTitle(title);\r
        }\r
    },\r
\r
    updateUi: function(ui, oldUi) {\r
        var me = this,\r
            suffix = 'x-panel-inner-',\r
            innerElement = me.innerElement,\r
            // Let the header initter get the ui since ui is a cached config and\r
            // should not pull in non-cached cfgs at this early stage\r
            header = !me.isConfiguring && me.ensureHeader();\r
\r
        if (oldUi) {\r
            innerElement.removeCls(suffix + oldUi);\r
        }\r
\r
        if (ui) {\r
            innerElement.addCls(suffix + ui);\r
        }\r
\r
        if (header) {\r
            me.getTitle();\r
            header.setUi(ui);\r
        }\r
\r
        me.callParent([ui, oldUi]);\r
    },\r
\r
    alignTo: function(component, alignment) {\r
        var alignmentInfo = this.getAlignmentInfo(component, alignment);\r
        if(alignmentInfo.isAligned) return;\r
        var tipElement = this.tipElement;\r
\r
        tipElement.hide();\r
\r
        if (this.currentTipPosition) {\r
            tipElement.removeCls('x-anchor-' + this.currentTipPosition);\r
        }\r
\r
        this.callParent(arguments);\r
\r
        var LineSegment = Ext.util.LineSegment,\r
            alignToElement = component.isComponent ? component.renderElement : component,\r
            element = this.renderElement,\r
            alignToBox = alignToElement.getBox(),\r
            box = element.getBox(),\r
            left = box.left,\r
            top = box.top,\r
            right = box.right,\r
            bottom = box.bottom,\r
            centerX = left + (box.width / 2),\r
            centerY = top + (box.height / 2),\r
            leftTopPoint = { x: left, y: top },\r
            rightTopPoint = { x: right, y: top },\r
            leftBottomPoint = { x: left, y: bottom },\r
            rightBottomPoint = { x: right, y: bottom },\r
            boxCenterPoint = { x: centerX, y: centerY },\r
            alignToCenterX = alignToBox.left + (alignToBox.width / 2),\r
            alignToCenterY = alignToBox.top + (alignToBox.height / 2),\r
            alignToBoxCenterPoint = { x: alignToCenterX, y: alignToCenterY },\r
            centerLineSegment = new LineSegment(boxCenterPoint, alignToBoxCenterPoint),\r
            offsetLeft = 0,\r
            offsetTop = 0,\r
            tipSize, tipWidth, tipHeight, tipPosition, tipX, tipY;\r
\r
        tipElement.setVisibility(false);\r
        tipElement.show();\r
        tipSize = tipElement.getSize();\r
        tipWidth = tipSize.width;\r
        tipHeight = tipSize.height;\r
\r
        if (centerLineSegment.intersects(new LineSegment(leftTopPoint, rightTopPoint))) {\r
            tipX = Math.min(Math.max(alignToCenterX, left + tipWidth), right - (tipWidth));\r
            tipY = top;\r
            offsetTop = tipHeight + 10;\r
            tipPosition = 'top';\r
        }\r
        else if (centerLineSegment.intersects(new LineSegment(leftTopPoint, leftBottomPoint))) {\r
            tipX = left;\r
            tipY = Math.min(Math.max(alignToCenterY + (tipWidth / 2), tipWidth * 1.6), bottom - (tipWidth / 2.2));\r
            offsetLeft = tipHeight + 10;\r
            tipPosition = 'left';\r
        }\r
        else if (centerLineSegment.intersects(new LineSegment(leftBottomPoint, rightBottomPoint))) {\r
            tipX = Math.min(Math.max(alignToCenterX, left + tipWidth), right - tipWidth);\r
            tipY = bottom;\r
            offsetTop = -tipHeight - 10;\r
            tipPosition = 'bottom';\r
        }\r
        else if (centerLineSegment.intersects(new LineSegment(rightTopPoint, rightBottomPoint))) {\r
            tipX = right;\r
            tipY = Math.max(Math.min(alignToCenterY - tipHeight, bottom - tipWidth * 1.3), tipWidth / 2);\r
            offsetLeft = -tipHeight - 10;\r
            tipPosition = 'right';\r
        }\r
\r
        if (tipX || tipY) {\r
            this.currentTipPosition = tipPosition;\r
            tipElement.addCls('x-anchor-' + tipPosition);\r
            tipElement.setLeft(tipX - left);\r
            tipElement.setTop(tipY - top);\r
            tipElement.setVisibility(true);\r
\r
            this.setLeft(this.getLeft() + offsetLeft);\r
            this.setTop(this.getTop() + offsetTop);\r
        }\r
    },\r
\r
    privates: {\r
        ensureHeader: function () {\r
            var me = this,\r
                header;\r
\r
            me.getViewModel();\r
            me.getItems();\r
\r
            header = me.getHeader();\r
\r
            if (!header && header !== false) {\r
                me.setHeader(true);\r
                header = me.getHeader();\r
            }\r
\r
            return header;\r
        },\r
\r
        setBodyBorderEnabled: function(enabled) {\r
            this.innerElement.setStyle('border-width', enabled ? '' : '0');\r
        }\r
    }\r
});\r