add extjs 6.0.1 sources

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

/**\r
 * SegmentedButton is a container for a group of {@link Ext.Button}s. Generally a SegmentedButton would be\r
 * a child of a {@link Ext.Toolbar} and would be used to switch between different views.\r
 *\r
 * ## Example usage:\r
 *\r
 *     @example\r
 *     var segmentedButton = Ext.create('Ext.SegmentedButton', {\r
 *         allowMultiple: true,\r
 *         items: [\r
 *             {\r
 *                 text: 'Option 1'\r
 *             },\r
 *             {\r
 *                 text: 'Option 2',\r
 *                 pressed: true\r
 *             },\r
 *             {\r
 *                 text: 'Option 3'\r
 *             }\r
 *         ],\r
 *         listeners: {\r
 *             toggle: function(container, button, pressed){\r
 *                 alert("User toggled the '" + button.getText() + "' button: " + (pressed ? 'on' : 'off'));\r
 *             }\r
 *         }\r
 *     });\r
 *     Ext.Viewport.add({ xtype: 'container', padding: 10, items: [segmentedButton] });\r
 */\r
Ext.define('Ext.SegmentedButton', {\r
    extend: 'Ext.Container',\r
    xtype : 'segmentedbutton',\r
\r
    alternateClassName: 'Ext.button.Segmented',\r
\r
    requires: [\r
        'Ext.Button'\r
    ],\r
\r
    isSegmentedButton: true,\r
\r
    config: {\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        baseCls: Ext.baseCSSPrefix + 'segmentedbutton',\r
\r
        /**\r
         * @cfg {String} pressedCls\r
         * CSS class when a button is in pressed state.\r
         * @accessor\r
         */\r
        pressedCls: Ext.baseCSSPrefix + 'button-pressed',\r
\r
        /**\r
         * @cfg {Boolean} allowMultiple\r
         * Allow multiple pressed buttons.\r
         * @accessor\r
         */\r
        allowMultiple: false,\r
\r
        /**\r
         * @cfg {Boolean} allowDepress\r
         * Allow toggling the pressed state of each button.\r
         * Defaults to `true` when {@link #allowMultiple} is `true`.\r
         * @accessor\r
         */\r
        allowDepress: false,\r
\r
        /**\r
         * @cfg {Boolean} allowToggle Allow child buttons to be pressed when tapped on. Set to `false` to allow tapping but not toggling of the buttons.\r
         * @accessor\r
         */\r
        allowToggle: true,\r
\r
        /**\r
         * @cfg {Array} pressedButtons\r
         * The pressed buttons for this segmented button.\r
         *\r
         * You can remove all pressed buttons by calling {@link #setPressedButtons} with an empty array.\r
         * @accessor\r
         */\r
        pressedButtons: [],\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        layout: {\r
            type : 'hbox',\r
            align: 'stretch'\r
        },\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        defaultType: 'button',\r
\r
        /**\r
         * @cfg {String}\r
         * Default {@link Ext.Component#ui ui} to use for buttons in this segmented button.\r
         * Buttons can override this default by specifying their own UI\r
         */\r
        defaultUI: null\r
    },\r
\r
    /**\r
     * @event toggle\r
     * Fires when any child button's pressed state has changed.\r
     * @param {Ext.SegmentedButton} this\r
     * @param {Ext.Button} button The toggled button.\r
     * @param {Boolean} isPressed Boolean to indicate if the button was pressed or not.\r
     */\r
\r
    initialize: function() {\r
        var me = this;\r
\r
        me.callParent();\r
\r
        me.on({\r
            delegate: '> button',\r
            scope   : me,\r
            tap: 'onButtonRelease'\r
        });\r
\r
        me.onAfter({\r
            delegate: '> button',\r
            scope   : me,\r
            hide: 'onButtonHiddenChange',\r
            show: 'onButtonHiddenChange'\r
        });\r
    },\r
\r
    updateAllowMultiple: function(allowMultiple) {\r
        if (!this.initialized && !this.getInitialConfig().hasOwnProperty('allowDepress') && allowMultiple) {\r
            this.setAllowDepress(true);\r
        }\r
    },\r
\r
    /**\r
     * We override `initItems` so we can check for the pressed config.\r
     */\r
    applyItems: function() {\r
        var me = this,\r
            pressedButtons = [],\r
            ln, i, item, items;\r
\r
        //call the parent first so the items get converted into a MixedCollection\r
        me.callParent(arguments);\r
\r
        items = this.getItems();\r
        ln = items.length;\r
\r
        for (i = 0; i < ln; i++) {\r
            item = items.items[i];\r
            if (item.getInitialConfig('pressed')) {\r
                pressedButtons.push(items.items[i]);\r
            }\r
        }\r
\r
        me.updateFirstAndLastCls(items);\r
\r
        me.setPressedButtons(pressedButtons);\r
    },\r
\r
    /**\r
     * Button sets a timeout of 10ms to remove the {@link #pressedCls} on the release event.\r
     * We don't want this to happen, so lets return `false` and cancel the event.\r
     * @private\r
     */\r
    onButtonRelease: function(button) {\r
        if (!this.getAllowToggle()) {\r
            return;\r
        }\r
        var me             = this,\r
            pressedButtons = me.getPressedButtons() || [],\r
            buttons        = [],\r
            alreadyPressed;\r
\r
        if (!me.getDisabled() && !button.getDisabled()) {\r
            //if we allow for multiple pressed buttons, use the existing pressed buttons\r
            if (me.getAllowMultiple()) {\r
                buttons = pressedButtons.concat(buttons);\r
            }\r
\r
            alreadyPressed = (buttons.indexOf(button) !== -1) || (pressedButtons.indexOf(button) !== -1);\r
\r
            //if we allow for depressing buttons, and the new pressed button is currently pressed, remove it\r
            if (alreadyPressed && me.getAllowDepress()) {\r
                Ext.Array.remove(buttons, button);\r
            } else if (!alreadyPressed || !me.getAllowDepress()) {\r
                buttons.push(button);\r
            }\r
\r
            me.setPressedButtons(buttons);\r
        }\r
    },\r
\r
    onItemAdd: function() {\r
        this.callParent(arguments);\r
        this.updateFirstAndLastCls(this.getItems());\r
    },\r
\r
    onItemRemove: function() {\r
        this.callParent(arguments);\r
        this.updateFirstAndLastCls(this.getItems());\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onButtonHiddenChange: function() {\r
        this.updateFirstAndLastCls(this.getItems());\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateFirstAndLastCls: function(items) {\r
        var ln = items.length,\r
            basePrefix = Ext.baseCSSPrefix,\r
            firstCls = basePrefix + 'first',\r
            lastCls = basePrefix + 'last',\r
            item, i;\r
\r
        //remove all existing classes\r
        for (i = 0; i < ln; i++) {\r
            item = items.items[i];\r
            item.removeCls(firstCls);\r
            item.removeCls(lastCls);\r
        }\r
\r
        //add a first cls to the first non-hidden button\r
        for (i = 0; i < ln; i++) {\r
            item = items.items[i];\r
            if (!item.isHidden()) {\r
                item.addCls(firstCls);\r
                break;\r
            }\r
        }\r
\r
        //add a last cls to the last non-hidden button\r
        for (i = ln - 1; i >= 0; i--) {\r
            item = items.items[i];\r
            if (!item.isHidden()) {\r
                item.addCls(lastCls);\r
                break;\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    applyPressedButtons: function(newButtons) {\r
        var me    = this,\r
            array = [],\r
            button, ln, i;\r
\r
        if (me.getAllowToggle()) {\r
            if (Ext.isArray(newButtons)) {\r
                ln = newButtons.length;\r
                for (i = 0; i< ln; i++) {\r
                    button = me.getComponent(newButtons[i]);\r
                    if (button && array.indexOf(button) === -1) {\r
                        array.push(button);\r
                    }\r
                }\r
            } else {\r
                button = me.getComponent(newButtons);\r
                if (button && array.indexOf(button) === -1) {\r
                    array.push(button);\r
                }\r
            }\r
        }\r
\r
        return array;\r
    },\r
\r
    /**\r
     * Updates the pressed buttons.\r
     * @private\r
     */\r
    updatePressedButtons: function(newButtons, oldButtons) {\r
        var me    = this,\r
            items = me.getItems(),\r
            pressedCls = me.getPressedCls(),\r
            events = [],\r
            item, button, ln, i, e;\r
\r
        //loop through existing items and remove the pressed cls from them\r
        ln = items.length;\r
        if (oldButtons && oldButtons.length) {\r
            for (i = 0; i < ln; i++) {\r
                item = items.items[i];\r
\r
                if (oldButtons.indexOf(item) != -1 && newButtons.indexOf(item) == -1) {\r
                    item.removeCls([pressedCls, item.getPressedCls()]);\r
                    events.push({\r
                        item: item,\r
                        toggle: false\r
                    });\r
                }\r
            }\r
        }\r
\r
        //loop through the new pressed buttons and add the pressed cls to them\r
        ln = newButtons.length;\r
        for (i = 0; i < ln; i++) {\r
            button = newButtons[i];\r
            if (!oldButtons || oldButtons.indexOf(button) == -1) {\r
                button.addCls(pressedCls);\r
                events.push({\r
                    item: button,\r
                    toggle: true\r
                });\r
            }\r
        }\r
\r
        //loop through each of the events and fire them after a delay\r
        ln = events.length;\r
        if (ln && oldButtons !== undefined) {\r
            Ext.defer(function() {\r
                for (i = 0; i < ln; i++) {\r
                    e = events[i];\r
                    me.fireEvent('toggle', me, e.item, e.toggle);\r
                }\r
            }, 50);\r
        }\r
    },\r
\r
    setPressed: function(button, pressed) {\r
        var pressedButtons = this.getPressedButtons().slice();\r
        if (pressed)  {\r
            Ext.Array.include(pressedButtons, button);\r
        } else {\r
            Ext.Array.remove(pressedButtons, button);\r
        }\r
        this.setPressedButtons(pressedButtons);\r
    },\r
\r
    /**\r
     * Returns `true` if a specified {@link Ext.Button} is pressed.\r
     * @param {Ext.Button} button The button to check if pressed.\r
     * @return {Boolean} pressed\r
     */\r
    isPressed: function(button) {\r
        var pressedButtons = this.getPressedButtons();\r
        return pressedButtons.indexOf(button) !== -1;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateDisabled: function(disabled) {\r
        var me = this;\r
\r
        me.items.each(function(item) {\r
            item.setDisabled(disabled);\r
        }, me);\r
\r
        me.callParent(arguments);\r
    },\r
\r
    setValue: function(value) {\r
        this.setPressedButtons([this.items.getAt(value)]);\r
    },\r
\r
    getValue: function() {\r
        var buttons = this.getPressedButtons(),\r
            out = -1;\r
\r
        if (buttons.length) {\r
            out = this.items.indexOf(buttons[0]);\r
        }\r
        return out;\r
    },\r
\r
    updateDefaultUI: function(defaultUI) {\r
        var items = this.items && this.items.items,\r
            len = items.length,\r
            i, item;\r
\r
        for (i = 0; i < len; i++) {\r
            item = items[i];\r
            if (item.getUi() == null) {\r
                item.setUi(defaultUI);\r
            }\r
        }\r
\r
    },\r
\r
    doAdd: function(item, instanced) {\r
        var defaultUI = this.getDefaultUI();\r
\r
        if (defaultUI && (item.getUi() == null)) {\r
            item.setUi(defaultUI);\r
        }\r
        this.callParent([item, instanced]);\r
    }\r
});\r