add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / panel / Title.js

/**\r
 * A basic title component for a Panel Header\r
 */\r
Ext.define('Ext.panel.Title', {\r
    extend: 'Ext.Component',\r
    xtype: 'title',\r
\r
    isTitle: true,\r
    \r
    // layout system optimization.  Allows autocomponent layout to measure height without\r
    // having to first know the width.\r
    noWrap: true,\r
\r
    // For performance reasons we give the following configs their default values on\r
    // the class body.  This prevents the updaters from running on initialization in the\r
    // default configuration scenario\r
    textAlign: 'left',\r
    iconAlign: 'left',\r
    rotation: 0,\r
    text: ' ',\r
\r
    beforeRenderConfig: {\r
        /**\r
         * @cfg [textAlign='left']\r
         * @inheritdoc Ext.panel.Header#cfg-titleAlign\r
         * @accessor\r
         */\r
        textAlign: null,\r
\r
        /**\r
         * @cfg {String}\r
         * The title's text (can contain html tags/entities)\r
         * @accessor\r
         */\r
        text: null,\r
\r
        /**\r
         * @cfg glyph\r
         * @inheritdoc Ext.panel.Header#cfg-glyph\r
         * @accessor\r
         */\r
        glyph: null,\r
\r
        /**\r
         * @cfg icon\r
         * @inheritdoc Ext.panel.Header#cfg-icon\r
         * @accessor\r
         */\r
        icon: null,\r
\r
        /**\r
         * @cfg {'top'/'right'/'bottom'/'left'} [iconAlign='left']\r
         * alignment of the icon\r
         * @accessor\r
         */\r
        iconAlign: null,\r
\r
        /**\r
         * @cfg iconCls\r
         * @inheritdoc Ext.panel.Header#cfg-iconCls\r
         * @accessor\r
         */\r
        iconCls: null,\r
        \r
        /**\r
         * @cfg rotation\r
         * @inheritdoc Ext.panel.Header#cfg-titleRotation\r
         * @accessor\r
         */\r
        rotation: null\r
    },\r
\r
    autoEl: {\r
        role: 'presentation',\r
        // Required for Opera\r
        unselectable: 'on'\r
    },\r
    \r
    // In most cases the panel header title is purely presentational\r
    // and does not have any structural significance wrt Assistive Technologies.\r
    // The only exception is when the panel participates in Accordion layout;\r
    // in that case the title component has the role of 'tab' and its textEl\r
    // should not have any role to expose the text as the tab's accessible name.\r
    // Header component is aware of this participation and will reset textElRole.\r
    textElRole: 'presentation',\r
    \r
    // By default, panel title is not focusable; this only happens in Accordion layout.\r
    // This config option is overridable, and it will prime tabIndex to be used\r
    // without hardcoding it.\r
    tabIndex: 0,\r
\r
    childEls: [\r
        'textEl',\r
        'iconEl',\r
        'iconWrapEl'\r
    ],\r
\r
    renderTpl:\r
        '<tpl if="iconMarkup && iconBeforeTitle">{iconMarkup}</tpl>' +\r
        // unselectable="on" is required for Opera, other browsers\r
        // inherit unselectability from the header\r
        '<div id="{id}-textEl" data-ref="textEl"' +\r
            ' class="{textCls} {textCls}-{ui} {itemCls}{childElCls}" unselectable="on"' +\r
            '<tpl if="textElRole"> role="{textElRole}"</tpl>' +\r
        '>' +\r
            '{text}' +\r
        '</div>' +\r
        '<tpl if="iconMarkup && !iconBeforeTitle">{iconMarkup}</tpl>',\r
\r
    iconTpl:\r
        '<div id="{id}-iconWrapEl" data-ref="iconWrapEl" role="presentation" ' +\r
                'class="{iconWrapCls} {iconWrapCls}-{ui} {iconAlignCls} {itemCls}{childElCls}"' +\r
                '<tpl if="iconWrapStyle"> style="{iconWrapStyle}"</tpl>>' +\r
            '<div id="{id}-iconEl" data-ref="iconEl" role="presentation" unselectable="on" ' +\r
                        'class="{baseIconCls} {baseIconCls}-{ui} {iconCls} {glyphCls}" style="' +\r
                '<tpl if="iconUrl">background-image:url({iconUrl});</tpl>' +\r
                '<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">' +\r
                '<tpl if="glyph">&#{glyph};</tpl>' +\r
            '</div>' +\r
        '</div>',\r
\r
    _textAlignClasses: {\r
        left: Ext.baseCSSPrefix + 'title-align-left',\r
        center: Ext.baseCSSPrefix + 'title-align-center',\r
        right: Ext.baseCSSPrefix + 'title-align-right'\r
    },\r
\r
    _iconAlignClasses: {\r
        top: Ext.baseCSSPrefix + 'title-icon-top',\r
        right: Ext.baseCSSPrefix + 'title-icon-right',\r
        bottom: Ext.baseCSSPrefix + 'title-icon-bottom',\r
        left: Ext.baseCSSPrefix + 'title-icon-left'\r
    },\r
\r
    _rotationClasses: {\r
        0: Ext.baseCSSPrefix + 'title-rotate-none',\r
        1: Ext.baseCSSPrefix + 'title-rotate-right',\r
        2: Ext.baseCSSPrefix + 'title-rotate-left'\r
    },\r
\r
    _rotationAngles: {\r
        1: 90,\r
        2: 270\r
    },\r
\r
    baseCls: Ext.baseCSSPrefix + 'title',\r
    _titleSuffix: '-title',\r
    _glyphCls: Ext.baseCSSPrefix + 'title-glyph',\r
    _iconWrapCls: Ext.baseCSSPrefix + 'title-icon-wrap',\r
    _baseIconCls: Ext.baseCSSPrefix + 'title-icon',\r
    _itemCls: Ext.baseCSSPrefix + 'title-item',\r
    _textCls: Ext.baseCSSPrefix + 'title-text',\r
\r
    afterComponentLayout: function() {\r
        var me = this,\r
            rotation = me.getRotation(),\r
            lastBox, lastX, el;\r
\r
        if (rotation && !Ext.isIE8) {\r
            // In IE8  we use a BasicImage filter to rotate the title\r
            // element 90 degrees.  The result is that what was the bottom left\r
            // corner is positioned exactly where the top left corner was\r
            // originally.  Since this is the desired result, no additional\r
            // positioning is needed in IE8.  In browsers that support CSS3 transform,\r
            // however, we use transform: rotate(90deg) to rotate the element.\r
            // CSS3 also provides a way to specify the position the rotated element\r
            // by changing the axis on which it is rotated using the transform-origin\r
            // property, but the required transform origin varies based on the\r
            // elements size, and would require some complex math to calculate.\r
            // To achieve the desired rotated position in modern browsers we use\r
            // a transform-origin of "0, 0" which means the top left corner of\r
            // the element is the rotation axis. After rotating 90 degrees we\r
            // simply move the element to the right by the same number of pixels\r
            // as its width.\r
            el = me.el;\r
            lastBox = me.lastBox;\r
            lastX = lastBox.x;\r
            el.setStyle(\r
                me._getVerticalAdjustDirection(),\r
                (lastX + ((rotation === 1) ? lastBox.width : -lastBox.height)) + 'px'\r
            );\r
        }\r
        this.callParent();\r
    },\r
\r
    onRender: function() {\r
        var me = this,\r
            rotation = me.getRotation(),\r
            el = me.el;\r
        \r
        me.callParent();\r
        \r
        if (rotation) {\r
            el.setVertical(me._rotationAngles[rotation]);\r
        }\r
\r
        if (Ext.supports.FixedTableWidthBug) {\r
            // Workaround for https://bugs.webkit.org/show_bug.cgi?id=130239 and\r
            // https://code.google.com/p/chromium/issues/detail?id=377190\r
            // See styleHooks for more details\r
            el._needsTableWidthFix = true;\r
        }\r
    },\r
\r
    applyText: function(text) {\r
        if (!text) {\r
            text = '&#160;';\r
        }\r
        return text;\r
    },\r
    \r
    beforeRender: function() {\r
        var me = this;\r
        \r
        me.callParent();\r
        \r
        me.addCls(me._rotationClasses[me.getRotation()]);\r
        me.addCls(me._textAlignClasses[me.getTextAlign()]);\r
    },\r
\r
    getIconMarkup: function() {\r
        return this.getTpl('iconTpl').apply(this.getIconRenderData());\r
    },\r
\r
    getIconRenderData: function() {\r
        var me = this,\r
            icon = me.getIcon(),\r
            iconCls = me.getIconCls(),\r
            glyph = me.getGlyph(),\r
            glyphFontFamily = Ext._glyphFontFamily,\r
            iconAlign = me.getIconAlign(),\r
            glyphParts;\r
\r
\r
        if (typeof glyph === 'string') {\r
            glyphParts = glyph.split('@');\r
            glyph = glyphParts[0];\r
            glyphFontFamily = glyphParts[1];\r
        }\r
\r
        return {\r
            id: me.id,\r
            ui: me.ui,\r
            itemCls: me._itemCls,\r
            iconUrl: icon,\r
            iconCls: iconCls,\r
            iconWrapCls: me._iconWrapCls,\r
            baseIconCls: me._baseIconCls,\r
            iconAlignCls: me._iconAlignClasses[iconAlign],\r
            glyph: glyph,\r
            glyphCls: glyph ? me._glyphCls : '',\r
            glyphFontFamily: glyphFontFamily\r
        };\r
    },\r
\r
    initRenderData: function() {\r
        var me = this,\r
            iconAlign, renderData;\r
\r
        renderData = Ext.apply({\r
            text: me.getText(),\r
            textElRole: me.textElRole,\r
            id: me.id,\r
            ui: me.ui,\r
            itemCls: me._itemCls,\r
            textCls: me._textCls,\r
            iconMarkup: null,\r
            iconBeforeTitle: null\r
        }, me.callParent());\r
\r
        if (me._hasIcon()) {\r
            iconAlign = me.getIconAlign();\r
            renderData.iconMarkup = me.getIconMarkup();\r
            renderData.iconBeforeTitle = (iconAlign === 'top' || iconAlign === 'left');\r
        }\r
        \r
        return renderData;\r
    },\r
    \r
    onAdded: function(container, pos, instanced) {\r
        var me = this,\r
            suffix = me._titleSuffix,\r
            baseCls = container.baseCls;\r
\r
        me.addCls([\r
            baseCls + suffix,\r
            baseCls + suffix + '-' + container.ui\r
        ]);\r
        \r
        me.callParent([container, pos, instanced]);\r
    },\r
\r
    updateGlyph: function(glyph, oldGlyph) {\r
        glyph = glyph || 0;\r
        var me = this,\r
            glyphCls = me._glyphCls,\r
            iconEl, fontFamily, glyphParts;\r
\r
        me.glyph = glyph;\r
\r
        if (me.rendered) {\r
            me._syncIconVisibility();\r
            iconEl = me.iconEl;\r
            \r
            if (typeof glyph === 'string') {\r
                glyphParts = glyph.split('@');\r
                glyph = glyphParts[0];\r
                fontFamily = glyphParts[1] || Ext._glyphFontFamily;\r
            }\r
\r
            if (!glyph) {\r
                iconEl.dom.innerHTML = '';\r
                iconEl.removeCls(glyphCls);\r
            } else if (oldGlyph !== glyph) {\r
                iconEl.dom.innerHTML = '&#' + glyph + ';';\r
                iconEl.addCls(glyphCls);\r
            }\r
\r
            if (fontFamily) {\r
                iconEl.setStyle('font-family', fontFamily);\r
            }\r
            if (me._didIconStateChange(oldGlyph, glyph)) {\r
                me.updateLayout();\r
            }\r
        }\r
    },\r
\r
    updateIcon: function(icon, oldIcon) {\r
        icon = icon || '';\r
        var me = this,\r
            iconEl;\r
\r
        if (me.rendered && icon !== oldIcon) {\r
            me._syncIconVisibility();\r
            iconEl = me.iconEl;\r
            \r
            iconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');\r
            if (me._didIconStateChange(oldIcon, icon)) {\r
                me.updateLayout();\r
            }\r
        }\r
    },\r
\r
    updateIconAlign: function(align, oldAlign) {\r
        var me = this,\r
            iconWrapEl = me.iconWrapEl,\r
            el, iconAlignClasses;\r
\r
        if (me.iconWrapEl) {\r
            el = me.el;\r
            iconAlignClasses = me._iconAlignClasses;\r
\r
            if (oldAlign) {\r
                iconWrapEl.removeCls(iconAlignClasses[oldAlign]);\r
            }\r
            iconWrapEl.addCls(iconAlignClasses[align]);\r
\r
            // here we move the iconWrap to the correct position in the dom - before the\r
            // title el for top/left alignments, and after the title el for right/bottom\r
            if (align === 'top' || align === 'left') {\r
                el.insertFirst(iconWrapEl);\r
            } else {\r
                el.appendChild(iconWrapEl);\r
            }\r
            \r
            me.updateLayout();\r
        }\r
    },\r
\r
    updateIconCls: function(cls, oldCls) {\r
        cls = cls || '';\r
        var me = this,\r
            iconEl;\r
\r
        if (me.rendered && oldCls !== cls) {\r
            me._syncIconVisibility();\r
            iconEl = me.iconEl;\r
            \r
            if (oldCls) {\r
                iconEl.removeCls(oldCls);\r
            }\r
            iconEl.addCls(cls);\r
            if (me._didIconStateChange(oldCls, cls)) {\r
                me.updateLayout();\r
            }\r
        }\r
    },\r
\r
    updateRotation: function(rotation, oldRotation) {\r
        var me = this,\r
            el, rotationClasses;\r
       \r
        if (me.rendered) {\r
            el = me.el;\r
            rotationClasses = me._rotationClasses;\r
            \r
            me.removeCls(rotationClasses[oldRotation]);\r
            me.addCls(rotationClasses[rotation]);\r
\r
            el.setHorizontal();\r
            if (rotation) {\r
                el.setVertical(me._rotationAngles[rotation]);\r
            }\r
    \r
            // reset styles set by adjustTitlePosition (handles both rtl/ltr), and sizing\r
            // set by last layout run (this prevents parallel size from becoming perpendicular\r
            // size after rotation)\r
            el.setStyle({\r
                right: '',\r
                left: '',\r
                top: '',\r
                height: '',\r
                width: ''\r
            });\r
    \r
            me.lastBox = null;\r
\r
            me.updateLayout();\r
        }\r
    },\r
\r
    updateText: function(text) {\r
        if (this.rendered) {\r
            this.textEl.setHtml(text);\r
            this.updateLayout();\r
        }\r
    },\r
\r
    updateTextAlign: function(align, oldAlign) {\r
        var me = this,\r
            textAlignClasses = me._textAlignClasses;\r
        \r
        if (me.rendered) {\r
            if (oldAlign) {\r
                me.removeCls(textAlignClasses[oldAlign]);\r
            }\r
            me.addCls(textAlignClasses[align]);\r
\r
            me.updateLayout();\r
        }\r
    },\r
\r
    privates: {\r
        // rtl hook\r
        _getVerticalAdjustDirection: function() {\r
            return 'left';\r
        },\r
\r
        _didIconStateChange: function(old, current) {\r
            var currentEmpty = Ext.isEmpty(current);\r
            return Ext.isEmpty(old) ? !currentEmpty : currentEmpty;\r
        },\r
\r
        _hasIcon: function() {\r
            return !!(this.getIcon() || this.getIconCls() || this.getGlyph());\r
        },\r
\r
        _syncIconVisibility: function() {\r
            var me = this,\r
                el = me.el,\r
                hasIcon = me._hasIcon(),\r
                iconWrapEl = me.iconWrapEl,\r
                isBefore, iconAlign;\r
            \r
            if (hasIcon && !iconWrapEl) {\r
                // if an icon was configured, but we have not yet rendered an icon\r
                // element, we need to render it now.\r
                iconAlign = me.iconAlign;\r
                isBefore = (iconAlign === 'left' || iconAlign === 'top');\r
                \r
                el.dom.insertAdjacentHTML(\r
                    isBefore ? 'afterbegin' : 'beforeend',\r
                    me.getIconMarkup()\r
                );\r
            \r
                iconWrapEl = me.iconWrapEl = el[isBefore ? 'first' : 'last']();\r
                me.iconEl = iconWrapEl.first();\r
            }\r
\r
            if (iconWrapEl) {\r
                iconWrapEl.setDisplayed(hasIcon);\r
            }\r
        }\r
    }\r
});\r