Pull request #1566: BI-74454 feat: 单色选择控件支持输入16进制颜色编号

Merge in VISUAL/fineui from ~WINDY/fui:master to master

* commit '35b1f89e18a9cd0d9118707bf1cb6c89706af57b':
  去掉createWidgets
  fix
  BI-74454 feat: 单色选择控件支持输入16进制颜色编号

changelog.md

@@ -1,5 +1,6 @@
 # 更新日志
 2.0(2020-11)
+- 颜色选择器支持输入16进制颜色编号
 - bi.textarea_editor支持气泡提示报错
 
 2.0(2020-10)

src/case/colorchooser/colorchooser.custom.js

@@ -10,8 +10,8 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
     _defaultConfig: function () {
         return BI.extend(BI.CustomColorChooser.superclass._defaultConfig.apply(this, arguments), {
             baseCls: "bi-custom-color-chooser",
-            width: 227,
+            width: 292,
-            height: 245
+            height: 265
         });
     },
 
@@ -19,7 +19,7 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
         BI.CustomColorChooser.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this.editor = BI.createWidget(o.editor, {
-            type: "bi.simple_color_picker_editor"
+            type: "bi.simple_hex_color_picker_editor"
         });
         this.editor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
             self.setValue(this.getValue());
@@ -42,13 +42,13 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
                     top: 0,
                     right: 0
                 }],
-                height: 30
+                height: 50
             }, {
                 type: "bi.absolute",
                 items: [{
                     el: this.farbtastic,
-                    left: 15,
+                    left: 46,
-                    right: 15,
+                    right: 46,
                     top: 7
                 }],
                 height: 215

src/case/colorchooser/colorchooser.js

@@ -38,7 +38,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
             }, o.el),
             popup: {
                 el: BI.extend({
-                    type: "bi.color_chooser_popup",
+                    type: "bi.hex_color_chooser_popup",
                     ref: function (_ref) {
                         self.colorPicker = _ref;
                     },
@@ -59,7 +59,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
                     }]
                 }, o.popup),
                 value: o.value,
-                width: 230
+                width: 292
             },
             value: o.value
         });

src/case/colorchooser/colorchooser.popup.hex.js

@@ -0,0 +1,248 @@
+/**
+ * @author windy
+ * @version 2.0
+ * Created by windy on 2020/11/10
+ */
+BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
+
+    props: {
+        baseCls: "bi-color-chooser-popup",
+        width: 292,
+        height: 195,
+        simple: false // 简单模式, popup中没有自动和透明
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+
+        return {
+            type: "bi.absolute",
+            items: [{
+                el: {
+                    type: "bi.vtape",
+                    items: [{
+                        el: BI.extend({
+                            type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor",
+                            value: o.value,
+                            height: 30,
+                            listeners: [{
+                                eventName: BI.ColorPickerEditor.EVENT_CHANGE,
+                                action: function () {
+                                    self.setValue(this.getValue());
+                                    self._dealStoreColors();
+                                    self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments);
+                                }
+                            }],
+                            ref: function (_ref) {
+                                self.colorEditor = _ref;
+                            }
+                        }, o.editor),
+                        height: 50
+                    }, {
+                        el: {
+                            type: "bi.absolute",
+                            items: [{
+                                el: {
+                                    type: "bi.color_picker",
+                                    cls: "bi-border-bottom bi-border-right",
+                                    items: [this._digestStoreColors(this._getStoreColors())],
+                                    height: 34,
+                                    value: o.value,
+                                    listeners: [{
+                                        eventName: BI.ColorPicker.EVENT_CHANGE,
+                                        action: function () {
+                                            self.setValue(this.getValue()[0]);
+                                            self._dealStoreColors();
+                                            self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
+                                        }
+                                    }],
+                                    ref: function (_ref) {
+                                        self.storeColors = _ref;
+                                    }
+                                },
+                                left: 10,
+                                right: 10,
+                                top: 5
+                            }]
+                        },
+                        height: 38
+                    }, {
+                        el: {
+                            type: "bi.absolute",
+                            items: [{
+                                el: {
+                                    type: "bi.color_picker",
+                                    value: o.value,
+                                    listeners: [{
+                                        eventName: BI.ColorPicker.EVENT_CHANGE,
+                                        action: function () {
+                                            self.setValue(this.getValue()[0]);
+                                            self._dealStoreColors();
+                                            self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
+                                        }
+                                    }],
+                                    ref: function (_ref) {
+                                        self.colorPicker = _ref;
+                                    }
+                                },
+                                left: 10,
+                                right: 10,
+                                top: 5,
+                                bottom: 10
+                            }]
+                        }
+                    }, {
+                        el: {
+                            type: "bi.combo",
+                            cls: "bi-border-top",
+                            container: null,
+                            direction: "right,top",
+                            isNeedAdjustHeight: false,
+                            el: {
+                                type: "bi.text_item",
+                                cls: "color-chooser-popup-more bi-list-item",
+                                textAlign: "center",
+                                height: 24,
+                                textLgap: 10,
+                                text: BI.i18nText("BI-Basic_More") + "..."
+                            },
+                            popup: {
+                                type: "bi.popup_panel",
+                                buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")],
+                                title: BI.i18nText("BI-Custom_Color"),
+                                el: {
+                                    type: "bi.custom_color_chooser",
+                                    editor: o.editor,
+                                    ref: function (_ref) {
+                                        self.customColorChooser = _ref;
+                                    }
+                                },
+                                stopPropagation: false,
+                                bgap: -1,
+                                rgap: 1,
+                                lgap: 1,
+                                minWidth: 227,
+                                listeners: [{
+                                    eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON,
+                                    action: function (index) {
+                                        switch (index) {
+                                            case 0:
+                                                self.more.hideView();
+                                                break;
+                                            case 1:
+                                                self.setValue(self.customColorChooser.getValue());
+                                                self._dealStoreColors();
+                                                self.more.hideView();
+                                                self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
+                                                break;
+                                        }
+                                    }
+                                }]
+                            },
+                            listeners: [{
+                                eventName: BI.Combo.EVENT_AFTER_POPUPVIEW,
+                                action: function () {
+                                    self.customColorChooser.setValue(self.getValue());
+                                }
+                            }],
+                            ref: function (_ref) {
+                                self.more = _ref;
+                            }
+                        },
+                        height: 24
+                    }]
+                },
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0
+            }, {
+                el: {
+                    type: "bi.layout",
+                    cls: "disable-mask",
+                    invisible: !o.disabled,
+                    ref: function () {
+                        self.mask = this;
+                    }
+                },
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0
+            }]
+        };
+    },
+
+    mounted: function () {
+        var self = this;
+        var o = this.options;
+        if (BI.isNotNull(o.value)) {
+            this.setValue(o.value);
+        }
+    },
+
+    _setEnable: function (enable) {
+        BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments);
+        this.mask.setVisible(!enable);
+    },
+
+    _dealStoreColors: function () {
+        var color = this.getValue();
+        var colors = this._getStoreColors();
+        var que = new BI.Queue(8);
+        que.fromArray(colors);
+        que.remove(color);
+        que.unshift(color);
+        var array = que.toArray();
+        BI.Cache.setItem("colors", BI.array2String(array));
+        this.setStoreColors(array);
+    },
+
+    _digestStoreColors: function (colors) {
+        var items = BI.map(colors, function (i, color) {
+            return {
+                value: color
+            };
+        });
+        BI.count(colors.length, 8, function (i) {
+            items.push({
+                value: "",
+                disabled: true
+            });
+        });
+        return items;
+    },
+
+    _getStoreColors: function() {
+        var self = this, o = this.options;
+        var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || "");
+        return BI.filter(colorsArray, function (idx, color) {
+            return o.simple ? self._isRGBColor(color) : true;
+        });
+    },
+
+    _isRGBColor: function (color) {
+        return BI.isNotEmptyString(color) && color !== "transparent";
+    },
+
+    setStoreColors: function (colors) {
+        if (BI.isArray(colors)) {
+            this.storeColors.populate([this._digestStoreColors(colors)]);
+            // BI-66973 选中颜色的同时选中历史
+            this.storeColors.setValue(this.getValue());
+        }
+    },
+
+    setValue: function (color) {
+        this.colorEditor.setValue(color);
+        this.colorPicker.setValue(color);
+        this.storeColors.setValue(color);
+    },
+
+    getValue: function () {
+        return this.colorEditor.getValue();
+    }
+});
+BI.HexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
+BI.HexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.hex_color_chooser_popup", BI.HexColorChooserPopup);

src/case/colorchooser/colorchooser.popup.hex.simple.js

@@ -0,0 +1,49 @@
+/**
+ * @author windy
+ * @version 2.0
+ * Created by windy on 2020/11/10
+ */
+BI.SimpleHexColorChooserPopup = BI.inherit(BI.Widget, {
+
+    props: {
+        baseCls: "bi-color-chooser-popup",
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.hex_color_chooser_popup",
+            value: o.value,
+            simple: true, // 是否有自动
+            listeners: [{
+                eventName: BI.ColorChooserPopup.EVENT_CHANGE,
+                action: function () {
+                    self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments);
+                }
+            }, {
+                eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE,
+                action: function () {
+                    self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments);
+                }
+            }],
+            ref: function (_ref) {
+                self.popup = _ref;
+            }
+        }
+    },
+
+    setStoreColors: function (colors) {
+        this.popup.setStoreColors(colors);
+    },
+
+    setValue: function (color) {
+        this.popup.setValue(color);
+    },
+
+    getValue: function () {
+        return this.popup.getValue();
+    }
+});
+BI.SimpleHexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
+BI.SimpleHexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.simple_hex_color_chooser_popup", BI.SimpleHexColorChooserPopup);

src/case/colorchooser/colorchooser.popup.simple.js

@@ -17,7 +17,7 @@ BI.SimpleColorChooserPopup = BI.inherit(BI.Widget, {
         BI.SimpleColorChooserPopup.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this.popup = BI.createWidget({
-            type: "bi.color_chooser_popup",
+            type: o.hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup",
             value: o.value,
             element: this,
             simple: true // 是否有自动

src/case/colorchooser/colorchooser.simple.js

@@ -26,7 +26,7 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, {
             width: o.width,
             height: o.height,
             popup: {
-                type: "bi.simple_color_chooser_popup"
+                type: "bi.simple_hex_color_chooser_popup"
             }
         });
         this.combo.on(BI.ColorChooser.EVENT_CHANGE, function () {

src/case/colorchooser/colorpicker/editor.colorpicker.hex.js

@@ -0,0 +1,308 @@
+/**
+ * 简单选色控件
+ *
+ * Created by GUY on 2015/11/16.
+ * @class BI.ColorPickerEditor
+ * @extends BI.Widget
+ */
+BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
+
+    constants: {
+        RGB_WIDTH: 32,
+        HEX_WIDTH: 70,
+        HEX_PREFIX_POSITION: 1
+    },
+
+    props: {
+        baseCls: "bi-color-picker-editor",
+        // width: 200,
+        height: 50
+    },
+
+    render: function () {
+        var self = this, o = this.options, c = this.constants;
+        this.storeValue = {};
+        var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
+            type: "bi.label",
+            cls: "color-picker-editor-label",
+            height: 20
+        });
+
+        var checker = function (v) {
+            return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
+        };
+        var Ws = BI.map(BI.range(0, 3), function () {
+            return {
+                type: "bi.small_text_editor",
+                cls: "color-picker-editor-input",
+                validationChecker: checker,
+                errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
+                allowBlank: true,
+                value: 255,
+                width: c.RGB_WIDTH,
+                height: 20,
+                listeners: [{
+                    eventName: BI.TextEditor.EVENT_CHANGE,
+                    action: function () {
+                        self._checkEditors();
+                        if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) {
+                            self.colorShow.element.css("background-color", self.getValue());
+                            self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+                        }
+                    }
+                }]
+            };
+        });
+
+        return {
+            type: "bi.absolute",
+            items: [{
+                el: {
+                    type: "bi.vertical",
+                    tgap: 5,
+                    items: [{
+                        type: "bi.vertical_adapt",
+                        rgap: 5,
+                        items: [{
+                            el: {
+                                type: "bi.layout",
+                                cls: "color-picker-editor-display bi-card bi-border",
+                                height: 16,
+                                width: 16,
+                                ref: function (_ref) {
+                                    self.colorShow = _ref;
+                                }
+                            },
+                            width: 16
+                        }, {
+                            type: "bi.label",
+                            text: "#",
+                            width: 10
+                        }, {
+                            type: "bi.small_text_editor",
+                            ref: function (_ref) {
+                                self.hexEditor = _ref;
+                            },
+                            cls: "color-picker-editor-input",
+                            validationChecker: this._hexChecker,
+                            errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
+                            width: c.HEX_WIDTH,
+                            height: 20,
+                            listeners: [{
+                                eventName: "EVENT_CHANGE",
+                                action: function () {
+                                    self.setValue("#" + this.getValue());
+                                    self.colorShow.element.css("background-color", self.getValue());
+                                    self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+                                }
+                            }]
+                        }, {
+                            el: BI.extend(Ws[0], {
+                                ref: function (_ref) {
+                                    self.R = _ref
+                                }
+                            }),
+                            width: c.RGB_WIDTH
+                        }, {
+                            el: BI.extend(Ws[1], {
+                                ref: function (_ref) {
+                                    self.G = _ref
+                                }
+                            }),
+                            width: c.RGB_WIDTH
+                        }, {
+                            el: BI.extend(Ws[2], {
+                                ref: function (_ref) {
+                                    self.B = _ref
+                                }
+                            }),
+                            width: c.RGB_WIDTH
+                        }, {
+                            el: {
+                                type: "bi.icon_button",
+                                cls: "trans-color-icon",
+                                width: 16,
+                                height: 16,
+                                iconWidth: 16,
+                                iconHeight: 16,
+                                title: BI.i18nText("BI-Transparent_Color"),
+                                listeners: [{
+                                    eventName: BI.IconButton.EVENT_CHANGE,
+                                    action: function () {
+                                        if (this.isSelected()) {
+                                            self.lastColor = self.getValue();
+                                            self.setValue("transparent");
+                                        } else {
+                                            if (self.lastColor === "transparent") {
+                                                self.lastColor = "";
+                                            }
+                                            self.setValue(self.lastColor || "#ffffff");
+                                        }
+                                        if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) ||
+                                            self._isEmptyRGB()) {
+                                            self.colorShow.element.css("background-color", self.getValue());
+                                            self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+                                        }
+                                    }
+                                }],
+                                ref: function (_ref) {
+                                    self.transparent = _ref;
+                                }
+                            },
+                            width: 16,
+                            lgap: 5
+                        }, {
+                            el: {
+                                type: "bi.icon_button",
+                                cls: "auto-color-icon",
+                                width: 16,
+                                height: 16,
+                                iconWidth: 16,
+                                iconHeight: 16,
+                                title: BI.i18nText("BI-Basic_Auto"),
+                                listeners: [{
+                                    eventName: BI.IconButton.EVENT_CHANGE,
+                                    action: function () {
+                                        if (this.isSelected()) {
+                                            self.lastColor = self.getValue();
+                                            self.setValue("");
+                                        } else {
+                                            self.setValue(self.lastColor || "#ffffff");
+                                        }
+                                        if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) || self._isEmptyRGB()) {
+                                            self.colorShow.element.css("background-color", self.getValue());
+                                            self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+                                        }
+                                    }
+                                }],
+                                ref: function (_ref) {
+                                    self.none = _ref;
+                                }
+                            },
+                            width: 16,
+                            lgap: 5
+                        }]
+                    }, {
+                        type: "bi.vertical_adapt",
+                        items: [{
+                            el: {
+                                type: "bi.label",
+                                cls: "color-picker-editor-label",
+                                height: 20,
+                                text: "HEX"
+                            },
+                            lgap: 60
+                        },{
+                            el: RGB[0].el,
+                            lgap: 44
+                        }, {
+                            el: RGB[1].el,
+                            lgap: 28
+                        }, {
+                            el: RGB[2].el,
+                            lgap: 28
+                        }]
+                    }]
+                },
+                left: 10,
+                right: 10,
+                top: 0,
+                bottom: 0
+            }]
+        };
+    },
+
+    _hexChecker: function (v) {
+        return /^[0-9a-fA-F]{6}$/.test(v);
+    },
+
+    _checkEditors: function () {
+        if(BI.isEmptyString(this.R.getValue())) {
+            this.R.setValue(0);
+        }
+        if(BI.isEmptyString(this.G.getValue())) {
+            this.G.setValue(0);
+        }
+        if(BI.isEmptyString(this.B.getValue())) {
+            this.B.setValue(0);
+        }
+        this.storeValue = {
+            r: this.R.getValue() || 0,
+            g: this.G.getValue() || 0,
+            b: this.B.getValue() || 0
+        };
+        this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
+    },
+
+    _isEmptyRGB: function () {
+        return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b);
+    },
+
+    _showPreColor: function (color) {
+        if (color === "") {
+            this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background");
+        } else if (color === "transparent") {
+            this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background");
+        } else {
+            this.colorShow.element.css({"background-color": color}).removeClass("auto-color-normal-background").removeClass("trans-color-background");
+        }
+    },
+
+    _setEnable: function (enable) {
+        BI.ColorPickerEditor.superclass._setEnable.apply(this, arguments);
+        if (enable === true) {
+            this.element.removeClass("base-disabled disabled");
+        } else if (enable === false) {
+            this.element.addClass("base-disabled disabled");
+        }
+    },
+
+    setValue: function (color) {
+        if (color === "transparent") {
+            this.transparent.setSelected(true);
+            this.none.setSelected(false);
+            this._showPreColor("transparent");
+            this.R.setValue("");
+            this.G.setValue("");
+            this.B.setValue("");
+            this.hexEditor.setValue("");
+            this.storeValue = {
+                r: "",
+                g: "",
+                b: ""
+            };
+            return;
+        }
+        if (!color) {
+            color = "";
+            this.none.setSelected(true);
+        } else {
+            this.none.setSelected(false);
+        }
+        this.transparent.setSelected(false);
+        this._showPreColor(color);
+        var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
+        this.storeValue = {
+            r: BI.isNull(json.r) ? "" : json.r,
+            g: BI.isNull(json.g) ? "" : json.g,
+            b: BI.isNull(json.b) ? "" : json.b
+        };
+        this.R.setValue(this.storeValue.r);
+        this.G.setValue(this.storeValue.g);
+        this.B.setValue(this.storeValue.b);
+        this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION));
+    },
+
+    getValue: function () {
+        if (this._isEmptyRGB() && this.transparent.isSelected()) {
+            return "transparent";
+        }
+        return BI.DOM.rgb2hex(BI.DOM.json2rgb({
+            r: this.storeValue.r,
+            g: this.storeValue.g,
+            b: this.storeValue.b
+        }));
+    }
+});
+BI.HexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.hex_color_picker_editor", BI.HexColorPickerEditor);

src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js

@@ -0,0 +1,178 @@
+/**
+ * @author windy
+ * @version 2.0
+ * Created by windy on 2020/11/10
+ */
+BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
+
+    constants: {
+        RGB_WIDTH: 40,
+        HEX_WIDTH: 70,
+        HEX_PREFIX_POSITION: 1
+    },
+
+    props: {
+        baseCls: "bi-color-picker-editor",
+        // width: 200,
+        height: 50
+    },
+
+    render: function () {
+        var self = this, o = this.options, c = this.constants;
+
+        var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
+            type: "bi.label",
+            cls: "color-picker-editor-label",
+            height: 20
+        });
+
+        var checker = function (v) {
+            return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
+        };
+        var Ws = BI.map(BI.range(0, 3), function () {
+            return {
+                type: "bi.small_text_editor",
+                cls: "color-picker-editor-input",
+                validationChecker: checker,
+                errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
+                allowBlank: true,
+                value: 255,
+                width: c.RGB_WIDTH,
+                height: 20,
+                listeners: [{
+                    eventName: BI.TextEditor.EVENT_CHANGE,
+                    action: function () {
+                        self._checkEditors();
+                        if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
+                            self.colorShow.element.css("background-color", self.getValue());
+                            self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE);
+                        }
+                    }
+                }]
+            }
+        });
+
+        return {
+            type: "bi.vertical",
+            tgap: 5,
+            items: [{
+                type: "bi.vertical_adapt",
+                rgap: 10,
+                items: [{
+                    el: {
+                        type: "bi.layout",
+                        cls: "color-picker-editor-display bi-card bi-border",
+                        height: 16,
+                        width: 16,
+                        ref: function (_ref) {
+                            self.colorShow = _ref;
+                        }
+                    },
+                    width: 16,
+                    lgap: 10,
+                    rgap: 5
+                }, {
+                    type: "bi.label",
+                    text: "#",
+                    width: 10
+                }, {
+                    type: "bi.small_text_editor",
+                    ref: function (_ref) {
+                        self.hexEditor = _ref;
+                    },
+                    cls: "color-picker-editor-input",
+                    validationChecker: this._hexChecker,
+                    errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
+                    width: c.HEX_WIDTH,
+                    height: 20,
+                    listeners: [{
+                        eventName: "EVENT_CHANGE",
+                        action: function () {
+                            self.setValue("#" + this.getValue());
+                            self.colorShow.element.css("background-color", self.getValue());
+                            self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+                        }
+                    }]
+                }, {
+                    el: BI.extend(Ws[0], {
+                        ref: function (_ref) {
+                            self.R = _ref
+                        }
+                    }),
+                    width: c.RGB_WIDTH
+                }, {
+                    el: BI.extend(Ws[1], {
+                        ref: function (_ref) {
+                            self.G = _ref
+                        }
+                    }),
+                    width: c.RGB_WIDTH
+                }, {
+                    el: BI.extend(Ws[2], {
+                        ref: function (_ref) {
+                            self.B = _ref
+                        }
+                    }),
+                    width: c.RGB_WIDTH
+                }]
+            }, {
+                type: "bi.vertical_adapt",
+                items: [{
+                    el: {
+                        type: "bi.label",
+                        cls: "color-picker-editor-label",
+                        height: 20,
+                        text: "HEX"
+                    },
+                    lgap: 86
+                },{
+                    el: RGB[0].el,
+                    lgap: 50
+                }, {
+                    el: RGB[1].el,
+                    lgap: 40
+                }, {
+                    el: RGB[2].el,
+                    lgap: 40
+                }]
+            }]
+
+        }
+    },
+
+    _hexChecker: function (v) {
+        return /^[0-9a-fA-F]{6}$/.test(v);
+    },
+
+    _checkEditors: function () {
+        if(BI.isEmptyString(this.R.getValue())) {
+            this.R.setValue(0);
+        }
+        if(BI.isEmptyString(this.G.getValue())) {
+            this.G.setValue(0);
+        }
+        if(BI.isEmptyString(this.B.getValue())) {
+            this.B.setValue(0);
+        }
+        this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
+    },
+
+    setValue: function (color) {
+        this.colorShow.element.css({"background-color": color});
+        var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
+        this.R.setValue(BI.isNull(json.r) ? "" : json.r);
+        this.G.setValue(BI.isNull(json.g) ? "" : json.g);
+        this.B.setValue(BI.isNull(json.b) ? "" : json.b);
+        this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION));
+    },
+
+    getValue: function () {
+        return BI.DOM.rgb2hex(BI.DOM.json2rgb({
+            r: this.R.getValue(),
+            g: this.G.getValue(),
+            b: this.B.getValue()
+        }));
+    }
+});
+BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor);

src/case/colorchooser/colorpicker/editor.colorpicker.js

@@ -8,7 +8,7 @@
 BI.ColorPickerEditor = BI.inherit(BI.Widget, {
 
     constants: {
-        REB_WIDTH: 32
+        RGB_WIDTH: 32
     },
 
     _defaultConfig: function () {
@@ -46,7 +46,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
             allowBlank: true,
             value: 255,
-            width: c.REB_WIDTH,
+            width: c.RGB_WIDTH,
             height: 20
         });
         BI.each(Ws, function (i, w) {
@@ -124,19 +124,19 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
                         width: 20
                     }, {
                         el: this.R,
-                        width: c.REB_WIDTH
+                        width: c.RGB_WIDTH
                     }, {
                         el: RGB[1],
                         width: 20
                     }, {
                         el: this.G,
-                        width: c.REB_WIDTH
+                        width: c.RGB_WIDTH
                     }, {
                         el: RGB[2],
                         width: 20
                     }, {
                         el: this.B,
-                        width: c.REB_WIDTH
+                        width: c.RGB_WIDTH
                     }, {
                         el: this.transparent,
                         width: 16,
@@ -221,8 +221,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
         this.storeValue = {
             r: BI.isNull(json.r) ? "" : json.r,
-            g: BI.isNull(json.r) ? "" : json.g,
+            g: BI.isNull(json.g) ? "" : json.g,
-            b: BI.isNull(json.r) ? "" : json.b
+            b: BI.isNull(json.b) ? "" : json.b
         };
         this.R.setValue(this.storeValue.r);
         this.G.setValue(this.storeValue.g);

src/case/colorchooser/colorpicker/editor.colorpicker.simple.js

@@ -8,7 +8,7 @@
 BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
 
     constants: {
-        REB_WIDTH: 32
+        RGB_WIDTH: 32
     },
 
     _defaultConfig: function () {
@@ -45,7 +45,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
             errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
             allowBlank: true,
             value: 255,
-            width: c.REB_WIDTH,
+            width: c.RGB_WIDTH,
             height: 20
         });
         BI.each(Ws, function (i, w) {
@@ -74,19 +74,19 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
                 width: 20
             }, {
                 el: this.R,
-                width: c.REB_WIDTH
+                width: c.RGB_WIDTH
             }, {
                 el: RGB[1],
                 width: 20
             }, {
                 el: this.G,
-                width: c.REB_WIDTH
+                width: c.RGB_WIDTH
             }, {
                 el: RGB[2],
                 width: 20
             }, {
                 el: this.B,
-                width: c.REB_WIDTH
+                width: c.RGB_WIDTH
             }]
         });
     },