From 3fb5b3a9bbd626b3ced4d119a24ae6506d2f6408 Mon Sep 17 00:00:00 2001 From: impact Date: Thu, 12 Jan 2023 15:32:32 +0800 Subject: [PATCH 1/2] =?UTF-8?q?KERNEL-14047=20refactor:=20case/colorchoose?= =?UTF-8?q?=20ES6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/colorchooser/colorchooser.custom.js | 69 +++-- src/case/colorchooser/colorchooser.js | 146 +++++----- .../colorchooser/colorchooser.popup.hex.js | 271 +++++++++--------- .../colorchooser.popup.hex.simple.js | 61 ++-- src/case/colorchooser/colorchooser.popup.js | 209 +++++++------- .../colorchooser/colorchooser.popup.simple.js | 61 ++-- src/case/colorchooser/colorchooser.simple.js | 65 +++-- src/case/colorchooser/colorchooser.trigger.js | 58 ++-- .../colorchooser/colorchooser.trigger.long.js | 73 ++--- .../colorpicker/button/button.colorpicker.js | 76 ++--- .../colorpicker/button/button.colorshow.js | 46 +-- .../colorchooser/colorpicker/button/index.js | 2 + .../colorpicker/colorpicker.hex.js | 165 +++++------ .../colorchooser/colorpicker/colorpicker.js | 195 +++++++------ .../colorpicker/editor.colorpicker.hex.js | 242 ++++++++-------- .../editor.colorpicker.hex.simple.js | 168 ++++++----- .../colorpicker/editor.colorpicker.js | 166 +++++------ .../colorpicker/editor.colorpicker.simple.js | 111 ++++--- src/case/colorchooser/colorpicker/index.js | 7 + .../colorchooser/farbtastic/farbtastic.js | 202 ++++++------- src/case/colorchooser/index.js | 11 + src/case/index.js | 5 +- src/core/structure/queue.js | 2 +- 23 files changed, 1261 insertions(+), 1150 deletions(-) create mode 100644 src/case/colorchooser/colorpicker/button/index.js create mode 100644 src/case/colorchooser/colorpicker/index.js create mode 100644 src/case/colorchooser/index.js diff --git a/src/case/colorchooser/colorchooser.custom.js b/src/case/colorchooser/colorchooser.custom.js index c34d92500..dd8bf8350 100644 --- a/src/case/colorchooser/colorchooser.custom.js +++ b/src/case/colorchooser/colorchooser.custom.js @@ -1,39 +1,47 @@ +import { shortcut, Widget, extend, createWidget } from "@/core"; +import { ColorPickerEditor } from "./colorpicker"; +import { Farbtastic } from "./farbtastic/farbtastic"; + /** * 自定义选色 * * Created by GUY on 2015/11/17. - * @class BI.CustomColorChooser - * @extends BI.Widget + * @class CustomColorChooser + * @extends Widget */ -BI.CustomColorChooser = BI.inherit(BI.Widget, { +@shortcut() +export class CustomColorChooser extends Widget { + static xtype = "bi.custom_color_chooser"; + + static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig: function () { - return BI.extend(BI.CustomColorChooser.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-custom-color-chooser", width: 292, - height: 265 + height: 265, }); - }, + } - _init: function () { - BI.CustomColorChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.editor, { + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget(o.editor, { type: "bi.simple_hex_color_picker_editor", - value: o.value + value: o.value, }); - this.editor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () { - self.setValue(this.getValue()); + this.editor.on(ColorPickerEditor.EVENT_CHANGE, () => { + this.setValue(this.editor.getValue()); }); - this.farbtastic = BI.createWidget({ + this.farbtastic = createWidget({ type: "bi.farbtastic", - value: o.value + value: o.value, }); - this.farbtastic.on(BI.Farbtastic.EVENT_CHANGE, function () { - self.setValue(this.getValue()); + this.farbtastic.on(Farbtastic.EVENT_CHANGE, () => { + this.setValue(this.farbtastic.getValue()); }); - BI.createWidget({ + createWidget({ type: "bi.vtape", element: this, items: [{ @@ -42,30 +50,29 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, { el: this.editor, left: 10, top: 0, - right: 10 + right: 10, }], - height: 50 + height: 50, }, { type: "bi.absolute", items: [{ el: this.farbtastic, left: 46, right: 46, - top: 7 + top: 7, }], - height: 215 - }] + height: 215, + }], }); - }, + } - setValue: function (color) { + setValue(color) { this.editor.setValue(color); this.farbtastic.setValue(color); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); } -}); -BI.CustomColorChooser.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.custom_color_chooser", BI.CustomColorChooser); +} + diff --git a/src/case/colorchooser/colorchooser.js b/src/case/colorchooser/colorchooser.js index 218ea56b0..20b410a68 100644 --- a/src/case/colorchooser/colorchooser.js +++ b/src/case/colorchooser/colorchooser.js @@ -1,27 +1,41 @@ +import { shortcut, Widget, extend, createWidget, toPix, isNotEmptyString } from "@/core"; +import { Combo } from "@/base"; +import { ColorChooserPopup } from "./colorchooser.popup"; + /** * 选色控件 * * Created by GUY on 2015/11/17. - * @class BI.ColorChooser - * @extends BI.Widget + * @class ColorChooser + * @extends Widget */ -BI.ColorChooser = BI.inherit(BI.Widget, { +@shortcut() +export class ColorChooser extends Widget { + static xtype = "bi.color_chooser"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; - _defaultConfig: function () { - return BI.extend(BI.ColorChooser.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-color-chooser", value: "", height: 24, el: {}, - simple: false + simple: false, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.ColorChooser.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + const fn = () => { + const color = this.colorPicker.getValue(); + this.setValue(color); + }; + + super._init(...arguments); o.value = (o.value || "").toLowerCase(); - this.combo = BI.createWidget({ + this.combo = createWidget({ type: "bi.combo", element: this, container: o.container, @@ -29,83 +43,77 @@ BI.ColorChooser = BI.inherit(BI.Widget, { destroyWhenHide: o.destroyWhenHide, isNeedAdjustWidth: false, isNeedAdjustHeight: false, - el: BI.extend({ + el: extend({ type: o.width <= 24 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger", simple: o.simple, - ref: function (_ref) { - self.trigger = _ref; + ref: _ref => { + this.trigger = _ref; }, value: o.value, - width: o.el.type ? o.width : BI.toPix(o.width, 2), - height: o.el.type ? o.height : BI.toPix(o.height, 2) + width: o.el.type ? o.width : toPix(o.width, 2), + height: o.el.type ? o.height : toPix(o.height, 2), }, o.el), - popup: () => ({ - el: BI.extend({ - type: "bi.hex_color_chooser_popup", - recommendColorsGetter: o.recommendColorsGetter, - ref: function (_ref) { - self.colorPicker = _ref; - }, - listeners: [{ - eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE, - action: function () { - fn(); - if (!self._isRGBColor(self.colorPicker.getValue())) { - self.combo.hideView(); - } - } - }, { - eventName: BI.ColorChooserPopup.EVENT_CHANGE, - action: function () { - fn(); - self.combo.hideView(); - } - }] - }, o.popup), - value: o.value, - width: 300 - }), - value: o.value + popup: () => { + return { + el: extend({ + type: "bi.hex_color_chooser_popup", + recommendColorsGetter: o.recommendColorsGetter, + ref: _ref => { + this.colorPicker = _ref; + }, + listeners: [{ + eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, + action: () => { + fn(); + if (!this._isRGBColor(this.colorPicker.getValue())) { + this.combo.hideView(); + } + }, + }, { + eventName: ColorChooserPopup.EVENT_CHANGE, + action: () => { + fn(); + this.combo.hideView(); + }, + }], + }, o.popup), + value: o.value, + width: 300, + }; + }, + value: o.value, }); - var fn = function () { - var color = self.colorPicker.getValue(); - self.setValue(color); - }; - - this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { - self.fireEvent(BI.ColorChooser.EVENT_CHANGE, arguments); + this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, (...args) => { + this.fireEvent(ColorChooser.EVENT_CHANGE, ...args); }); - this.combo.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () { - self.fireEvent(BI.ColorChooser.EVENT_AFTER_POPUPVIEW, arguments); + this.combo.on(Combo.EVENT_AFTER_POPUPVIEW, (...args) => { + this.fireEvent(ColorChooser.EVENT_AFTER_POPUPVIEW, ...args); }); - }, + } - _isRGBColor: function (color) { - return BI.isNotEmptyString(color) && color !== "transparent"; - }, + _isRGBColor(color) { + return isNotEmptyString(color) && color !== "transparent"; + } - isViewVisible: function () { + isViewVisible() { return this.combo.isViewVisible(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - setValue: function (color) { + setValue(color) { this.options.value = (color || "").toLowerCase(); this.combo.setValue(this.options.value); - }, + } - getValue: function () { + getValue() { return this.combo.getValue(); } -}); -BI.ColorChooser.EVENT_CHANGE = "EVENT_CHANGE"; -BI.ColorChooser.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; -BI.shortcut("bi.color_chooser", BI.ColorChooser); +} diff --git a/src/case/colorchooser/colorchooser.popup.hex.js b/src/case/colorchooser/colorchooser.popup.hex.js index b8c98cb36..ce0506e95 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.js +++ b/src/case/colorchooser/colorchooser.popup.hex.js @@ -1,41 +1,52 @@ +import { shortcut, Widget, isNotNull, extend, isNotEmptyString, array2String, map, count, string2Array, filter, isArray, Cache, Queue } from "@/core"; +import { Combo } from "@/base"; +import { ColorChooserPopup } from "./colorchooser.popup"; +import { ColorPickerEditor, ColorPicker } from "./colorpicker"; + /** * @author windy * @version 2.0 * Created by windy on 2020/11/10 */ -BI.HexColorChooserPopup = BI.inherit(BI.Widget, { +@shortcut() +export class HexColorChooserPopup extends Widget { + static xtype = "bi.hex_color_chooser_popup"; + + static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; + static EVENT_CHANGE = "EVENT_CHANGE"; - props: { + props = { baseCls: "bi-color-chooser-popup", width: 300, recommendColorsGetter: BI.emptyFn, // 推荐色获取接口 - simple: false // 简单模式, popup中没有自动和透明 - }, + simple: false, // 简单模式, popup中没有自动和透明 + } - render: function () { - var self = this, o = this.options; - var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter()); + render() { + const o = this.options; + const hasRecommendColors = isNotNull(o.recommendColorsGetter()); + return [{ type: "bi.vertical", items: [{ el: { type: "bi.vertical", hgap: 15, - items: [BI.extend({ + items: [extend({ type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor", value: o.value, height: o.simple ? 36 : 70, listeners: [{ - eventName: BI.ColorPickerEditor.EVENT_CHANGE, - action: function () { - self.setValue(this.getValue()); - self._dealStoreColors(); - self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments); - } + eventName: ColorPickerEditor.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.colorEditor.getValue()); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args); + }, }], - ref: function (_ref) { - self.colorEditor = _ref; - } + ref: _ref => { + this.colorEditor = _ref; + }, }, o.editor), { el: { type: "bi.hex_color_picker", @@ -44,19 +55,19 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { height: 22, 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); - } + eventName: ColorPicker.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.storeColors.getValue()[0]); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + }, }], - ref: function (_ref) { - self.storeColors = _ref; - } + ref: _ref => { + this.storeColors = _ref; + }, }, tgap: 10, - height: 22 + height: 22, }, { el: hasRecommendColors ? { type: "bi.vertical", @@ -64,7 +75,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { type: "bi.label", text: BI.i18nText("BI-Basic_Recommend_Color"), textAlign: "left", - height: 24 + height: 24, }, { type: "bi.hex_color_picker", cls: "bi-border-bottom bi-border-right", @@ -72,27 +83,27 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { height: 22, 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); - } + eventName: ColorPicker.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.recommendColors.getValue()[0]); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + }, }], - ref: function (_ref) { - self.recommendColors = _ref; - } - }] - } : {type: "bi.layout"}, + ref: _ref => { + this.recommendColors = _ref; + }, + }], + } : { type: "bi.layout" }, tgap: hasRecommendColors ? 10 : 0, - height: hasRecommendColors ? 47 : 0 + height: hasRecommendColors ? 47 : 0, }, { el: { type: "bi.layout", - cls: "bi-border-top" + cls: "bi-border-top", }, vgap: 10, - height: 1 + height: 1, }, { type: "bi.absolute", items: [{ @@ -101,25 +112,25 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { space: true, 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); - } + eventName: ColorPicker.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.colorPicker.getValue()[0]); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + }, }], - ref: function (_ref) { - self.colorPicker = _ref; - } + ref: _ref => { + this.colorPicker = _ref; + }, }, top: 0, left: 0, right: 0, - bottom: 1 + bottom: 1, }], - height: 80 - }] - } + height: 80, + }], + }, }, { el: { type: "bi.combo", @@ -133,7 +144,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { textAlign: "center", height: 24, textLgap: 10, - text: BI.i18nText("BI-Basic_More") + "..." + text: `${BI.i18nText("BI-Basic_More")}...`, }, popup: { type: "bi.popup_panel", @@ -143,9 +154,9 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { type: "bi.custom_color_chooser", value: o.value, editor: o.editor, - ref: function (_ref) { - self.customColorChooser = _ref; - } + ref: _ref => { + this.customColorChooser = _ref; + }, }, stopPropagation: false, bgap: -1, @@ -154,38 +165,41 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { minWidth: 227, listeners: [{ eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, - action: function (index) { + action: (index, ...args) => { switch (index) { - case 0: - self.more.hideView(); - break; - case 1: - var color = self.customColorChooser.getValue(); - // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明 - if (BI.isNotEmptyString(color)) { - self.setValue(color); - self._dealStoreColors(); - } - self.more.hideView(); - self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); - break; + case 0: + this.more.hideView(); + break; + case 1: { + const color = this.customColorChooser.getValue(); + // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明 + if (isNotEmptyString(color)) { + this.setValue(color); + this._dealStoreColors(); + } + this.more.hideView(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); + break; } - } - }] + default: + break; + } + }, + }], }, listeners: [{ - eventName: BI.Combo.EVENT_AFTER_POPUPVIEW, - action: function () { - self.customColorChooser.setValue(self.getValue()); - } + eventName: Combo.EVENT_AFTER_POPUPVIEW, + action: () => { + this.customColorChooser.setValue(this.getValue()); + }, }], - ref: function (_ref) { - self.more = _ref; - } + ref: _ref => { + this.more = _ref; + }, }, tgap: 10, - height: 24 - }] + height: 24, + }], }, { type: "bi.absolute", items: [{ @@ -193,89 +207,86 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { type: "bi.layout", cls: "disable-mask", invisible: !o.disabled, - ref: function () { - self.mask = this; - } + ref: () => { + this.mask = this; + }, }, left: 0, right: 0, top: 0, - bottom: 0 - }] + bottom: 0, + }], }]; - }, + } // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示 - mounted: function () { - var o = this.options; - if (BI.isNotNull(o.value)) { + mounted() { + const o = this.options; + if (isNotNull(o.value)) { this.setValue(o.value); } - }, + } - _setEnable: function (enable) { - BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments); + _setEnable(enable) { + super._setEnable(...arguments); this.mask.setVisible(!enable); - }, + } - _dealStoreColors: function () { - var color = this.getValue(); - var colors = this._getStoreColors(); - var que = new BI.Queue(12); + _dealStoreColors() { + const color = this.getValue(); + const colors = this._getStoreColors(); + const que = new Queue(12); que.fromArray(colors); que.remove(color); que.unshift(color); - var array = que.toArray(); - BI.Cache.setItem("colors", BI.array2String(array)); + const array = que.toArray(); + Cache.setItem("colors", array2String(array)); this.setStoreColors(array); - }, + } - _digestStoreColors: function (colors) { - var items = BI.map(colors.slice(0, 12), function (i, color) { + _digestStoreColors(colors) { + const items = map(colors.slice(0, 12), (i, color) => { return { - value: color + value: color, }; }); - BI.count(colors.length, 12, function (i) { + count(colors.length, 12, i => { items.push({ value: "empty", - disabled: true + 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; - }); - }, + _getStoreColors() { + const o = this.options; + const colorsArray = string2Array(Cache.getItem("colors") || ""); + + return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true); + } - _isRGBColor: function (color) { - return BI.isNotEmptyString(color) && color !== "transparent"; - }, + _isRGBColor(color) { + return isNotEmptyString(color) && color !== "transparent"; + } - setStoreColors: function (colors) { - if (BI.isArray(colors)) { + setStoreColors(colors) { + if (isArray(colors)) { this.storeColors.populate([this._digestStoreColors(colors)]); // BI-66973 选中颜色的同时选中历史 this.storeColors.setValue(this.getValue()); } - }, + } - setValue: function (color) { + setValue(color) { this.colorEditor.setValue(color); this.colorPicker.setValue(color); this.storeColors.setValue(color); this.recommendColors && this.recommendColors.setValue(color); - }, + } - getValue: function () { + getValue() { 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); +} diff --git a/src/case/colorchooser/colorchooser.popup.hex.simple.js b/src/case/colorchooser/colorchooser.popup.hex.simple.js index 628ad6f02..608017de2 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.simple.js +++ b/src/case/colorchooser/colorchooser.popup.hex.simple.js @@ -1,50 +1,57 @@ +import { shortcut, Widget } from "@/core"; +import { ColorChooserPopup } from "./colorchooser.popup"; +import { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; + /** * @author windy * @version 2.0 * Created by windy on 2020/11/10 */ -BI.SimpleHexColorChooserPopup = BI.inherit(BI.Widget, { +@shortcut() +export class SimpleHexColorChooserPopup extends Widget { + static xtype = "bi.simple_hex_color_chooser_popup"; + + static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; + static EVENT_CHANGE = "EVENT_CHANGE"; - props: { + props = { baseCls: "bi-color-chooser-popup", - }, + } + + render() { + const o = this.options; - render: function () { - var self = this, o = this.options; return { type: "bi.hex_color_chooser_popup", recommendColorsGetter: o.recommendColorsGetter, value: o.value, simple: true, // 是否有自动 listeners: [{ - eventName: BI.ColorChooserPopup.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments); - } + eventName: ColorChooserPopup.EVENT_CHANGE, + action: (...args) => { + this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args); + }, }, { - eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE, - action: function () { - self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments); - } + eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, + action: (...args) => { + this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args); + }, }], - ref: function (_ref) { - self.popup = _ref; - } - } - }, + ref: _ref => { + this.popup = _ref; + }, + }; + } - setStoreColors: function (colors) { + setStoreColors(colors) { this.popup.setStoreColors(colors); - }, + } - setValue: function (color) { + setValue(color) { this.popup.setValue(color); - }, + } - getValue: function () { + getValue() { 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.js b/src/case/colorchooser/colorchooser.popup.js index c73fd91fc..7580e7a52 100644 --- a/src/case/colorchooser/colorchooser.popup.js +++ b/src/case/colorchooser/colorchooser.popup.js @@ -1,67 +1,76 @@ +import { shortcut, Widget, createWidget, Cache, string2Array, isNotNull, Queue, array2String, map, count, filter, isNotEmptyString, isArray } from "@/core"; +import { Combo } from "@/base"; +import { ColorPickerEditor, ColorPicker } from "./colorpicker"; + /** * 选色控件 * * Created by GUY on 2015/11/17. - * @class BI.ColorChooserPopup - * @extends BI.Widget + * @class ColorChooserPopup + * @extends Widget */ -BI.ColorChooserPopup = BI.inherit(BI.Widget, { +@shortcut() +export class ColorChooserPopup extends Widget { + static xtype = "bi.color_chooser_popup"; + + static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; + static EVENT_CHANGE = "EVENT_CHANGE"; - props: { + props = { baseCls: "bi-color-chooser-popup", width: 230, height: 145, - simple: false // 简单模式, popup中没有自动和透明 - }, + simple: false, // 简单模式, popup中没有自动和透明 + } - render: function () { - var self = this, o = this.options; - this.colorEditor = BI.createWidget(o.editor, { + render () { + const o = this.options; + this.colorEditor = createWidget(o.editor, { type: o.simple ? "bi.simple_color_picker_editor" : "bi.color_picker_editor", value: o.value, cls: "bi-header-background bi-border-bottom", - height: 30 + height: 30, }); - this.colorEditor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () { - self.setValue(this.getValue()); - self._dealStoreColors(); - self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments); + this.colorEditor.on(ColorPickerEditor.EVENT_CHANGE, (...args) => { + this.setValue(this.colorEditor.getValue()); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args); }); - this.storeColors = BI.createWidget({ + this.storeColors = createWidget({ type: "bi.color_picker", cls: "bi-border-bottom bi-border-right", items: [this._digestStoreColors(this._getStoreColors())], width: 210, height: 24, - value: o.value + value: o.value, }); - this.storeColors.on(BI.ColorPicker.EVENT_CHANGE, function () { - self.setValue(this.getValue()[0]); - self._dealStoreColors(); - self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); + this.storeColors.on(ColorPicker.EVENT_CHANGE, (...args) => { + this.setValue(this.storeColors.getValue()[0]); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); }); - this.colorPicker = BI.createWidget({ + this.colorPicker = createWidget({ type: "bi.color_picker", width: 210, height: 50, - value: o.value + value: o.value, }); - this.colorPicker.on(BI.ColorPicker.EVENT_CHANGE, function () { - self.setValue(this.getValue()[0]); - self._dealStoreColors(); - self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); + this.colorPicker.on(ColorPicker.EVENT_CHANGE, (...args) => { + this.setValue(this.colorPicker.getValue()[0]); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); }); - this.customColorChooser = BI.createWidget({ + this.customColorChooser = createWidget({ type: "bi.custom_color_chooser", - editor: o.editor + editor: o.editor, }); - var panel = BI.createWidget({ + const panel = createWidget({ type: "bi.popup_panel", buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], title: BI.i18nText("BI-Custom_Color"), @@ -70,10 +79,10 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { bgap: -1, rgap: 1, lgap: 1, - minWidth: 227 + minWidth: 227, }); - this.more = BI.createWidget({ + this.more = createWidget({ type: "bi.combo", cls: "bi-border-top", container: null, @@ -85,25 +94,27 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { textAlign: "center", height: 24, textLgap: 10, - text: BI.i18nText("BI-Basic_More") + "..." + text: `${BI.i18nText("BI-Basic_More")}...`, }, - popup: panel + popup: panel, }); - this.more.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () { - self.customColorChooser.setValue(self.getValue()); + this.more.on(Combo.EVENT_AFTER_POPUPVIEW, () => { + this.customColorChooser.setValue(this.getValue()); }); - panel.on(BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { + panel.on(BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, (index, ...args) => { 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; + case 0: + this.more.hideView(); + break; + case 1: + this.setValue(this.customColorChooser.getValue()); + this._dealStoreColors(); + this.more.hideView(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); + break; + default: + break; } }); @@ -119,10 +130,10 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { el: this.storeColors, left: 10, right: 10, - top: 5 - }] + top: 5, + }], }, - height: 29 + height: 29, }, { el: { type: "bi.absolute", @@ -131,107 +142,103 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { left: 10, right: 10, top: 5, - bottom: 5 - }] + bottom: 5, + }], }, - height: 60 + height: 60, }, { el: this.more, - height: 24 - }] + height: 24, + }], }, left: 0, right: 0, top: 0, - bottom: 0 + bottom: 0, }, { el: { type: "bi.layout", cls: "disable-mask", invisible: !o.disabled, - ref: function () { - self.mask = this; - } + ref: () => { + this.mask = this; + }, }, left: 0, right: 0, top: 0, - bottom: 0 - }] + bottom: 0, + }], }; - }, + } // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示 - mounted: function () { - var self = this; - var o = this.options; - if (BI.isNotNull(o.value)) { + mounted () { + const o = this.options; + if (isNotNull(o.value)) { this.setValue(o.value); } - }, + } - _setEnable: function (enable) { - BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments); + _setEnable (enable) { + super._setEnable(...arguments); this.mask.setVisible(!enable); - }, + } - _dealStoreColors: function () { - var color = this.getValue(); - var colors = this._getStoreColors(); - var que = new BI.Queue(8); + _dealStoreColors () { + const color = this.getValue(); + const colors = this._getStoreColors(); + const que = new Queue(8); que.fromArray(colors); que.remove(color); que.unshift(color); - var array = que.toArray(); - BI.Cache.setItem("colors", BI.array2String(array)); + const array = que.toArray(); + Cache.setItem("colors", array2String(array)); this.setStoreColors(array); - }, + } - _digestStoreColors: function (colors) { - var items = BI.map(colors, function (i, color) { + _digestStoreColors (colors) { + const items = map(colors, (i, color) => { return { - value: color + value: color, }; }); - BI.count(colors.length, 8, function (i) { + count(colors.length, 8, i => { items.push({ value: "", - disabled: true + 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; - }); - }, + _getStoreColors() { + const o = this.options; + const colorsArray = string2Array(Cache.getItem("colors") || ""); + + return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true); + } - _isRGBColor: function (color) { - return BI.isNotEmptyString(color) && color !== "transparent"; - }, + _isRGBColor (color) { + return isNotEmptyString(color) && color !== "transparent"; + } - setStoreColors: function (colors) { - if (BI.isArray(colors)) { + setStoreColors (colors) { + if (isArray(colors)) { this.storeColors.populate([this._digestStoreColors(colors)]); // BI-66973 选中颜色的同时选中历史 this.storeColors.setValue(this.getValue()); } - }, + } - setValue: function (color) { + setValue (color) { this.colorEditor.setValue(color); this.colorPicker.setValue(color); this.storeColors.setValue(color); - }, + } - getValue: function () { + getValue () { return this.colorEditor.getValue(); } -}); -BI.ColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; -BI.ColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.color_chooser_popup", BI.ColorChooserPopup); +} diff --git a/src/case/colorchooser/colorchooser.popup.simple.js b/src/case/colorchooser/colorchooser.popup.simple.js index 54b34cec4..99a66d461 100644 --- a/src/case/colorchooser/colorchooser.popup.simple.js +++ b/src/case/colorchooser/colorchooser.popup.simple.js @@ -1,47 +1,52 @@ +import { shortcut, Widget, extend, createWidget } from "@/core"; +import { ColorChooserPopup } from "./colorchooser.popup"; + /** * 选色控件 * * Created by GUY on 2015/11/17. - * @class BI.SimpleColorChooserPopup - * @extends BI.Widget + * @class SimpleColorChooserPopup + * @extends Widget */ -BI.SimpleColorChooserPopup = BI.inherit(BI.Widget, { +@shortcut() +export class SimpleColorChooserPopup extends Widget { + static xtype = "bi.simple_color_chooser_popup"; + + static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; + static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig: function () { - return BI.extend(BI.SimpleColorChooserPopup.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-color-chooser-popup" + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: "bi-color-chooser-popup", }); - }, + } - _init: function () { - BI.SimpleColorChooserPopup.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.popup = BI.createWidget({ - type: o.hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup", - value: o.value, + _init() { + super._init(...arguments); + const { hex, value } = this.options; + this.popup = createWidget({ + type: hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup", + value, element: this, - simple: true // 是否有自动 + simple: true, // 是否有自动 }); - this.popup.on(BI.ColorChooserPopup.EVENT_CHANGE, function () { - self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments); + this.popup.on(ColorChooserPopup.EVENT_CHANGE, (...args) => { + this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args); }); - this.popup.on(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, function () { - self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments); + this.popup.on(ColorChooserPopup.EVENT_VALUE_CHANGE, (...args) => { + this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args); }); - }, + } - setStoreColors: function (colors) { + setStoreColors(colors) { this.popup.setStoreColors(colors); - }, + } - setValue: function (color) { + setValue(color) { this.popup.setValue(color); - }, + } - getValue: function () { + getValue() { return this.popup.getValue(); } -}); -BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; -BI.SimpleColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.simple_color_chooser_popup", BI.SimpleColorChooserPopup); \ No newline at end of file +} diff --git a/src/case/colorchooser/colorchooser.simple.js b/src/case/colorchooser/colorchooser.simple.js index 28517ea6d..6cf9d9ded 100644 --- a/src/case/colorchooser/colorchooser.simple.js +++ b/src/case/colorchooser/colorchooser.simple.js @@ -1,24 +1,32 @@ +import { shortcut, Widget, extend, createWidget } from "@/core"; +import { ColorChooser } from "./colorchooser"; + /** * 简单选色控件，没有自动和透明 * * Created by GUY on 2015/11/17. - * @class BI.SimpleColorChooser - * @extends BI.Widget + * @class SimpleColorChooser + * @extends Widget */ -BI.SimpleColorChooser = BI.inherit(BI.Widget, { +@shortcut() +export class SimpleColorChooser extends Widget { + static xtype = "bi.simple_color_chooser"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; - _defaultConfig: function () { - return BI.extend(BI.SimpleColorChooser.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-simple-color-chooser", - value: "#ffffff" + value: "#ffffff", }); - }, + } - _init: function () { - BI.SimpleColorChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const o = this.options; - this.combo = BI.createWidget({ + this.combo = createWidget({ type: "bi.color_chooser", simple: o.simple, element: this, @@ -30,36 +38,33 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, { popup: { type: "bi.simple_hex_color_chooser_popup", recommendColorsGetter: o.recommendColorsGetter, - } + }, }); - this.combo.on(BI.ColorChooser.EVENT_CHANGE, function () { - self.fireEvent(BI.SimpleColorChooser.EVENT_CHANGE, arguments); + this.combo.on(ColorChooser.EVENT_CHANGE, (...args) => { + this.fireEvent(SimpleColorChooser.EVENT_CHANGE, ...args); }); - this.combo.on(BI.ColorChooser.EVENT_AFTER_POPUPVIEW, function () { - self.fireEvent(BI.SimpleColorChooser.EVENT_AFTER_POPUPVIEW, arguments); + this.combo.on(ColorChooser.EVENT_AFTER_POPUPVIEW, (...args) => { + this.fireEvent(SimpleColorChooser.EVENT_AFTER_POPUPVIEW, ...args); }); - }, + } - isViewVisible: function () { + isViewVisible() { return this.combo.isViewVisible(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - setValue: function (color) { + setValue(color) { this.combo.setValue(color); - }, + } - getValue: function () { + getValue() { return this.combo.getValue(); } -}); -BI.SimpleColorChooser.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SimpleColorChooser.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; -BI.shortcut("bi.simple_color_chooser", BI.SimpleColorChooser); +} diff --git a/src/case/colorchooser/colorchooser.trigger.js b/src/case/colorchooser/colorchooser.trigger.js index af2039226..1187a8460 100644 --- a/src/case/colorchooser/colorchooser.trigger.js +++ b/src/case/colorchooser/colorchooser.trigger.js @@ -1,36 +1,44 @@ +import { shortcut, extend, createWidget, isNotNull } from "@/core"; +import { Trigger } from "@/base"; + /** * 选色控件 * * Created by GUY on 2015/11/17. - * @class BI.ColorChooserTrigger - * @extends BI.Trigger + * @class ColorChooserTrigger + * @extends Trigger */ -BI.ColorChooserTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class ColorChooserTrigger extends Trigger { + static xtype = "bi.color_chooser_trigger"; + + static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig: function (config) { - var conf = BI.ColorChooserTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), - height: 22 + _defaultConfig (config) { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, + height: 22, }); - }, + } - _init: function () { - BI.ColorChooserTrigger.superclass._init.apply(this, arguments); - this.colorContainer = BI.createWidget({ + _init () { + super._init(...arguments); + this.colorContainer = createWidget({ type: "bi.layout", cls: "color-chooser-trigger-content" + (BI.isIE9Below && BI.isIE9Below() ? " hack" : "") }); - var down = BI.createWidget({ + const down = createWidget({ type: "bi.icon_button", disableSelected: true, cls: "icon-combo-down-icon trigger-triangle-font icon-size-12", width: 12, - height: 8 + height: 8, }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, items: [{ @@ -38,28 +46,26 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, { left: 2, right: 2, top: 2, - bottom: 2 + bottom: 2, }, { el: down, right: -1, - bottom: 1 - }] + bottom: 1, + }], }); - if (BI.isNotNull(this.options.value)) { + if (isNotNull(this.options.value)) { this.setValue(this.options.value); } - }, + } - setValue: function (color) { - BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments); + setValue (color) { + super.setValue(...arguments); if (color === "") { this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background"); } else if (color === "transparent") { this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background"); } else { - this.colorContainer.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background"); + this.colorContainer.element.css({ "background-color": color }).removeClass("auto-color-background").removeClass("trans-color-background"); } } -}); -BI.ColorChooserTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.color_chooser_trigger", BI.ColorChooserTrigger); +} diff --git a/src/case/colorchooser/colorchooser.trigger.long.js b/src/case/colorchooser/colorchooser.trigger.long.js index 773b3d326..8210e111e 100644 --- a/src/case/colorchooser/colorchooser.trigger.long.js +++ b/src/case/colorchooser/colorchooser.trigger.long.js @@ -1,59 +1,66 @@ +import { shortcut, extend, createWidget } from "@/core"; +import { Trigger } from "@/base"; + /** * 选色控件 * * Created by GUY on 2015/11/17. - * @class BI.LongColorChooserTrigger - * @extends BI.Trigger + * @class LongColorChooserTrigger + * @extends Trigger */ -BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class LongColorChooserTrigger extends Trigger { + static xtype = "bi.long_color_chooser_trigger"; + + static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig: function (config) { - var conf = BI.LongColorChooserTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), - height: 24 + _defaultConfig (config) { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, + height: 24, }); - }, + } - _init: function () { - BI.LongColorChooserTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.colorContainer = BI.createWidget({ + _init () { + super._init(...arguments); + this.colorContainer = createWidget({ type: "bi.htape", cls: "color-chooser-trigger-content", items: [{ type: "bi.icon_change_button", - ref: function (_ref) { - self.changeIcon = _ref; + ref: _ref => { + this.changeIcon = _ref; }, disableSelected: true, iconCls: "auto-color-icon", width: 24, iconWidth: 16, - iconHeight: 16 + iconHeight: 16, }, { el: { type: "bi.label", - ref: function (_ref) { - self.label = _ref; + ref: _ref => { + this.label = _ref; }, textAlign: "left", hgap: 5, height: 18, - text: BI.i18nText("BI-Basic_Auto") - } - }] + text: BI.i18nText("BI-Basic_Auto"), + }, + }], }); - var down = BI.createWidget({ + const down = createWidget({ type: "bi.icon_button", disableSelected: true, cls: "icon-combo-down-icon trigger-triangle-font icon-size-12", width: 12, - height: 8 + height: 8, }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, items: [{ @@ -61,20 +68,20 @@ BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, { left: 2, right: 2, top: 2, - bottom: 2 + bottom: 2, }, { el: down, right: 3, - bottom: 3 - }] + bottom: 3, + }], }); if (this.options.value) { this.setValue(this.options.value); } - }, + } - setValue: function (color) { - BI.LongColorChooserTrigger.superclass.setValue.apply(this, arguments); + setValue (color) { + super.setValue(...arguments); if (color === "") { this.colorContainer.element.css("background-color", ""); this.changeIcon.setVisible(true); @@ -88,11 +95,9 @@ BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, { this.changeIcon.setIcon("trans-color-icon"); this.label.setText(BI.i18nText("BI-Transparent_Color")); } else { - this.colorContainer.element.css({"background-color": color}); + this.colorContainer.element.css({ "background-color": color }); this.changeIcon.setVisible(false); this.label.setVisible(false); } } -}); -BI.LongColorChooserTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.long_color_chooser_trigger", BI.LongColorChooserTrigger); +} diff --git a/src/case/colorchooser/colorpicker/button/button.colorpicker.js b/src/case/colorchooser/colorpicker/button/button.colorpicker.js index d3ebf5300..e690eb1f3 100644 --- a/src/case/colorchooser/colorpicker/button/button.colorpicker.js +++ b/src/case/colorchooser/colorpicker/button/button.colorpicker.js @@ -1,66 +1,72 @@ +import { shortcut, isNotNull, extend } from "@/core"; +import { BasicButton, Maskers } from "@/base"; + /** * 简单选色控件按钮 * * Created by GUY on 2015/11/16. - * @class BI.ColorPickerButton - * @extends BI.BasicButton + * @class ColorPickerButton + * @extends BasicButton */ -BI.ColorPickerButton = BI.inherit(BI.BasicButton, { +@shortcut() +export class ColorPickerButton extends BasicButton { + static xtype = "bi.color_picker_button"; + + static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig: function () { - var conf = BI.ColorPickerButton.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-color-picker-button bi-background bi-border-top bi-border-left" + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-color-picker-button bi-background bi-border-top bi-border-left`, }); - }, + } - _init: function () { - BI.ColorPickerButton.superclass._init.apply(this, arguments); - var self = this, o = this.options; - if (BI.isNotNull(o.value)) { - if (o.value === '') { + _init() { + super._init(...arguments); + const o = this.options; + if (isNotNull(o.value)) { + if (o.value === "") { this.element.addClass("auto-color-no-square-normal-background"); } else if (o.value === "transparent") { this.element.addClass("trans-color-background"); } else { this.element.css("background-color", o.value); } - var name = this.getName(); - this.element.hover(function () { - self._createMask(); - if (self.isEnabled()) { - BI.Maskers.show(name); + const name = this.getName(); + this.element.hover(() => { + this._createMask(); + if (this.isEnabled()) { + Maskers.show(name); } - }, function () { - if (!self.isSelected()) { - BI.Maskers.hide(name); + }, () => { + if (!this.isSelected()) { + Maskers.hide(name); } }); } - }, + } - _createMask: function () { - var o = this.options, name = this.getName(); - if (this.isEnabled() && !BI.Maskers.has(name)) { - var w = BI.Maskers.make(name, this, { + _createMask() { + const o = this.options, name = this.getName(); + if (this.isEnabled() && !Maskers.has(name)) { + const w = Maskers.make(name, this, { offset: { left: -1, top: -1, right: -1, - bottom: -1 - } + bottom: -1, + }, }); w.element.addClass("color-picker-button-mask").css("background-color", o.value); } - }, + } - setSelected: function (b) { - BI.ColorPickerButton.superclass.setSelected.apply(this, arguments); + setSelected(b) { + super.setSelected(...arguments); if (b) { this._createMask(); } - BI.Maskers[b ? "show" : "hide"](this.getName()); + Maskers[b ? "show" : "hide"](this.getName()); } -}); -BI.ColorPickerButton.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.color_picker_button", BI.ColorPickerButton); \ No newline at end of file +} diff --git a/src/case/colorchooser/colorpicker/button/button.colorshow.js b/src/case/colorchooser/colorpicker/button/button.colorshow.js index c9b2da438..104dfabf2 100644 --- a/src/case/colorchooser/colorpicker/button/button.colorshow.js +++ b/src/case/colorchooser/colorpicker/button/button.colorshow.js @@ -1,24 +1,32 @@ +import { shortcut } from "@/core"; +import { BasicButton } from "@/base"; + /** * @author windy * @version 2.0 * Created by windy on 2021/7/28 */ -BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, { +@shortcut() +export class ColorChooserShowButton extends BasicButton { + static xtype = "bi.color_picker_show_button"; + + static EVENT_CHANGE = "EVENT_CHANGE"; - props: { - baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius', - }, + props = { + baseCls: "bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius", + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; + return { - type: 'bi.htape', + type: "bi.htape", items: [ { el: { type: "bi.icon_label", - ref: function (_ref) { - self.icon = _ref; + ref: _ref => { + this.icon = _ref; }, iconWidth: 16, iconHeight: 16, @@ -26,20 +34,18 @@ BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, { hgap: 20, width: 16, }, { - type: 'bi.label', - textAlign: 'left', + type: "bi.label", + textAlign: "left", text: o.text, } - ] + ], }; - }, + } - doClick: function () { - BI.ColorChooserShowButton.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); if (this.isValid()) { - this.fireEvent(BI.ColorChooserShowButton.EVENT_CHANGE, this); + this.fireEvent(ColorChooserShowButton.EVENT_CHANGE, this); } - }, -}); -BI.ColorChooserShowButton.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.color_picker_show_button", BI.ColorChooserShowButton); + } +} diff --git a/src/case/colorchooser/colorpicker/button/index.js b/src/case/colorchooser/colorpicker/button/index.js new file mode 100644 index 000000000..59b5c9378 --- /dev/null +++ b/src/case/colorchooser/colorpicker/button/index.js @@ -0,0 +1,2 @@ +export { ColorPickerButton } from "./button.colorpicker"; +export { ColorChooserShowButton } from "./button.colorshow"; \ No newline at end of file diff --git a/src/case/colorchooser/colorpicker/colorpicker.hex.js b/src/case/colorchooser/colorpicker/colorpicker.hex.js index 8154b9c23..5a1b4162b 100644 --- a/src/case/colorchooser/colorpicker/colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/colorpicker.hex.js @@ -1,166 +1,173 @@ +import { shortcut, Widget, extend, each } from "@/core"; +import { ButtonGroup } from "@/base"; + /** * @author windy * @version 2.0 * Created by windy on 2021/7/28 */ -BI.HexColorPicker = BI.inherit(BI.Widget, { +@shortcut() +export class HexColorPicker extends Widget { + static xtype = "bi.hex_color_picker"; + + static EVENT_CHANGE = "EVENT_CHANGE"; - props: { + props = { baseCls: "bi-hex-color-picker", items: null, - }, + } - _items: [ + _items = [ [ { - "value": "#999999" + value: "#999999", }, { - "value": "#FFFFFF" + value: "#FFFFFF", }, { - "value": "#FFE5E5" + value: "#FFE5E5", }, { - "value": "#FFF1E5" + value: "#FFF1E5", }, { - "value": "#FFF9E5" + value: "#FFF9E5", }, { - "value": "#E9F5E9" + value: "#E9F5E9", }, { - "value": "#EAEEFF" + value: "#EAEEFF", }, { - "value": "#EFEBF7" + value: "#EFEBF7", }, { - "value": "#FCE8EF" + value: "#FCE8EF", } ], [ { - "value": "#737373" + value: "#737373", }, { - "value": "#F2F2F2" + value: "#F2F2F2", }, { - "value": "#FFA6A6" + value: "#FFA6A6", }, { - "value": "#FFD0A6" + value: "#FFD0A6", }, { - "value": "#FFEDA6" + value: "#FFEDA6", }, { - "value": "#B3DCB2" + value: "#B3DCB2", }, { - "value": "#B9C6FF" + value: "#B9C6FF", }, { - "value": "#CABAE6" + value: "#CABAE6", }, { - "value": "#F8B1C9" + value: "#F8B1C9", } ], [ { - "value": "#4C4C4C" + value: "#4C4C4C", }, { - "value": "#D9D9D9" + value: "#D9D9D9", }, { - "value": "#FF5959" + value: "#FF5959", }, { - "value": "#FFA759" + value: "#FFA759", }, { - "value": "#FFDD59" + value: "#FFDD59", }, { - "value": "#7EBE70" + value: "#7EBE70", }, { - "value": "#7B95FF" + value: "#7B95FF", }, { - "value": "#9C7FD0" + value: "#9C7FD0", }, { - "value": "#F06D99" + value: "#F06D99", } ], [ { - "value": "#262626" + value: "#262626", }, { - "value": "#BFBFBF" + value: "#BFBFBF", }, { - "value": "#FF0000" + value: "#FF0000", }, { - "value": "#FF7800" + value: "#FF7800", }, { - "value": "#FFCB00" + value: "#FFCB00", }, { - "value": "#259B23" + value: "#259B23", }, { - "value": "#355CFF" + value: "#355CFF", }, { - "value": "#673AB7" + value: "#673AB7", }, { - "value": "#E91E63" + value: "#E91E63", } ], [ { - "value": "#000000" + value: "#000000", }, { - "value": "#A6A6A6" + value: "#A6A6A6", }, { - "value": "#A80000" + value: "#A80000", }, { - "value": "#B65600" + value: "#B65600", }, { - "value": "#CEB000" + value: "#CEB000", }, { - "value": "#0E550C" + value: "#0E550C", }, { - "value": "#09269C" + value: "#09269C", }, { - "value": "#3A1A73" + value: "#3A1A73", }, { - "value": "#B30072" + value: "#B30072", } ] - ], + ] + + render() { + const o = this.options; - render: function () { - var self = this, o = this.options; - return { type: "bi.button_group", items: this._digest(o.items || this._items), @@ -172,52 +179,50 @@ BI.HexColorPicker = BI.inherit(BI.Widget, { value: o.value, listeners: [ { - eventName: BI.ButtonGroup.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.HexColorPicker.EVENT_CHANGE, arguments); - } + eventName: ButtonGroup.EVENT_CHANGE, + action: (...args) => { + this.fireEvent(HexColorPicker.EVENT_CHANGE, ...args); + }, } ], - ref: function (_ref) { - self.colors = _ref; - } + ref: _ref => { + this.colors = _ref; + }, }; - }, + } - _digest: function (items) { - var o = this.options; - var blocks = []; - BI.each(items, function (idx, row) { - var bRow = []; - BI.each(row, function (idx, item) { - bRow.push(BI.extend({ + _digest(items) { + const o = this.options; + const blocks = []; + each(items, (idx, row) => { + const bRow = []; + each(row, (idx, item) => { + bRow.push(extend({ type: "bi.color_picker_button", once: false, - cls: o.space ? 'bi-border-right' : '', + cls: o.space ? "bi-border-right" : "", }, item)); if (o.space && idx < row.length - 1) { - bRow.push({ type: 'bi.layout' }); + bRow.push({ type: "bi.layout" }); } }); blocks.push(bRow); }); return blocks; - }, + } - populate: function (items) { - var args = [].slice.call(arguments); + populate(items) { + const args = [].slice.call(arguments); args[0] = this._digest(items); this.colors.populate.apply(this.colors, args); - }, + } - setValue: function (color) { + setValue(color) { this.colors.setValue(color); - }, + } - getValue: function () { + getValue() { return this.colors.getValue(); } -}); -BI.HexColorPicker.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.hex_color_picker", BI.HexColorPicker); +} diff --git a/src/case/colorchooser/colorpicker/colorpicker.js b/src/case/colorchooser/colorpicker/colorpicker.js index 54a827400..fa4bd5c9d 100644 --- a/src/case/colorchooser/colorpicker/colorpicker.js +++ b/src/case/colorchooser/colorpicker/colorpicker.js @@ -1,190 +1,195 @@ +import { shortcut, Widget, extend, createItems, createWidget } from "@/core"; +import { ButtonGroup } from "@/base"; + /** * 简单选色控件 * * Created by GUY on 2015/11/16. - * @class BI.ColorPicker - * @extends BI.Widget + * @class ColorPicker + * @extends Widget */ -BI.ColorPicker = BI.inherit(BI.Widget, { +@shortcut() +export class ColorPicker extends Widget { + static xtype = "bi.color_picker"; + + static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig: function () { - return BI.extend(BI.ColorPicker.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-color-picker", - items: null + items: null, }); - }, + } - _items: [ + _items = [ [{ - value: "#ffffff" + value: "#ffffff", }, { - value: "#f2f2f2" + value: "#f2f2f2", }, { - value: "#e5e5e5" + value: "#e5e5e5", }, { - value: "#d9d9d9" + value: "#d9d9d9", }, { - value: "#cccccc" + value: "#cccccc", }, { - value: "#bfbfbf" + value: "#bfbfbf", }, { - value: "#b2b2b2" + value: "#b2b2b2", }, { - value: "#a6a6a6" + value: "#a6a6a6", }, { - value: "#999999" + value: "#999999", }, { - value: "#8c8c8c" + value: "#8c8c8c", }, { - value: "#808080" + value: "#808080", }, { - value: "#737373" + value: "#737373", }, { - value: "#666666" + value: "#666666", }, { - value: "#4d4d4d" + value: "#4d4d4d", }, { - value: "#333333" + value: "#333333", }, { - value: "#000000" + value: "#000000", }], [{ - value: "#d8b5a6" + value: "#d8b5a6", }, { - value: "#ff9e9a" + value: "#ff9e9a", }, { - value: "#ffc17d" + value: "#ffc17d", }, { - value: "#f5e56b" + value: "#f5e56b", }, { - value: "#d8e698" + value: "#d8e698", }, { - value: "#e0ebaf" + value: "#e0ebaf", }, { - value: "#c3d825" + value: "#c3d825", }, { - value: "#bbe2e7" + value: "#bbe2e7", }, { - value: "#85d3cd" + value: "#85d3cd", }, { - value: "#bde1e6" + value: "#bde1e6", }, { - value: "#a0d8ef" + value: "#a0d8ef", }, { - value: "#89c3eb" + value: "#89c3eb", }, { - value: "#bbc8e6" + value: "#bbc8e6", }, { - value: "#bbbcde" + value: "#bbbcde", }, { - value: "#d6b4cc" + value: "#d6b4cc", }, { - value: "#fbc0d3" + value: "#fbc0d3", }], [{ - value: "#bb9581" + value: "#bb9581", }, { - value: "#f37d79" + value: "#f37d79", }, { - value: "#fba74f" + value: "#fba74f", }, { - value: "#ffdb4f" + value: "#ffdb4f", }, { - value: "#c7dc68" + value: "#c7dc68", }, { - value: "#b0ca71" + value: "#b0ca71", }, { - value: "#99ab4e" + value: "#99ab4e", }, { - value: "#84b9cb" + value: "#84b9cb", }, { - value: "#00a3af" + value: "#00a3af", }, { - value: "#2ca9e1" + value: "#2ca9e1", }, { - value: "#0095d9" + value: "#0095d9", }, { - value: "#4c6cb3" + value: "#4c6cb3", }, { - value: "#8491c3" + value: "#8491c3", }, { - value: "#a59aca" + value: "#a59aca", }, { - value: "#cc7eb1" + value: "#cc7eb1", }, { - value: "#e89bb4" + value: "#e89bb4", }], [{ - value: "#9d775f" + value: "#9d775f", }, { - value: "#dd4b4b" + value: "#dd4b4b", }, { - value: "#ef8b07" + value: "#ef8b07", }, { - value: "#fcc800" + value: "#fcc800", }, { - value: "#aacf53" + value: "#aacf53", }, { - value: "#82ae46" + value: "#82ae46", }, { - value: "#69821b" + value: "#69821b", }, { - value: "#59b9c6" + value: "#59b9c6", }, { - value: "#2a83a2" + value: "#2a83a2", }, { - value: "#007bbb" + value: "#007bbb", }, { - value: "#19448e" + value: "#19448e", }, { - value: "#274a78" + value: "#274a78", }, { - value: "#4a488e" + value: "#4a488e", }, { - value: "#7058a3" + value: "#7058a3", }, { - value: "#884898" + value: "#884898", }, { - value: "#d47596" + value: "#d47596", }] - ], + ] - _init: function () { - BI.ColorPicker.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.colors = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.colors = createWidget({ type: "bi.button_group", element: this, - items: BI.createItems(o.items || this._items, { + items: createItems(o.items || this._items, { type: "bi.color_picker_button", - once: false + once: false, }), layouts: [{ - type: "bi.grid" + type: "bi.grid", }], - value: o.value + value: o.value, }); - this.colors.on(BI.ButtonGroup.EVENT_CHANGE, function () { - self.fireEvent(BI.ColorPicker.EVENT_CHANGE, arguments); + this.colors.on(ButtonGroup.EVENT_CHANGE, (...args) => { + this.fireEvent(ColorPicker.EVENT_CHANGE, ...args); }); - }, + } - populate: function (items) { - var args = [].slice.call(arguments); - args[0] = BI.createItems(items, { + populate(items) { + const args = [].slice.call(arguments); + args[0] = createItems(items, { type: "bi.color_picker_button", - once: false + once: false, }); this.colors.populate.apply(this.colors, args); - }, + } - setValue: function (color) { + setValue(color) { this.colors.setValue(color); - }, + } - getValue: function () { + getValue() { return this.colors.getValue(); } -}); -BI.ColorPicker.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.color_picker", BI.ColorPicker); \ No newline at end of file +} diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js index 22c66a250..7b626a37c 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js @@ -1,36 +1,37 @@ +import { shortcut, Widget, createItems, map, isNumeric, range, extend, isEmptyString, isNull, DOM } from "@/core"; +import { ColorPickerEditor } from "./editor.colorpicker"; +import { ColorChooserShowButton } from "./button"; + +const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1; + /** * 简单选色控件 * * Created by GUY on 2015/11/16. - * @class BI.ColorPickerEditor - * @extends BI.Widget + * @class HexColorPickerEditor + * @extends Widget */ -BI.HexColorPickerEditor = BI.inherit(BI.Widget, { - - constants: { - RGB_WIDTH: 32, - HEX_WIDTH: 70, - HEX_PREFIX_POSITION: 1 - }, - - props: { +@shortcut() +export class HexColorPickerEditor extends Widget { + static xtype = "bi.hex_color_picker_editor"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + props = { baseCls: "bi-color-picker-editor", - height: 30 - }, + height: 30, + } - render: function () { - var self = this, o = this.options, c = this.constants; + render() { this.storeValue = {}; - var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { + const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { type: "bi.label", cls: "color-picker-editor-label", - height: 20 + 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 () { + const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const Ws = map(range(0, 3), () => { return { type: "bi.small_text_editor", cls: "color-picker-editor-input bi-border-radius", @@ -38,20 +39,20 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { errorText: BI.i18nText("BI-Color_Picker_Error_Text"), allowBlank: true, value: 255, - width: c.RGB_WIDTH, + width: RGB_WIDTH, height: 24, 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); + action: () => { + this._checkEditors(); + if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { + this.colorShow.element.css("background-color", this.getValue()); + this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } - } + }, } - ] + ], }; }); @@ -64,8 +65,8 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { tgap: 10, items: [ { - type: 'bi.vertical_adapt', - columnSize: ["fill", 'fill'], + type: "bi.vertical_adapt", + columnSize: ["fill", "fill"], height: 24, items: [ { @@ -76,16 +77,16 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { text: BI.i18nText("BI-Transparent_Color"), listeners: [ { - eventName: BI.ColorChooserShowButton.EVENT_CHANGE, - action: function () { - self.setValue("transparent"); - self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); - } + eventName: ColorChooserShowButton.EVENT_CHANGE, + action: () => { + this.setValue("transparent"); + this.fireEvent(ColorPickerEditor.EVENT_CHANGE); + }, } ], - ref: function (_ref) { - self.transparent = _ref; - } + ref: _ref => { + this.transparent = _ref; + }, }, { el: { type: "bi.color_picker_show_button", @@ -95,24 +96,24 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { text: BI.i18nText("BI-Basic_Auto"), listeners: [ { - eventName: BI.ColorChooserShowButton.EVENT_CHANGE, - action: function () { - self.setValue(""); - self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); - } + eventName: ColorChooserShowButton.EVENT_CHANGE, + action: () => { + this.setValue(""); + this.fireEvent(ColorPickerEditor.EVENT_CHANGE); + }, } ], - ref: function (_ref) { - self.none = _ref; - } + ref: _ref => { + this.none = _ref; + }, }, lgap: 10, } - ] + ], }, { el: { type: "bi.vertical_adapt", - columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH], + columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH], rgap: 5, items: [ @@ -122,107 +123,106 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { cls: "color-picker-editor-display bi-card bi-border", height: 22, width: 22, - ref: function (_ref) { - self.colorShow = _ref; - } + ref: _ref => { + this.colorShow = _ref; + }, }, - width: 18 + width: 18, }, { type: "bi.label", text: "#", - width: 10 + width: 10, }, { type: "bi.small_text_editor", - ref: function (_ref) { - self.hexEditor = _ref; + ref: _ref => { + this.hexEditor = _ref; }, cls: "color-picker-editor-input bi-border-radius", validationChecker: this._hexChecker, allowBlank: true, errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), - width: c.HEX_WIDTH, + width: HEX_WIDTH, height: 24, listeners: [ { eventName: "EVENT_CHANGE", - action: function () { - self._checkHexEditor(); - 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); + action: () => { + this._checkHexEditor(); + if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { + this.colorShow.element.css("background-color", this.getValue()); + this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } - - } + }, } - ] + ], }, RGB[0], { - el: BI.extend(Ws[0], { - ref: function (_ref) { - self.R = _ref; - } + el: extend(Ws[0], { + ref: _ref => { + this.R = _ref; + }, }), - width: c.RGB_WIDTH + width: RGB_WIDTH, }, RGB[1], { - el: BI.extend(Ws[1], { - ref: function (_ref) { - self.G = _ref; - } + el: extend(Ws[1], { + ref: _ref => { + this.G = _ref; + }, }), - width: c.RGB_WIDTH + width: RGB_WIDTH, }, RGB[2], { - el: BI.extend(Ws[2], { - ref: function (_ref) { - self.B = _ref; - } + el: extend(Ws[2], { + ref: _ref => { + this.B = _ref; + }, }), rgap: -5, - width: c.RGB_WIDTH + width: RGB_WIDTH, } - ] - } + ], + }, } - ] + ], }, left: 0, right: 0, top: 0, - bottom: 0 + bottom: 0, } - ] + ], }; - }, + } - _hexChecker: function (v) { + _hexChecker(v) { return /^[0-9a-fA-F]{6}$/.test(v); - }, + } - _checkEditors: function () { - if (BI.isEmptyString(this.R.getValue())) { + _checkEditors() { + if (isEmptyString(this.R.getValue())) { this.R.setValue(0); } - if (BI.isEmptyString(this.G.getValue())) { + if (isEmptyString(this.G.getValue())) { this.G.setValue(0); } - if (BI.isEmptyString(this.B.getValue())) { + if (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 + b: this.B.getValue() || 0, }; - this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION)); - }, + this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION)); + } - _isEmptyRGB: function () { - return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b); - }, + _isEmptyRGB() { + return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b); + } - _checkHexEditor: function () { - if (BI.isEmptyString(this.hexEditor.getValue())) { + _checkHexEditor() { + if (isEmptyString(this.hexEditor.getValue())) { this.hexEditor.setValue("000000"); } - var json = BI.DOM.rgb2json(BI.DOM.hex2rgb("#" + this.hexEditor.getValue())); + const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`)); this.storeValue = { r: json.r || 0, g: json.g || 0, @@ -231,9 +231,9 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { this.R.setValue(this.storeValue.r); this.G.setValue(this.storeValue.g); this.B.setValue(this.storeValue.b); - }, + } - _showPreColor: function (color) { + _showPreColor(color) { if (color === "") { this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-square-normal-background"); } else if (color === "transparent") { @@ -241,18 +241,18 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { } else { this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-square-normal-background").removeClass("trans-color-background"); } - }, + } - _setEnable: function (enable) { - BI.ColorPickerEditor.superclass._setEnable.apply(this, arguments); + _setEnable(enable) { + super._setEnable(...arguments); if (enable === true) { this.element.removeClass("base-disabled disabled"); } else if (enable === false) { this.element.addClass("base-disabled disabled"); } - }, + } - setValue: function (color) { + setValue(color) { if (color === "transparent") { this.transparent.setSelected(true); this.none.setSelected(false); @@ -264,8 +264,9 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { this.storeValue = { r: "", g: "", - b: "" + b: "", }; + return; } if (!color) { @@ -276,28 +277,27 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { } this.transparent.setSelected(false); this._showPreColor(color); - var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); + const json = DOM.rgb2json(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 + r: isNull(json.r) ? "" : json.r, + g: isNull(json.g) ? "" : json.g, + b: 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)); - }, + this.hexEditor.setValue(color.slice(HEX_PREFIX_POSITION)); + } - getValue: function () { + getValue() { if (this._isEmptyRGB() && this.transparent.isSelected()) { return "transparent"; } - return BI.DOM.rgb2hex(BI.DOM.json2rgb({ + + return DOM.rgb2hex(DOM.json2rgb({ r: this.storeValue.r, g: this.storeValue.g, - b: this.storeValue.b + b: this.storeValue.b, })); } -}); -BI.HexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.hex_color_picker_editor", BI.HexColorPickerEditor); +} diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js index 749806355..f055be894 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js @@ -1,34 +1,34 @@ +import { shortcut, Widget, extend, isEmptyObject, createItems, isNull, isNumeric, map, isEmptyString, range, DOM } from "@/core"; +import { SimpleColorPickerEditor } from "./editor.colorpicker.simple"; +import { ColorPickerEditor } from "./editor.colorpicker"; + +const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1; + /** * @author windy * @version 2.0 * Created by windy on 2020/11/10 */ -BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { +@shortcut() +export class SimpleHexColorPickerEditor extends Widget { + static xtype = "bi.simple_hex_color_picker_editor"; - constants: { - RGB_WIDTH: 32, - HEX_WIDTH: 70, - HEX_PREFIX_POSITION: 1 - }, + static EVENT_CHANGE = "EVENT_CHANGE"; - props: { + props = { baseCls: "bi-color-picker-editor", - height: 36 - }, - - render: function () { - var self = this, o = this.options, c = this.constants; + height: 36, + } - var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { + render () { + const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { type: "bi.label", cls: "color-picker-editor-label", - height: 20 + 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 () { + const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const Ws = map(range(0, 3), () => { return { type: "bi.small_text_editor", cls: "color-picker-editor-input bi-border-radius", @@ -36,20 +36,20 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { errorText: BI.i18nText("BI-Color_Picker_Error_Text"), allowBlank: true, value: 255, - width: c.RGB_WIDTH, + width: RGB_WIDTH, height: 24, 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); + action: () => { + this._checkEditors(); + if (this.R.isValid() && this.G.isValid() && this.B.isValid()) { + this.colorShow.element.css("background-color", this.getValue()); + this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE); } - } + }, } - ] + ], }; }); @@ -61,7 +61,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { el: { type: "bi.vertical_adapt", rgap: 5, - columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH], + columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH], items: [ { el: { @@ -69,91 +69,91 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { cls: "color-picker-editor-display bi-card bi-border", height: 22, width: 22, - ref: function (_ref) { - self.colorShow = _ref; - } + ref: _ref => { + this.colorShow = _ref; + }, }, width: 18, }, { type: "bi.label", text: "#", - width: 10 + width: 10, }, { type: "bi.small_text_editor", - ref: function (_ref) { - self.hexEditor = _ref; + ref: _ref => { + this.hexEditor = _ref; }, cls: "color-picker-editor-input bi-border-radius", validationChecker: this._hexChecker, allowBlank: true, errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), - width: c.HEX_WIDTH, + width: HEX_WIDTH, height: 24, listeners: [ { eventName: "EVENT_CHANGE", - action: function () { - self._checkHexEditor(); - 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); + action: () => { + this._checkHexEditor(); + if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { + this.colorShow.element.css("background-color", this.getValue()); + this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } - } + }, } - ] + ], }, RGB[0], { - el: BI.extend(Ws[0], { - ref: function (_ref) { - self.R = _ref; - } + el: extend(Ws[0], { + ref: _ref => { + this.R = _ref; + }, }), - width: c.RGB_WIDTH + width: RGB_WIDTH, }, RGB[1], { - el: BI.extend(Ws[1], { - ref: function (_ref) { - self.G = _ref; - } + el: extend(Ws[1], { + ref: _ref => { + this.G = _ref; + }, }), - width: c.RGB_WIDTH + width: RGB_WIDTH, }, RGB[2], { - el: BI.extend(Ws[2], { - ref: function (_ref) { - self.B = _ref; - } + el: extend(Ws[2], { + ref: _ref => { + this.B = _ref; + }, }), rgap: -5, - width: c.RGB_WIDTH + width: RGB_WIDTH, } - ] - } + ], + }, } - ] + ], }; - }, + } - _hexChecker: function (v) { + _hexChecker (v) { return /^[0-9a-fA-F]{6}$/.test(v); - }, + } - _checkEditors: function () { - if (BI.isEmptyString(this.R.getValue())) { + _checkEditors () { + if (isEmptyString(this.R.getValue())) { this.R.setValue(0); } - if (BI.isEmptyString(this.G.getValue())) { + if (isEmptyString(this.G.getValue())) { this.G.setValue(0); } - if (BI.isEmptyString(this.B.getValue())) { + if (isEmptyString(this.B.getValue())) { this.B.setValue(0); } - this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION)); - }, + this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION)); + } - _checkHexEditor: function () { - if (BI.isEmptyString(this.hexEditor.getValue())) { + _checkHexEditor () { + if (isEmptyString(this.hexEditor.getValue())) { this.hexEditor.setValue("000000"); } - var json = BI.DOM.rgb2json(BI.DOM.hex2rgb("#" + this.hexEditor.getValue())); + const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`)); this.storeValue = { r: json.r || 0, g: json.g || 0, @@ -162,24 +162,22 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { this.R.setValue(this.storeValue.r); this.G.setValue(this.storeValue.g); this.B.setValue(this.storeValue.b); - }, + } - setValue: function (color) { + setValue (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(BI.isEmptyObject(json) ? "" : color.slice(this.constants.HEX_PREFIX_POSITION)); - }, + const json = DOM.rgb2json(DOM.hex2rgb(color)); + this.R.setValue(isNull(json.r) ? "" : json.r); + this.G.setValue(isNull(json.g) ? "" : json.g); + this.B.setValue(isNull(json.b) ? "" : json.b); + this.hexEditor.setValue(isEmptyObject(json) ? "" : color.slice(HEX_PREFIX_POSITION)); + } - getValue: function () { - return BI.DOM.rgb2hex(BI.DOM.json2rgb({ + getValue () { + return DOM.rgb2hex(DOM.json2rgb({ r: this.R.getValue(), g: this.G.getValue(), - b: this.B.getValue() + b: this.B.getValue(), })); } -}); -BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor); +} diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.js b/src/case/colorchooser/colorpicker/editor.colorpicker.js index 982d333c3..f413ff94d 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.js @@ -1,60 +1,62 @@ +import { shortcut, Widget, extend, createWidgets, createItems, createWidget, each, isEmptyString, isNumeric, isNull, DOM } from "@/core"; +import { IconButton } from "@/base"; + +const RGB_WIDTH = 32; + /** * 简单选色控件 * * Created by GUY on 2015/11/16. - * @class BI.ColorPickerEditor - * @extends BI.Widget + * @class ColorPickerEditor + * @extends Widget */ -BI.ColorPickerEditor = BI.inherit(BI.Widget, { +@shortcut() +export class ColorPickerEditor extends Widget { + static xtype = "bi.color_picker_editor"; - constants: { - RGB_WIDTH: 32 - }, + static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig: function () { - return BI.extend(BI.ColorPickerEditor.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig () { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-color-picker-editor", // width: 200, - height: 30 + height: 30, }); - }, + } - _init: function () { - BI.ColorPickerEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options, c = this.constants; + _init () { + super._init(...arguments); this.storeValue = {}; - this.colorShow = BI.createWidget({ + this.colorShow = createWidget({ type: "bi.layout", cls: "color-picker-editor-display bi-card bi-border", height: 16, - width: 16 + width: 16, }); - var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { + const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { type: "bi.label", cls: "color-picker-editor-label", width: 20, - height: 20 + height: 20, })); - var checker = function (v) { - return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; - }; - var Ws = BI.createWidgets([{}, {}, {}], { + const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const Ws = createWidgets([{}, {}, {}], { type: "bi.small_text_editor", cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), allowBlank: true, value: 255, - width: c.RGB_WIDTH, - height: 20 + width: RGB_WIDTH, + height: 20, }); - BI.each(Ws, function (i, w) { - w.on(BI.TextEditor.EVENT_CHANGE, 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); + each(Ws, (i, w) => { + w.on(BI.TextEditor.EVENT_CHANGE, () => { + this._checkEditors(); + if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { + this.colorShow.element.css("background-color", this.getValue()); + this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } }); }); @@ -62,37 +64,37 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { this.G = Ws[1]; this.B = Ws[2]; - this.none = BI.createWidget({ + this.none = createWidget({ type: "bi.icon_button", cls: "auto-color-icon", width: 16, height: 16, iconWidth: 16, iconHeight: 16, - title: BI.i18nText("BI-Basic_Auto") + title: BI.i18nText("BI-Basic_Auto"), }); - this.none.on(BI.IconButton.EVENT_CHANGE, function () { - var value = self.getValue(); - self.setValue(""); - (value !== "") && self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); + this.none.on(IconButton.EVENT_CHANGE, () => { + const value = this.getValue(); + this.setValue(""); + (value !== "") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); }); - this.transparent = BI.createWidget({ + this.transparent = createWidget({ type: "bi.icon_button", cls: "trans-color-icon", width: 16, height: 16, iconWidth: 16, iconHeight: 16, - title: BI.i18nText("BI-Transparent_Color") + title: BI.i18nText("BI-Transparent_Color"), }); - this.transparent.on(BI.IconButton.EVENT_CHANGE, function () { - var value = self.getValue(); - self.setValue("transparent"); - (value !== "transparent") && self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); + this.transparent.on(IconButton.EVENT_CHANGE, () => { + const value = this.getValue(); + this.setValue("transparent"); + (value !== "transparent") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, items: [ @@ -102,67 +104,67 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { items: [ { el: this.colorShow, - width: 16 + width: 16, }, { el: RGB[0], - width: 20 + width: 20, }, { el: this.R, - width: c.RGB_WIDTH + width: RGB_WIDTH, }, { el: RGB[1], - width: 20 + width: 20, }, { el: this.G, - width: c.RGB_WIDTH + width: RGB_WIDTH, }, { el: RGB[2], - width: 20 + width: 20, }, { el: this.B, - width: c.RGB_WIDTH + width: RGB_WIDTH, }, { el: this.transparent, width: 16, - lgap: 5 + lgap: 5, }, { el: this.none, width: 16, - lgap: 5 + lgap: 5, } - ] + ], }, left: 10, right: 10, top: 0, - bottom: 0 + bottom: 0, } - ] + ], }); - }, + } - _checkEditors: function () { - if (BI.isEmptyString(this.R.getValue())) { + _checkEditors () { + if (isEmptyString(this.R.getValue())) { this.R.setValue(0); } - if (BI.isEmptyString(this.G.getValue())) { + if (isEmptyString(this.G.getValue())) { this.G.setValue(0); } - if (BI.isEmptyString(this.B.getValue())) { + if (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 + b: this.B.getValue() || 0, }; - }, + } - _isEmptyRGB: function () { - return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b); - }, + _isEmptyRGB () { + return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b); + } - _showPreColor: function (color) { + _showPreColor (color) { if (color === "") { this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background"); } else if (color === "transparent") { @@ -170,18 +172,18 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { } 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); + _setEnable (enable) { + super._setEnable(...arguments); if (enable === true) { this.element.removeClass("base-disabled disabled"); } else if (enable === false) { this.element.addClass("base-disabled disabled"); } - }, + } - setValue: function (color) { + setValue (color) { if (color === "transparent") { this.transparent.setSelected(true); this.none.setSelected(false); @@ -192,8 +194,9 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { this.storeValue = { r: "", g: "", - b: "" + b: "", }; + return; } if (!color) { @@ -204,27 +207,26 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { } this.transparent.setSelected(false); this._showPreColor(color); - var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); + const json = DOM.rgb2json(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 + r: isNull(json.r) ? "" : json.r, + g: isNull(json.g) ? "" : json.g, + b: isNull(json.b) ? "" : json.b, }; this.R.setValue(this.storeValue.r); this.G.setValue(this.storeValue.g); this.B.setValue(this.storeValue.b); - }, + } - getValue: function () { + getValue() { if (this._isEmptyRGB() && this.transparent.isSelected()) { return "transparent"; } - return BI.DOM.rgb2hex(BI.DOM.json2rgb({ + + return DOM.rgb2hex(DOM.json2rgb({ r: this.storeValue.r, g: this.storeValue.g, - b: this.storeValue.b + b: this.storeValue.b, })); } -}); -BI.ColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.color_picker_editor", BI.ColorPickerEditor); +} diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js index 63b7576b4..590cd1c37 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js @@ -1,59 +1,60 @@ +import { shortcut, Widget, extend, isNull, createWidget, isNumeric, createItems, createWidgets, each, isEmptyString, DOM } from "@/core"; + +const RGB_WIDTH = 32; + /** * 简单选色控件 * * Created by GUY on 2015/11/16. - * @class BI.SimpleColorPickerEditor - * @extends BI.Widget + * @class SimpleColorPickerEditor + * @extends Widget */ -BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { +@shortcut() +export class SimpleColorPickerEditor extends Widget { + static xtype = "bi.simple_color_picker_editor"; - constants: { - RGB_WIDTH: 32 - }, + static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig: function () { - return BI.extend(BI.SimpleColorPickerEditor.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-color-picker-editor", // width: 200, - height: 30 + height: 30, }); - }, + } - _init: function () { - BI.SimpleColorPickerEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options, c = this.constants; - this.colorShow = BI.createWidget({ + _init() { + super._init(...arguments); + this.colorShow = createWidget({ type: "bi.layout", cls: "color-picker-editor-display bi-card bi-border", height: 16, - width: 16 + width: 16, }); - var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { + const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { type: "bi.label", cls: "color-picker-editor-label", width: 20, - height: 20 + height: 20, })); - var checker = function (v) { - return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; - }; - var Ws = BI.createWidgets([{}, {}, {}], { + const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const Ws = createWidgets([{}, {}, {}], { type: "bi.small_text_editor", cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), allowBlank: true, value: 255, - width: c.RGB_WIDTH, - height: 20 + width: RGB_WIDTH, + height: 20, }); - BI.each(Ws, function (i, w) { - w.on(BI.TextEditor.EVENT_CHANGE, 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); + each(Ws, (i, w) => { + w.on(BI.TextEditor.EVENT_CHANGE, () => { + this._checkEditors(); + if (this.R.isValid() && this.G.isValid() && this.B.isValid()) { + this.colorShow.element.css("background-color", this.getValue()); + this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE); } }); }); @@ -61,7 +62,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { this.G = Ws[1]; this.B = Ws[2]; - BI.createWidget({ + createWidget({ type: "bi.vertical_adapt", element: this, items: [ @@ -69,57 +70,55 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { el: this.colorShow, width: 16, lgap: 20, - rgap: 15 + rgap: 15, }, { el: RGB[0], - width: 20 + width: 20, }, { el: this.R, - width: c.RGB_WIDTH + width: RGB_WIDTH, }, { el: RGB[1], - width: 20 + width: 20, }, { el: this.G, - width: c.RGB_WIDTH + width: RGB_WIDTH, }, { el: RGB[2], - width: 20 + width: 20, }, { el: this.B, - width: c.RGB_WIDTH + width: RGB_WIDTH, } - ] + ], }); - }, + } - _checkEditors: function () { - if (BI.isEmptyString(this.R.getValue())) { + _checkEditors() { + if (isEmptyString(this.R.getValue())) { this.R.setValue(0); } - if (BI.isEmptyString(this.G.getValue())) { + if (isEmptyString(this.G.getValue())) { this.G.setValue(0); } - if (BI.isEmptyString(this.B.getValue())) { + if (isEmptyString(this.B.getValue())) { this.B.setValue(0); } - }, + } - setValue: function (color) { + setValue(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); - }, + const json = DOM.rgb2json(DOM.hex2rgb(color)); + this.R.setValue(isNull(json.r) ? "" : json.r); + this.G.setValue(isNull(json.g) ? "" : json.g); + this.B.setValue(isNull(json.b) ? "" : json.b); + } - getValue: function () { - return BI.DOM.rgb2hex(BI.DOM.json2rgb({ + getValue() { + return DOM.rgb2hex(DOM.json2rgb({ r: this.R.getValue(), g: this.G.getValue(), - b: this.B.getValue() + b: this.B.getValue(), })); } -}); -BI.SimpleColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor); +} diff --git a/src/case/colorchooser/colorpicker/index.js b/src/case/colorchooser/colorpicker/index.js new file mode 100644 index 000000000..73724cae8 --- /dev/null +++ b/src/case/colorchooser/colorpicker/index.js @@ -0,0 +1,7 @@ +export { ColorPicker } from "./colorpicker"; +export { HexColorPicker } from "./colorpicker.hex"; +export { ColorPickerEditor } from "./editor.colorpicker"; +export { HexColorPickerEditor } from "./editor.colorpicker.hex"; +export { SimpleHexColorPickerEditor } from "./editor.colorpicker.hex.simple"; +export { SimpleColorPickerEditor } from "./editor.colorpicker.simple"; +export * from "./button"; diff --git a/src/case/colorchooser/farbtastic/farbtastic.js b/src/case/colorchooser/farbtastic/farbtastic.js index 0bf1061b0..9a57fbaf8 100644 --- a/src/case/colorchooser/farbtastic/farbtastic.js +++ b/src/case/colorchooser/farbtastic/farbtastic.js @@ -1,98 +1,101 @@ -BI.Farbtastic = BI.inherit(BI.BasicButton, { +import { shortcut, isKey, DOM } from "@/core"; +import { BasicButton } from "@/base"; - constants: { - RADIUS: 84, - SQUARE: 100, - WIDTH: 194 - }, +const RADIUS = 84, SQUARE = 100, WIDTH = 194; - props: { +@shortcut() +export class Farbtastic extends BasicButton { + static xtype = "bi.farbtastic"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + props = { baseCls: "bi-farbtastic", width: 195, height: 195, stopPropagation: true, - value: "#000000" - }, + value: "#000000", + } - render: function () { - var self = this; + render() { this._defaultState(); + return { type: "bi.absolute", items: [{ el: { type: "bi.layout", cls: "", - ref: function (_ref) { - self.colorWrapper = _ref; - } + ref: _ref => { + this.colorWrapper = _ref; + }, }, top: 47, left: 47, width: 101, - height: 101 + height: 101, }, { el: { type: "bi.layout", cls: "wheel", - ref: function (_ref) { - self.wheel = _ref; - } + ref: _ref => { + this.wheel = _ref; + }, }, left: 0, right: 0, top: 0, - bottom: 0 + bottom: 0, }, { el: { type: "bi.layout", cls: "overlay", - ref: function (_ref) { - self.overlay = _ref; - } + ref: _ref => { + this.overlay = _ref; + }, }, top: 47, left: 47, width: 101, - height: 101 + height: 101, }, { el: { type: "bi.layout", cls: "marker", - ref: function (_ref) { - self.hMarker = _ref; + ref: _ref => { + this.hMarker = _ref; }, scrollable: false, width: 17, - height: 17 - } + height: 17, + }, }, { el: { type: "bi.layout", cls: "marker", - ref: function (_ref) { - self.slMarker = _ref; + ref: _ref => { + this.slMarker = _ref; }, scrollable: false, width: 17, - height: 17 - } - }] + height: 17, + }, + }], }; - }, + } - created: function () { - var o = this.options; - if (BI.isKey(o.value)) { + created() { + const o = this.options; + if (isKey(o.value)) { this.setValue(o.value); } - }, + } - _defaultState: function () { + _defaultState() { this.hsl = [0, 0, 0]; - }, + } - _unpack: function (color) { + _unpack(color) { if (color.length === 7) { return [parseInt("0x" + color.substring(1, 3)) / 255, parseInt("0x" + color.substring(3, 5)) / 255, @@ -102,81 +105,84 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, { parseInt("0x" + color.substring(2, 3)) / 15, parseInt("0x" + color.substring(3, 4)) / 15]; } - }, + } - _pack: function (rgb) { - var r = Math.round(rgb[0] * 255); - var g = Math.round(rgb[1] * 255); - var b = Math.round(rgb[2] * 255); + _pack(rgb) { + const r = Math.round(rgb[0] * 255); + const g = Math.round(rgb[1] * 255); + const b = Math.round(rgb[2] * 255); + return "#" + (r < 16 ? "0" : "") + r.toString(16) + - (g < 16 ? "0" : "") + g.toString(16) + - (b < 16 ? "0" : "") + b.toString(16); - }, + (g < 16 ? "0" : "") + g.toString(16) + + (b < 16 ? "0" : "") + b.toString(16); + } - _setColor: function (color) { - var unpack = this._unpack(color); + _setColor(color) { + const unpack = this._unpack(color); if (this.value !== color && unpack) { this.value = color; this.rgb = unpack; this.hsl = this._RGBToHSL(this.rgb); this._updateDisplay(); } - }, + } - _setHSL: function (hsl) { + _setHSL(hsl) { this.hsl = hsl; this.rgb = this._HSLToRGB(hsl); this.value = this._pack(this.rgb); this._updateDisplay(); + return this; - }, + } - _HSLToRGB: function (hsl) { - return BI.DOM.hsl2rgb(hsl); - }, + _HSLToRGB(hsl) { + return DOM.hsl2rgb(hsl); + } - _RGBToHSL: function (rgb) { - return BI.DOM.rgb2hsl(rgb); - }, + _RGBToHSL(rgb) { + return DOM.rgb2hsl(rgb); + } - _updateDisplay: function () { - var angle = this.hsl[0] * 6.28; + _updateDisplay() { + const angle = this.hsl[0] * 6.28; this.hMarker.element.css({ - left: Math.round(Math.sin(angle) * this.constants.RADIUS + this.constants.WIDTH / 2) + "px", - top: Math.round(-Math.cos(angle) * this.constants.RADIUS + this.constants.WIDTH / 2) + "px" + left: `${Math.round(Math.sin(angle) * RADIUS + WIDTH / 2)}px`, + top: `${Math.round(-Math.cos(angle) * RADIUS + WIDTH / 2)}px`, }); this.slMarker.element.css({ - left: Math.round(this.constants.SQUARE * (.5 - this.hsl[1]) + this.constants.WIDTH / 2) + "px", - top: Math.round(this.constants.SQUARE * (.5 - this.hsl[2]) + this.constants.WIDTH / 2) + "px" + left: `${Math.round(SQUARE * (.5 - this.hsl[1]) + WIDTH / 2)}px`, + top: `${Math.round(SQUARE * (.5 - this.hsl[2]) + WIDTH / 2)}px`, }); // Saturation/Luminance gradient this.colorWrapper.element.css("backgroundColor", this._pack(this._HSLToRGB([this.hsl[0], 1, 0.5]))); - }, + } - _absolutePosition: function (el) { - var r = {x: el.offsetLeft, y: el.offsetTop}; + _absolutePosition(el) { + const r = { x: el.offsetLeft, y: el.offsetTop }; // Resolve relative to offsetParent if (el.offsetParent) { - var tmp = this._absolutePosition(el.offsetParent); + const tmp = this._absolutePosition(el.offsetParent); r.x += tmp.x; r.y += tmp.y; } + return r; - }, + } - _widgetCoords: function (event) { - var x, y; - var el = event.target || event.srcElement; - var reference = this.wheel.element[0]; + _widgetCoords(event) { + let x, y; + const el = event.target || event.srcElement; + const reference = this.wheel.element[0]; if (typeof event.offsetX !== "undefined") { // Use offset coordinates and find common offsetParent - var pos = {x: event.offsetX, y: event.offsetY}; + const pos = { x: event.offsetX, y: event.offsetY }; // Send the coordinates upwards through the offsetParent chain. - var e = el; + let e = el; while (e) { e.mouseX = pos.x; e.mouseY = pos.y; @@ -186,8 +192,8 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, { } // Look for the coordinates starting from the wheel widget. - var e = reference; - var offset = {x: 0, y: 0}; + e = reference; + const offset = { x: 0, y: 0 }; while (e) { if (typeof e.mouseX !== "undefined") { x = e.mouseX - offset.x; @@ -208,46 +214,46 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, { } } else { // Use absolute coordinates - var pos = this._absolutePosition(reference); + const pos = this._absolutePosition(reference); x = (event.pageX || 0) - pos.x; y = (event.pageY || 0) - pos.y; } + // Subtract distance to middle - return {x: x - this.constants.WIDTH / 2, y: y - this.constants.WIDTH / 2}; - }, + return { x: x - WIDTH / 2, y: y - WIDTH / 2 }; + } - _doMouseMove: function (event) { - var pos = this._widgetCoords(event); + _doMouseMove(event) { + const pos = this._widgetCoords(event); // Set new HSL parameters if (this.circleDrag) { - var hue = Math.atan2(pos.x, -pos.y) / 6.28; + let hue = Math.atan2(pos.x, -pos.y) / 6.28; if (hue < 0) hue += 1; this._setHSL([hue, this.hsl[1], this.hsl[2]]); } else { - var sat = Math.max(0, Math.min(1, -(pos.x / this.constants.SQUARE) + .5)); - var lum = Math.max(0, Math.min(1, -(pos.y / this.constants.SQUARE) + .5)); + const sat = Math.max(0, Math.min(1, -(pos.x / SQUARE) + .5)); + const lum = Math.max(0, Math.min(1, -(pos.y / SQUARE) + .5)); this._setHSL([this.hsl[0], sat, lum]); } - this.fireEvent(BI.Farbtastic.EVENT_CHANGE, this.getValue(), this); - }, + this.fireEvent(Farbtastic.EVENT_CHANGE, this.getValue(), this); + } - doClick: function (event) { - var pos = this._widgetCoords(event); - this.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > this.constants.SQUARE; + doClick(event) { + const pos = this._widgetCoords(event); + this.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > SQUARE; // Process this._doMouseMove(event); + return false; - }, + } - setValue: function (color) { + setValue(color) { this._setColor(color); - }, + } - getValue: function () { + getValue() { return this.value; } -}); -BI.Farbtastic.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.farbtastic", BI.Farbtastic); +} diff --git a/src/case/colorchooser/index.js b/src/case/colorchooser/index.js new file mode 100644 index 000000000..582eac086 --- /dev/null +++ b/src/case/colorchooser/index.js @@ -0,0 +1,11 @@ +export { ColorChooser } from "./colorchooser"; +export { CustomColorChooser } from "./colorchooser.custom"; +export { ColorChooserPopup } from "./colorchooser.popup"; +export { HexColorChooserPopup } from "./colorchooser.popup.hex"; +export { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple"; +export { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; +export { SimpleColorChooser } from "./colorchooser.simple"; +export { ColorChooserTrigger } from "./colorchooser.trigger"; +export { LongColorChooserTrigger } from "./colorchooser.trigger.long"; +export { Farbtastic } from "./farbtastic/farbtastic"; +export * from "./colorpicker"; diff --git a/src/case/index.js b/src/case/index.js index 647534575..70d85ee9e 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -10,8 +10,9 @@ import * as segment from "./segment"; import { MultiSelectBar } from "./toolbar/toolbar.multiselect"; import * as layer from "./layer"; import * as linearSegment from "./linearsegment"; +import * as colorchooser from "./colorchooser"; import { SelectList } from "./list/list.select"; -import * as combo from "./combo"; + Object.assign(BI, { ...combo, @@ -27,6 +28,7 @@ Object.assign(BI, { MultiSelectBar, ...layer, ...linearSegment, + ...colorchooser, SelectList, }); @@ -44,6 +46,7 @@ export * from "./segment"; export * from "./layer"; export * from "./linearsegment"; export * from "./checkbox"; +export * from "./colorchooser"; export { MultiSelectBar, SelectList diff --git a/src/core/structure/queue.js b/src/core/structure/queue.js index 9cdf8b596..b42e25492 100644 --- a/src/core/structure/queue.js +++ b/src/core/structure/queue.js @@ -75,7 +75,7 @@ export class Queue { } fromArray(array) { - array.each(v => this.push(v)); + array.forEach(v => this.push(v)); } clear() { From bac72939090fe9e4d79fcd72273080ac884a47b6 Mon Sep 17 00:00:00 2001 From: impact Date: Thu, 12 Jan 2023 15:39:14 +0800 Subject: [PATCH 2/2] =?UTF-8?q?KERNEL-14047=20refactor:=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8Dindex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/case/index.js b/src/case/index.js index 70d85ee9e..bc43a3dff 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -12,7 +12,7 @@ import * as layer from "./layer"; import * as linearSegment from "./linearsegment"; import * as colorchooser from "./colorchooser"; import { SelectList } from "./list/list.select"; - +import * as combo from "./combo"; Object.assign(BI, { ...combo,