projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * @private\r | |
| 3 | */\r | |
| 4 | Ext.define('Ext.ux.colorpick.Selection', {\r | |
| 5 | mixinId: 'colorselection',\r | |
| 6 | \r | |
| 7 | config : {\r | |
| 8 | /**\r | |
| 9 | * @cfg {"hex6","hex8","#hex6","#hex8","HEX6","HEX8","#HEX6","#HEX8"} [format=hex6]\r | |
| 10 | * The color format to for the `value` config. The `value` can be set using any\r | |
| 11 | * supported format or named color, but the stored value will always be in this\r | |
| 12 | * format.\r | |
| 13 | *\r | |
| 14 | * Supported formats are:\r | |
| 15 | *\r | |
| 16 | * - hex6 - For example "ffaa00" (Note: does not preserve transparency).\r | |
| 17 | * - hex8 - For eaxmple "ffaa00ff" - the last 2 digits represent transparency\r | |
| 18 | * - #hex6 - For example "#ffaa00" (same as "hex6" but with a leading "#").\r | |
| 19 | * - #hex8 - For example "#ffaa00ff" (same as "hex8" but with a leading "#").\r | |
| 20 | * - HEX6 - Same as "hex6" but upper case.\r | |
| 21 | * - HEX8 - Same as "hex8" but upper case.\r | |
| 22 | * - #HEX6 - Same as "#hex6" but upper case.\r | |
| 23 | * - #HEX8 - Same as "#hex8" but upper case.\r | |
| 24 | */\r | |
| 25 | format: 'hex6',\r | |
| 26 | \r | |
| 27 | /**\r | |
| 28 | * @cfg {String} [value=FF0000]\r | |
| 29 | * The initial color to highlight; see {@link #format} for supported formats.\r | |
| 30 | */\r | |
| 31 | value: 'FF0000',\r | |
| 32 | \r | |
| 33 | /**\r | |
| 34 | * @cfg {Object} color\r | |
| 35 | * This config property is used internally by the UI to maintain the full color.\r | |
| 36 | * Changes to this config are automatically reflected in `value` and vise-versa.\r | |
| 37 | * Setting `value` can, however, cause the alpha to be dropped if the new value\r | |
| 38 | * does not contain an alpha component.\r | |
| 39 | * @private\r | |
| 40 | */\r | |
| 41 | color: null,\r | |
| 42 | previousColor: null\r | |
| 43 | },\r | |
| 44 | \r | |
| 45 | applyColor: function (color) {\r | |
| 46 | var c = color;\r | |
| 47 | if (Ext.isString(c)) {\r | |
| 48 | c = Ext.ux.colorpick.ColorUtils.parseColor(color);\r | |
| 49 | }\r | |
| 50 | return c;\r | |
| 51 | },\r | |
| 52 | \r | |
| 53 | applyValue: function (color) {\r | |
| 54 | // Transform whatever incoming color we get to the proper format\r | |
| 55 | var c = Ext.ux.colorpick.ColorUtils.parseColor(color);\r | |
| 56 | return this.formatColor(c);\r | |
| 57 | },\r | |
| 58 | \r | |
| 59 | formatColor: function (color) {\r | |
| 60 | return Ext.ux.colorpick.ColorUtils.formats[this.getFormat()](color);\r | |
| 61 | },\r | |
| 62 | \r | |
| 63 | updateColor: function (color) {\r | |
| 64 | var me = this;\r | |
| 65 | \r | |
| 66 | // If the "color" is changed (via internal changes in the UI), update "value" as\r | |
| 67 | // well. Since these are always tracking each other, we guard against the case\r | |
| 68 | // where we are being updated *because* "value" is being set.\r | |
| 69 | if (!me.syncing) {\r | |
| 70 | me.syncing = true;\r | |
| 71 | me.setValue(me.formatColor(color));\r | |
| 72 | me.syncing = false;\r | |
| 73 | }\r | |
| 74 | },\r | |
| 75 | \r | |
| 76 | updateValue: function (value, oldValue) {\r | |
| 77 | var me = this;\r | |
| 78 | \r | |
| 79 | // If the "value" is changed, update "color" as well. Since these are always\r | |
| 80 | // tracking each other, we guard against the case where we are being updated\r | |
| 81 | // *because* "color" is being set.\r | |
| 82 | if (!me.syncing) {\r | |
| 83 | me.syncing = true;\r | |
| 84 | me.setColor(value);\r | |
| 85 | me.syncing = false;\r | |
| 86 | }\r | |
| 87 | \r | |
| 88 | this.fireEvent('change', me, value, oldValue);\r | |
| 89 | }\r | |
| 90 | });\r |