add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / picker / Color.js

/**\r
 * Color picker provides a simple color palette for choosing colors. The picker can be rendered to any container. The\r
 * available default to a standard 40-color palette; this can be customized with the {@link #colors} config.\r
 *\r
 * Typically you will need to implement a handler function to be notified when the user chooses a color from the picker;\r
 * you can register the handler using the {@link #event-select} event, or by implementing the {@link #handler} method.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.picker.Color', {\r
 *         value: '993300',  // initial selected color\r
 *         renderTo: Ext.getBody(),\r
 *         listeners: {\r
 *             select: function(picker, selColor) {\r
 *                 alert(selColor);\r
 *             }\r
 *         }\r
 *     });\r
 */\r
Ext.define('Ext.picker.Color', {\r
    extend: 'Ext.Component',\r
    requires: 'Ext.XTemplate',\r
    alias: 'widget.colorpicker',\r
    alternateClassName: 'Ext.ColorPalette',\r
    \r
    focusable: true,\r
\r
    /**\r
     * @cfg {String} [componentCls='x-color-picker']\r
     * The CSS class to apply to the containing element.\r
     */\r
    componentCls : Ext.baseCSSPrefix + 'color-picker',\r
\r
    /**\r
     * @cfg {String} [selectedCls='x-color-picker-selected']\r
     * The CSS class to apply to the selected element\r
     */\r
    selectedCls: Ext.baseCSSPrefix + 'color-picker-selected',\r
\r
    /**\r
     * @cfg {String} itemCls\r
     * The CSS class to apply to the color picker's items\r
     */\r
    itemCls: Ext.baseCSSPrefix + 'color-picker-item',\r
\r
    /**\r
     * @cfg {String} value\r
     * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that the hex\r
     * codes are case-sensitive.\r
     */\r
    value : null,\r
\r
    /**\r
     * @cfg {String} clickEvent\r
     * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).\r
     */\r
    clickEvent :'click',\r
\r
    /**\r
     * @cfg {Boolean} allowReselect\r
     * If set to true then reselecting a color that is already selected fires the {@link #event-select} event\r
     */\r
    allowReselect : false,\r
\r
    /**\r
     * @property {String[]} colors\r
     * An array of 6-digit color hex code strings (without the # symbol). This array can contain any number of colors,\r
     * and each hex code should be unique. The width of the picker is controlled via CSS by adjusting the width property\r
     * of the 'x-color-picker' class (or assigning a custom class), so you can balance the number of colors with the\r
     * width setting until the box is symmetrical.\r
     *\r
     * You can override individual colors if needed:\r
     *\r
     *     var cp = new Ext.picker.Color();\r
     *     cp.colors[0] = 'FF0000';  // change the first box to red\r
     *\r
     * Or you can provide a custom array of your own for complete control:\r
     *\r
     *     var cp = new Ext.picker.Color();\r
     *     cp.colors = ['000000', '993300', '333300'];\r
     */\r
    colors : [\r
        '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',\r
        '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',\r
        'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',\r
        'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',\r
        'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'\r
    ],\r
\r
    /**\r
     * @cfg {Function/String} handler\r
     * A function that will handle the select event of this picker. The handler is passed the following parameters:\r
     *\r
     * - `picker` : ColorPicker\r
     *\r
     *   The {@link Ext.picker.Color picker}.\r
     *\r
     * - `color` : String\r
     *\r
     *   The 6-digit color hex code (without the # symbol).\r
     * \r
     * @declarativeHandler\r
     */\r
\r
    /**\r
     * @cfg {Object} scope\r
     * The scope (`this` reference) in which the `{@link #handler}` function will be called.\r
     *\r
     * Defaults to this Color picker instance.\r
     */\r
\r
    colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,\r
    \r
    renderTpl: [\r
        '<tpl for="colors">',\r
            '<a href="#" role="button" class="color-{.} {parent.itemCls}" hidefocus="on">',\r
                '<span class="{parent.itemCls}-inner" style="background:#{.}">&#160;</span>',\r
            '</a>',\r
        '</tpl>'\r
    ],\r
\r
    /**\r
     * @event select\r
     * Fires when a color is selected\r
     * @param {Ext.picker.Color} this\r
     * @param {String} color The 6-digit color hex code (without the # symbol)\r
     */\r
\r
    /**\r
     * @private\r
     */\r
    initComponent : function(){\r
        var me = this;\r
\r
        me.callParent(arguments);\r
\r
        if (me.handler) {\r
            me.on('select', me.handler, me.scope, true);\r
        }\r
    },\r
\r
\r
    /**\r
     * @private\r
     */\r
    initRenderData : function(){\r
        var me = this;\r
        return Ext.apply(me.callParent(), {\r
            itemCls: me.itemCls,\r
            colors: me.colors\r
        });\r
    },\r
\r
    onRender : function(){\r
        var me = this,\r
            clickEvent = me.clickEvent;\r
\r
        me.callParent(arguments);\r
\r
        me.mon(me.el, clickEvent, me.handleClick, me, {delegate: 'a'});\r
        // always stop following the anchors\r
        if (clickEvent !== 'click'){\r
            me.mon(me.el, 'click', Ext.emptyFn, me, {delegate: 'a', stopEvent: true});\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    afterRender : function(){\r
        var me = this,\r
            value;\r
\r
        me.callParent(arguments);\r
        if (me.value) {\r
            value = me.value;\r
            me.value = null;\r
            me.select(value, true);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    handleClick : function(event){\r
        var me = this,\r
            color;\r
\r
        event.stopEvent();\r
        if (!me.disabled) {\r
            color = event.currentTarget.className.match(me.colorRe)[1];\r
            me.select(color.toUpperCase());\r
        }\r
    },\r
\r
    /**\r
     * Selects the specified color in the picker (fires the {@link #event-select} event)\r
     * @param {String} color A valid 6-digit color hex code (# will be stripped if included)\r
     * @param {Boolean} [suppressEvent=false] True to stop the select event from firing.\r
     */\r
    select : function(color, suppressEvent){\r
\r
        var me = this,\r
            selectedCls = me.selectedCls,\r
            value = me.value,\r
            el, item;\r
\r
        color = color.replace('#', '');\r
        if (!me.rendered) {\r
            me.value = color;\r
            return;\r
        }\r
\r
\r
        if (color !== value || me.allowReselect) {\r
            el = me.el;\r
\r
            if (me.value) {\r
                item = el.down('a.color-' + value, true);\r
                Ext.fly(item).removeCls(selectedCls);\r
            }\r
            item = el.down('a.color-' + color, true);\r
            Ext.fly(item).addCls(selectedCls);\r
            me.value = color;\r
            if (suppressEvent !== true) {\r
                me.fireEvent('select', me, color);\r
            }\r
        }\r
    },\r
    \r
    /**\r
     * Clears any selection and sets the value to `null`.\r
     */\r
    clear: function(){\r
        var me = this,\r
            value = me.value,\r
            el;\r
            \r
        if (value && me.rendered) {\r
            el = me.el.down('a.color-' + value, true);\r
            Ext.fly(el).removeCls(me.selectedCls);\r
        }\r
        me.value = null;  \r
    },\r
\r
    /**\r
     * Get the currently selected color value.\r
     * @return {String} value The selected value. Null if nothing is selected.\r
     */\r
    getValue: function(){\r
        return this.value || null;\r
    }\r
});\r