add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / resizer / Splitter.js

/**\r
 * This class functions **between siblings of a {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox}\r
 * layout** to resize both immediate siblings.\r
 *\r
 * A Splitter will preserve the flex ratio of any flexed siblings it is required to resize. It does this by setting the `flex` property of *all* flexed siblings\r
 * to equal their pixel size. The actual numerical `flex` property in the Components will change, but the **ratio** to the total flex value will be preserved.\r
 *\r
 * A Splitter may be configured to show a centered mini-collapse tool orientated to collapse the {@link #collapseTarget}.\r
 * The Splitter will then call that sibling Panel's {@link Ext.panel.Panel#method-collapse collapse} or {@link Ext.panel.Panel#method-expand expand} method\r
 * to perform the appropriate operation (depending on the sibling collapse state). To create the mini-collapse tool but take care\r
 * of collapsing yourself, configure the splitter with `{@link #performCollapse}: false`.\r
 */\r
Ext.define('Ext.resizer.Splitter', {\r
    extend: 'Ext.Component',\r
    requires: ['Ext.XTemplate'],\r
    uses: ['Ext.resizer.SplitterTracker'],\r
    xtype: 'splitter',\r
\r
    childEls: [\r
        'collapseEl'\r
    ],\r
\r
    renderTpl: [\r
        '<tpl if="collapsible===true">',\r
            '<div id="{id}-collapseEl" data-ref="collapseEl" role="presentation" class="', Ext.baseCSSPrefix, 'collapse-el ',\r
                Ext.baseCSSPrefix, 'layout-split-{collapseDir}{childElCls}">',\r
            '</div>',\r
        '</tpl>'\r
    ],\r
\r
    isSplitter: true,\r
\r
    baseCls: Ext.baseCSSPrefix + 'splitter',\r
    collapsedClsInternal: Ext.baseCSSPrefix + 'splitter-collapsed',\r
    \r
    // Default to tree, allow internal classes to disable resizing\r
    canResize: true,\r
\r
    /**\r
     * @cfg {Boolean} [collapsible]\r
     * True to show a mini-collapse tool in the Splitter to toggle expand and collapse on the {@link #collapseTarget} Panel.\r
     * Defaults to the {@link Ext.panel.Panel#collapsible collapsible} setting of the Panel.\r
     */\r
    collapsible: null,\r
\r
    /**\r
     * @cfg {Boolean} performCollapse\r
     * Set to false to prevent this Splitter's mini-collapse tool from managing the collapse\r
     * state of the {@link #collapseTarget}.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} collapseOnDblClick\r
     * True to enable dblclick to toggle expand and collapse on the {@link #collapseTarget} Panel.\r
     */\r
    collapseOnDblClick: true,\r
\r
    /**\r
     * @cfg {Number} defaultSplitMin\r
     * Provides a default minimum width or height for the two components\r
     * that the splitter is between.\r
     */\r
    defaultSplitMin: 40,\r
\r
    /**\r
     * @cfg {Number} defaultSplitMax\r
     * Provides a default maximum width or height for the two components\r
     * that the splitter is between.\r
     */\r
    defaultSplitMax: 1000,\r
\r
    /**\r
     * @cfg {String} collapsedCls\r
     * A class to add to the splitter when it is collapsed. See {@link #collapsible}.\r
     */\r
\r
    /**\r
     * @cfg {String/Ext.panel.Panel} collapseTarget\r
     * A string describing the relative position of the immediate sibling Panel to collapse. May be 'prev' or 'next'.\r
     *\r
     * Or the immediate sibling Panel to collapse.\r
     *\r
     * The orientation of the mini-collapse tool will be inferred from this setting.\r
     *\r
     * **Note that only Panels may be collapsed.**\r
     */\r
    collapseTarget: 'next',\r
\r
    /**\r
     * @property {String} orientation\r
     * Orientation of this Splitter. `'vertical'` when used in an hbox layout, `'horizontal'`\r
     * when used in a vbox layout.\r
     */\r
\r
    horizontal: false,\r
    vertical: false,\r
\r
    /**\r
     * @cfg {Number} size\r
     * The size of the splitter. This becomes the height for vertical splitters and \r
     * width for horizontal splitters.\r
     */\r
    size: 5,\r
    \r
    /**\r
     * @cfg {Object} [tracker]\r
     * Any configuration options to be passed to the underlying {@link Ext.resizer.SplitterTracker}.\r
     */\r
    tracker: null,\r
    \r
    ariaRole: 'separator',\r
    \r
    focusable: true,\r
    \r
    tabIndex: 0,\r
\r
    /**\r
     * Returns the config object (with an `xclass` property) for the splitter tracker. This\r
     * is overridden by {@link Ext.resizer.BorderSplitter BorderSplitter} to create a\r
     * {@link Ext.resizer.BorderSplitterTracker BorderSplitterTracker}.\r
     * @protected\r
     */\r
    getTrackerConfig: function () {\r
        return Ext.apply({\r
            xclass: 'Ext.resizer.SplitterTracker',\r
            el: this.el,\r
            splitter: this\r
        }, this.tracker);\r
    },\r
\r
    beforeRender: function() {\r
        var me = this,\r
            target = me.getCollapseTarget(),\r
            collapsible = me.collapsible,\r
            ariaAttr;\r
\r
        me.callParent();\r
\r
        if (target.collapsed) {\r
            me.addCls(me.collapsedClsInternal);\r
        }\r
        if (!me.canResize) {\r
            me.addCls(me.baseCls + '-noresize');\r
        }\r
\r
        Ext.applyIf(me.renderData, {\r
            collapseDir: me.getCollapseDirection(),\r
            collapsible: (collapsible !== null) ? collapsible : target.collapsible\r
        });\r
        \r
        me.ariaRenderAttributes = me.ariaRenderAttributes || {};\r
        \r
        // Calling getCollapseDirection() above will set the orientation property\r
        me.ariaRenderAttributes['aria-orientation'] = me.orientation;\r
\r
        me.protoEl.unselectable();\r
    },\r
\r
    onRender: function() {\r
        var me = this,\r
            collapseEl;\r
\r
        me.callParent(arguments);\r
\r
        // Add listeners on the mini-collapse tool unless performCollapse is set to false\r
        if (me.performCollapse !== false) {\r
            if (me.renderData.collapsible) {\r
                me.mon(me.collapseEl, 'click', me.toggleTargetCmp, me);\r
            }\r
            if (me.collapseOnDblClick) {\r
                me.mon(me.el, 'dblclick', me.toggleTargetCmp, me);\r
            }\r
        }\r
\r
        // Ensure the mini collapse icon is set to the correct direction when the target is collapsed/expanded by any means\r
        me.getCollapseTarget().on({\r
            collapse: me.onTargetCollapse,\r
            expand: me.onTargetExpand,\r
            beforeexpand: me.onBeforeTargetExpand,\r
            beforecollapse: me.onBeforeTargetCollapse,\r
            scope: me\r
        });\r
\r
        if (me.canResize) {\r
            me.tracker = Ext.create(me.getTrackerConfig());\r
            // Relay the most important events to our owner (could open wider later):\r
            me.relayEvents(me.tracker, [ 'beforedragstart', 'dragstart', 'dragend' ]);\r
        }\r
\r
        collapseEl = me.collapseEl;\r
        if (collapseEl) {\r
            collapseEl.lastCollapseDirCls = me.collapseDirProps[me.collapseDirection].cls;\r
        }\r
    },\r
\r
    getCollapseDirection: function() {\r
        var me = this,\r
            dir = me.collapseDirection,\r
            collapseTarget, idx, items, type;\r
\r
        if (!dir) {\r
            collapseTarget = me.collapseTarget;\r
            if (collapseTarget.isComponent) {\r
                dir = collapseTarget.collapseDirection;\r
            }\r
\r
            if (!dir) {\r
                // Avoid duplication of string tests.\r
                // Create a two bit truth table of the configuration of the Splitter:\r
                // Collapse Target | orientation\r
                //        0              0             = next, horizontal\r
                //        0              1             = next, vertical\r
                //        1              0             = prev, horizontal\r
                //        1              1             = prev, vertical\r
                type = me.ownerCt.layout.type;\r
                if (collapseTarget.isComponent) {\r
                    items = me.ownerCt.items;\r
                    idx = Number(items.indexOf(collapseTarget) === items.indexOf(me) - 1) << 1 | Number(type === 'hbox');\r
                } else {\r
                    idx = Number(me.collapseTarget === 'prev') << 1 | Number(type === 'hbox');\r
                }\r
\r
                // Read the data out the truth table\r
                dir = ['bottom', 'right', 'top', 'left'][idx];\r
            }\r
\r
            me.collapseDirection = dir;\r
        }\r
\r
        me.setOrientation((dir === 'top' || dir === 'bottom') ? 'horizontal' : 'vertical');\r
\r
        return dir;\r
    },\r
\r
    getCollapseTarget: function() {\r
        var me = this;\r
\r
        return me.collapseTarget.isComponent ? me.collapseTarget\r
                    : me.collapseTarget === 'prev' ? me.previousSibling() : me.nextSibling();\r
    },\r
    \r
    setCollapseEl: function(display){\r
        var el = this.collapseEl;\r
        if (el) {\r
            el.setDisplayed(display);\r
        }\r
    },\r
    \r
    onBeforeTargetExpand: function(target) {\r
        this.setCollapseEl('none');\r
    },\r
    \r
    onBeforeTargetCollapse: function(){\r
        this.setCollapseEl('none');\r
    },\r
\r
    onTargetCollapse: function(target) {\r
        var me = this;\r
\r
        // Only add the collapsed class if the collapse was from our target (not bubbled from below as in a Dashboard Column)\r
        // and was in the dimension which this Splitter controls.\r
        if (target === me.getCollapseTarget() && target[me.orientation === 'vertical' ? 'collapsedHorizontal' : 'collapsedVertical']()) {\r
            me.el.addCls(me.collapsedClsInternal + ' ' + (me.collapsedCls || ''));\r
        }\r
        me.setCollapseEl('');\r
    },\r
\r
    onTargetExpand: function(target) {\r
        var me = this;\r
        \r
        me.el.removeCls(me.collapsedClsInternal + ' ' + (me.collapsedCls || ''));\r
        me.setCollapseEl('');\r
    },\r
\r
    collapseDirProps: {\r
        top: {\r
            cls: Ext.baseCSSPrefix + 'layout-split-top'\r
        },\r
        right: {\r
            cls: Ext.baseCSSPrefix + 'layout-split-right'\r
        },\r
        bottom: {\r
            cls: Ext.baseCSSPrefix + 'layout-split-bottom'\r
        },\r
        left: {\r
            cls: Ext.baseCSSPrefix + 'layout-split-left'\r
        }\r
    },\r
\r
    orientationProps: {\r
        horizontal: {\r
            opposite: 'vertical',\r
            fixedAxis: 'height',\r
            stretchedAxis: 'width'\r
        },\r
        vertical: {\r
            opposite: 'horizontal',\r
            fixedAxis: 'width',\r
            stretchedAxis: 'height'\r
        }\r
    },\r
\r
    applyCollapseDirection: function () {\r
        var me = this,\r
            collapseEl = me.collapseEl,\r
            collapseDirProps = me.collapseDirProps[me.collapseDirection],\r
            cls;\r
\r
        if (collapseEl) {\r
            cls = collapseEl.lastCollapseDirCls;\r
            if (cls) {\r
                collapseEl.removeCls(cls);\r
            }\r
\r
            collapseEl.addCls(collapseEl.lastCollapseDirCls = collapseDirProps.cls);\r
        }\r
    },\r
\r
    applyOrientation: function () {\r
        var me = this,\r
            orientation = me.orientation,\r
            orientationProps = me.orientationProps[orientation],\r
            defaultSize = me.size,\r
            fixedSizeProp = orientationProps.fixedAxis,\r
            stretchSizeProp = orientationProps.stretchedAxis,\r
            cls = me.baseCls + '-';\r
\r
        me[orientation] = true;\r
        me[orientationProps.opposite] = false;\r
\r
        if (!me.hasOwnProperty(fixedSizeProp) || me[fixedSizeProp] === '100%') {\r
            me[fixedSizeProp] = defaultSize;\r
        }\r
        if (!me.hasOwnProperty(stretchSizeProp) || me[stretchSizeProp] === defaultSize) {\r
            me[stretchSizeProp] = '100%';\r
        }\r
\r
        me.removeCls(cls + orientationProps.opposite);\r
        me.addCls(cls + orientation);\r
    },\r
\r
    setOrientation: function (orientation) {\r
        var me = this;\r
\r
        if (me.orientation !== orientation) {\r
            me.orientation = orientation;\r
            me.applyOrientation();\r
        }\r
    },\r
    \r
    updateOrientation: function () {\r
        delete this.collapseDirection; // recompute\r
        this.getCollapseDirection();\r
        this.applyCollapseDirection();\r
    },\r
\r
    toggleTargetCmp: function(e, t) {\r
        var cmp = this.getCollapseTarget(),\r
            placeholder = cmp.placeholder,\r
            toggle;\r
\r
        // We can only toggle the target if it offers the expand/collapse API\r
        if (Ext.isFunction(cmp.expand) && Ext.isFunction(cmp.collapse)) {\r
            if (placeholder && !placeholder.hidden) {\r
                toggle = true;\r
            } else {\r
                toggle = !cmp.hidden;\r
            }\r
\r
            if (toggle) {\r
                if (cmp.collapsed) {\r
                    cmp.expand();\r
                } else if (cmp.collapseDirection) {\r
                    cmp.collapse();\r
                } else {\r
                    cmp.collapse(this.renderData.collapseDir);\r
                }\r
            }\r
        }\r
    },\r
\r
    /*\r
     * Work around IE bug. %age margins do not get recalculated on element resize unless repaint called.\r
     */\r
    setSize: function() {\r
        var me = this;\r
        me.callParent(arguments);\r
        if (Ext.isIE && me.el) {\r
            me.el.repaint();\r
        }\r
    },\r
    \r
    beforeDestroy: function(){\r
        Ext.destroy(this.tracker);\r
        this.callParent();\r
    }\r
});\r