From bab8d03a8d5349cb71a87f1dfe02b1c5715cb595 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Tue, 10 Nov 2020 15:32:23 +0800 Subject: [PATCH 1/3] =?UTF-8?q?BI-74454=20feat:=20=E5=8D=95=E8=89=B2?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E6=8E=A7=E4=BB=B6=E6=94=AF=E6=8C=81=E8=BE=93?= =?UTF-8?q?=E5=85=A516=E8=BF=9B=E5=88=B6=E9=A2=9C=E8=89=B2=E7=BC=96?= =?UTF-8?q?=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.md | 1 + src/case/colorchooser/colorchooser.custom.js | 12 +- src/case/colorchooser/colorchooser.js | 4 +- .../colorchooser/colorchooser.popup.hex.js | 250 +++++++++++++++ .../colorchooser.popup.hex.simple.js | 49 +++ .../colorchooser/colorchooser.popup.simple.js | 2 +- src/case/colorchooser/colorchooser.simple.js | 2 +- .../colorpicker/editor.colorpicker.hex.js | 297 ++++++++++++++++++ .../editor.colorpicker.hex.simple.js | 167 ++++++++++ .../colorpicker/editor.colorpicker.js | 14 +- .../colorpicker/editor.colorpicker.simple.js | 10 +- 11 files changed, 786 insertions(+), 22 deletions(-) create mode 100644 src/case/colorchooser/colorchooser.popup.hex.js create mode 100644 src/case/colorchooser/colorchooser.popup.hex.simple.js create mode 100644 src/case/colorchooser/colorpicker/editor.colorpicker.hex.js create mode 100644 src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js diff --git a/changelog.md b/changelog.md index da80aa200..15f54bde8 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,6 @@ # 更新日志 2.0(2020-11) +- 颜色选择器支持输入16进制颜色编号 - bi.textarea_editor支持气泡提示报错 2.0(2020-10) diff --git a/src/case/colorchooser/colorchooser.custom.js b/src/case/colorchooser/colorchooser.custom.js index 445b99530..5a3c6b552 100644 --- a/src/case/colorchooser/colorchooser.custom.js +++ b/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, - height: 245 + width: 292, + 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, - right: 15, + left: 46, + right: 46, top: 7 }], height: 215 diff --git a/src/case/colorchooser/colorchooser.js b/src/case/colorchooser/colorchooser.js index a39d677a1..aad99a4bb 100644 --- a/src/case/colorchooser/colorchooser.js +++ b/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 }); diff --git a/src/case/colorchooser/colorchooser.popup.hex.js b/src/case/colorchooser/colorchooser.popup.hex.js new file mode 100644 index 000000000..b405d9d7c --- /dev/null +++ b/src/case/colorchooser/colorchooser.popup.hex.js @@ -0,0 +1,250 @@ +/** + * @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; + + this.customColorChooser = BI.createWidget(); + + 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); \ No newline at end of file diff --git a/src/case/colorchooser/colorchooser.popup.hex.simple.js b/src/case/colorchooser/colorchooser.popup.hex.simple.js new file mode 100644 index 000000000..208bf9f4b --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/case/colorchooser/colorchooser.popup.simple.js b/src/case/colorchooser/colorchooser.popup.simple.js index bae3a1455..54b34cec4 100644 --- a/src/case/colorchooser/colorchooser.popup.simple.js +++ b/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 // 是否有自动 diff --git a/src/case/colorchooser/colorchooser.simple.js b/src/case/colorchooser/colorchooser.simple.js index d3fa70285..ee9484c78 100644 --- a/src/case/colorchooser/colorchooser.simple.js +++ b/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 () { diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js new file mode 100644 index 000000000..9adccf272 --- /dev/null +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js @@ -0,0 +1,297 @@ +/** + * 简单选色控件 + * + * 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.createWidgets([{}, {}, {}], { + 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); + } + } + }] + }); + this.R = Ws[0]; + this.G = Ws[1]; + this.B = Ws[2]; + + 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: this.R, + width: c.RGB_WIDTH + }, { + el: this.G, + width: c.RGB_WIDTH + }, { + el: this.B, + 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); \ No newline at end of file diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js new file mode 100644 index 000000000..2b2019e88 --- /dev/null +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js @@ -0,0 +1,167 @@ +/** + * @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.createWidgets([{}, {}, {}], { + 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); + } + } + }] + }); + this.R = Ws[0]; + this.G = Ws[1]; + this.B = Ws[2]; + + 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: this.R, + width: c.RGB_WIDTH + }, { + el: this.G, + width: c.RGB_WIDTH + }, { + el: this.B, + 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); \ No newline at end of file diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.js b/src/case/colorchooser/colorpicker/editor.colorpicker.js index 3afacdd83..4be3375a4 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.js +++ b/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, - b: BI.isNull(json.r) ? "" : json.b + 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); diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js index b94ab411d..32943ecee 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js +++ b/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 }] }); }, From a5dfa90d8304b0fc03bc80c4fef154131d6eb616 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Tue, 10 Nov 2020 15:48:15 +0800 Subject: [PATCH 2/3] fix --- src/case/colorchooser/colorchooser.popup.hex.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/case/colorchooser/colorchooser.popup.hex.js b/src/case/colorchooser/colorchooser.popup.hex.js index b405d9d7c..cd665ba8c 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.js +++ b/src/case/colorchooser/colorchooser.popup.hex.js @@ -15,8 +15,6 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { render: function () { var self = this, o = this.options; - this.customColorChooser = BI.createWidget(); - return { type: "bi.absolute", items: [{ From 35b1f89e18a9cd0d9118707bf1cb6c89706af57b Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Tue, 10 Nov 2020 15:56:27 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=8E=BB=E6=8E=89createWidgets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../colorpicker/editor.colorpicker.hex.js | 59 +++++++++++-------- .../editor.colorpicker.hex.simple.js | 59 +++++++++++-------- 2 files changed, 70 insertions(+), 48 deletions(-) diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js index 9adccf272..6a2354da3 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js @@ -31,29 +31,28 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { var checker = function (v) { return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; }; - var Ws = BI.createWidgets([{}, {}, {}], { - 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); + 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); + } } - } - }] + }] + }; }); - this.R = Ws[0]; - this.G = Ws[1]; - this.B = Ws[2]; return { type: "bi.absolute", @@ -98,13 +97,25 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { } }] }, { - el: this.R, + el: BI.extend(Ws[0], { + ref: function (_ref) { + self.R = _ref + } + }), width: c.RGB_WIDTH }, { - el: this.G, + el: BI.extend(Ws[1], { + ref: function (_ref) { + self.G = _ref + } + }), width: c.RGB_WIDTH }, { - el: this.B, + el: BI.extend(Ws[2], { + ref: function (_ref) { + self.B = _ref + } + }), width: c.RGB_WIDTH }, { el: { diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js index 2b2019e88..cd9e5a3d3 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js @@ -29,29 +29,28 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { var checker = function (v) { return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; }; - var Ws = BI.createWidgets([{}, {}, {}], { - 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); + 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); + } } - } - }] + }] + } }); - this.R = Ws[0]; - this.G = Ws[1]; - this.B = Ws[2]; return { type: "bi.vertical", @@ -95,13 +94,25 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { } }] }, { - el: this.R, + el: BI.extend(Ws[0], { + ref: function (_ref) { + self.R = _ref + } + }), width: c.RGB_WIDTH }, { - el: this.G, + el: BI.extend(Ws[1], { + ref: function (_ref) { + self.G = _ref + } + }), width: c.RGB_WIDTH }, { - el: this.B, + el: BI.extend(Ws[2], { + ref: function (_ref) { + self.B = _ref + } + }), width: c.RGB_WIDTH }] }, {