/** * @private */Ext.define('Ext.ux.colorpick.Selection', { mixinId: 'colorselection', /* eslint-disable max-len */ config: { /** * @cfg {"hex6"/"hex8"/"#hex6"/"#hex8"/"rgb"/"rgba"/"HEX6"/"HEX8"/"#HEX6"/"#HEX8"/"RGB"/"RGBA"} [format=hex6] * The color format to for the `value` config. The `value` can be set using any * supported format or named color, but the stored value will always be in this * format. * * Supported formats are: * * - hex6 - For example "ffaa00" (Note: does not preserve transparency). * - hex8 - For example "ffaa00ff" - the last 2 digits represent transparency * - #hex6 - For example "#ffaa00" (same as "hex6" but with a leading "#"). * - #hex8 - For example "#ffaa00ff" (same as "hex8" but with a leading "#"). * - rgb - For example "rgb(255,255,0)" (Note: does not preserve transparency). * - rgba - For example "rgba(255,255,0,.25)" * - HEX6 - Same as "hex6" but upper case. * - HEX8 - Same as "hex8" but upper case. * - #HEX6 - Same as "#hex6" but upper case. * - #HEX8 - Same as "#hex8" but upper case. * - RGB - Same as "rgb" but upper case. * - RGBA - Same as "rgba" but upper case. */ format: 'hex6', /* eslint-enable max-len */ /** * @cfg {String} [value=FF0000] * The initial color to highlight; see {@link #format} for supported formats. */ value: 'FF0000', /** * @cfg {Object} color * This config property is used internally by the UI to maintain the full color. * Changes to this config are automatically reflected in `value` and vise-versa. * Setting `value` can, however, cause the alpha to be dropped if the new value * does not contain an alpha component. * @private */ color: null, previousColor: null, /** * @cfg {String} [alphaDecimalFormat=#.##] * The format used by {@link Ext.util.Format#number} to format the alpha channel's * value. * @since 7.0.0 */ alphaDecimalFormat: '#.##' }, applyColor: function(color) { var c = color; if (Ext.isString(c)) { c = Ext.ux.colorpick.ColorUtils.parseColor(color, this.getAlphaDecimalFormat()); } return c; }, applyFormat: function(format) { var formats = Ext.ux.colorpick.ColorUtils.formats; if (!formats.hasOwnProperty(format)) { //<debug> Ext.raise('The specified format "' + format + '" is invalid.'); //</debug> return; } return format; }, applyValue: function(color) { // Transform whatever incoming color we get to the proper format var c = Ext.ux.colorpick.ColorUtils.parseColor( color || '#000000', this.getAlphaDecimalFormat() ); return this.formatColor(c); }, formatColor: function(color) { return Ext.ux.colorpick.ColorUtils.formats[this.getFormat()](color); }, updateColor: function(color) { var me = this; // If the "color" is changed (via internal changes in the UI), update "value" as // well. Since these are always tracking each other, we guard against the case // where we are being updated *because* "value" is being set. if (!me.syncing) { me.syncing = true; me.setValue(me.formatColor(color)); me.syncing = false; } }, updateValue: function(value, oldValue) { var me = this; // If the "value" is changed, update "color" as well. Since these are always // tracking each other, we guard against the case where we are being updated // *because* "color" is being set. if (!me.syncing) { me.syncing = true; me.setColor(value); me.syncing = false; } this.fireEvent('change', me, value, oldValue); }});