add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / button / Segmented.js

/**\r
 * SegmentedButton is a container for a group of {@link Ext.button.Button Button}s.  You \r
 * may populate the segmented button's children by adding buttons to the items config.  The segmented \r
 * button's children enjoy the same customizations as regular buttons, such as \r
 * menu, tooltip, etc.  You can see usages of the various configuration\r
 * possibilities in the example below.\r
 *\r
 *     @example @preview \r
 *     Ext.create('Ext.button.Segmented', {            \r
 *          renderTo: Ext.getBody(),\r
 *          allowMultiple: true,\r
 *          items: [{\r
 *               text: 'Segment Item 1',\r
 *               menu: [{\r
 *                   text: 'Menu Item 1'\r
 *               }]\r
 *          },{\r
 *               text: 'Segment Item 2',\r
 *               tooltip: 'My custom tooltip'\r
 *          },{\r
 *               text: 'Segment Item 3'\r
 *          }],\r
 *          listeners: {\r
 *               toggle: function(container, button, pressed) {\r
 *                    console.log("User toggled the '" + button.text + "' button: " + (pressed ? 'on' : 'off'));\r
 *               }\r
 *          }\r
 *     });\r
 * \r
 */\r
Ext.define('Ext.button.Segmented', {\r
    extend: 'Ext.container.Container',\r
    xtype: 'segmentedbutton',\r
    requires: [ \r
        'Ext.button.Button',\r
        'Ext.layout.container.SegmentedButton'\r
    ],\r
\r
    config: {\r
        /**\r
         * @cfg {Boolean}\r
         * Allow toggling the pressed state of each button.\r
         * Only applicable when {@link #allowMultiple} is `false`.\r
         */\r
        allowDepress: false,\r
\r
        /**\r
         * @cfg {Boolean}\r
         * Allow multiple pressed buttons.\r
         */\r
        allowMultiple: false,\r
\r
        /**\r
         * @cfg {Boolean}\r
         * If {@link #allowMultiple} is `true`, this config may be set to `true` to indicate that at least\r
         * one button in the set must remain pressed at all times.\r
         *\r
         * If no {@link #value} is configured, and no child buttons are configured `pressed`, the first child\r
         * button is set `pressed: true`\r
         */\r
        forceSelection: false,\r
\r
        /**\r
         * @cfg {Boolean}\r
         * True to enable pressed/not pressed toggling.\r
         */\r
        allowToggle: true,\r
\r
        /**\r
         * @cfg {Boolean}\r
         * True to align the buttons vertically\r
         */\r
        vertical: false,\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: 'default'\r
    },\r
\r
    beforeRenderConfig: {\r
        /**\r
         * @cfg {String/Number/String[]/Number[]}\r
         * @accessor\r
         * The value of this button.  When {@link #allowMultiple} is `false`, value is a\r
         * String or Number.  When {@link #allowMultiple is `true`, value is an array\r
         * of values.  A value corresponds to a child button's {@link Ext.button.Button#value\r
         * value}, or its index if no child button values match the given value.\r
         *\r
         * Using the `value` config of the child buttons with single toggle:\r
         *\r
         *     @example\r
         *     var button = Ext.create('Ext.button.Segmented', {\r
         *         renderTo: Ext.getBody(),\r
         *         value: 'optTwo', // begin with "Option Two" selected\r
         *         items: [{\r
         *             text: 'Option One',\r
         *             value: 'optOne'\r
         *         }, {\r
         *             text: 'Option Two',\r
         *             value: 'optTwo'\r
         *         }, {\r
         *             text: 'Option Three',\r
         *             value:  'optThree'\r
         *         }]\r
         *     });\r
         *\r
         *     console.log(button.getValue()); // optTwo\r
         *\r
         *     // Sets the value to optOne, and sets the pressed state of the "Option One" button\r
         *     button.setValue('optOne');\r
         *\r
         *     console.log(button.getValue()); // optOne\r
         *\r
         * Using multiple toggle, and index-based values:\r
         *\r
         *     @example\r
         *     var button = Ext.create('Ext.button.Segmented', {\r
         *         renderTo: Ext.getBody(),\r
         *         allowMultiple: true\r
         *         value: [1, 2], // begin with "Option Two" and "Option Three" selected\r
         *         items: [{\r
         *             text: 'Option One'\r
         *         }, {\r
         *             text: 'Option Two'\r
         *         }, {\r
         *             text: 'Option Three'\r
         *         }]\r
         *     });\r
         *\r
         *     // Sets value to [0, 2], and sets pressed state of "Option One" and "Option Three"\r
         *     button.setValue([0, 2]);\r
         *\r
         *     console.log(button.getValue()); // [0, 2]\r
         *\r
         *     // Remove all pressed buttons, and set value to null\r
         *     button.setValue(null);\r
         */\r
        value: undefined\r
    },\r
\r
    /**\r
     * @inheritdoc\r
     */\r
    defaultBindProperty: 'value',\r
\r
    publishes: ['value'],\r
    twoWayBindable: ['value'],\r
\r
    layout: 'segmentedbutton',\r
    defaultType: 'button',\r
    maskOnDisable: false,\r
    isSegmentedButton: true,\r
\r
    baseCls: Ext.baseCSSPrefix + 'segmented-button',\r
    itemCls: Ext.baseCSSPrefix + 'segmented-button-item',\r
\r
    /**\r
     * @private\r
     */\r
    _firstCls: Ext.baseCSSPrefix + 'segmented-button-first',\r
\r
    /**\r
     * @private\r
     */\r
    _lastCls: Ext.baseCSSPrefix + 'segmented-button-last',\r
\r
    /**\r
     * @private\r
     */\r
    _middleCls: Ext.baseCSSPrefix + 'segmented-button-middle',\r
\r
    /**\r
     * @event toggle\r
     * Fires when any child button's pressed state has changed.\r
     * @param {Ext.button.Segmented} this\r
     * @param {Ext.button.Button} button The toggled button.\r
     * @param {Boolean} isPressed `true` to indicate if the button was pressed.\r
     */\r
\r
    /**\r
     * @event change\r
     * Fires when any child button's pressed state has changed and caused the value to change.\r
     * @param {Ext.button.Segmented} this\r
     * @param {Array} newValue The new value.\r
     * @param {Array} oldValue The old value.\r
     */\r
\r
    applyValue: function(value, oldValue) {\r
        var me = this,\r
            allowMultiple = me.getAllowMultiple(),\r
            buttonValue, button, values, oldValues, items, i, ln, hasPressed;\r
\r
        values = (value instanceof Array) ? value : (value == null) ? [] : [value];\r
        oldValues = (oldValue instanceof Array) ? oldValue :\r
                (oldValue == null) ? [] : [oldValue];\r
\r
        // Set a flag to tell our toggle listener not to respond to the buttons' toggle\r
        // events while we are applying the value.\r
        me._isApplyingValue = true;\r
\r
        if (!me.rendered) {\r
            // first time - add values of buttons with an initial config of pressed:true\r
            items = me.items.items;\r
            for (i = items.length - 1; i >= 0; i--) {\r
                button = items[i];\r
\r
                // If we've got back to zero with no pressed buttons and have forceSelection,\r
                // then make button zero pressed.\r
                if (me.forceSelection && !i && !hasPressed) {\r
                    button.pressed = true;\r
                }\r
                if (button.pressed) {\r
                    hasPressed = true;\r
                    buttonValue = button.value;\r
                    if (buttonValue == null) {\r
                        buttonValue = me.items.indexOf(button);\r
                    }\r
\r
                    // We're looping backwards, unshift the values into the front of the array\r
                    if (!Ext.Array.contains(values, buttonValue)) {\r
                        values.unshift(buttonValue);\r
                    }\r
                }\r
            }\r
        }\r
\r
        ln = values.length;\r
\r
        //<debug>\r
        if (ln > 1 && !allowMultiple) {\r
            Ext.raise('Cannot set multiple values when allowMultiple is false');\r
        }\r
        //</debug>\r
\r
        // press all buttons corresponding to the values\r
        for (i = 0; i < ln; i++) {\r
            value = values[i];\r
            button = me._lookupButtonByValue(value);\r
\r
            if (button) {\r
                buttonValue = button.value;\r
\r
                if ((buttonValue != null) && buttonValue !== value) {\r
                    // button has a value, but it was matched by index.\r
                    // transform the index into the button value\r
                    values[i] = buttonValue;\r
                }\r
\r
                if (!button.pressed) {\r
                    button.setPressed(true);\r
                }\r
            }\r
            //<debug>\r
            else {\r
                // no matched button. fail.\r
                Ext.raise("Invalid value '" + value + "' for segmented button: '" + me.id + "'");\r
            }\r
            //</debug>\r
        }\r
\r
        value = allowMultiple ? values : ln ? values[0] : null;\r
\r
        // unpress buttons for the old values, if they do not exist in the new values array\r
        for (i = 0, ln = oldValues.length; i < ln; i++) {\r
            oldValue = oldValues[i];\r
            if (!Ext.Array.contains(values, oldValue)) {\r
                me._lookupButtonByValue(oldValue).setPressed(false);\r
            }\r
        }\r
\r
        me._isApplyingValue = false;\r
\r
        if (me.hasListeners.change && !Ext.Array.equals(values, oldValues)) {\r
            me.fireEvent('change', me, values, oldValues);\r
        }\r
        return value;\r
    },\r
\r
    beforeRender: function() {\r
        var me = this;\r
\r
        me.addCls(me.baseCls + me._getClsSuffix());\r
        me._syncItemClasses(true);\r
        me.callParent();\r
    },\r
\r
    onAdd: function(item) {\r
        var me = this,\r
            syncItemClasses = '_syncItemClasses';\r
\r
        //<debug>\r
        var items = me.items.items,\r
            ln = items.length,\r
            i = 0,\r
            value, defaultUI;\r
\r
        if (item.ui === 'default' && !item.hasOwnProperty('ui')) {\r
            defaultUI = me.getDefaultUI();\r
            if (defaultUI !== 'default') {\r
                item.ui = defaultUI;\r
            }\r
        }\r
\r
        for(; i < ln; i++) {\r
            if (items[i] !== item) {\r
                value = items[i].value;\r
                if (value != null && value === item.value) {\r
                    Ext.raise("Segmented button '" + me.id +\r
                        "' cannot contain multiple items with value: '" + value + "'");\r
                }\r
            }\r
        }\r
        //</debug>\r
\r
        me.mon(item, {\r
            hide: syncItemClasses,\r
            show: syncItemClasses,\r
            beforetoggle: '_onBeforeItemToggle',\r
            toggle: '_onItemToggle',\r
            scope: me\r
        });\r
\r
        if (me.getAllowToggle()) {\r
            item.enableToggle = true;\r
            if (!me.getAllowMultiple()) {\r
                item.toggleGroup = me.getId();\r
                item.allowDepress = me.getAllowDepress();\r
            }\r
        }\r
\r
        item.addCls(me.itemCls + me._getClsSuffix());\r
\r
        me._syncItemClasses();\r
        me.callParent([item]);\r
    },\r
\r
    onRemove: function(item) {\r
        var me = this;\r
\r
        item.removeCls(me.itemCls + me._getClsSuffix());\r
        me._syncItemClasses();\r
        me.callParent([item]);\r
    },\r
\r
    beforeLayout: function() {\r
        if (Ext.isChrome) {\r
            // workaround for a chrome bug with table-layout:fixed elements where the element\r
            // is layed out with 0 width, for example, in the following test case, without\r
            // this workaround the segmented button has 0 width in chrome:\r
            //\r
            //     Ext.create({\r
            //        renderTo: document.body,\r
            //            xtype: 'toolbar',\r
            //            items: [{\r
            //            xtype: 'segmentedbutton',\r
            //            items: [{\r
            //                text: 'Foo'\r
            //            }]\r
            //        }]\r
            //    });\r
            //\r
            // reading offsetWidth corrects the issue.\r
            this.el.dom.offsetWidth; // jshint ignore:line\r
        }\r
        this.callParent();\r
    },\r
\r
    updateDefaultUI: function(defaultUI) {\r
        var items = this.items,\r
            item, i, ln;\r
\r
        if (this.rendered) {\r
            Ext.raise("Changing the ui config of a segmented button after render is not supported.");\r
        } else if (items) {\r
            if (items.items) { // Mixed collection already created\r
                items = items.items;\r
            }\r
            for (i = 0, ln = items.length; i < ln; i++) {\r
                item = items[i];\r
                if (item.ui === 'default' && defaultUI !== 'default' && !item.hasOwnProperty('ui') ) {\r
                    items[i].ui = defaultUI;\r
                }\r
            }\r
        }\r
    },\r
\r
    //<debug>\r
    updateAllowDepress: function(newAllowDepress, oldAllowDepress) {\r
        if (this.rendered && (newAllowDepress !== oldAllowDepress)) {\r
            Ext.raise("Changing the allowDepress config of a segmented button after render is not supported.");\r
        }\r
    },\r
\r
    updateAllowMultiple: function(newAllowMultiple, oldAllowMultiple) {\r
        if (this.rendered && (newAllowMultiple !== oldAllowMultiple)) {\r
            Ext.raise("Changing the allowMultiple config of a segmented button after render is not supported.");\r
        }\r
    },\r
\r
    updateAllowToggle: function(newAllowToggle, oldAllowToggle) {\r
        if (this.rendered && (newAllowToggle !== oldAllowToggle)) {\r
            Ext.raise("Changing the allowToggle config of a segmented button after render is not supported.");\r
        }\r
    },\r
\r
    updateVertical: function(newVertical, oldVertical) {\r
        if (this.rendered && (newVertical !== oldVertical)) {\r
            Ext.raise("Changing the orientation of a segmented button after render is not supported.");\r
        }\r
    },\r
    //</debug>\r
\r
    privates: {\r
        _getClsSuffix: function() {\r
            return this.getVertical() ? '-vertical' : '-horizontal';\r
        },\r
\r
        // rtl hook\r
        _getFirstCls: function() {\r
            return this._firstCls;\r
        },\r
\r
        // rtl hook\r
        _getLastCls: function() {\r
            return this._lastCls;\r
        },\r
\r
        /**\r
         * Looks up a child button by its value\r
         * @private\r
         * @param {String/Number} value The button's value or index\r
         * @return {Ext.button.Button}\r
         */\r
        _lookupButtonByValue: function(value) {\r
            var items = this.items.items,\r
                ln = items.length,\r
                i = 0,\r
                button = null,\r
                buttonValue, btn;\r
\r
            for (; i < ln; i++) {\r
                btn = items[i];\r
                buttonValue = btn.value;\r
                if ((buttonValue != null) && buttonValue === value) {\r
                    button = btn;\r
                    break;\r
                }\r
            }\r
\r
            if (!button && typeof value === 'number') {\r
                // no button matched by value, assume value is an index\r
                button = items[value];\r
            }\r
\r
            return button;\r
        },\r
        \r
        _onBeforeItemToggle: function(button, pressed) {\r
            // If we allow multiple selections, and we are forcing a selection, and we are unpressing\r
            // and we only have one value, then veto this. we are not allowing the selection length\r
            // to fall to zero.\r
            if (this.allowMultiple && this.forceSelection && !pressed && this.getValue().length === 1) {\r
                return false;\r
            }\r
        },\r
\r
        /**\r
         * Handles the "toggle" event of the child buttons.\r
         * @private\r
         * @param {Ext.button.Button} button\r
         * @param {Boolean} pressed\r
         */\r
        _onItemToggle: function(button, pressed) {\r
            if (this._isApplyingValue) {\r
                return;\r
            }\r
            var me = this,\r
                Array = Ext.Array,\r
                allowMultiple = me.allowMultiple,\r
                buttonValue = (button.value != null) ? button.value : me.items.indexOf(button),\r
                value = me.getValue(),\r
                valueIndex;\r
\r
            if (allowMultiple) {\r
                valueIndex = Array.indexOf(value, buttonValue);\r
            }\r
\r
            if (pressed) {\r
                if (allowMultiple) {\r
                    if (valueIndex === -1) {\r
                        // We must not mutate our value property here\r
                        value = Array.slice(value);\r
                        value.push(buttonValue);\r
                    }\r
                } else {\r
                    value = buttonValue;\r
                }\r
            } else {\r
                if (allowMultiple) {\r
                    if (valueIndex > -1) {\r
                        // We must not mutate our value property here\r
                        value = Array.slice(value);\r
                        value.splice(valueIndex, 1);\r
                    }\r
                } else if (value === buttonValue) {\r
                    value = null;\r
                }\r
            }\r
\r
            me.setValue(value);\r
\r
            me.fireEvent('toggle', me, button, pressed);\r
        },\r
\r
        /**\r
         * Synchronizes the "first", "last", and "middle" css classes when buttons are\r
         * added, removed, shown, or hidden\r
         * @private\r
         * @param {Boolean} force force sync even if not rendered.\r
         */\r
        _syncItemClasses: function(force) {\r
            var me = this,\r
                firstCls, middleCls, lastCls, items, ln, visibleItems, item, i;\r
\r
            if (!force && !me.rendered) {\r
                return;\r
            }\r
\r
            firstCls = me._getFirstCls();\r
            middleCls = me._middleCls;\r
            lastCls = me._getLastCls();\r
            items = me.items.items;\r
            ln = items.length;\r
            visibleItems = [];\r
\r
            for (i = 0; i < ln; i++) {\r
                item = items[i];\r
                if (!item.hidden) {\r
                    visibleItems.push(item);\r
                }\r
            }\r
\r
            ln = visibleItems.length;\r
\r
            //remove all existing classes from visible items\r
            for (i = 0; i < ln; i++) {\r
                visibleItems[i].removeCls([ firstCls, middleCls, lastCls ]);\r
            }\r
\r
            // do not add any classes if there is only one item (no border removal needed)\r
            if (ln > 1) {\r
                //add firstCls to the first visible button\r
                visibleItems[0].addCls(firstCls);\r
\r
                //add middleCls to all visible buttons in between\r
                for (i = 1; i < ln - 1; i++) {\r
                    visibleItems[i].addCls(middleCls);\r
                }\r
\r
                //add lastCls to the first visible button\r
                visibleItems[ln - 1].addCls(lastCls);\r
            }\r
        }\r
    }\r
});\r