From 3fb5b3a9bbd626b3ced4d119a24ae6506d2f6408 Mon Sep 17 00:00:00 2001 From: impact Date: Thu, 12 Jan 2023 15:32:32 +0800 Subject: [PATCH 1/6] =?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/6] =?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, From d43a9786e47db24724dbad74a354713170072693 Mon Sep 17 00:00:00 2001 From: zsmj Date: Thu, 12 Jan 2023 16:13:17 +0800 Subject: [PATCH 3/6] update --- src/widget/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/widget/index.js b/src/widget/index.js index 327f708f8..5d238bd4f 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -44,7 +44,7 @@ export * from "./datepane"; export * from "./datetime"; export * from "./datetimepane"; export * from "./dynamicdatetime"; -export * from "./time +export * from "./time"; export * from "./editor"; export { SelectTreeCombo } from "./selecttree/selecttree.combo"; export { SingleTreeCombo } from "./singletree/singletree.combo"; @@ -53,7 +53,7 @@ export { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo"; export { MultiTreeListCombo } from "./multitree/multi.tree.list.combo"; export * from "./multiselect"; export * from "./multiselectlist"; - + export { Collapse, NumberEditor, From fb82d5c0273675fdc951df4dc82266033e6cce8b Mon Sep 17 00:00:00 2001 From: zsmj Date: Thu, 12 Jan 2023 16:13:32 +0800 Subject: [PATCH 4/6] update --- src/core/1.lodash.js | 443 ++++++++++++++++++++++++------------------- 1 file changed, 243 insertions(+), 200 deletions(-) diff --git a/src/core/1.lodash.js b/src/core/1.lodash.js index 1fdf1bbc4..269718d61 100644 --- a/src/core/1.lodash.js +++ b/src/core/1.lodash.js @@ -1,3 +1,4 @@ +/* eslint-disable */ /** * @license * Lodash (Custom Build) @@ -7,7 +8,7 @@ * Based on Underscore.js 1.8.3 * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors */ -;(function() { +;(function () { /** Used as a safe reference for `undefined` in pre-ES5 environments. */ var undefined; @@ -191,7 +192,7 @@ var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g'); /** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */ - var reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange + rsComboRange + rsVarRange + ']'); + var reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange + rsComboRange + rsVarRange + ']'); /** Used to identify `toStringTag` values of typed arrays. */ var typedArrayTags = {}; @@ -269,10 +270,11 @@ var freeProcess = moduleExports && freeGlobal.process; /** Used to access faster Node.js helpers. */ - var nodeUtil = (function() { + var nodeUtil = (function () { try { return freeProcess && freeProcess.binding && freeProcess.binding('util'); - } catch (e) {} + } catch (e) { + } }()); /* Node.js helper references. */ @@ -296,10 +298,14 @@ */ function apply(func, thisArg, args) { switch (args.length) { - case 0: return func.call(thisArg); - case 1: return func.call(thisArg, args[0]); - case 2: return func.call(thisArg, args[0], args[1]); - case 3: return func.call(thisArg, args[0], args[1], args[2]); + case 0: + return func.call(thisArg); + case 1: + return func.call(thisArg, args[0]); + case 2: + return func.call(thisArg, args[0], args[1]); + case 3: + return func.call(thisArg, args[0], args[1], args[2]); } return func.apply(thisArg, args); } @@ -546,7 +552,7 @@ */ function baseFindKey(collection, predicate, eachFunc) { var result; - eachFunc(collection, function(value, key, collection) { + eachFunc(collection, function (value, key, collection) { if (predicate(value, key, collection)) { result = key; return false; @@ -612,7 +618,7 @@ * @returns {Function} Returns the new accessor function. */ function baseProperty(key) { - return function(object) { + return function (object) { return object == null ? undefined : object[key]; }; } @@ -625,7 +631,7 @@ * @returns {Function} Returns the new accessor function. */ function basePropertyOf(object) { - return function(key) { + return function (key) { return object == null ? undefined : object[key]; }; } @@ -644,7 +650,7 @@ * @returns {*} Returns the accumulated value. */ function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) { - eachFunc(collection, function(value, index, collection) { + eachFunc(collection, function (value, index, collection) { accumulator = initAccum ? (initAccum = false, value) : iteratee(accumulator, value, index, collection); @@ -699,7 +705,7 @@ * @returns {Function} Returns the new capped function. */ function baseUnary(func) { - return function(value) { + return function (value) { return func(value); }; } @@ -715,7 +721,7 @@ * @returns {Object} Returns the array of property values. */ function baseValues(object, props) { - return arrayMap(props, function(key) { + return arrayMap(props, function (key) { return object[key]; }); } @@ -745,7 +751,8 @@ var index = -1, length = strSymbols.length; - while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {} + while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) { + } return index; } @@ -761,7 +768,8 @@ function charsEndIndex(strSymbols, chrSymbols) { var index = strSymbols.length; - while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {} + while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) { + } return index; } @@ -845,7 +853,7 @@ var index = -1, result = Array(map.size); - map.forEach(function(value, key) { + map.forEach(function (value, key) { result[++index] = [key, value]; }); return result; @@ -860,7 +868,7 @@ * @returns {Function} Returns the new function. */ function overArg(func, transform) { - return function(arg) { + return function (arg) { return func(transform(arg)); }; } @@ -915,7 +923,7 @@ var index = -1, result = Array(set.size); - set.forEach(function(value) { + set.forEach(function (value) { result[++index] = value; }); return result; @@ -1024,7 +1032,7 @@ var idCounter = 0; /** Used to detect methods masquerading as native. */ - var maskSrcKey = (function() { + var maskSrcKey = (function () { var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || ''); return uid ? ('Symbol(src)_1.' + uid) : ''; }()); @@ -1061,12 +1069,13 @@ symIterator = Symbol ? Symbol.iterator : undefined, symToStringTag = Symbol ? Symbol.toStringTag : undefined; - var defineProperty = (function() { + var defineProperty = (function () { try { var func = getNative(Object, 'defineProperty'); func({}, '', {}); return func; - } catch (e) {} + } catch (e) { + } }()); /* Built-in method references for those with the same name as other `lodash` methods. */ @@ -1247,9 +1256,11 @@ * @param {Object} proto The object to inherit from. * @returns {Object} Returns the new object. */ - var baseCreate = (function() { - function object() {} - return function(proto) { + var baseCreate = (function () { + function object() { + } + + return function (proto) { if (!isObject(proto)) { return {}; } @@ -1992,7 +2003,7 @@ * @returns {Function} Returns `accumulator`. */ function baseAggregator(collection, setter, iteratee, accumulator) { - baseEach(collection, function(value, key, collection) { + baseEach(collection, function (value, key, collection) { setter(accumulator, value, iteratee(value), collection); }); return accumulator; @@ -2154,7 +2165,7 @@ stack.set(value, result); if (isSet(value)) { - value.forEach(function(subValue) { + value.forEach(function (subValue) { result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack)); }); @@ -2162,7 +2173,7 @@ } if (isMap(value)) { - value.forEach(function(subValue, key) { + value.forEach(function (subValue, key) { result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack)); }); @@ -2174,7 +2185,7 @@ : (isFlat ? keysIn : keys); var props = isArr ? undefined : keysFunc(value); - arrayEach(props || value, function(subValue, key) { + arrayEach(props || value, function (subValue, key) { if (props) { key = subValue; subValue = value[key]; @@ -2199,7 +2210,9 @@ if (typeof func != 'function') { throw new TypeError(FUNC_ERROR_TEXT); } - return setTimeout(function() { func.apply(undefined, args); }, wait); + return setTimeout(function () { + func.apply(undefined, args); + }, wait); } /** @@ -2230,8 +2243,7 @@ if (comparator) { includes = arrayIncludesWith; isCommon = false; - } - else if (values.length >= LARGE_ARRAY_SIZE) { + } else if (values.length >= LARGE_ARRAY_SIZE) { includes = cacheHas; isCommon = false; values = new SetCache(values); @@ -2250,8 +2262,7 @@ } } result.push(value); - } - else if (!includes(values, computed, comparator)) { + } else if (!includes(values, computed, comparator)) { result.push(value); } } @@ -2279,7 +2290,7 @@ */ function baseEvery(collection, predicate) { var result = true; - baseEach(collection, function(value, index, collection) { + baseEach(collection, function (value, index, collection) { result = !!predicate(value, index, collection); return result; }); @@ -2325,7 +2336,7 @@ */ function baseFilter(collection, predicate) { var result = []; - baseEach(collection, function(value, index, collection) { + baseEach(collection, function (value, index, collection) { if (predicate(value, index, collection)) { result.push(value); } @@ -2426,7 +2437,7 @@ * @returns {Array} Returns the function names. */ function baseFunctions(object, props) { - return arrayFilter(props, function(key) { + return arrayFilter(props, function (key) { return isFunction(object[key]); }); } @@ -2595,7 +2606,7 @@ * @returns {Function} Returns `accumulator`. */ function baseInverter(object, setter, iteratee, accumulator) { - baseForOwn(object, function(value, key, object) { + baseForOwn(object, function (value, key, object) { setter(accumulator, iteratee(value), key, object); }); return accumulator; @@ -2929,7 +2940,7 @@ var index = -1, result = isArrayLike(collection) ? Array(collection.length) : []; - baseEach(collection, function(value, key, collection) { + baseEach(collection, function (value, key, collection) { result[++index] = iteratee(value, key, collection); }); return result; @@ -2947,7 +2958,7 @@ if (matchData.length == 1 && matchData[0][2]) { return matchesStrictComparable(matchData[0][0], matchData[0][1]); } - return function(object) { + return function (object) { return object === source || baseIsMatch(object, source, matchData); }; } @@ -2964,7 +2975,7 @@ if (isKey(path) && isStrictComparable(srcValue)) { return matchesStrictComparable(toKey(path), srcValue); } - return function(object) { + return function (object) { var objValue = get(object, path); return (objValue === undefined && objValue === srcValue) ? hasIn(object, path) @@ -2987,12 +2998,11 @@ if (object === source) { return; } - baseFor(source, function(srcValue, key) { + baseFor(source, function (srcValue, key) { if (isObject(srcValue)) { stack || (stack = new Stack); baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack); - } - else { + } else { var newValue = customizer ? customizer(safeGet(object, key), srcValue, (key + ''), object, source, stack) : undefined; @@ -3044,32 +3054,25 @@ if (isArr || isBuff || isTyped) { if (isArray(objValue)) { newValue = objValue; - } - else if (isArrayLikeObject(objValue)) { + } else if (isArrayLikeObject(objValue)) { newValue = copyArray(objValue); - } - else if (isBuff) { + } else if (isBuff) { isCommon = false; newValue = cloneBuffer(srcValue, true); - } - else if (isTyped) { + } else if (isTyped) { isCommon = false; newValue = cloneTypedArray(srcValue, true); - } - else { + } else { newValue = []; } - } - else if (isPlainObject(srcValue) || isArguments(srcValue)) { + } else if (isPlainObject(srcValue) || isArguments(srcValue)) { newValue = objValue; if (isArguments(objValue)) { newValue = toPlainObject(objValue); - } - else if (!isObject(objValue) || (srcIndex && isFunction(objValue))) { + } else if (!isObject(objValue) || (srcIndex && isFunction(objValue))) { newValue = initCloneObject(srcValue); } - } - else { + } else { isCommon = false; } } @@ -3095,14 +3098,14 @@ var index = -1; iteratees = arrayMap(iteratees.length ? iteratees : [identity], baseUnary(baseIteratee)); - var result = baseMap(collection, function(value, key, collection) { - var criteria = arrayMap(iteratees, function(iteratee) { + var result = baseMap(collection, function (value, key, collection) { + var criteria = arrayMap(iteratees, function (iteratee) { return iteratee(value); }); return { 'criteria': criteria, 'index': ++index, 'value': value }; }); - return baseSortBy(result, function(object, other) { + return baseSortBy(result, function (object, other) { return compareMultiple(object, other, orders); }); } @@ -3117,7 +3120,7 @@ * @returns {Object} Returns the new object. */ function basePick(object, paths) { - return basePickBy(object, paths, function(value, path) { + return basePickBy(object, paths, function (value, path) { return hasIn(object, path); }); } @@ -3155,7 +3158,7 @@ * @returns {Function} Returns the new accessor function. */ function basePropertyDeep(path) { - return function(object) { + return function (object) { return baseGet(object, path); }; } @@ -3256,7 +3259,7 @@ * @param {*} data The metadata. * @returns {Function} Returns `func`. */ - var baseSetData = !metaMap ? identity : function(func, data) { + var baseSetData = !metaMap ? identity : function (func, data) { metaMap.set(func, data); return func; }; @@ -3269,7 +3272,7 @@ * @param {Function} string The `toString` result. * @returns {Function} Returns `func`. */ - var baseSetToString = !defineProperty ? identity : function(func, string) { + var baseSetToString = !defineProperty ? identity : function (func, string) { return defineProperty(func, 'toString', { 'configurable': true, 'enumerable': false, @@ -3320,7 +3323,7 @@ function baseSome(collection, predicate) { var result; - baseEach(collection, function(value, index, collection) { + baseEach(collection, function (value, index, collection) { result = predicate(value, index, collection); return !result; }); @@ -3371,8 +3374,7 @@ if (comparator) { isCommon = false; includes = arrayIncludesWith; - } - else if (length >= LARGE_ARRAY_SIZE) { + } else if (length >= LARGE_ARRAY_SIZE) { var set = iteratee ? null : createSet(array); if (set) { return setToArray(set); @@ -3380,8 +3382,7 @@ isCommon = false; includes = cacheHas; seen = new SetCache; - } - else { + } else { seen = iteratee ? [] : result; } outer: @@ -3401,8 +3402,7 @@ seen.push(computed); } result.push(value); - } - else if (!includes(seen, computed, comparator)) { + } else if (!includes(seen, computed, comparator)) { if (seen !== result) { seen.push(computed); } @@ -3441,7 +3441,7 @@ if (result instanceof LazyWrapper) { result = result.value(); } - return arrayReduce(actions, function(result, action) { + return arrayReduce(actions, function (result, action) { return action.func.apply(action.thisArg, arrayPush([result], action.args)); }, result); } @@ -3830,7 +3830,7 @@ * @returns {Function} Returns the new aggregator function. */ function createAggregator(setter, initializer) { - return function(collection, iteratee) { + return function (collection, iteratee) { var func = isArray(collection) ? arrayAggregator : baseAggregator, accumulator = initializer ? initializer() : {}; @@ -3846,7 +3846,7 @@ * @returns {Function} Returns the new assigner function. */ function createAssigner(assigner) { - return baseRest(function(object, sources) { + return baseRest(function (object, sources) { var index = -1, length = sources.length, customizer = length > 1 ? sources[length - 1] : undefined, @@ -3880,7 +3880,7 @@ * @returns {Function} Returns the new base function. */ function createBaseEach(eachFunc, fromRight) { - return function(collection, iteratee) { + return function (collection, iteratee) { if (collection == null) { return collection; } @@ -3908,7 +3908,7 @@ * @returns {Function} Returns the new base function. */ function createBaseFor(fromRight) { - return function(object, iteratee, keysFunc) { + return function (object, iteratee, keysFunc) { var index = -1, iterable = Object(object), props = keysFunc(object), @@ -3942,6 +3942,7 @@ var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func; return fn.apply(isBind ? thisArg : this, arguments); } + return wrapper; } @@ -3954,20 +3955,28 @@ * @returns {Function} Returns the new wrapped function. */ function createCtor(Ctor) { - return function() { + return function () { // Use a `switch` statement to work with class constructors. See // http://ecma-international.org/ecma-262/7.0/#sec-ecmascript-function-objects-call-thisargument-argumentslist // for more details. var args = arguments; switch (args.length) { - case 0: return new Ctor; - case 1: return new Ctor(args[0]); - case 2: return new Ctor(args[0], args[1]); - case 3: return new Ctor(args[0], args[1], args[2]); - case 4: return new Ctor(args[0], args[1], args[2], args[3]); - case 5: return new Ctor(args[0], args[1], args[2], args[3], args[4]); - case 6: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5]); - case 7: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]); + case 0: + return new Ctor; + case 1: + return new Ctor(args[0]); + case 2: + return new Ctor(args[0], args[1]); + case 3: + return new Ctor(args[0], args[1], args[2]); + case 4: + return new Ctor(args[0], args[1], args[2], args[3]); + case 5: + return new Ctor(args[0], args[1], args[2], args[3], args[4]); + case 6: + return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5]); + case 7: + return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]); } var thisBinding = baseCreate(Ctor.prototype), result = Ctor.apply(thisBinding, args); @@ -4012,6 +4021,7 @@ var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func; return apply(fn, this, args); } + return wrapper; } @@ -4023,12 +4033,14 @@ * @returns {Function} Returns the new find function. */ function createFind(findIndexFunc) { - return function(collection, predicate, fromIndex) { + return function (collection, predicate, fromIndex) { var iterable = Object(collection); if (!isArrayLike(collection)) { var iteratee = baseIteratee(predicate, 3); collection = keys(collection); - predicate = function(key) { return iteratee(iterable[key], key, iterable); }; + predicate = function (key) { + return iteratee(iterable[key], key, iterable); + }; } var index = findIndexFunc(collection, predicate, fromIndex); return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined; @@ -4105,6 +4117,7 @@ } return fn.apply(thisBinding, args); } + return wrapper; } @@ -4117,7 +4130,7 @@ * @returns {Function} Returns the new inverter function. */ function createInverter(setter, toIteratee) { - return function(object, iteratee) { + return function (object, iteratee) { return baseInverter(object, setter, toIteratee(iteratee), {}); }; } @@ -4154,6 +4167,7 @@ } return apply(fn, isBind ? thisArg : this, args); } + return wrapper; } @@ -4165,7 +4179,7 @@ * @returns {Function} Returns the new range function. */ function createRange(fromRight) { - return function(start, end, step) { + return function (start, end, step) { if (step && typeof step != 'number' && isIterateeCall(start, end, step)) { end = step = undefined; } @@ -4232,7 +4246,7 @@ * @param {Array} values The values to add to the set. * @returns {Object} Returns the new set. */ - var createSet = !(Set && (1 / setToArray(new Set([,-0]))[1]) == INFINITY) ? noop : function(values) { + var createSet = !(Set && (1 / setToArray(new Set([, -0]))[1]) == INFINITY) ? noop : function (values) { return new Set(values); }; @@ -4405,7 +4419,7 @@ } // Recursively compare arrays (susceptible to call stack limits). if (seen) { - if (!arraySome(other, function(othValue, othIndex) { + if (!arraySome(other, function (othValue, othIndex) { if (!cacheHas(seen, othIndex) && (arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) { return seen.push(othIndex); @@ -4627,7 +4641,7 @@ * @param {Function} func The function to query. * @returns {*} Returns the metadata for `func`. */ - var getData = !metaMap ? noop : function(func) { + var getData = !metaMap ? noop : function (func) { return metaMap.get(func); }; @@ -4727,7 +4741,8 @@ try { value[symToStringTag] = undefined; var unmasked = true; - } catch (e) {} + } catch (e) { + } var result = nativeObjectToString.call(value); if (unmasked) { @@ -4747,12 +4762,12 @@ * @param {Object} object The object to query. * @returns {Array} Returns the array of symbols. */ - var getSymbols = !nativeGetSymbols ? stubArray : function(object) { + var getSymbols = !nativeGetSymbols ? stubArray : function (object) { if (object == null) { return []; } object = Object(object); - return arrayFilter(nativeGetSymbols(object), function(symbol) { + return arrayFilter(nativeGetSymbols(object), function (symbol) { return propertyIsEnumerable.call(object, symbol); }); }; @@ -4764,7 +4779,7 @@ * @param {Object} object The object to query. * @returns {Array} Returns the array of symbols. */ - var getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) { + var getSymbolsIn = !nativeGetSymbols ? stubArray : function (object) { var result = []; while (object) { arrayPush(result, getSymbols(object)); @@ -4788,18 +4803,23 @@ (Promise && getTag(Promise.resolve()) != promiseTag) || (Set && getTag(new Set) != setTag) || (WeakMap && getTag(new WeakMap) != weakMapTag)) { - getTag = function(value) { + getTag = function (value) { var result = baseGetTag(value), Ctor = result == objectTag ? value.constructor : undefined, ctorString = Ctor ? toSource(Ctor) : ''; if (ctorString) { switch (ctorString) { - case dataViewCtorString: return dataViewTag; - case mapCtorString: return mapTag; - case promiseCtorString: return promiseTag; - case setCtorString: return setTag; - case weakMapCtorString: return weakMapTag; + case dataViewCtorString: + return dataViewTag; + case mapCtorString: + return mapTag; + case promiseCtorString: + return promiseTag; + case setCtorString: + return setTag; + case weakMapCtorString: + return weakMapTag; } } return result; @@ -4825,10 +4845,18 @@ size = data.size; switch (data.type) { - case 'drop': start += size; break; - case 'dropRight': end -= size; break; - case 'take': end = nativeMin(end, start + size); break; - case 'takeRight': start = nativeMax(start, end - size); break; + case 'drop': + start += size; + break; + case 'dropRight': + end -= size; + break; + case 'take': + end = nativeMin(end, start + size); + break; + case 'takeRight': + start = nativeMax(start, end - size); + break; } } return { 'start': start, 'end': end }; @@ -4934,9 +4962,15 @@ case dataViewTag: return cloneDataView(object, isDeep); - case float32Tag: case float64Tag: - case int8Tag: case int16Tag: case int32Tag: - case uint8Tag: case uint8ClampedTag: case uint16Tag: case uint32Tag: + case float32Tag: + case float64Tag: + case int8Tag: + case int16Tag: + case int32Tag: + case uint8Tag: + case uint8ClampedTag: + case uint16Tag: + case uint32Tag: return cloneTypedArray(object, isDeep); case mapTag: @@ -5134,7 +5168,7 @@ * @returns {Function} Returns the new spec function. */ function matchesStrictComparable(key, srcValue) { - return function(object) { + return function (object) { if (object == null) { return false; } @@ -5152,7 +5186,7 @@ * @returns {Function} Returns the new memoized function. */ function memoizeCapped(func) { - var result = memoize(func, function(key) { + var result = memoize(func, function (key) { if (cache.size === MAX_MEMOIZE_SIZE) { cache.clear(); } @@ -5275,7 +5309,7 @@ */ function overRest(func, start, transform) { start = nativeMax(start === undefined ? (func.length - 1) : start, 0); - return function() { + return function () { var args = arguments, index = -1, length = nativeMax(args.length - start, 0), @@ -5382,7 +5416,7 @@ var count = 0, lastCalled = 0; - return function() { + return function () { var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled); @@ -5405,12 +5439,12 @@ * @param {string} string The string to convert. * @returns {Array} Returns the property path array. */ - var stringToPath = memoizeCapped(function(string) { + var stringToPath = memoizeCapped(function (string) { var result = []; if (string.charCodeAt(0) === 46 /* . */) { result.push(''); } - string.replace(rePropName, function(match, number, quote, subString) { + string.replace(rePropName, function (match, number, quote, subString) { result.push(quote ? subString.replace(reEscapeChar, '$1') : (number || match)); }); return result; @@ -5442,10 +5476,12 @@ if (func != null) { try { return funcToString.call(func); - } catch (e) {} + } catch (e) { + } try { return (func + ''); - } catch (e) {} + } catch (e) { + } } return ''; } @@ -5459,7 +5495,7 @@ * @returns {Array} Returns `details`. */ function updateWrapDetails(details, bitmask) { - arrayEach(wrapFlags, function(pair) { + arrayEach(wrapFlags, function (pair) { var value = '_.' + pair[0]; if ((bitmask & pair[1]) && !arrayIncludes(details, value)) { details.push(value); @@ -5481,7 +5517,7 @@ } var result = new LodashWrapper(wrapper.__wrapped__, wrapper.__chain__); result.__actions__ = copyArray(wrapper.__actions__); - result.__index__ = wrapper.__index__; + result.__index__ = wrapper.__index__; result.__values__ = wrapper.__values__; return result; } @@ -5617,7 +5653,7 @@ * _.difference([2, 1], [2, 3]); * // => [1] */ - var difference = baseRest(function(array, values) { + var difference = baseRest(function (array, values) { return isArrayLikeObject(array) ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true)) : []; @@ -5885,7 +5921,7 @@ * _.intersection([2, 1], [2, 3]); * // => [2] */ - var intersection = baseRest(function(arrays) { + var intersection = baseRest(function (arrays) { var mapped = arrayMap(arrays, castArrayLikeObject); return (mapped.length && mapped[0] === arrays[0]) ? baseIntersection(mapped) @@ -5962,8 +5998,7 @@ if (end && typeof end != 'number' && isIterateeCall(array, start, end)) { start = 0; end = length; - } - else { + } else { start = start == null ? 0 : toInteger(start); end = end === undefined ? length : toInteger(end); } @@ -6054,7 +6089,7 @@ * _.union([2], [1, 2]); * // => [2, 1] */ - var union = baseRest(function(arrays) { + var union = baseRest(function (arrays) { return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true)); }); @@ -6131,13 +6166,13 @@ return []; } var length = 0; - array = arrayFilter(array, function(group) { + array = arrayFilter(array, function (group) { if (isArrayLikeObject(group)) { length = nativeMax(group.length, length); return true; } }); - return baseTimes(length, function(index) { + return baseTimes(length, function (index) { return arrayMap(array, baseProperty(index)); }); } @@ -6162,7 +6197,7 @@ * _.without([2, 1, 2, 3], 1, 2); * // => [3] */ - var without = baseRest(function(array, values) { + var without = baseRest(function (array, values) { return isArrayLikeObject(array) ? baseDifference(array, values) : []; @@ -6314,11 +6349,13 @@ * _(object).at(['a[0].b.c', 'a[1]']).value(); * // => [3, 4] */ - var wrapperAt = flatRest(function(paths) { + var wrapperAt = flatRest(function (paths) { var length = paths.length, start = length ? paths[0] : 0, value = this.__wrapped__, - interceptor = function(object) { return baseAt(object, paths); }; + interceptor = function (object) { + return baseAt(object, paths); + }; if (length > 1 || this.__actions__.length || !(value instanceof LazyWrapper) || !isIndex(start)) { @@ -6330,7 +6367,7 @@ 'args': [interceptor], 'thisArg': undefined }); - return new LodashWrapper(value, this.__chain__).thru(function(array) { + return new LodashWrapper(value, this.__chain__).thru(function (array) { if (length && !array.length) { array.push(undefined); } @@ -6577,7 +6614,7 @@ * _.countBy(['one', 'two', 'three'], 'length'); * // => { '3': 2, '5': 1 } */ - var countBy = createAggregator(function(result, value, key) { + var countBy = createAggregator(function (result, value, key) { if (hasOwnProperty.call(result, key)) { ++result[key]; } else { @@ -6772,7 +6809,7 @@ * _.groupBy(['one', 'two', 'three'], 'length'); * // => { '3': ['one', 'two'], '5': ['three'] } */ - var groupBy = createAggregator(function(result, value, key) { + var groupBy = createAggregator(function (result, value, key) { if (hasOwnProperty.call(result, key)) { result[key].push(value); } else { @@ -7018,7 +7055,7 @@ * _.sortBy(users, ['user', 'age']); * // => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]] */ - var sortBy = baseRest(function(collection, iteratees) { + var sortBy = baseRest(function (collection, iteratees) { if (collection == null) { return []; } @@ -7049,7 +7086,7 @@ * }, _.now()); * // => Logs the number of milliseconds it took for the deferred invocation. */ - var now = function() { + var now = function () { return root.Date.now(); }; @@ -7084,7 +7121,7 @@ throw new TypeError(FUNC_ERROR_TEXT); } n = toInteger(n); - return function() { + return function () { if (--n < 1) { return func.apply(this, arguments); } @@ -7114,7 +7151,7 @@ throw new TypeError(FUNC_ERROR_TEXT); } n = toInteger(n); - return function() { + return function () { if (--n > 0) { result = func.apply(this, arguments); } @@ -7160,7 +7197,7 @@ * bound('hi'); * // => 'hi fred!' */ - var bind = baseRest(function(func, thisArg, partials) { + var bind = baseRest(function (func, thisArg, partials) { var bitmask = WRAP_BIND_FLAG; if (partials.length) { var holders = replaceHolders(partials, getHolder(bind)); @@ -7342,6 +7379,7 @@ } return result; } + debounced.cancel = cancel; debounced.flush = flush; return debounced; @@ -7365,7 +7403,7 @@ * }, 'deferred'); * // => Logs 'deferred' after one millisecond. */ - var defer = baseRest(function(func, args) { + var defer = baseRest(function (func, args) { return baseDelay(func, 1, args); }); @@ -7388,7 +7426,7 @@ * }, 1000, 'later'); * // => Logs 'later' after one second. */ - var delay = baseRest(function(func, wait, args) { + var delay = baseRest(function (func, wait, args) { return baseDelay(func, toNumber(wait) || 0, args); }); @@ -7440,7 +7478,7 @@ if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) { throw new TypeError(FUNC_ERROR_TEXT); } - var memoized = function() { + var memoized = function () { var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache; @@ -7483,13 +7521,17 @@ if (typeof predicate != 'function') { throw new TypeError(FUNC_ERROR_TEXT); } - return function() { + return function () { var args = arguments; switch (args.length) { - case 0: return !predicate.call(this); - case 1: return !predicate.call(this, args[0]); - case 2: return !predicate.call(this, args[0], args[1]); - case 3: return !predicate.call(this, args[0], args[1], args[2]); + case 0: + return !predicate.call(this); + case 1: + return !predicate.call(this, args[0]); + case 2: + return !predicate.call(this, args[0], args[1]); + case 3: + return !predicate.call(this, args[0], args[1], args[2]); } return !predicate.apply(this, args); }; @@ -7720,7 +7762,9 @@ * _.isArguments([1, 2, 3]); * // => false */ - var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) { + var isArguments = baseIsArguments(function () { + return arguments; + }()) ? baseIsArguments : function (value) { return isObjectLike(value) && hasOwnProperty.call(value, 'callee') && !propertyIsEnumerable.call(value, 'callee'); }; @@ -8609,7 +8653,7 @@ * _.assignIn({ 'a': 0 }, new Foo, new Bar); * // => { 'a': 1, 'b': 2, 'c': 3, 'd': 4 } */ - var assignIn = createAssigner(function(object, source) { + var assignIn = createAssigner(function (object, source) { copyObject(source, keysIn(source), object); }); @@ -8673,7 +8717,7 @@ * _.defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 }); * // => { 'a': 1, 'b': 2 } */ - var defaults = baseRest(function(object, sources) { + var defaults = baseRest(function (object, sources) { object = Object(object); var index = -1; @@ -8723,7 +8767,7 @@ * _.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } }); * // => { 'a': { 'b': 2, 'c': 3 } } */ - var defaultsDeep = baseRest(function(args) { + var defaultsDeep = baseRest(function (args) { args.push(undefined, customDefaultsMerge); return apply(mergeWith, undefined, args); }); @@ -8915,7 +8959,7 @@ * _.invert(object); * // => { '1': 'c', '2': 'b' } */ - var invert = createInverter(function(result, value, key) { + var invert = createInverter(function (result, value, key) { if (value != null && typeof value.toString != 'function') { value = nativeObjectToString.call(value); @@ -8950,7 +8994,7 @@ * }); * // => { 'group1': ['a', 'c'], 'group2': ['b'] } */ - var invertBy = createInverter(function(result, value, key) { + var invertBy = createInverter(function (result, value, key) { if (value != null && typeof value.toString != 'function') { value = nativeObjectToString.call(value); @@ -9053,7 +9097,7 @@ * _.merge(object, other); * // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] } */ - var merge = createAssigner(function(object, source, srcIndex) { + var merge = createAssigner(function (object, source, srcIndex) { baseMerge(object, source, srcIndex); }); @@ -9088,7 +9132,7 @@ * _.mergeWith(object, other, customizer); * // => { 'a': [1, 3], 'b': [2, 4] } */ - var mergeWith = createAssigner(function(object, source, srcIndex, customizer) { + var mergeWith = createAssigner(function (object, source, srcIndex, customizer) { baseMerge(object, source, srcIndex, customizer); }); @@ -9112,13 +9156,13 @@ * _.omit(object, ['a', 'c']); * // => { 'b': '2' } */ - var omit = flatRest(function(object, paths) { + var omit = flatRest(function (object, paths) { var result = {}; if (object == null) { return result; } var isDeep = false; - paths = arrayMap(paths, function(path) { + paths = arrayMap(paths, function (path) { path = castPath(path, object); isDeep || (isDeep = path.length > 1); return path; @@ -9175,7 +9219,7 @@ * _.pick(object, ['a', 'c']); * // => { 'a': 1, 'c': 3 } */ - var pick = flatRest(function(object, paths) { + var pick = flatRest(function (object, paths) { return object == null ? {} : basePick(object, paths); }); @@ -9201,11 +9245,11 @@ if (object == null) { return {}; } - var props = arrayMap(getAllKeysIn(object), function(prop) { + var props = arrayMap(getAllKeysIn(object), function (prop) { return [prop]; }); predicate = baseIteratee(predicate); - return basePickBy(object, props, function(value, path) { + return basePickBy(object, props, function (value, path) { return predicate(value, path[0]); }); } @@ -9399,8 +9443,7 @@ if (typeof upper == 'boolean') { floating = upper; upper = undefined; - } - else if (typeof lower == 'boolean') { + } else if (typeof lower == 'boolean') { floating = lower; lower = undefined; } @@ -9408,8 +9451,7 @@ if (lower === undefined && upper === undefined) { lower = 0; upper = 1; - } - else { + } else { lower = toFinite(lower); if (upper === undefined) { upper = lower; @@ -9553,7 +9595,7 @@ * // => true */ function constant(value) { - return function() { + return function () { return value; }; } @@ -9706,11 +9748,11 @@ var chain = !(isObject(options) && 'chain' in options) || !!options.chain, isFunc = isFunction(object); - arrayEach(methodNames, function(methodName) { + arrayEach(methodNames, function (methodName) { var func = source[methodName]; object[methodName] = func; if (isFunc) { - object.prototype[methodName] = function() { + object.prototype[methodName] = function () { var chainAll = this.__chain__; if (chain || chainAll) { var result = object(this.__wrapped__), @@ -10065,9 +10107,9 @@ lodash.each = forEach; lodash.first = head; - mixin(lodash, (function() { + mixin(lodash, (function () { var source = {}; - baseForOwn(lodash, function(func, methodName) { + baseForOwn(lodash, function (func, methodName) { if (!hasOwnProperty.call(lodash.prototype, methodName)) { source[methodName] = func; } @@ -10087,8 +10129,8 @@ lodash.VERSION = VERSION; // Add `LazyWrapper` methods for `_.drop` and `_.take` variants. - arrayEach(['drop', 'take'], function(methodName, index) { - LazyWrapper.prototype[methodName] = function(n) { + arrayEach(['drop', 'take'], function (methodName, index) { + LazyWrapper.prototype[methodName] = function (n) { n = n === undefined ? 1 : nativeMax(toInteger(n), 0); var result = (this.__filtered__ && !index) @@ -10106,17 +10148,17 @@ return result; }; - LazyWrapper.prototype[methodName + 'Right'] = function(n) { + LazyWrapper.prototype[methodName + 'Right'] = function (n) { return this.reverse()[methodName](n).reverse(); }; }); // Add `LazyWrapper` methods that accept an `iteratee` value. - arrayEach(['filter', 'map', 'takeWhile'], function(methodName, index) { + arrayEach(['filter', 'map', 'takeWhile'], function (methodName, index) { var type = index + 1, isFilter = type == LAZY_FILTER_FLAG || type == LAZY_WHILE_FLAG; - LazyWrapper.prototype[methodName] = function(iteratee) { + LazyWrapper.prototype[methodName] = function (iteratee) { var result = this.clone(); result.__iteratees__.push({ 'iteratee': getIteratee(iteratee, 3), @@ -10128,49 +10170,49 @@ }); // Add `LazyWrapper` methods for `_.head` and `_.last`. - arrayEach(['head', 'last'], function(methodName, index) { + arrayEach(['head', 'last'], function (methodName, index) { var takeName = 'take' + (index ? 'Right' : ''); - LazyWrapper.prototype[methodName] = function() { + LazyWrapper.prototype[methodName] = function () { return this[takeName](1).value()[0]; }; }); // Add `LazyWrapper` methods for `_.initial` and `_.tail`. - arrayEach(['initial', 'tail'], function(methodName, index) { + arrayEach(['initial', 'tail'], function (methodName, index) { var dropName = 'drop' + (index ? '' : 'Right'); - LazyWrapper.prototype[methodName] = function() { + LazyWrapper.prototype[methodName] = function () { return this.__filtered__ ? new LazyWrapper(this) : this[dropName](1); }; }); - LazyWrapper.prototype.compact = function() { + LazyWrapper.prototype.compact = function () { return this.filter(identity); }; - LazyWrapper.prototype.find = function(predicate) { + LazyWrapper.prototype.find = function (predicate) { return this.filter(predicate).head(); }; - LazyWrapper.prototype.findLast = function(predicate) { + LazyWrapper.prototype.findLast = function (predicate) { return this.reverse().find(predicate); }; - LazyWrapper.prototype.invokeMap = baseRest(function(path, args) { + LazyWrapper.prototype.invokeMap = baseRest(function (path, args) { if (typeof path == 'function') { return new LazyWrapper(this); } - return this.map(function(value) { + return this.map(function (value) { return baseInvoke(value, path, args); }); }); - LazyWrapper.prototype.reject = function(predicate) { + LazyWrapper.prototype.reject = function (predicate) { return this.filter(negate(getIteratee(predicate))); }; - LazyWrapper.prototype.slice = function(start, end) { + LazyWrapper.prototype.slice = function (start, end) { start = toInteger(start); var result = this; @@ -10189,16 +10231,16 @@ return result; }; - LazyWrapper.prototype.takeRightWhile = function(predicate) { + LazyWrapper.prototype.takeRightWhile = function (predicate) { return this.reverse().takeWhile(predicate).reverse(); }; - LazyWrapper.prototype.toArray = function() { + LazyWrapper.prototype.toArray = function () { return this.take(MAX_ARRAY_LENGTH); }; // Add `LazyWrapper` methods to `lodash.prototype`. - baseForOwn(LazyWrapper.prototype, function(func, methodName) { + baseForOwn(LazyWrapper.prototype, function (func, methodName) { var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName), isTaker = /^(?:head|last)$/.test(methodName), lodashFunc = lodash[isTaker ? ('take' + (methodName == 'last' ? 'Right' : '')) : methodName], @@ -10207,14 +10249,14 @@ if (!lodashFunc) { return; } - lodash.prototype[methodName] = function() { + lodash.prototype[methodName] = function () { var value = this.__wrapped__, args = isTaker ? [1] : arguments, isLazy = value instanceof LazyWrapper, iteratee = args[0], useLazy = isLazy || isArray(value); - var interceptor = function(value) { + var interceptor = function (value) { var result = lodashFunc.apply(lodash, arrayPush([value], args)); return (isTaker && chainAll) ? result[0] : result; }; @@ -10243,25 +10285,25 @@ }); // Add `Array` methods to `lodash.prototype`. - arrayEach(['pop', 'push', 'shift', 'sort', 'splice', 'unshift'], function(methodName) { + arrayEach(['pop', 'push', 'shift', 'sort', 'splice', 'unshift'], function (methodName) { var func = arrayProto[methodName], chainName = /^(?:push|sort|unshift)$/.test(methodName) ? 'tap' : 'thru', retUnwrapped = /^(?:pop|shift)$/.test(methodName); - lodash.prototype[methodName] = function() { + lodash.prototype[methodName] = function () { var args = arguments; if (retUnwrapped && !this.__chain__) { var value = this.value(); return func.apply(isArray(value) ? value : [], args); } - return this[chainName](function(value) { + return this[chainName](function (value) { return func.apply(isArray(value) ? value : [], args); }); }; }); // Map minified method names to their real names. - baseForOwn(LazyWrapper.prototype, function(func, methodName) { + baseForOwn(LazyWrapper.prototype, function (func, methodName) { var lodashFunc = lodash[methodName]; if (lodashFunc) { var key = (lodashFunc.name + ''), @@ -10271,10 +10313,12 @@ } }); - realNames[createHybrid(undefined, WRAP_BIND_KEY_FLAG).name] = [{ - 'name': 'wrapper', - 'func': undefined - }]; + realNames[createHybrid(undefined, WRAP_BIND_KEY_FLAG).name] = [ + { + 'name': 'wrapper', + 'func': undefined + } + ]; // Add methods to `LazyWrapper`. LazyWrapper.prototype.clone = lazyClone; @@ -10300,7 +10344,7 @@ // Define as an anonymous module so, through path mapping, it can be // referenced as the "underscore" module. - define(function() { + define(function () { return lodash; }); } @@ -10310,8 +10354,7 @@ (freeModule.exports = lodash)._ = lodash; // Export for CommonJS support. freeExports._ = lodash; - } - else { + } else { // Export to the global object. BI._ = lodash; } From 2287879d95fbd64c30b7428d5bbd6e3d276b1e31 Mon Sep 17 00:00:00 2001 From: zsmj Date: Thu, 12 Jan 2023 16:15:03 +0800 Subject: [PATCH 5/6] update --- src/widget/index.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/widget/index.js b/src/widget/index.js index 5d238bd4f..14146c7ae 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -46,11 +46,6 @@ export * from "./datetimepane"; export * from "./dynamicdatetime"; export * from "./time"; export * from "./editor"; -export { SelectTreeCombo } from "./selecttree/selecttree.combo"; -export { SingleTreeCombo } from "./singletree/singletree.combo"; -export { MultiTreeCombo } from "./multitree/multi.tree.combo"; -export { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo"; -export { MultiTreeListCombo } from "./multitree/multi.tree.list.combo"; export * from "./multiselect"; export * from "./multiselectlist"; From f87bab8068dd4271cad76b57d4d8f777436cd510 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Thu, 12 Jan 2023 16:26:37 +0800 Subject: [PATCH 6/6] =?UTF-8?q?KERNEL-14083=20refactor:=20widget/downlist?= =?UTF-8?q?=E3=80=81singleslider=E3=80=81intervalslider=20es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/calendar/calendar.js | 4 +- src/case/layer/panel.js | 4 +- src/case/list/list.select.js | 10 +- src/core/wrapper/layout/flex/flex.vertical.js | 1 - src/widget/downlist/combo.downlist.js | 268 ++++--- src/widget/downlist/group.downlist.js | 113 +-- src/widget/downlist/index.js | 5 + src/widget/downlist/item.downlist.js | 227 +++--- src/widget/downlist/item.downlistgroup.js | 259 ++++--- src/widget/downlist/popup.downlist.js | 587 +++++++------- src/widget/index.js | 9 + src/widget/intervalslider/index.js | 2 + src/widget/intervalslider/intervalslider.js | 726 ++++++++++-------- .../model.accuratecalculation.js | 271 ++++--- .../singleslider/button/editor.sign.text.js | 265 ++++--- .../singleslider/button/iconbutton.slider.js | 28 +- src/widget/singleslider/index.js | 5 + src/widget/singleslider/singleslider.js | 526 +++++++------ src/widget/singleslider/singleslider.label.js | 464 ++++++----- .../singleslider/singleslider.normal.js | 430 ++++++----- 20 files changed, 2350 insertions(+), 1854 deletions(-) create mode 100644 src/widget/downlist/index.js create mode 100644 src/widget/intervalslider/index.js create mode 100644 src/widget/singleslider/index.js diff --git a/src/case/calendar/calendar.js b/src/case/calendar/calendar.js index b656a271e..b049e18b4 100644 --- a/src/case/calendar/calendar.js +++ b/src/case/calendar/calendar.js @@ -139,8 +139,8 @@ export class Calendar extends Widget { rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8, }))], }); - this.days.on(Controller.EVENT_CHANGE, () => { - this.fireEvent(Controller.EVENT_CHANGE, arguments); + this.days.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); createWidget(extend({ element: this, diff --git a/src/case/layer/panel.js b/src/case/layer/panel.js index 51bd4fc50..de18dc35f 100644 --- a/src/case/layer/panel.js +++ b/src/case/layer/panel.js @@ -50,8 +50,8 @@ export class Panel extends Widget { }], }); - this.button_group.on(Controller.EVENT_CHANGE, () => { - this.fireEvent(Controller.EVENT_CHANGE, ...arguments); + this.button_group.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); this.button_group.on(ButtonGroup.EVENT_CHANGE, (value, obj) => { diff --git a/src/case/list/list.select.js b/src/case/list/list.select.js index e9fce794a..88f4856c6 100644 --- a/src/case/list/list.select.js +++ b/src/case/list/list.select.js @@ -55,13 +55,14 @@ export class SelectList extends Widget { // 全选 this.toolbar = createWidget(o.toolbar); this.allSelected = false; - this.toolbar.on(Controller.EVENT_CHANGE, (type, value, obj) => { + this.toolbar.on(Controller.EVENT_CHANGE, (...args) => { + const [type, value, obj] = args; this.allSelected = this.toolbar.isSelected(); if (type === Events.CLICK) { this.setAllSelected(this.allSelected); this.fireEvent(SelectList.EVENT_CHANGE, value, obj); } - this.fireEvent(Controller.EVENT_CHANGE, arguments); + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); this.list = createWidget(o.el, { @@ -84,12 +85,13 @@ export class SelectList extends Widget { hasNext: o.hasNext, }); - this.list.on(Controller.EVENT_CHANGE, (type, value, obj) => { + this.list.on(Controller.EVENT_CHANGE, (...args) => { + const [type, value, obj] = args; if (type === Events.CLICK) { this._checkAllSelected(); this.fireEvent(SelectList.EVENT_CHANGE, value, obj); } - this.fireEvent(Controller.EVENT_CHANGE, arguments); + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); createWidget(extend({ diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index fefc7abad..5ee654642 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -12,7 +12,6 @@ import { Layout } from "../../layout"; @shortcut() export class FlexVerticalLayout extends Layout { static xtype = "bi.flex_vertical"; - props() { return extend(super.props(...arguments), { baseCls: "bi-f-v", diff --git a/src/widget/downlist/combo.downlist.js b/src/widget/downlist/combo.downlist.js index 10c39bfbf..eb4c9e636 100644 --- a/src/widget/downlist/combo.downlist.js +++ b/src/widget/downlist/combo.downlist.js @@ -1,143 +1,155 @@ -(function() { - function transformItems(items) { - if (!items) return items; - var result = BI.cloneDeep(items); - var isComplexItmes = BI.some(items, function (_, item) { - return BI.isArray(item); +import { shortcut, Widget, extend, createWidget, cloneDeep, some, isArray, each } from "@/core"; +import { DownListPopup } from "./popup.downlist"; +import { Combo } from "@/base"; +import { IconTrigger } from "@/case"; + + +function transformItems(items) { + if (!items) return items; + let result = cloneDeep(items); + const isComplexItmes = some(items, (_, item) => isArray(item)); + // 传一维数组，帮转二维 + if (!isComplexItmes) { + result = [result]; + } + // 帮转 el + each(result, (_, arr) => { + each(arr, (_, item) => { + if (item.children && !item.el) { + item.el = { + text: item.text, + icon: item.icon, + cls: item.cls, + iconCls1: item.iconCls1, + value: item.value, + }; + } }); - // 传一维数组，帮转二维 - if (!isComplexItmes) { - result = [result]; - } - // 帮转 el - BI.each(result, function (_, arr) { - BI.each(arr, function (_, item) { - if (item.children && !item.el) { - item.el = { - text: item.text, - icon: item.icon, - cls: item.cls, - iconCls1: item.iconCls1, - value: item.value - }; - } - }); + }); + + return result; +} + +@shortcut() +export class DownListCombo extends Widget { + static xtype = "bi.down_list_combo"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: "bi-down-list-combo", + height: 24, + items: [], + adjustLength: 0, + direction: "bottom", + trigger: "click", + container: null, + stopPropagation: false, + el: {}, + popup: {}, + minWidth: 140, + maxHeight: 1000, + destroyWhenHide: false, + isDefaultInit: true, }); - return result; } - /** - * Created by roy on 15/8/14. - */ - BI.DownListCombo = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.DownListCombo.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-down-list-combo", - height: 24, - items: [], - adjustLength: 0, - direction: "bottom", - trigger: "click", - container: null, - stopPropagation: false, - el: {}, - popup: {}, - minWidth: 140, - maxHeight: 1000, - destroyWhenHide: false, - isDefaultInit: true, - }); - }, + _init() { + super._init(...arguments); + const o = this.options; - _init: function () { - BI.DownListCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; - - this.downlistcombo = BI.createWidget({ - element: this, - type: "bi.combo", - trigger: o.trigger, - isNeedAdjustWidth: false, - isDefaultInit: o.isDefaultInit, - container: o.container, - adjustLength: o.adjustLength, - direction: o.direction, - belowMouse: o.belowMouse, - stopPropagation: o.stopPropagation, - destroyWhenHide: o.destroyWhenHide, + this.downlistcombo = createWidget({ + element: this, + type: Combo.xtype, + trigger: o.trigger, + isNeedAdjustWidth: false, + isDefaultInit: o.isDefaultInit, + container: o.container, + adjustLength: o.adjustLength, + direction: o.direction, + belowMouse: o.belowMouse, + stopPropagation: o.stopPropagation, + destroyWhenHide: o.destroyWhenHide, + el: { + type: IconTrigger.xtype, + extraCls: o.iconCls, + width: o.width, + height: o.height, + ...o.el, + }, + popup: { el: { - type: "bi.icon_trigger", - extraCls: o.iconCls, - width: o.width, - height: o.height, - ...o.el - }, - popup: { - el: { - type: "bi.down_list_popup", - ref: function (ref) { - self.popupView = ref; - }, - items: transformItems(o.items), - chooseType: o.chooseType, - value: o.value, - listeners: [{ - eventName: BI.DownListPopup.EVENT_CHANGE, - action: function (value) { - self.fireEvent(BI.DownListCombo.EVENT_CHANGE, value); - self.downlistcombo.hideView(); - } - }, { - eventName: BI.DownListPopup.EVENT_SON_VALUE_CHANGE, - action: function (value, fatherValue) { - self.fireEvent(BI.DownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue); - self.downlistcombo.hideView(); - } - }] + type: DownListPopup.xtype, + ref: _ref => { + this.popupView = _ref; }, - stopPropagation: o.stopPropagation, - maxHeight: o.maxHeight, - minWidth: o.minWidth, - ...o.popup - } - }); - - this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.DownListCombo.EVENT_BEFORE_POPUPVIEW); - }); - }, + items: transformItems(o.items), + chooseType: o.chooseType, + value: o.value, + listeners: [ + { + eventName: DownListPopup.EVENT_CHANGE, + action: value => { + this.fireEvent( + DownListCombo.EVENT_CHANGE, + value + ); + this.downlistcombo.hideView(); + }, + }, + { + eventName: DownListPopup.EVENT_SON_VALUE_CHANGE, + action: (value, fatherValue) => { + this.fireEvent( + DownListCombo.EVENT_SON_VALUE_CHANGE, + value, + fatherValue + ); + this.downlistcombo.hideView(); + }, + } + ], + }, + stopPropagation: o.stopPropagation, + maxHeight: o.maxHeight, + minWidth: o.minWidth, + ...o.popup, + }, + }); - hideView: function () { - this.downlistcombo.hideView(); - }, + this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + this.fireEvent(DownListCombo.EVENT_BEFORE_POPUPVIEW); + }); + } - showView: function (e) { - this.downlistcombo.showView(e); - }, + hideView() { + this.downlistcombo.hideView(); + } - populate: function (items) { - this.popupView.populate(items); - }, + showView(e) { + this.downlistcombo.showView(e); + } - setValue: function (v) { - this.popupView.setValue(v); - }, + populate(items) { + this.popupView.populate(items); + } - getValue: function () { - return this.popupView.getValue(); - }, + setValue(v) { + this.popupView.setValue(v); + } - adjustWidth: function () { - this.downlistcombo.adjustWidth(); - }, + getValue() { + return this.popupView.getValue(); + } - adjustHeight: function () { - this.downlistcombo.adjustHeight(); - } - }); - BI.DownListCombo.EVENT_CHANGE = "EVENT_CHANGE"; - BI.DownListCombo.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; - BI.DownListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + adjustWidth() { + this.downlistcombo.adjustWidth(); + } - BI.shortcut("bi.down_list_combo", BI.DownListCombo); -}()); + adjustHeight() { + this.downlistcombo.adjustHeight(); + } +} diff --git a/src/widget/downlist/group.downlist.js b/src/widget/downlist/group.downlist.js index c7cc2ce49..2d06f83e0 100644 --- a/src/widget/downlist/group.downlist.js +++ b/src/widget/downlist/group.downlist.js @@ -1,51 +1,62 @@ -/** - * Created by roy on 15/9/6. - */ -BI.DownListGroup = BI.inherit(BI.Widget, { - constants: { - iconCls: "check-mark-ha-font" - }, - _defaultConfig: function () { - return BI.extend(BI.DownListGroup.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-down-list-group", - items: [ - { - el: {} - } - ] - }); - }, - _init: function () { - BI.DownListGroup.superclass._init.apply(this, arguments); - var o = this.options, self = this; - - this.downlistgroup = BI.createWidget({ - element: this, - type: "bi.button_tree", - items: o.items, - chooseType: 0, // 0单选，1多选 - layouts: [{ - type: "bi.vertical", - hgap: 0, - vgap: 0 - }], - value: o.value - }); - this.downlistgroup.on(BI.Controller.EVENT_CHANGE, function (type) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if(type === BI.Events.CLICK) { - self.fireEvent(BI.DownListGroup.EVENT_CHANGE, arguments); - } - }); - }, - getValue: function () { - return this.downlistgroup.getValue(); - }, - setValue: function (v) { - this.downlistgroup.setValue(v); - } - - -}); -BI.DownListGroup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.down_list_group", BI.DownListGroup); \ No newline at end of file +import { + shortcut, + Widget, + extend, + createWidget, + Controller, + Events +} from "@/core"; + +@shortcut() +export class DownListGroup extends Widget { + static xtype = "bi.down_list_group"; + + constants = { iconCls: "check-mark-ha-font" }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: "bi-down-list-group", + items: [ + { + el: {}, + } + ], + }); + } + + _init() { + super._init(...arguments); + const o = this.options; + + this.downlistgroup = createWidget({ + element: this, + type: "bi.button_tree", + items: o.items, + chooseType: 0, // 0单选，1多选 + layouts: [ + { + type: "bi.vertical", + hgap: 0, + vgap: 0, + } + ], + value: o.value, + }); + this.downlistgroup.on(Controller.EVENT_CHANGE, (type, ...args) => { + this.fireEvent(Controller.EVENT_CHANGE, type, ...args); + if (type === Events.CLICK) { + this.fireEvent(DownListGroup.EVENT_CHANGE, type, ...args); + } + }); + } + + getValue() { + return this.downlistgroup.getValue(); + } + + setValue(v) { + this.downlistgroup.setValue(v); + } +} diff --git a/src/widget/downlist/index.js b/src/widget/downlist/index.js new file mode 100644 index 000000000..07a86df06 --- /dev/null +++ b/src/widget/downlist/index.js @@ -0,0 +1,5 @@ +export { DownListGroup } from "./group.downlist"; +export { DownListItem } from "./item.downlist"; +export { DownListGroupItem } from "./item.downlistgroup"; +export { DownListPopup } from "./popup.downlist"; +export { DownListCombo } from "./combo.downlist"; diff --git a/src/widget/downlist/item.downlist.js b/src/widget/downlist/item.downlist.js index 531806ca0..1a1598490 100644 --- a/src/widget/downlist/item.downlist.js +++ b/src/widget/downlist/item.downlist.js @@ -1,102 +1,125 @@ -BI.DownListItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: "bi-down-list-item bi-list-item-active", - cls: "", - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - logic: { - dynamic: true - }, - selected: false, - iconHeight: null, - iconWidth: null, - textHgap: 0, - textVgap: 0, - textLgap: 0, - textRgap: 0 - }); - }, - _init: function () { - BI.DownListItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.text = BI.createWidget({ - type: "bi.label", - cls: "list-item-text", - textAlign: "left", - hgap: o.textHgap, - vgap: o.textVgap, - lgap: o.textLgap, - rgap: o.textRgap, - text: o.text, - value: o.value, - keyword: o.keyword, - height: o.height - }); - - - var icon = BI.isPlainObject(o.icon) ? o.icon : { - type: "bi.icon", - width: o.iconWidth, - height: o.iconHeight, - } - - this.icon = BI.createWidget({ - type: "bi.center_adapt", - width: 36, - height: o.height, - items: [{ - el: icon, - }], - }); - - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left), BI.extend(o.logic, { - items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, this.icon, this.text) - })))); - }, - - setValue: function () { - if (!this.isReadOnly()) { - this.text.setValue.apply(this.text, arguments); - } - }, - - getValue: function () { - return this.text.getValue(); - }, - - setText: function () { - this.text.setText.apply(this.text, arguments); - }, - - getText: function () { - return this.text.getText(); - }, - - doClick: function () { - BI.DownListItem.superclass.doClick.apply(this, arguments); - if (this.isValid()) { - this.fireEvent(BI.DownListItem.EVENT_CHANGE, this.getValue(), this); - } - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - doHighLight: function () { - this.text.doHighLight.apply(this.text, arguments); - }, - - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - } -}); -BI.DownListItem.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.down_list_item", BI.DownListItem); \ No newline at end of file +import { shortcut, extend, createWidget, isPlainObject, LogicFactory, Direction } from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class DownListItem extends BasicButton { + static xtype = "bi.down_list_item"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: "bi-down-list-item bi-list-item-active", + cls: "", + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + logic: { + dynamic: true, + }, + selected: false, + iconHeight: null, + iconWidth: null, + textHgap: 0, + textVgap: 0, + textLgap: 0, + textRgap: 0, + }); + } + + _init() { + super._init(...arguments); + const o = this.options; + this.text = createWidget({ + type: "bi.label", + cls: "list-item-text", + textAlign: "left", + hgap: o.textHgap, + vgap: o.textVgap, + lgap: o.textLgap, + rgap: o.textRgap, + text: o.text, + value: o.value, + keyword: o.keyword, + height: o.height, + }); + + const icon = isPlainObject(o.icon) + ? o.icon + : { + type: "bi.icon", + width: o.iconWidth, + height: o.iconHeight, + }; + + this.icon = createWidget({ + type: "bi.center_adapt", + width: 36, + height: o.height, + items: [ + { + el: icon, + } + ], + }); + + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + LogicFactory.createLogicTypeByDirection(Direction.Left), + extend(o.logic, { + items: LogicFactory.createLogicItemsByDirection( + Direction.Left, + this.icon, + this.text + ), + }) + ) + ) + ); + } + + setValue() { + if (!this.isReadOnly()) { + this.text.setValue(...arguments); + } + } + + getValue() { + return this.text.getValue(); + } + + setText() { + this.text.setText(...arguments); + } + + getText() { + return this.text.getText(); + } + + doClick() { + super.doClick(...arguments); + if (this.isValid()) { + this.fireEvent(DownListItem.EVENT_CHANGE, this.getValue(), this); + } + } + + doRedMark() { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + doHighLight() { + this.text.doHighLight(...arguments); + } + + unHighLight() { + this.text.unHighLight(...arguments); + } +} diff --git a/src/widget/downlist/item.downlistgroup.js b/src/widget/downlist/item.downlistgroup.js index df4a09ac7..d2c9d14a7 100644 --- a/src/widget/downlist/item.downlistgroup.js +++ b/src/widget/downlist/item.downlistgroup.js @@ -1,118 +1,141 @@ -BI.DownListGroupItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - var conf = BI.DownListGroupItem.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-down-list-group-item", - logic: { - dynamic: false - }, - // invalid: true, - iconCls1: "dot-e-font", - icon: "", - iconCls2: "pull-right-e-font" - }); - }, - render: function () { - var o = this.options; - var self = this; - this.text = BI.createWidget({ - type: "bi.label", - cls: "list-group-item-text", - textAlign: "left", - text: o.text, - value: o.value, - height: o.height, - }); - - if (BI.isPlainObject(o.icon)) { - this.icon1 = BI.createWidget({ - width: 36, - height: o.height, - type: "bi.center_adapt", - items: [o.icon], - }); - } else { - this.icon1 = BI.createWidget({ - type: "bi.icon_button", - cls: o.iconCls1, - width: 36, - height: o.height, - iconHeight: o.iconHeight, - iconWidth: 36, - disableSelected: true, - selected: this._digest(o.value), - }); - } - - this.icon2 = BI.createWidget({ - type: "bi.icon_button", - cls: o.iconCls2, - width: 24, - forceNotSelected: true - }); - - this.element.hover(function () { - if (self.isEnabled()) { - self.hover(); - } - }, function () { - if (self.isEnabled()) { - self.dishover(); - } - }); - - return { - type: "bi.horizontal_fill", - columnSize: [36, "fill", 24], - items: [this.icon1, this.text, this.icon2] - } - }, - - _getLevel: function () { - var child = BI.first(this.options.childValues); - return BI.isNotNull(child) ? (child + "").split(BI.BlankSplitChar).length : 0; - }, - - _digest: function (v) { - var self = this, o = this.options; - v = BI.isArray(v) ? v : [v]; - var level = this._getLevel(); - return BI.any(v, function (idx, value) { - return BI.contains(o.childValues, (value + "").split(BI.BlankSplitChar).slice(0, level).join(BI.BlankSplitChar)); - }); - }, - - hover: function () { - BI.DownListGroupItem.superclass.hover.apply(this, arguments); - this.icon1.element.addClass("hover"); - this.icon2.element.addClass("hover"); - - }, - - dishover: function () { - BI.DownListGroupItem.superclass.dishover.apply(this, arguments); - this.icon1.element.removeClass("hover"); - this.icon2.element.removeClass("hover"); - }, - - doClick: function () { - BI.DownListGroupItem.superclass.doClick.apply(this, arguments); - if (this.isValid()) { - this.fireEvent(BI.DownListGroupItem.EVENT_CHANGE, this.getValue()); - } - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - setValue: function (v) { - this.icon1.setSelected && this.icon1.setSelected(this._digest(v)); - }, -}); -BI.DownListGroupItem.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.down_list_group_item", BI.DownListGroupItem); +import { + shortcut, + extend, + createWidget, + isNotNull, + isArray, + any, + contains, + isPlainObject, + first, + BlankSplitChar +} from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class DownListGroupItem extends BasicButton { + static xtype = "bi.down_list_group_item"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-down-list-group-item`, + logic: { + dynamic: false, + }, + // invalid: true, + iconCls1: "dot-e-font", + icon: "", + iconCls2: "pull-right-e-font", + }); + } + + render() { + const o = this.options; + this.text = createWidget({ + type: "bi.label", + cls: "list-group-item-text", + textAlign: "left", + text: o.text, + value: o.value, + height: o.height, + }); + + if (isPlainObject(o.icon)) { + this.icon1 = createWidget({ + width: 36, + height: o.height, + type: "bi.center_adapt", + items: [o.icon], + }); + } else { + this.icon1 = createWidget({ + type: "bi.icon_button", + cls: o.iconCls1, + width: 36, + height: o.height, + iconHeight: o.iconHeight, + iconWidth: 36, + disableSelected: true, + selected: this._digest(o.value), + }); + } + + this.icon2 = createWidget({ + type: "bi.icon_button", + cls: o.iconCls2, + width: 24, + forceNotSelected: true, + }); + + this.element.hover( + () => { + if (this.isEnabled()) { + this.hover(); + } + }, + () => { + if (this.isEnabled()) { + this.dishover(); + } + } + ); + + return { + type: "bi.horizontal_fill", + columnSize: [36, "fill", 24], + items: [this.icon1, this.text, this.icon2], + }; + } + + _getLevel() { + const child = first(this.options.childValues); + + return isNotNull(child) ? (`${child}`).split(BlankSplitChar).length : 0; + } + + _digest(v) { + const o = this.options; + v = isArray(v) ? v : [v]; + const level = this._getLevel(); + + return any(v, (idx, value) => contains( + o.childValues, + (`${value}`).split(BlankSplitChar).slice(0, level).join(BlankSplitChar) + )); + } + + hover() { + super.hover(...arguments); + this.icon1.element.addClass("hover"); + this.icon2.element.addClass("hover"); + } + + dishover() { + super.dishover(...arguments); + this.icon1.element.removeClass("hover"); + this.icon2.element.removeClass("hover"); + } + + doClick() { + super.doClick(...arguments); + if (this.isValid()) { + this.fireEvent(DownListGroupItem.EVENT_CHANGE, this.getValue()); + } + } + + doRedMark() { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + setValue(v) { + this.icon1.setSelected && this.icon1.setSelected(this._digest(v)); + } +} diff --git a/src/widget/downlist/popup.downlist.js b/src/widget/downlist/popup.downlist.js index 0e802a695..9ca7e0edd 100644 --- a/src/widget/downlist/popup.downlist.js +++ b/src/widget/downlist/popup.downlist.js @@ -1,301 +1,332 @@ -/** - * Created by roy on 15/9/8. - * 处理popup中的item分组样式 - * 一个item分组中的成员大于一时，该分组设置为单选，并且默认状态第一个成员设置为已选择项 - */ -BI.DownListPopup = BI.inherit(BI.Pane, { - constants: { - nextIcon: "pull-right-e-font", - height: 24, - iconHeight: 12, - iconWidth: 12, - hgap: 0, - vgap: 0, - border: 1 - }, - _defaultConfig: function () { - var conf = BI.DownListPopup.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: "bi-down-list-popup", - items: [], - chooseType: BI.Selection.Multi - }); - }, - _init: function () { - BI.DownListPopup.superclass._init.apply(this, arguments); - this.singleValues = []; - this.childValueMap = {}; - this.fatherValueMap = {}; - this.items = []; - var self = this, o = this.options, children = this._createPopupItems(o.items); - this.popup = BI.createWidget({ - type: "bi.button_tree", - items: BI.createItems(children, - {}, { - adjustLength: -2 - } - ), - layouts: [{ - type: "bi.vertical", - hgap: this.constants.hgap, - vgap: this.constants.vgap - }], - value: this._digest(o.value), - chooseType: o.chooseType - }); +import { + shortcut, + extend, + createWidget, + createItems, + isNotNull, + contains, + each, + isEmpty, + map, + isNotEmptyString, + isNotEmptyArray, + some, + deepClone +} from "@/core"; +import { Pane, ButtonTree } from "@/base"; - this.popup.on(BI.ButtonTree.EVENT_CHANGE, function (value, object) { - var changedValue = value; - if (BI.isNotNull(self.childValueMap[value])) { - changedValue = self.childValueMap[value]; - self.fireEvent(BI.DownListPopup.EVENT_SON_VALUE_CHANGE, changedValue, self.fatherValueMap[value]); - } else { - self.fireEvent(BI.DownListPopup.EVENT_CHANGE, changedValue, object); - } +@shortcut() +export class DownListPopup extends Pane { + static xtype = "bi.down_list_popup"; + constants = { + nextIcon: "pull-right-e-font", + height: 24, + iconHeight: 12, + iconWidth: 12, + hgap: 0, + vgap: 0, + border: 1, + }; - if (!BI.contains(self.singleValues, changedValue)) { - var item = self.getValue(); - var result = []; - BI.each(item, function (i, valueObject) { - if (valueObject.value != changedValue) { - result.push(valueObject); - } - }); - self.setValue(result); - } + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; - }); + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: "bi-down-list-popup", + items: [], + chooseType: Selection.Multi, + }); + } - BI.createWidget({ - type: "bi.vertical", - element: this, - items: [this.popup], - vgap: 5 - }); + _init() { + super._init(...arguments); + this.singleValues = []; + this.childValueMap = {}; + this.fatherValueMap = {}; + this.items = []; + const o = this.options, + children = this._createPopupItems(o.items); + this.popup = createWidget({ + type: "bi.button_tree", + items: createItems( + children, + {}, + { + adjustLength: -2, + } + ), + layouts: [ + { + type: "bi.vertical", + hgap: this.constants.hgap, + vgap: this.constants.vgap, + } + ], + value: this._digest(o.value), + chooseType: o.chooseType, + }); - }, - _createPopupItems: function (items) { - var self = this, result = []; - // 不能修改populate进来的item的引用 - BI.each(items, function (i, it) { - var item_done = { - type: "bi.down_list_group", - items: [] - }; + this.popup.on(ButtonTree.EVENT_CHANGE, (value, object) => { + let changedValue = value; + if (isNotNull(this.childValueMap[value])) { + changedValue = this.childValueMap[value]; + this.fireEvent( + DownListPopup.EVENT_SON_VALUE_CHANGE, + changedValue, + this.fatherValueMap[value] + ); + } else { + this.fireEvent(DownListPopup.EVENT_CHANGE, changedValue, object); + } - var storeItem = []; + if (!contains(this.singleValues, changedValue)) { + const item = this.getValue(); + const result = []; + each(item, (i, valueObject) => { + if (valueObject.value !== changedValue) { + result.push(valueObject); + } + }); + this.setValue(result); + } + }); - BI.each(it, function (i, sourceItem) { - var item = BI.extend({}, sourceItem); - if (BI.isNotEmptyArray(sourceItem.children) && !BI.isEmpty(sourceItem.el)) { - item.type = "bi.combo_group"; - // popup未初始化返回的是options中的value, 在经过buttontree的getValue concat之后，无法区分值来自options - // 还是item自身, 这边控制defaultInit为true来避免这个问题 - item.isDefaultInit = true; - item.cls = "down-list-group"; - item.trigger = "hover"; - item.isNeedAdjustWidth = false; - item.el = sourceItem.el; - item.el.title = sourceItem.el.title || sourceItem.el.text; - item.el.type = "bi.down_list_group_item"; - item.el.logic = { - dynamic: true - }; - item.el.height = sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT; - item.el.iconCls2 = self.constants.nextIcon; - item.popup = { - lgap: 1, - el: { - type: "bi.button_tree", - chooseType: 0, - layouts: [{ - type: "bi.vertical" - }] + createWidget({ + type: "bi.vertical", + element: this, + items: [this.popup], + vgap: 5, + }); + } - }, - innerVgap: 5, - maxHeight: 378 - }; - self._createChildren(item, sourceItem); - } else { - item.type = sourceItem.type || "bi.down_list_item"; - item.title = sourceItem.title || sourceItem.text; - item.textRgap = 10; - item.isNeedAdjustWidth = false; - item.logic = { - dynamic: true - }; - } - var el_done = {}; - el_done.el = item; - item_done.items.push(el_done); - storeItem.push(item); - }); - if (self._isGroup(item_done.items)) { - BI.each(item_done.items, function (i, item) { - self.singleValues.push(item.el.value); - }); - } + _createPopupItems(items) { + const result = []; + // 不能修改populate进来的item的引用 + each(items, (i, it) => { + const item_done = { + type: "bi.down_list_group", + items: [], + }; - result.push(item_done); - self.items.push(storeItem); - if (self._needSpliter(i, items.length)) { - var spliter_container = BI.createWidget({ - type: "bi.vertical", - items: [{ - el: { - type: "bi.layout", - cls: "bi-down-list-spliter bi-split-top cursor-pointer", - height: 0 - } + const storeItem = []; - }], - cls: "bi-down-list-spliter-container cursor-pointer", - vgap: 5, - hgap: 12 - }); - result.push(spliter_container); - } - }); - return result; - }, + each(it, (i, sourceItem) => { + const item = extend({}, sourceItem); + if (isNotEmptyArray(sourceItem.children) && !isEmpty(sourceItem.el)) { + item.type = "bi.combo_group"; + // popup未初始化返回的是options中的value, 在经过buttontree的getValue concat之后，无法区分值来自options + // 还是item自身, 这边控制defaultInit为true来避免这个问题 + item.isDefaultInit = true; + item.cls = "down-list-group"; + item.trigger = "hover"; + item.isNeedAdjustWidth = false; + item.el = sourceItem.el; + item.el.title = sourceItem.el.title || sourceItem.el.text; + item.el.type = "bi.down_list_group_item"; + item.el.logic = { + dynamic: true, + }; + item.el.height = + sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT; + item.el.iconCls2 = this.constants.nextIcon; + item.popup = { + lgap: 1, + el: { + type: "bi.button_tree", + chooseType: 0, + layouts: [ + { + type: "bi.vertical", + } + ], + }, + innerVgap: 5, + maxHeight: 378, + }; + this._createChildren(item, sourceItem); + } else { + item.type = sourceItem.type || "bi.down_list_item"; + item.title = sourceItem.title || sourceItem.text; + item.textRgap = 10; + item.isNeedAdjustWidth = false; + item.logic = { + dynamic: true, + }; + } + const el_done = {}; + el_done.el = item; + item_done.items.push(el_done); + storeItem.push(item); + }); + if (this._isGroup(item_done.items)) { + each(item_done.items, (i, item) => { + this.singleValues.push(item.el.value); + }); + } - _createChildren: function (targetItem, sourceItem) { - var self = this; - targetItem.el.childValues = []; - targetItem.items = targetItem.children = []; - BI.each(sourceItem.children, function (i, child) { - var item = BI.extend({}, child); - var fatherValue = BI.deepClone(targetItem.el.value); - var childValue = BI.deepClone(item.value); - self.singleValues.push(item.value); - item.type = item.type || "bi.down_list_item"; - item.extraCls = " child-down-list-item"; - item.title = item.title || item.text; - item.textRgap = 10; - item.isNeedAdjustWidth = false; - item.logic = { - dynamic: true - }; - item.father = fatherValue; - item.childValue = item.value; - self.fatherValueMap[self._createChildValue(fatherValue, childValue)] = fatherValue; - self.childValueMap[self._createChildValue(fatherValue, childValue)] = childValue; - item.value = self._createChildValue(fatherValue, childValue); - targetItem.el.childValues.push(item.value); - targetItem.items.push(item); - }); - }, + result.push(item_done); + this.items.push(storeItem); + if (this._needSpliter(i, items.length)) { + const spliter_container = createWidget({ + type: "bi.vertical", + items: [ + { + el: { + type: "bi.layout", + cls: "bi-down-list-spliter bi-split-top cursor-pointer", + height: 0, + }, + } + ], + cls: "bi-down-list-spliter-container cursor-pointer", + vgap: 5, + hgap: 12, + }); + result.push(spliter_container); + } + }); + + return result; + } - _isGroup: function (i) { - return i.length > 1; - }, + _createChildren(targetItem, sourceItem) { + targetItem.el.childValues = []; + targetItem.items = targetItem.children = []; + each(sourceItem.children, (i, child) => { + const item = extend({}, child); + const fatherValue = deepClone(targetItem.el.value); + const childValue = deepClone(item.value); + this.singleValues.push(item.value); + item.type = item.type || "bi.down_list_item"; + item.extraCls = " child-down-list-item"; + item.title = item.title || item.text; + item.textRgap = 10; + item.isNeedAdjustWidth = false; + item.logic = { + dynamic: true, + }; + item.father = fatherValue; + item.childValue = item.value; + this.fatherValueMap[this._createChildValue(fatherValue, childValue)] = + fatherValue; + this.childValueMap[this._createChildValue(fatherValue, childValue)] = + childValue; + item.value = this._createChildValue(fatherValue, childValue); + targetItem.el.childValues.push(item.value); + targetItem.items.push(item); + }); + } - _needSpliter: function (i, itemLength) { - return i < itemLength - 1; - }, + _isGroup(i) { + return i.length > 1; + } - _createChildValue: function (fatherValue, childValue) { - return fatherValue + BI.BlankSplitChar + childValue; - }, + _needSpliter(i, itemLength) { + return i < itemLength - 1; + } - _digest: function (valueItem) { - var self = this; - var valueArray = []; - BI.each(valueItem, function (i, item) { - var value; - if (BI.isNotNull(item.childValue)) { - value = self._createChildValue(item.value, item.childValue); - } else { - value = item.value; - } - valueArray.push(value); - } - ); - return valueArray; - }, + _createChildValue(fatherValue, childValue) { + return fatherValue + BI.BlankSplitChar + childValue; + } - _checkValues: function (values) { - var value = []; - BI.each(this.items, function (idx, itemGroup) { - BI.each(itemGroup, function (id, item) { - if(BI.isNotNull(item.children)) { - var childValues = BI.map(item.children, "value"); - var v = joinValue(childValues, values[idx]); - if(BI.isNotEmptyString(v)) { - value.push(v); - } - }else{ - if(item.value === values[idx][0]) { - value.push(values[idx][0]); - } - } - }); - }); - return value; + _digest(valueItem) { + const valueArray = []; + each(valueItem, (i, item) => { + let value; + if (isNotNull(item.childValue)) { + value = this._createChildValue(item.value, item.childValue); + } else { + value = item.value; + } + valueArray.push(value); + }); + + return valueArray; + } - function joinValue (sources, targets) { - var value = ""; - BI.some(sources, function (idx, s) { - return BI.some(targets, function (id, t) { - if(s === t) { - value = s; - return true; - } - }); - }); - return value; - } - }, + _checkValues(values) { + const value = []; + each(this.items, (idx, itemGroup) => { + each(itemGroup, (id, item) => { + if (isNotNull(item.children)) { + const childValues = map(item.children, "value"); + const v = joinValue(childValues, values[idx]); + if (isNotEmptyString(v)) { + value.push(v); + } + } else { + if (item.value === values[idx][0]) { + value.push(values[idx][0]); + } + } + }); + }); + + return value; - populate: function (items) { - BI.DownListPopup.superclass.populate.apply(this, arguments); - this.items = []; - this.childValueMap = {}; - this.fatherValueMap = {}; - this.singleValues = []; - var children = this._createPopupItems(items); - var popupItem = BI.createItems(children, - {}, { - adjustLength: -2 - } - ); - this.popup.populate(popupItem); - }, + function joinValue(sources, targets) { + let value = ""; + some(sources, (idx, s) => some(targets, (id, t) => { + if (s === t) { + value = s; + + return true; + } + })); + + return value; + } + } - setValue: function (valueItem) { - this.popup.setValue(this._digest(valueItem)); - }, + populate(items) { + super.populate(...arguments); + this.items = []; + this.childValueMap = {}; + this.fatherValueMap = {}; + this.singleValues = []; + const children = this._createPopupItems(items); + const popupItem = createItems( + children, + {}, + { + adjustLength: -2, + } + ); + this.popup.populate(popupItem); + } - _getValue: function () { - var v = []; - BI.each(this.popup.getAllButtons(), function (i, item) { - i % 2 === 0 && v.push(item.getValue()); - }); - return v; - }, + setValue(valueItem) { + this.popup.setValue(this._digest(valueItem)); + } - getValue: function () { - var self = this, result = []; - var values = this._checkValues(this._getValue()); - BI.each(values, function (i, value) { - var valueItem = {}; - if (BI.isNotNull(self.childValueMap[value])) { - var fartherValue = self.fatherValueMap[value]; - valueItem.childValue = self.childValueMap[value]; - valueItem.value = fartherValue; - } else { - valueItem.value = value; - } - result.push(valueItem); - }); - return result; - } + _getValue() { + const v = []; + each(this.popup.getAllButtons(), (i, item) => { + i % 2 === 0 && v.push(item.getValue()); + }); + + return v; + } - -}); - -BI.DownListPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DownListPopup.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; -BI.shortcut("bi.down_list_popup", BI.DownListPopup); + getValue() { + const result = []; + const values = this._checkValues(this._getValue()); + each(values, (i, value) => { + const valueItem = {}; + if (isNotNull(this.childValueMap[value])) { + const fartherValue = this.fatherValueMap[value]; + valueItem.childValue = this.childValueMap[value]; + valueItem.value = fartherValue; + } else { + valueItem.value = value; + } + result.push(valueItem); + }); + + return result; + } +} diff --git a/src/widget/index.js b/src/widget/index.js index 14146c7ae..874fd77cd 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -7,6 +7,9 @@ import * as datetimepane from "./datetimepane"; import * as dynamicdatetime from "./dynamicdatetime"; import * as time from "./time"; import * as editor from "./editor"; +import * as downList from "./downlist"; +import * as singleSliderItem from "./singleslider"; +import * as intervalSliderItem from "./intervalslider"; import { SelectTreeCombo } from "./selecttree/selecttree.combo"; import { SingleTreeCombo } from "./singletree/singletree.combo"; import { MultiTreeCombo } from "./multitree/multi.tree.combo"; @@ -27,6 +30,9 @@ Object.assign(BI, { ...dynamicdatetime, ...time, ...editor, + ...downList, + ...singleSliderItem, + ...intervalSliderItem, SelectTreeCombo, SingleTreeCombo, MultiTreeCombo, @@ -48,6 +54,9 @@ export * from "./time"; export * from "./editor"; export * from "./multiselect"; export * from "./multiselectlist"; +export * from "./downlist"; +export * from "./singleslider"; +export * from "./intervalslider"; export { Collapse, diff --git a/src/widget/intervalslider/index.js b/src/widget/intervalslider/index.js new file mode 100644 index 000000000..2a99c23bd --- /dev/null +++ b/src/widget/intervalslider/index.js @@ -0,0 +1,2 @@ +export { AccurateCalculationModel } from "./model.accuratecalculation"; +export { IntervalSlider } from "./intervalslider"; diff --git a/src/widget/intervalslider/intervalslider.js b/src/widget/intervalslider/intervalslider.js index 59b1e1676..bd0121523 100644 --- a/src/widget/intervalslider/intervalslider.js +++ b/src/widget/intervalslider/intervalslider.js @@ -1,30 +1,50 @@ -/** - * Created by zcf on 2016/9/26. - */ -BI.IntervalSlider = BI.inherit(BI.Single, { - _constant: { +import { + shortcut, + createWidget, + toPix, + parseFloat, + Layout, + AbsoluteLayout, + clamp, + VerticalLayout, + isEmptyString, + isNumeric, + isNull, + isInteger, + i18nText, + size, + parseInt, + isNotEmptyString, + MouseMoveTracker +} from "@/core"; +import { Single, Editor } from "@/base"; +import { AccurateCalculationModel } from "./model.accuratecalculation"; +import { SignTextEditor, SliderIconButton } from "../singleslider"; + +@shortcut() +export class IntervalSlider extends Single { + static xtype = "bi.interval_slider"; + _constant = { EDITOR_WIDTH: 58, EDITOR_R_GAP: 60, EDITOR_HEIGHT: 20, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, SLIDER_HEIGHT: 30, - TRACK_HEIGHT: 24 - }, - - props: { + TRACK_HEIGHT: 24, + } + props = { baseCls: "bi-interval-slider bi-slider-track", digit: false, unit: "", min: 0, max: 100, - value: { - min: "", - max: "", - } - }, + value: { min: "", max: "" }, + }; - beforeMount: function () { + static EVENT_CHANGE = "EVENT_CHANGE"; + + beforeMount() { const { value, min, max } = this.options; this._setMinAndMax({ min, @@ -32,90 +52,104 @@ BI.IntervalSlider = BI.inherit(BI.Single, { }); this.setValue(value); this.populate(); - }, - - render: function () { + } - var self = this; - var c = this._constant; + render() { + const c = this._constant; this.enable = false; this.valueOne = ""; this.valueTwo = ""; - this.calculation = new BI.AccurateCalculationModel(); - this.grayTrack = BI.createWidget({ - type: "bi.layout", + this.calculation = new AccurateCalculationModel(); + this.grayTrack = createWidget({ + type: Layout.xtype, cls: "gray-track", - height: 6 + height: 6, }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", + this.blueTrack = createWidget({ + type: Layout.xtype, cls: "blue-track bi-high-light-background", - height: 6 + height: 6, }); this.track = this._createTrackWrapper(); - this.labelOne = BI.createWidget({ - type: "bi.sign_text_editor", + this.labelOne = createWidget({ + type: SignTextEditor.xtype, cls: "slider-editor-button", text: this.options.unit, allowBlank: false, - width: BI.toPix(c.EDITOR_WIDTH, 2), - height: BI.toPix(c.EDITOR_HEIGHT, 2), - validationChecker: function (v) { - return self._checkValidation(v); - } - }); - this.labelOne.element.hover(function () { - self.labelOne.element.removeClass("bi-border").addClass("bi-border"); - }, function () { - self.labelOne.element.removeClass("bi-border"); + width: toPix(c.EDITOR_WIDTH, 2), + height: toPix(c.EDITOR_HEIGHT, 2), + validationChecker: v => this._checkValidation(v), }); - this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () { - var oldValueOne = self.valueOne; - var v = BI.parseFloat(this.getValue()); - self.valueOne = v; - var percent = self._getPercentByValue(v); - var significantPercent = BI.parseFloat(percent.toFixed(1));// 分成1000份 - self._setSliderOnePosition(significantPercent); - self._setBlueTrack(); - self._checkLabelPosition(oldValueOne, self.valueTwo, self.valueOne, self.valueTwo); - self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); + this.labelOne.element.hover( + () => { + this.labelOne.element + .removeClass("bi-border") + .addClass("bi-border"); + }, + () => { + this.labelOne.element.removeClass("bi-border"); + } + ); + this.labelOne.on(Editor.EVENT_CONFIRM, () => { + const oldValueOne = this.valueOne; + const v = parseFloat(this.getValue()); + this.valueOne = v; + const percent = this._getPercentByValue(v); + const significantPercent = parseFloat(percent.toFixed(1)); // 分成1000份 + this._setSliderOnePosition(significantPercent); + this._setBlueTrack(); + this._checkLabelPosition( + oldValueOne, + this.valueTwo, + this.valueOne, + this.valueTwo + ); + this.fireEvent(IntervalSlider.EVENT_CHANGE); }); - this.labelTwo = BI.createWidget({ - type: "bi.sign_text_editor", + this.labelTwo = createWidget({ + type: SignTextEditor.xtype, cls: "slider-editor-button", text: this.options.unit, allowBlank: false, - width: BI.toPix(c.EDITOR_WIDTH, 2), - height: BI.toPix(c.EDITOR_HEIGHT, 2), - validationChecker: function (v) { - return self._checkValidation(v); - } - }); - this.labelTwo.element.hover(function () { - self.labelTwo.element.removeClass("bi-border").addClass("bi-border"); - }, function () { - self.labelTwo.element.removeClass("bi-border"); + width: toPix(c.EDITOR_WIDTH, 2), + height: toPix(c.EDITOR_HEIGHT, 2), + validationChecker: v => this._checkValidation(v), }); - this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () { - var oldValueTwo = self.valueTwo; - var v = BI.parseFloat(this.getValue()); - self.valueTwo = v; - var percent = self._getPercentByValue(v); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setSliderTwoPosition(significantPercent); - self._setBlueTrack(); - self._checkLabelPosition(self.valueOne, oldValueTwo, self.valueOne, self.valueTwo); - self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); + this.labelTwo.element.hover( + () => { + this.labelTwo.element + .removeClass("bi-border") + .addClass("bi-border"); + }, + () => { + this.labelTwo.element.removeClass("bi-border"); + } + ); + this.labelTwo.on(Editor.EVENT_CONFIRM, () => { + const oldValueTwo = this.valueTwo; + const v = parseFloat(this.getValue()); + this.valueTwo = v; + const percent = this._getPercentByValue(v); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setSliderTwoPosition(significantPercent); + this._setBlueTrack(); + this._checkLabelPosition( + this.valueOne, + oldValueTwo, + this.valueOne, + this.valueTwo + ); + this.fireEvent(IntervalSlider.EVENT_CHANGE); }); - this.sliderOne = BI.createWidget({ - type: "bi.single_slider_button" + this.sliderOne = createWidget({ + type: SliderIconButton.xtype, }); - this.sliderTwo = BI.createWidget({ - type: "bi.single_slider_button" + this.sliderTwo = createWidget({ + type: SliderIconButton.xtype, }); this._draggable(this.sliderOne, true); this._draggable(this.sliderTwo, false); @@ -127,7 +161,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, { items: [ this._createLabelWrapper(), { - type: "bi.absolute", + type: AbsoluteLayout.xtype, items: [ { el: { @@ -135,75 +169,95 @@ BI.IntervalSlider = BI.inherit(BI.Single, { horizontalAlign: "stretch", verticalAlign: "middle", columnSize: ["fill"], - items: [{ - el: this.track, - }], + items: [ + { + el: this.track, + } + ], hgap: 10, }, - inset: 0 + inset: 0, }, - this._createSliderWrapper(), - ] + this._createSliderWrapper() + ], } - ] + ], }; - }, + } - _rePosBySizeAfterMove: function (size, isLeft) { - var o = this.options; - var percent = size * 100 / (this._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - var v = this._getValueByPercent(significantPercent); + _rePosBySizeAfterMove(size, isLeft) { + const o = this.options; + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + let v = this._getValueByPercent(significantPercent); v = this._assertValue(v); v = o.digit === false ? v : v.toFixed(o.digit); - var oldValueOne = this.valueOne, oldValueTwo = this.valueTwo; - if(isLeft) { + const oldValueOne = this.valueOne, + oldValueTwo = this.valueTwo; + if (isLeft) { this._setSliderOnePosition(significantPercent); this.labelOne.setValue(v); this.valueOne = v; - this._checkLabelPosition(oldValueOne, oldValueTwo, v, this.valueTwo); - }else{ + this._checkLabelPosition( + oldValueOne, + oldValueTwo, + v, + this.valueTwo + ); + } else { this._setSliderTwoPosition(significantPercent); this.labelTwo.setValue(v); this.valueTwo = v; - this._checkLabelPosition(oldValueOne, oldValueTwo, this.valueOne, v); + this._checkLabelPosition( + oldValueOne, + oldValueTwo, + this.valueOne, + v + ); } this._setBlueTrack(); - }, - - _rePosBySizeAfterStop: function (size, isLeft) { - var percent = size * 100 / (this._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent); - }, - - _draggable: function (widget, isLeft) { - var self = this, o = this.options; - var startDrag = false; - var size = 0, offset = 0, defaultSize = 0; - var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { - if (mouseMoveTracker.isDragging()) { - startDrag = true; - offset += deltaX; - size = optimizeSize(defaultSize + offset); - widget.element.addClass("dragging"); - self._rePosBySizeAfterMove(size, isLeft); - } - }, function () { - if (startDrag === true) { - size = optimizeSize(size); - self._rePosBySizeAfterStop(size, isLeft); - size = 0; - offset = 0; - defaultSize = size; - startDrag = false; - } - widget.element.removeClass("dragging"); - mouseMoveTracker.releaseMouseMoves(); - self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); - }, window); + } + + _rePosBySizeAfterStop(size, isLeft) { + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + isLeft + ? this._setSliderOnePosition(significantPercent) + : this._setSliderTwoPosition(significantPercent); + } + + _draggable(widget, isLeft) { + let startDrag = false; + let size = 0, + offset = 0, + defaultSize = 0; + const mouseMoveTracker = new MouseMoveTracker( + (deltaX => { + if (mouseMoveTracker.isDragging()) { + startDrag = true; + offset += deltaX; + size = optimizeSize(defaultSize + offset); + widget.element.addClass("dragging"); + this._rePosBySizeAfterMove(size, isLeft); + } + }), + (() => { + if (startDrag === true) { + size = optimizeSize(size); + this._rePosBySizeAfterStop(size, isLeft); + size = 0; + offset = 0; + defaultSize = size; + startDrag = false; + } + widget.element.removeClass("dragging"); + mouseMoveTracker.releaseMouseMoves(); + this.fireEvent(IntervalSlider.EVENT_CHANGE); + }), + window + ); widget.element.on("mousedown", function (event) { - if(!widget.isEnabled()) { + if (!widget.isEnabled()) { return; } defaultSize = this.offsetLeft; @@ -211,42 +265,47 @@ BI.IntervalSlider = BI.inherit(BI.Single, { mouseMoveTracker.captureMouseMoves(event); }); - function optimizeSize (s) { - return BI.clamp(s, 0, self._getGrayTrackLength()); - } - }, + const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength()); + } - _createLabelWrapper: function () { - var c = this._constant; + _createLabelWrapper() { + const c = this._constant; + return { el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.labelOne, - top: 0, - left: 0, - }] - }, { - type: "bi.absolute", - items: [{ - el: this.labelTwo, - top: 0, - right: 0, - }] - }], + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.labelOne, + top: 0, + left: 0, + } + ], + }, + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.labelTwo, + top: 0, + right: 0, + } + ], + } + ], rgap: c.EDITOR_R_GAP, - height: c.SLIDER_HEIGHT + height: c.SLIDER_HEIGHT, }, top: 0, left: 0, - width: "100%" + width: "100%", }; - }, + } - _createSliderWrapper: function () { - var c = this._constant; + _createSliderWrapper() { return { el: { type: "bi.horizontal", @@ -254,7 +313,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, { verticalAlign: "middle", items: [ { - type: "bi.absolute", + type: AbsoluteLayout.xtype, height: 12, width: "fill", items: [ @@ -262,24 +321,25 @@ BI.IntervalSlider = BI.inherit(BI.Single, { el: this.sliderOne, top: 0, bottom: 0, - left: 0 - }, { + left: 0, + }, + { el: this.sliderTwo, top: 0, bottom: 0, - left: "100%" + left: "100%", } ], } ], hgap: 10, }, - inset: 0 + inset: 0, }; - }, + } - _createTrackWrapper: function () { - return BI.createWidget({ + _createTrackWrapper() { + return createWidget({ type: "bi.horizontal", cls: "track-wrapper", horizontalAlign: "stretch", @@ -288,100 +348,110 @@ BI.IntervalSlider = BI.inherit(BI.Single, { scrollx: false, items: [ { - type: "bi.absolute", + type: AbsoluteLayout.xtype, height: 6, - items: [{ - el: this.grayTrack, - top: 0, - left: 0, - bottom: 0, - width: "100%" - }, { - el: this.blueTrack, - top: 0, - left: 0, - bottom: 0, - width: "0%" - }] + items: [ + { + el: this.grayTrack, + top: 0, + left: 0, + bottom: 0, + width: "100%", + }, + { + el: this.blueTrack, + top: 0, + left: 0, + bottom: 0, + width: "0%", + } + ], } ], }); - }, + } - _checkValidation: function (v) { - var o = this.options; - var valid = false; + _checkValidation(v) { + const o = this.options; + let valid = false; // 像90.这样的既不属于整数又不属于小数，是不合法的值 - var dotText = (v + "").split(".")[1]; - if (BI.isEmptyString(dotText)) { - }else{ - if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) { + let dotText = (`${v}`).split(".")[1]; + // eslint-disable-next-line no-empty + if (isEmptyString(dotText)) { + } else { + if (isNumeric(v) && !(isNull(v) || v < this.min || v > this.max)) { // 虽然规定了所填写的小数位数，但是我们认为所有的整数都是满足设置的小数位数的 // 100等价于100.0 100.00 100.000 - if(o.digit === false || BI.isInteger(v)) { + if (o.digit === false || isInteger(v)) { valid = true; - }else{ + } else { dotText = dotText || ""; - valid = (dotText.length === o.digit); + valid = dotText.length === o.digit; } } } + return valid; - }, + } - _checkOverlap: function () { - var labelOneLeft = this.labelOne.element[0].offsetLeft; - var labelTwoLeft = this.labelTwo.element[0].offsetLeft; + _checkOverlap() { + const labelOneLeft = this.labelOne.element[0].offsetLeft; + const labelTwoLeft = this.labelTwo.element[0].offsetLeft; if (labelOneLeft <= labelTwoLeft) { - if ((labelTwoLeft - labelOneLeft) < 90) { - this.labelTwo.element.css({top: 40}); + if (labelTwoLeft - labelOneLeft < 90) { + this.labelTwo.element.css({ top: 40 }); } else { - this.labelTwo.element.css({top: 0}); + this.labelTwo.element.css({ top: 0 }); } } else { - if ((labelOneLeft - labelTwoLeft) < 90) { - this.labelTwo.element.css({top: 40}); + if (labelOneLeft - labelTwoLeft < 90) { + this.labelTwo.element.css({ top: 40 }); } else { - this.labelTwo.element.css({top: 0}); + this.labelTwo.element.css({ top: 0 }); } } - }, - - _checkLabelPosition: function (oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) { - oldValueOne = BI.parseFloat(oldValueOne); - oldValueTwo = BI.parseFloat(oldValueTwo); - valueOne = BI.parseFloat(valueOne); - valueTwo = BI.parseFloat(valueTwo); - if((oldValueOne <= oldValueTwo && valueOne > valueTwo) || (oldValueOne >= oldValueTwo && valueOne < valueTwo)) { - var isSliderOneLeft = BI.parseFloat(this.labelOne.getValue()) < BI.parseFloat(this.labelTwo.getValue()); + } + + _checkLabelPosition(oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) { + oldValueOne = parseFloat(oldValueOne); + oldValueTwo = parseFloat(oldValueTwo); + valueOne = parseFloat(valueOne); + valueTwo = parseFloat(valueTwo); + if ( + (oldValueOne <= oldValueTwo && valueOne > valueTwo) || + (oldValueOne >= oldValueTwo && valueOne < valueTwo) + ) { + const isSliderOneLeft = + parseFloat(this.labelOne.getValue()) < + parseFloat(this.labelTwo.getValue()); this._resetLabelPosition(!isSliderOneLeft); } - }, + } - _resetLabelPosition: function(needReverse) { - this.labelOne.element.css({left: needReverse ? "100%" : "0%"}); - this.labelTwo.element.css({left: needReverse ? "0%" : "100%"}); - }, + _resetLabelPosition(needReverse) { + this.labelOne.element.css({ left: needReverse ? "100%" : "0%" }); + this.labelTwo.element.css({ left: needReverse ? "0%" : "100%" }); + } - _setSliderOnePosition: function (percent) { - this.sliderOne.element.css({left: percent + "%"}); - }, + _setSliderOnePosition(percent) { + this.sliderOne.element.css({ left: `${percent}%` }); + } - _setSliderTwoPosition: function (percent) { - this.sliderTwo.element.css({left: percent + "%"}); - }, + _setSliderTwoPosition(percent) { + this.sliderTwo.element.css({ left: `${percent}%` }); + } - _setBlueTrackLeft: function (percent) { - this.blueTrack.element.css({left: percent + "%"}); - }, + _setBlueTrackLeft(percent) { + this.blueTrack.element.css({ left: `${percent}%` }); + } - _setBlueTrackWidth: function (percent) { - this.blueTrack.element.css({width: percent + "%"}); - }, + _setBlueTrackWidth(percent) { + this.blueTrack.element.css({ width: `${percent}%` }); + } - _setBlueTrack: function () { - var percentOne = this._getPercentByValue(this.labelOne.getValue()); - var percentTwo = this._getPercentByValue(this.labelTwo.getValue()); + _setBlueTrack() { + const percentOne = this._getPercentByValue(this.labelOne.getValue()); + const percentTwo = this._getPercentByValue(this.labelTwo.getValue()); if (percentOne <= percentTwo) { this._setBlueTrackLeft(percentOne); this._setBlueTrackWidth(percentTwo - percentOne); @@ -389,133 +459,165 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this._setBlueTrackLeft(percentTwo); this._setBlueTrackWidth(percentOne - percentTwo); } - }, + } - _setAllPosition: function (one, two) { + _setAllPosition(one, two) { this._setSliderOnePosition(one); this._setSliderTwoPosition(two); this._setBlueTrack(); - }, + } - _setVisible: function (visible) { + _setVisible(visible) { this.sliderOne.setVisible(visible); this.sliderTwo.setVisible(visible); this.labelOne.setVisible(visible); this.labelTwo.setVisible(visible); - }, + } - _setErrorText: function () { - var errorText = BI.i18nText("BI-Basic_Please_Enter_Number_Between", this.min, this.max); + _setErrorText() { + const errorText = i18nText( + "BI-Basic_Please_Enter_Number_Between", + this.min, + this.max + ); this.labelOne.setErrorText(errorText); this.labelTwo.setErrorText(errorText); - }, + } - _getGrayTrackLength: function () { + _getGrayTrackLength() { return this.grayTrack.element[0].scrollWidth; - }, + } - // 其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度 - // 端点处的值有可能因为min,max相差量级很大(precision很大)而丢失精度，此时直接返回端点值即可 - _getValueByPercent: function (percent) {// return (((max-min)*percent)/100+min) + _getValueByPercent(percent) { + // return (((max-min)*percent)/100+min) if (percent === 0) { return this.min; } if (percent === 100) { return this.max; } - var sub = this.calculation.accurateSubtraction(this.max, this.min); - var mul = this.calculation.accurateMultiplication(sub, percent); - var div = this.calculation.accurateDivisionTenExponent(mul, 2); - if(this.precision < 0) { - var value = BI.parseFloat(this.calculation.accurateAddition(div, this.min)); - var reduceValue = Math.round(this.calculation.accurateDivisionTenExponent(value, -this.precision)); - return this.calculation.accurateMultiplication(reduceValue, Math.pow(10, -this.precision)); + const sub = this.calculation.accurateSubtraction(this.max, this.min); + const mul = this.calculation.accurateMultiplication(sub, percent); + const div = this.calculation.accurateDivisionTenExponent(mul, 2); + if (this.precision < 0) { + const value = parseFloat( + this.calculation.accurateAddition(div, this.min) + ); + const reduceValue = Math.round( + this.calculation.accurateDivisionTenExponent( + value, + -this.precision + ) + ); + + return this.calculation.accurateMultiplication( + reduceValue, + Math.pow(10, -this.precision) + ); } - return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision)); - - }, + + return parseFloat( + this.calculation + .accurateAddition(div, this.min) + .toFixed(this.precision) + ); + } - _getPercentByValue: function (v) { - return (v - this.min) * 100 / (this.max - this.min); - }, + _getPercentByValue(v) { + return ((v - this.min) * 100) / (this.max - this.min); + } - _getPrecision: function () { + _getPrecision() { // 计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度) // 如果差值的整数位数大于4,toPrecision(4)得到的是科学计数法123456 => 1.235e+5 // 返回非负值: 保留的小数位数 // 返回负值: 保留的10^n精度中的n - var sub = this.calculation.accurateSubtraction(this.max, this.min); - var pre = sub.toPrecision(4); + const sub = this.calculation.accurateSubtraction(this.max, this.min); + const pre = sub.toPrecision(4); // 科学计数法 - var eIndex = pre.indexOf("e"); - var arr = []; - if(eIndex > -1) { + const eIndex = pre.indexOf("e"); + let arr = []; + if (eIndex > -1) { arr = pre.split("e"); - var decimalPartLength = BI.size(arr[0].split(".")[1]); - var sciencePartLength = BI.parseInt(arr[1].substring(1)); + const decimalPartLength = size(arr[0].split(".")[1]); + const sciencePartLength = parseInt(arr[1].substring(1)); + return decimalPartLength - sciencePartLength; } arr = pre.split("."); + return arr.length > 1 ? arr[1].length : 0; + } - }, - - _assertValue: function (value) { - if(value <= this.min) { + _assertValue(value) { + if (value <= this.min) { return this.min; } - if(value >= this.max) { + if (value >= this.max) { return this.max; } + return value; - }, + } - _setEnable: function (b) { - BI.IntervalSlider.superclass._setEnable.apply(this, [b]); - if(b) { - this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); + _setEnable(b) { + super._setEnable.apply(this, [b]); + if (b) { + this.blueTrack.element + .removeClass("disabled-blue-track") + .addClass("blue-track"); } else { - this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); + this.blueTrack.element + .removeClass("blue-track") + .addClass("disabled-blue-track"); } - }, + } - getValue: function () { + getValue() { if (this.valueOne <= this.valueTwo) { - return {min: this.valueOne, max: this.valueTwo}; + return { min: this.valueOne, max: this.valueTwo }; } - return {min: this.valueTwo, max: this.valueOne}; - - }, + + return { min: this.valueTwo, max: this.valueOne }; + } - _setMinAndMax: function (v) { - var minNumber = BI.parseFloat(v.min); - var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber)) { + _setMinAndMax(v) { + const minNumber = parseFloat(v.min); + const maxNumber = parseFloat(v.max); + if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber >= minNumber) { this.min = minNumber; this.max = maxNumber; this.valueOne = minNumber; this.valueTwo = maxNumber; this.precision = this._getPrecision(); } - }, + } - setMinAndMax: function (v) { + setMinAndMax(v) { this._setMinAndMax(v); this.setEnable(v.min <= v.max); - }, - - setValue: function (v) { - var o = this.options; - var valueOne = BI.parseFloat(v.min); - var valueTwo = BI.parseFloat(v.max); - valueOne = o.digit === false ? valueOne : BI.parseFloat(valueOne.toFixed(o.digit)); - valueTwo = o.digit === false ? valueTwo : BI.parseFloat(valueTwo.toFixed(o.digit)); + } + + setValue(v) { + const o = this.options; + let valueOne = parseFloat(v.min); + let valueTwo = parseFloat(v.max); + valueOne = + o.digit === false + ? valueOne + : parseFloat(valueOne.toFixed(o.digit)); + valueTwo = + o.digit === false + ? valueTwo + : parseFloat(valueTwo.toFixed(o.digit)); if (!isNaN(valueOne) && !isNaN(valueTwo)) { if (this._checkValidation(valueOne)) { - this.valueOne = (this.valueOne <= this.valueTwo ? valueOne : valueTwo); + this.valueOne = + this.valueOne <= this.valueTwo ? valueOne : valueTwo; } if (this._checkValidation(valueTwo)) { - this.valueTwo = (this.valueOne <= this.valueTwo ? valueTwo : valueOne); + this.valueTwo = + this.valueOne <= this.valueTwo ? valueTwo : valueOne; } if (valueOne < this.min) { this.valueOne = this.min; @@ -524,9 +626,9 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this.valueTwo = this.max; } } - }, + } - reset: function () { + reset() { this._setVisible(false); this.enable = false; this.valueOne = ""; @@ -534,18 +636,32 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this.min = NaN; this.max = NaN; this._setBlueTrackWidth(0); - }, + } - populate: function () { - var o = this.options; + populate() { + const o = this.options; if (!isNaN(this.min) && !isNaN(this.max)) { this.enable = true; this._setVisible(true); this._setErrorText(); - if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) { - this.labelOne.setValue(o.digit === false ? this.valueOne : BI.parseFloat(this.valueOne).toFixed(o.digit)); - this.labelTwo.setValue(o.digit === false ? this.valueTwo : BI.parseFloat(this.valueTwo).toFixed(o.digit)); - this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo)); + if ( + (isNumeric(this.valueOne) || isNotEmptyString(this.valueOne)) && + (isNumeric(this.valueTwo) || isNotEmptyString(this.valueTwo)) + ) { + this.labelOne.setValue( + o.digit === false + ? this.valueOne + : parseFloat(this.valueOne).toFixed(o.digit) + ); + this.labelTwo.setValue( + o.digit === false + ? this.valueTwo + : parseFloat(this.valueTwo).toFixed(o.digit) + ); + this._setAllPosition( + this._getPercentByValue(this.valueOne), + this._getPercentByValue(this.valueTwo) + ); } else { this.labelOne.setValue(this.min); this.labelTwo.setValue(this.max); @@ -554,6 +670,4 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this._resetLabelPosition(this.valueOne > this.valueTwo); } } -}); -BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.interval_slider", BI.IntervalSlider); +} diff --git a/src/widget/intervalslider/model.accuratecalculation.js b/src/widget/intervalslider/model.accuratecalculation.js index aa430dad1..fcc944e78 100644 --- a/src/widget/intervalslider/model.accuratecalculation.js +++ b/src/widget/intervalslider/model.accuratecalculation.js @@ -1,172 +1,239 @@ -/** - * Created by zcf on 2017/3/1. - * 万恶的IEEE-754 - * 使用字符串精确计算含小数加法、减法、乘法和10的指数倍除法，支持负数 - */ -BI.AccurateCalculationModel = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), { - baseCls: "" +import { Widget, extend, parseInt, parseFloat } from "@/core"; + +export class AccurateCalculationModel extends Widget { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: "", }); - }, + } - _init: function () { - BI.AccurateCalculationModel.superclass._init.apply(this, arguments); - }, + _init() { + super._init(...arguments); + } - _getMagnitude: function (n) { - var magnitude = "1"; - for (var i = 0; i < n; i++) { + _getMagnitude(n) { + let magnitude = "1"; + for (let i = 0; i < n; i++) { magnitude += "0"; } - return BI.parseInt(magnitude); - }, + + return parseInt(magnitude); + } - _formatDecimal: function (stringNumber1, stringNumber2) { + _formatDecimal(stringNumber1, stringNumber2) { if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) { return; } - var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength; + let magnitudeDiff = + stringNumber1.numDecimalLength - stringNumber2.numDecimalLength; + let needAddZero; if (magnitudeDiff > 0) { - var needAddZero = stringNumber2; + needAddZero = stringNumber2; } else { - var needAddZero = stringNumber1; - magnitudeDiff = (0 - magnitudeDiff); + needAddZero = stringNumber1; + magnitudeDiff = 0 - magnitudeDiff; } - for (var i = 0; i < magnitudeDiff; i++) { + for (let i = 0; i < magnitudeDiff; i++) { if (needAddZero.numDecimal === "0" && i === 0) { continue; } needAddZero.numDecimal += "0"; } - }, + } - _stringNumberFactory: function (num) { - var strNum = num.toString(); - var numStrArray = strNum.split("."); - var numInteger = numStrArray[0]; + _stringNumberFactory(num) { + const strNum = num.toString(); + const numStrArray = strNum.split("."); + const numInteger = numStrArray[0]; + let numDecimal; + let numDecimalLength; if (numStrArray.length === 1) { - var numDecimal = "0"; - var numDecimalLength = 0; + numDecimal = "0"; + numDecimalLength = 0; } else { - var numDecimal = numStrArray[1]; - var numDecimalLength = numStrArray[1].length; + numDecimal = numStrArray[1]; + numDecimalLength = numStrArray[1].length; } + return { - numInteger: numInteger, - numDecimal: numDecimal, - numDecimalLength: numDecimalLength + numInteger, + numDecimal, + numDecimalLength, }; - }, + } - _accurateSubtraction: function (num1, num2) {// num1-num2 && num1>num2 - var stringNumber1 = this._stringNumberFactory(num1); - var stringNumber2 = this._stringNumberFactory(num2); + _accurateSubtraction(num1, num2) { + // num1-num2 && num1>num2 + const stringNumber1 = this._stringNumberFactory(num1); + const stringNumber2 = this._stringNumberFactory(num2); // 整数部分计算 - var integerResult = BI.parseInt(stringNumber1.numInteger) - BI.parseInt(stringNumber2.numInteger); + let integerResult = + parseInt(stringNumber1.numInteger) - + parseInt(stringNumber2.numInteger); // 小数部分 this._formatDecimal(stringNumber1, stringNumber2); - var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2); + const decimalMaxLength = getDecimalMaxLength( + stringNumber1, + stringNumber2 + ); - if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) { - var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); - var decimalResult = addZero(decimalResultTemp, decimalMaxLength); - } else {// 否则借位 + let decimalResultTemp; + let decimalResult; + + if ( + parseInt(stringNumber1.numDecimal) >= + parseInt(stringNumber2.numDecimal) + ) { + decimalResultTemp = ( + parseInt(stringNumber1.numDecimal) - + parseInt(stringNumber2.numDecimal) + ).toString(); + decimalResult = addZero(decimalResultTemp, decimalMaxLength); + } else { + // 否则借位 integerResult--; - var borrow = this._getMagnitude(decimalMaxLength); - var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); - var decimalResult = addZero(decimalResultTemp, decimalMaxLength); + const borrow = this._getMagnitude(decimalMaxLength); + decimalResultTemp = ( + borrow + + parseInt(stringNumber1.numDecimal) - + parseInt(stringNumber2.numDecimal) + ).toString(); + decimalResult = addZero(decimalResultTemp, decimalMaxLength); } - var result = integerResult + "." + decimalResult; - return BI.parseFloat(result); + const result = `${integerResult}.${decimalResult}`; + + return parseFloat(result); - function getDecimalMaxLength (num1, num2) { + function getDecimalMaxLength(num1, num2) { if (num1.numDecimal.length >= num2.numDecimal.length) { return num1.numDecimal.length; } + return num2.numDecimal.length; } - function addZero (resultTemp, length) { - var diff = length - resultTemp.length; - for (var i = 0; i < diff; i++) { - resultTemp = "0" + resultTemp; + function addZero(resultTemp, length) { + const diff = length - resultTemp.length; + for (let i = 0; i < diff; i++) { + resultTemp = `0${resultTemp}`; } + return resultTemp; } - }, + } - _accurateAddition: function (num1, num2) {// 加法结合律 - var stringNumber1 = this._stringNumberFactory(num1); - var stringNumber2 = this._stringNumberFactory(num2); + _accurateAddition(num1, num2) { + // 加法结合律 + const stringNumber1 = this._stringNumberFactory(num1); + const stringNumber2 = this._stringNumberFactory(num2); // 整数部分计算 - var integerResult = BI.parseInt(stringNumber1.numInteger) + BI.parseInt(stringNumber2.numInteger); + let integerResult = + parseInt(stringNumber1.numInteger) + + parseInt(stringNumber2.numInteger); // 小数部分 this._formatDecimal(stringNumber1, stringNumber2); - var decimalResult = (BI.parseInt(stringNumber1.numDecimal) + BI.parseInt(stringNumber2.numDecimal)).toString(); + let decimalResult = ( + parseInt(stringNumber1.numDecimal) + + parseInt(stringNumber2.numDecimal) + ).toString(); if (decimalResult !== "0") { if (decimalResult.length <= stringNumber1.numDecimal.length) { - decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length); + decimalResult = addZero( + decimalResult, + stringNumber1.numDecimal.length + ); } else { - integerResult++;// 进一 + integerResult++; // 进一 decimalResult = decimalResult.slice(1); } } - var result = integerResult + "." + decimalResult; - return BI.parseFloat(result); + const result = `${integerResult}.${decimalResult}`; + + return parseFloat(result); - function addZero (resultTemp, length) { - var diff = length - resultTemp.length; - for (var i = 0; i < diff; i++) { - resultTemp = "0" + resultTemp; + function addZero(resultTemp, length) { + const diff = length - resultTemp.length; + for (let i = 0; i < diff; i++) { + resultTemp = `0${resultTemp}`; } + return resultTemp; } - }, + } - _accurateMultiplication: function (num1, num2) {// 乘法分配律 - var stringNumber1 = this._stringNumberFactory(num1); - var stringNumber2 = this._stringNumberFactory(num2); + _accurateMultiplication(num1, num2) { + // 乘法分配律 + const stringNumber1 = this._stringNumberFactory(num1); + const stringNumber2 = this._stringNumberFactory(num2); // 整数部分计算 - var integerResult = BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numInteger); + const integerResult = + parseInt(stringNumber1.numInteger) * + parseInt(stringNumber2.numInteger); // num1的小数和num2的整数 - var dec1Int2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numInteger), stringNumber1.numDecimalLength); + const dec1Int2 = this._accurateDivisionTenExponent( + parseInt(stringNumber1.numDecimal) * + parseInt(stringNumber2.numInteger), + stringNumber1.numDecimalLength + ); // num1的整数和num2的小数 - var int1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numDecimal), stringNumber2.numDecimalLength); + const int1dec2 = this._accurateDivisionTenExponent( + parseInt(stringNumber1.numInteger) * + parseInt(stringNumber2.numDecimal), + stringNumber2.numDecimalLength + ); // 小数*小数 - var dec1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numDecimal), (stringNumber1.numDecimalLength + stringNumber2.numDecimalLength)); + const dec1dec2 = this._accurateDivisionTenExponent( + parseInt(stringNumber1.numDecimal) * + parseInt(stringNumber2.numDecimal), + stringNumber1.numDecimalLength + stringNumber2.numDecimalLength + ); - return this._accurateAddition(this._accurateAddition(this._accurateAddition(integerResult, dec1Int2), int1dec2), dec1dec2); - }, + return this._accurateAddition( + this._accurateAddition( + this._accurateAddition(integerResult, dec1Int2), + int1dec2 + ), + dec1dec2 + ); + } - _accurateDivisionTenExponent: function (num, n) {// num/10^n && n>0 - var stringNumber = this._stringNumberFactory(num); + _accurateDivisionTenExponent(num, n) { + // num/10^n && n>0 + const stringNumber = this._stringNumberFactory(num); + let integerResult, partDecimalResult; if (stringNumber.numInteger.length > n) { - var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n)); - var partDecimalResult = stringNumber.numInteger.slice(-n); + integerResult = stringNumber.numInteger.slice( + 0, + stringNumber.numInteger.length - n + ); + partDecimalResult = stringNumber.numInteger.slice(-n); } else { - var integerResult = "0"; - var partDecimalResult = addZero(stringNumber.numInteger, n); + integerResult = "0"; + partDecimalResult = addZero(stringNumber.numInteger, n); } - var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal; - return BI.parseFloat(result); + const result = + `${integerResult}.${partDecimalResult}${stringNumber.numDecimal}`; + + return parseFloat(result); - function addZero (resultTemp, length) { - var diff = length - resultTemp.length; - for (var i = 0; i < diff; i++) { - resultTemp = "0" + resultTemp; + function addZero(resultTemp, length) { + const diff = length - resultTemp.length; + for (let i = 0; i < diff; i++) { + resultTemp = `0${resultTemp}`; } + return resultTemp; } - }, + } - accurateSubtraction: function (num1, num2) { + accurateSubtraction(num1, num2) { if (num1 >= 0 && num2 >= 0) { if (num1 >= num2) { return this._accurateSubtraction(num1, num2); } + return -this._accurateSubtraction(num2, num1); } if (num1 >= 0 && num2 < 0) { @@ -179,11 +246,12 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, { if (num1 >= num2) { return this._accurateSubtraction(-num2, -num1); } + return this._accurateSubtraction(-num1, -num2); } - }, + } - accurateAddition: function (num1, num2) { + accurateAddition(num1, num2) { if (num1 >= 0 && num2 >= 0) { return this._accurateAddition(num1, num2); } @@ -196,9 +264,9 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, { if (num1 < 0 && num2 < 0) { return -this._accurateAddition(-num1, -num2); } - }, + } - accurateMultiplication: function (num1, num2) { + accurateMultiplication(num1, num2) { if (num1 >= 0 && num2 >= 0) { return this._accurateMultiplication(num1, num2); } @@ -211,12 +279,13 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, { if (num1 < 0 && num2 < 0) { return this._accurateMultiplication(-num1, -num2); } - }, + } - accurateDivisionTenExponent: function (num1, n) { + accurateDivisionTenExponent(num1, n) { if (num1 >= 0) { return this._accurateDivisionTenExponent(num1, n); } + return -this._accurateDivisionTenExponent(-num1, n); } -}); \ No newline at end of file +} diff --git a/src/widget/singleslider/button/editor.sign.text.js b/src/widget/singleslider/button/editor.sign.text.js index 281c7b0e1..09eb164db 100644 --- a/src/widget/singleslider/button/editor.sign.text.js +++ b/src/widget/singleslider/button/editor.sign.text.js @@ -1,196 +1,217 @@ -BI.SignTextEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.SignTextEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-sign-initial-editor", - validationChecker: BI.emptyFn, +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + nextTick, + Controller, + AbsoluteLayout, + VerticalLayout, + bind, + isEmpty, + isKey +} from "@/core"; +import { TextButton, Editor } from "@/base"; + +@shortcut() +export class SignTextEditor extends Widget { + static xtype = "bi.sign_text_editor"; + + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-sign-initial-editor`, + validationChecker: emptyFn, text: "", - height: 24 + height: 24, }); - }, + } - _init: function () { - BI.SignTextEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget({ - type: "bi.editor", + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget({ + type: Editor.xtype, simple: o.simple, height: o.height, hgap: 4, vgap: 2, value: o.value, validationChecker: o.validationChecker, - allowBlank: false + allowBlank: false, }); - this.text = BI.createWidget({ - type: "bi.text_button", + this.text = createWidget({ + type: TextButton.xtype, cls: "sign-editor-text", - title: function () { - return self.getValue(); - }, + title: () => this.getValue(), textAlign: o.textAlign, height: o.height, hgap: 4, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.selectAll(); - } + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.selectAll(); + }, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.SignTextEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(SignTextEditor.EVENT_CLICK_LABEL); }); }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] + items: [ + { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignTextEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignTextEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignTextEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignTextEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self._checkText(); + this.editor.on(Editor.EVENT_ERROR, () => { + this._checkText(); }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, scrolly: false, element: this, - items: [this.editor] + items: [this.editor], }); this._showHint(); - self._checkText(); - }, - - _checkText: function () { - var o = this.options; - BI.nextTick(BI.bind(function () { - if (this.editor.getValue() === "") { - this.text.setValue(o.watermark || ""); - this.text.element.addClass("bi-water-mark"); - } else { - var v = this.editor.getValue(); - v = (BI.isEmpty(v) || v == o.text) ? o.text : v + o.text; - this.text.setValue(v); - this.text.element.removeClass("bi-water-mark"); - } - }, this)); - }, - - _showInput: function () { + this._checkText(); + } + + _checkText() { + const o = this.options; + nextTick( + bind(() => { + if (this.editor.getValue() === "") { + this.text.setValue(o.watermark || ""); + this.text.element.addClass("bi-water-mark"); + } else { + let v = this.editor.getValue(); + v = isEmpty(v) || v === o.text ? o.text : v + o.text; + this.text.setValue(v); + this.text.element.removeClass("bi-water-mark"); + } + }, this) + ); + } + + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - setTitle: function (title) { + setTitle(title) { this.text.setTitle(title); - }, + } - setWarningTitle: function (title) { + setWarningTitle(title) { this.text.setWarningTitle(title); - }, + } - focus: function () { + focus() { this._showInput(); this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); this._checkText(); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setValue(v); this._checkText(); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.text.getValue(); - }, + } - setState: function (v) { - var o = this.options; + setState(v) { + const o = this.options; this._showHint(); - v = (BI.isEmpty(v) || v == o.text) ? o.text : v + o.text; + v = isEmpty(v) || v === o.text ? o.text : v + o.text; this.text.setValue(v); } -}); -BI.SignTextEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.SignTextEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.SignTextEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.shortcut("bi.sign_text_editor", BI.SignTextEditor); \ No newline at end of file +} diff --git a/src/widget/singleslider/button/iconbutton.slider.js b/src/widget/singleslider/button/iconbutton.slider.js index 3b3432253..c1b5ce6f8 100644 --- a/src/widget/singleslider/button/iconbutton.slider.js +++ b/src/widget/singleslider/button/iconbutton.slider.js @@ -1,26 +1,24 @@ -/** - * Created by zcf on 2016/9/22. - */ -BI.SliderIconButton = BI.inherit(BI.Widget, { +import { shortcut, Widget, Layout } from "@/core"; - props: { +@shortcut() +export class SliderIconButton extends Widget { + static xtype = "bi.single_slider_button"; + + props = { baseCls: "bi-single-slider-button slider-button bi-high-light-border", height: 8, width: 8, - }, - - constants: { + } + constants = { LARGE_SIZE: 16, NORMAL_SIZE: 12, LARGE_OFFSET: 4, - NORMAL_OFFSET: 6 - }, + NORMAL_OFFSET: 6, + }; - render: function () { - var self = this; + render() { return { - type: "bi.layout", + type: Layout.xtype, }; } -}); -BI.shortcut("bi.single_slider_button", BI.SliderIconButton); +} diff --git a/src/widget/singleslider/index.js b/src/widget/singleslider/index.js new file mode 100644 index 000000000..dc4943c0c --- /dev/null +++ b/src/widget/singleslider/index.js @@ -0,0 +1,5 @@ +export { SingleSlider } from "./singleslider"; +export { SingleSliderLabel } from "./singleslider.label"; +export { SingleSliderNormal } from "./singleslider.normal"; +export { SignTextEditor } from "./button/editor.sign.text"; +export { SliderIconButton } from "./button/iconbutton.slider"; diff --git a/src/widget/singleslider/singleslider.js b/src/widget/singleslider/singleslider.js index 8cf77b180..0a2b7496e 100644 --- a/src/widget/singleslider/singleslider.js +++ b/src/widget/singleslider/singleslider.js @@ -1,8 +1,29 @@ -/** - * Created by zcf on 2016/9/22. - */ -BI.SingleSlider = BI.inherit(BI.Single, { - _constant: { +import { + shortcut, + createWidget, + parseFloat, + toPix, + Layout, + VerticalAdaptLayout, + AbsoluteLayout, + VerticalLayout, + HorizontalAutoLayout, + clamp, + isNumeric, + isNull, + parseInt, + i18nText, + isNotEmptyString, + MouseMoveTracker +} from "@/core"; +import { Single } from "@/base"; +import { SignEditor } from "@/case"; + +@shortcut() +export class SingleSlider extends Single { + static xtype = "bi.single_slider"; + + _constant = { EDITOR_WIDTH: 90, EDITOR_HEIGHT: 20, SLIDER_WIDTH_HALF: 15, @@ -10,19 +31,21 @@ BI.SingleSlider = BI.inherit(BI.Single, { SLIDER_HEIGHT: 30, TRACK_HEIGHT: 24, TRACK_GAP_HALF: 7, - TRACK_GAP: 14 - }, + TRACK_GAP: 14, + } - props: { + props = { baseCls: "bi-single-slider bi-slider-track", digit: false, unit: "", value: "", min: 0, max: 100, - }, + }; - beforeMount: function () { + static EVENT_CHANGE = "EVENT_CHANGE"; + + beforeMount() { const { value, min, max } = this.options; this.setMinAndMax({ min, @@ -30,175 +53,205 @@ BI.SingleSlider = BI.inherit(BI.Single, { }); this.setValue(value); this.populate(); - }, + } - render: function () { - var self = this, o = this.options; - var c = this._constant; + render() { + const o = this.options; + const c = this._constant; this.enable = false; this.value = ""; - this.grayTrack = BI.createWidget({ - type: "bi.layout", + this.grayTrack = createWidget({ + type: Layout.xtype, cls: "gray-track", - height: 6 + height: 6, }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", + this.blueTrack = createWidget({ + type: Layout.xtype, cls: "blue-track bi-high-light-background", - height: 6 + height: 6, }); this.track = this._createTrackWrapper(); - this.slider = BI.createWidget({ - type: "bi.single_slider_button" + this.slider = createWidget({ + type: "bi.single_slider_button", }); this._draggable(this.slider); - var sliderVertical = BI.createWidget({ - type: "bi.vertical_adapt", + const sliderVertical = createWidget({ + type: VerticalAdaptLayout.xtype, cls: "slider-wrapper", columnSize: ["fill"], - items: [{ - type: "bi.absolute", - items: [ - { - el: this.slider, - top: 8, - } - ], - height: c.SLIDER_HEIGHT - }], + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.slider, + top: 8, + } + ], + height: c.SLIDER_HEIGHT, + } + ], hgap: c.SLIDER_WIDTH_HALF, - height: c.SLIDER_HEIGHT + height: c.SLIDER_HEIGHT, }); // 这边其实是有问题的，拖拽区域是个圆，在圆的边缘拖拽后放开，这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点 - sliderVertical.element.click(function (e) { - if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { - var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; - var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; - var percent = 0; + sliderVertical.element.click(e => { + if ( + this.enable && + this.isEnabled() && + sliderVertical.element[0] === e.originalEvent.target + ) { + const offset = + e.clientX - + this.element.offset().left - + c.SLIDER_WIDTH_HALF; + const trackLength = + this.track.element[0].scrollWidth - c.TRACK_GAP; + let percent = 0; if (offset < 0) { percent = 0; } if (offset > 0 && offset < trackLength) { - percent = offset * 100 / self._getGrayTrackLength(); + percent = (offset * 100) / this._getGrayTrackLength(); } if (offset >= trackLength) { percent = 100; } - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setAllPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setAllPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); v = o.digit === false ? v : v.toFixed(o.digit); - self.label.setValue(v); - self.value = v; - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); + this.label.setValue(v); + this.value = v; + this.fireEvent(SingleSlider.EVENT_CHANGE); } }); - this.label = BI.createWidget({ + this.label = createWidget({ type: "bi.sign_text_editor", cls: "slider-editor-button", text: o.unit, - width: BI.toPix(c.EDITOR_WIDTH, 2), - height: BI.toPix(c.EDITOR_HEIGHT, 2), + width: toPix(c.EDITOR_WIDTH, 2), + height: toPix(c.EDITOR_HEIGHT, 2), allowBlank: false, textAlign: "center", - validationChecker: function (v) { - return self._checkValidation(v); - } + validationChecker: v => this._checkValidation(v), }); - this.label.element.hover(function () { - self.label.element.removeClass("bi-border").addClass("bi-border"); - }, function () { - self.label.element.removeClass("bi-border"); - }); - this.label.on(BI.SignEditor.EVENT_CONFIRM, function () { - var v = BI.parseFloat(this.getValue()); - var percent = self._getPercentByValue(v); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setAllPosition(significantPercent); + this.label.element.hover( + () => { + this.label.element + .removeClass("bi-border") + .addClass("bi-border"); + }, + () => { + this.label.element.removeClass("bi-border"); + } + ); + this.label.on(SignEditor.EVENT_CONFIRM, () => { + const v = parseFloat(this.getValue()); + const percent = this._getPercentByValue(v); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setAllPosition(significantPercent); this.setValue(v); - self.value = v; - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); + this.value = v; + this.fireEvent(SingleSlider.EVENT_CHANGE); }); this._setVisible(false); + return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.track, - width: "100%", - height: c.TRACK_HEIGHT - }] - }], - hgap: c.TRACK_GAP_HALF, - height: c.TRACK_HEIGHT + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.track, + width: "100%", + height: c.TRACK_HEIGHT, + } + ], + } + ], + hgap: c.TRACK_GAP_HALF, + height: c.TRACK_HEIGHT, + }, + top: 23, + left: 0, + width: "100%", }, - top: 23, - left: 0, - width: "100%" - }, { - el: sliderVertical, - top: 20, - left: 0, - width: "100%" - }, { - el: { - type: "bi.vertical", - items: [{ - type: "bi.horizontal_auto", - items: [this.label] - }], - // height: c.EDITOR_HEIGHT + { + el: sliderVertical, + top: 20, + left: 0, + width: "100%", }, - top: 0, - left: 0, - width: "100%" - }] + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: HorizontalAutoLayout.xtype, + items: [this.label], + } + ], + // height: c.EDITOR_HEIGHT + }, + top: 0, + left: 0, + width: "100%", + } + ], }; - }, + } - _draggable: function (widget) { - var self = this, o = this.options; - var startDrag = false; - var size = 0, offset = 0, defaultSize = 0; - var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { - if (mouseMoveTracker.isDragging()) { - startDrag = true; - offset += deltaX; - size = optimizeSize(defaultSize + offset); - widget.element.addClass("dragging"); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 - self._setBlueTrack(significantPercent); - self._setLabelPosition(significantPercent); - self._setSliderPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); - v = o.digit === false ? v : v.toFixed(o.digit); - self.label.setValue(v); - self.value = v; - } - }, function () { - if (startDrag === true) { - size = optimizeSize(size); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setSliderPosition(significantPercent); - size = 0; - offset = 0; - defaultSize = size; - startDrag = false; - } - widget.element.removeClass("dragging"); - mouseMoveTracker.releaseMouseMoves(); - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); - }, window); + _draggable(widget) { + const o = this.options; + let startDrag = false; + let size = 0, + offset = 0, + defaultSize = 0; + const mouseMoveTracker = new MouseMoveTracker( + (deltaX => { + if (mouseMoveTracker.isDragging()) { + startDrag = true; + offset += deltaX; + size = optimizeSize(defaultSize + offset); + widget.element.addClass("dragging"); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + this._setBlueTrack(significantPercent); + this._setLabelPosition(significantPercent); + this._setSliderPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); + v = o.digit === false ? v : v.toFixed(o.digit); + this.label.setValue(v); + this.value = v; + } + }), + (() => { + if (startDrag === true) { + size = optimizeSize(size); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setSliderPosition(significantPercent); + size = 0; + offset = 0; + defaultSize = size; + startDrag = false; + } + widget.element.removeClass("dragging"); + mouseMoveTracker.releaseMouseMoves(); + this.fireEvent(SingleSlider.EVENT_CHANGE); + }), + window + ); widget.element.on("mousedown", function (event) { - if(!widget.isEnabled()) { + if (!widget.isEnabled()) { return; } defaultSize = this.offsetLeft; @@ -206,100 +259,107 @@ BI.SingleSlider = BI.inherit(BI.Single, { mouseMoveTracker.captureMouseMoves(event); }); - function optimizeSize (s) { - return BI.clamp(s, 0, self._getGrayTrackLength()); - } - }, + const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength()); + } - _createTrackWrapper: function () { - return BI.createWidget({ - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.grayTrack, - top: 0, - left: 0, - width: "100%" - }, { - el: this.blueTrack, - top: 0, - left: 0, - width: "0%" - }] - }], - hgap: 8, - height: 8 - }, - top: 8, - left: 0, - width: "100%" - }] + _createTrackWrapper() { + return createWidget({ + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.grayTrack, + top: 0, + left: 0, + width: "100%", + }, + { + el: this.blueTrack, + top: 0, + left: 0, + width: "0%", + } + ], + } + ], + hgap: 8, + height: 8, + }, + top: 8, + left: 0, + width: "100%", + } + ], }); - }, + } - _checkValidation: function (v) { - var o = this.options; - var valid = false; - if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) { - if(o.digit === false) { + _checkValidation(v) { + const o = this.options; + let valid = false; + if (isNumeric(v) && !(isNull(v) || v < this.min || v > this.max)) { + if (o.digit === false) { valid = true; - }else{ - var dotText = (v + "").split(".")[1] || ""; - valid = (dotText.length === o.digit); + } else { + const dotText = (`${v}`).split(".")[1] || ""; + valid = dotText.length === o.digit; } } + return valid; - }, + } - _setBlueTrack: function (percent) { - this.blueTrack.element.css({width: percent + "%"}); - }, + _setBlueTrack(percent) { + this.blueTrack.element.css({ width: `${percent}%` }); + } - _setLabelPosition: function (percent) { + _setLabelPosition(percent) { // this.label.element.css({left: percent + "%"}); - }, + } - _setSliderPosition: function (percent) { - this.slider.element.css({left: percent + "%"}); - }, + _setSliderPosition(percent) { + this.slider.element.css({ left: `${percent}%` }); + } - _setAllPosition: function (percent) { + _setAllPosition(percent) { this._setSliderPosition(percent); this._setLabelPosition(percent); this._setBlueTrack(percent); - }, + } - _setVisible: function (visible) { + _setVisible(visible) { this.slider.setVisible(visible); this.label.setVisible(visible); - }, + } - _getGrayTrackLength: function () { + _getGrayTrackLength() { return this.grayTrack.element[0].scrollWidth; - }, + } - _getValueByPercent: function (percent) { - var thousandth = BI.parseInt(percent * 10); - return (((this.max - this.min) * thousandth) / 1000 + this.min); - }, + _getValueByPercent(percent) { + const thousandth = parseInt(percent * 10); + + return ((this.max - this.min) * thousandth) / 1000 + this.min; + } - _getPercentByValue: function (v) { - return (v - this.min) * 100 / (this.max - this.min); - }, + _getPercentByValue(v) { + return ((v - this.min) * 100) / (this.max - this.min); + } - getValue: function () { + getValue() { return this.value; - }, + } - setValue: function (v) { - var o = this.options; - v = BI.parseFloat(v); + setValue(v) { + const o = this.options; + v = parseFloat(v); v = o.digit === false ? v : v.toFixed(o.digit); - if ((!isNaN(v))) { + if (!isNaN(v)) { if (this._checkValidation(v)) { this.value = v; } @@ -310,47 +370,63 @@ BI.SingleSlider = BI.inherit(BI.Single, { this.value = this.min; } } - }, + } - _setEnable: function (b) { - BI.SingleSlider.superclass._setEnable.apply(this, [b]); - if(b) { - this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); + _setEnable(b) { + super._setEnable.apply(this, [b]); + if (b) { + this.blueTrack.element + .removeClass("disabled-blue-track") + .addClass("blue-track"); } else { - this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); + this.blueTrack.element + .removeClass("blue-track") + .addClass("disabled-blue-track"); } - }, + } - setMinAndMax: function (v) { - var minNumber = BI.parseFloat(v.min); - var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { + setMinAndMax(v) { + const minNumber = parseFloat(v.min); + const maxNumber = parseFloat(v.max); + if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) { this.min = minNumber; this.max = maxNumber; } - }, + } - reset: function () { + reset() { this._setVisible(false); this.enable = false; this.value = ""; this.min = 0; this.max = 0; this._setBlueTrack(0); - }, + } - populate: function () { - var o = this.options; + populate() { + const o = this.options; if (!isNaN(this.min) && !isNaN(this.max)) { this._setVisible(true); this.enable = true; if (o.digit) { - this.label.setErrorText(BI.i18nText("BI-Basic_Please_Enter_Number_Between", this.min, this.max)); + this.label.setErrorText( + i18nText( + "BI-Basic_Please_Enter_Number_Between", + this.min, + this.max + ) + ); } else { - this.label.setErrorText(BI.i18nText("BI-Basic_Please_Enter_Integer_Number_Between", this.min, this.max)); + this.label.setErrorText( + i18nText( + "BI-Basic_Please_Enter_Integer_Number_Between", + this.min, + this.max + ) + ); } - if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + if (isNumeric(this.value) || isNotEmptyString(this.value)) { this.label.setValue(this.value); this._setAllPosition(this._getPercentByValue(this.value)); } else { @@ -359,6 +435,4 @@ BI.SingleSlider = BI.inherit(BI.Single, { } } } -}); -BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_slider", BI.SingleSlider); +} diff --git a/src/widget/singleslider/singleslider.label.js b/src/widget/singleslider/singleslider.label.js index c9ec33998..1253c5681 100644 --- a/src/widget/singleslider/singleslider.label.js +++ b/src/widget/singleslider/singleslider.label.js @@ -1,8 +1,26 @@ -/** - * Created by Urthur on 2017/9/12. - */ -BI.SingleSliderLabel = BI.inherit(BI.Single, { - _constant: { +import { + shortcut, + createWidget, + parseFloat, + toPix, + Layout, + VerticalAdaptLayout, + AbsoluteLayout, + VerticalLayout, + HorizontalAutoLayout, + clamp, + isNumeric, + isNull, + parseInt, + isNotEmptyString, + MouseMoveTracker +} from "@/core"; +import { Single, Label } from "@/base"; + +@shortcut() +export class SingleSliderLabel extends Single { + static xtype = "bi.single_slider_label"; + _constant = { EDITOR_WIDTH: 90, EDITOR_HEIGHT: 20, HEIGHT: 20, @@ -11,19 +29,20 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { SLIDER_HEIGHT: 30, TRACK_HEIGHT: 24, TRACK_GAP_HALF: 7, - TRACK_GAP: 14 - }, - - props: { + TRACK_GAP: 14, + } + props = { baseCls: "bi-single-slider-label bi-slider-track", digit: false, unit: "", value: "", min: 0, max: 100, - }, + }; - beforeMount: function () { + static EVENT_CHANGE = "EVENT_CHANGE"; + + beforeMount() { const { value, min, max } = this.options; this.setMinAndMax({ min, @@ -31,152 +50,179 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { }); this.setValue(value); this.populate(); - }, + } - render: function () { - var self = this, o = this.options; - var c = this._constant; + render() { + const o = this.options; + const c = this._constant; this.enable = false; this.value = ""; - this.grayTrack = BI.createWidget({ - type: "bi.layout", + this.grayTrack = createWidget({ + type: Layout.xtype, cls: "gray-track", - height: 6 + height: 6, }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", + this.blueTrack = createWidget({ + type: Layout.xtype, cls: "blue-track bi-high-light-background", - height: 6 + height: 6, }); this.track = this._createTrackWrapper(); - this.slider = BI.createWidget({ - type: "bi.single_slider_button" + this.slider = createWidget({ + type: "bi.single_slider_button", }); this._draggable(this.slider); - var sliderVertical = BI.createWidget({ - type: "bi.vertical_adapt", + const sliderVertical = createWidget({ + type: VerticalAdaptLayout.xtype, columnSize: ["fill"], - items: [{ - type: "bi.absolute", - items: [ - { - el: this.slider, - top: 8, - } - ], - height: c.SLIDER_HEIGHT - }], + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.slider, + top: 8, + } + ], + height: c.SLIDER_HEIGHT, + } + ], hgap: c.SLIDER_WIDTH_HALF, - height: c.SLIDER_HEIGHT + height: c.SLIDER_HEIGHT, }); - sliderVertical.element.click(function (e) { - if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { - var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; - var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; - var percent = 0; + sliderVertical.element.click(e => { + if ( + this.enable && + this.isEnabled() && + sliderVertical.element[0] === e.originalEvent.target + ) { + const offset = + e.clientX - + this.element.offset().left - + c.SLIDER_WIDTH_HALF; + const trackLength = + this.track.element[0].scrollWidth - c.TRACK_GAP; + let percent = 0; if (offset < 0) { percent = 0; } if (offset > 0 && offset < trackLength) { - percent = offset * 100 / self._getGrayTrackLength(); + percent = (offset * 100) / this._getGrayTrackLength(); } if (offset >= trackLength) { percent = 100; } - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setAllPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setAllPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); v = o.digit === false ? v : v.toFixed(o.digit); - self.label.setText(v + o.unit); - self.value = v; - self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); + this.label.setText(v + o.unit); + this.value = v; + this.fireEvent(SingleSliderLabel.EVENT_CHANGE); } }); - this.label = BI.createWidget({ - type: "bi.label", + this.label = createWidget({ + type: Label.xtype, height: c.HEIGHT, - width: BI.toPix(c.EDITOR_WIDTH, 2) + width: toPix(c.EDITOR_WIDTH, 2), }); this._setVisible(false); - return ({ - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.track, - width: "100%", - height: c.TRACK_HEIGHT - }] - }], - hgap: c.TRACK_GAP_HALF, - height: c.TRACK_HEIGHT + + return { + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.track, + width: "100%", + height: c.TRACK_HEIGHT, + } + ], + } + ], + hgap: c.TRACK_GAP_HALF, + height: c.TRACK_HEIGHT, + }, + top: 13, + left: 0, + width: "100%", }, - top: 13, - left: 0, - width: "100%" - }, { - el: sliderVertical, - top: 10, - left: 0, - width: "100%" - }, { - el: { - type: "bi.vertical", - items: [{ - type: "bi.horizontal_auto", - items: [this.label] - }], - height: c.EDITOR_HEIGHT + { + el: sliderVertical, + top: 10, + left: 0, + width: "100%", }, - top: 0, - left: 0, - width: "100%" - }] - }); - }, + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: HorizontalAutoLayout.xtype, + items: [this.label], + } + ], + height: c.EDITOR_HEIGHT, + }, + top: 0, + left: 0, + width: "100%", + } + ], + }; + } - _draggable: function (widget) { - var self = this, o = this.options; - var startDrag = false; - var size = 0, offset = 0, defaultSize = 0; - var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { - if (mouseMoveTracker.isDragging()) { - startDrag = true; - offset += deltaX; - size = optimizeSize(defaultSize + offset); - widget.element.addClass("dragging"); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 - self._setBlueTrack(significantPercent); - self._setLabelPosition(significantPercent); - self._setSliderPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); - v = o.digit === false ? v : v.toFixed(o.digit); - self.label.setValue(v + o.unit); - self.value = v; - self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); - } - }, function () { - if (startDrag === true) { - size = optimizeSize(size); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setSliderPosition(significantPercent); - size = 0; - offset = 0; - defaultSize = size; - startDrag = false; - } - widget.element.removeClass("dragging"); - mouseMoveTracker.releaseMouseMoves(); - self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); - }, window); + _draggable(widget) { + const o = this.options; + let startDrag = false; + let size = 0, + offset = 0, + defaultSize = 0; + const mouseMoveTracker = new MouseMoveTracker( + (deltaX => { + if (mouseMoveTracker.isDragging()) { + startDrag = true; + offset += deltaX; + size = optimizeSize(defaultSize + offset); + widget.element.addClass("dragging"); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + this._setBlueTrack(significantPercent); + this._setLabelPosition(significantPercent); + this._setSliderPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); + v = o.digit === false ? v : v.toFixed(o.digit); + this.label.setValue(v + o.unit); + this.value = v; + this.fireEvent(SingleSliderLabel.EVENT_CHANGE); + } + }), + (() => { + if (startDrag === true) { + size = optimizeSize(size); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setSliderPosition(significantPercent); + size = 0; + offset = 0; + defaultSize = size; + startDrag = false; + } + widget.element.removeClass("dragging"); + mouseMoveTracker.releaseMouseMoves(); + this.fireEvent(SingleSliderLabel.EVENT_CHANGE); + }), + window + ); widget.element.on("mousedown", function (event) { if (!widget.isEnabled()) { return; @@ -186,99 +232,109 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { mouseMoveTracker.captureMouseMoves(event); }); - function optimizeSize(s) { - return BI.clamp(s, 0, self._getGrayTrackLength()); - } - }, + const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength()); + } - _createTrackWrapper: function () { - return BI.createWidget({ - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.grayTrack, - top: 0, - left: 0, - width: "100%" - }, { - el: this.blueTrack, - top: 0, - left: 0, - width: "0%" - }] - }], - hgap: 8, - height: 8 - }, - top: 8, - left: 0, - width: "100%" - }] + _createTrackWrapper() { + return createWidget({ + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.grayTrack, + top: 0, + left: 0, + width: "100%", + }, + { + el: this.blueTrack, + top: 0, + left: 0, + width: "0%", + } + ], + } + ], + hgap: 8, + height: 8, + }, + top: 8, + left: 0, + width: "100%", + } + ], }); - }, + } - _checkValidation: function (v) { - return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max); - }, + _checkValidation(v) { + return isNumeric(v) && !(isNull(v) || v < this.min || v > this.max); + } - _setBlueTrack: function (percent) { - this.blueTrack.element.css({ width: percent + "%" }); - }, + _setBlueTrack(percent) { + this.blueTrack.element.css({ width: `${percent}%` }); + } - _setLabelPosition: function (percent) { + _setLabelPosition(percent) { // this.label.element.css({left: percent + "%"}); - }, + } - _setSliderPosition: function (percent) { - this.slider.element.css({ left: percent + "%" }); - }, + _setSliderPosition(percent) { + this.slider.element.css({ left: `${percent}%` }); + } - _setAllPosition: function (percent) { + _setAllPosition(percent) { this._setSliderPosition(percent); this._setLabelPosition(percent); this._setBlueTrack(percent); - }, + } - _setVisible: function (visible) { + _setVisible(visible) { this.slider.setVisible(visible); this.label.setVisible(visible); - }, + } - _getGrayTrackLength: function () { + _getGrayTrackLength() { return this.grayTrack.element[0].scrollWidth; - }, + } - _getValueByPercent: function (percent) { - var thousandth = BI.parseInt(percent * 10); - return (((this.max - this.min) * thousandth) / 1000 + this.min); - }, + _getValueByPercent(percent) { + const thousandth = parseInt(percent * 10); + + return ((this.max - this.min) * thousandth) / 1000 + this.min; + } - _getPercentByValue: function (v) { - return (v - this.min) * 100 / (this.max - this.min); - }, + _getPercentByValue(v) { + return ((v - this.min) * 100) / (this.max - this.min); + } - _setEnable: function (b) { - BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]); + _setEnable(b) { + super._setEnable.apply(this, [b]); if (b) { - this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); + this.blueTrack.element + .removeClass("disabled-blue-track") + .addClass("blue-track"); } else { - this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); + this.blueTrack.element + .removeClass("blue-track") + .addClass("disabled-blue-track"); } - }, + } - getValue: function () { + getValue() { return this.value; - }, + } - setValue: function (v) { - var o = this.options; - v = BI.parseFloat(v); + setValue(v) { + const o = this.options; + v = parseFloat(v); v = o.digit === false ? v : v.toFixed(o.digit); - if ((!isNaN(v))) { + if (!isNaN(v)) { if (this._checkValidation(v)) { this.value = v; } @@ -289,32 +345,32 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { this.value = this.min; } } - }, + } - setMinAndMax: function (v) { - var minNumber = BI.parseFloat(v.min); - var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) { + setMinAndMax(v) { + const minNumber = parseFloat(v.min); + const maxNumber = parseFloat(v.max); + if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) { this.min = minNumber; this.max = maxNumber; } - }, + } - reset: function () { + reset() { this._setVisible(false); this.enable = false; this.value = ""; this.min = 0; this.max = 0; this._setBlueTrack(0); - }, + } - populate: function () { - var o = this.options; + populate() { + const o = this.options; if (!isNaN(this.min) && !isNaN(this.max)) { this._setVisible(true); this.enable = true; - if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + if (isNumeric(this.value) || isNotEmptyString(this.value)) { this.label.setValue(this.value + o.unit); this._setAllPosition(this._getPercentByValue(this.value)); } else { @@ -323,6 +379,4 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { } } } -}); -BI.SingleSliderLabel.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel); +} diff --git a/src/widget/singleslider/singleslider.normal.js b/src/widget/singleslider/singleslider.normal.js index 1f7338530..993e86043 100644 --- a/src/widget/singleslider/singleslider.normal.js +++ b/src/widget/singleslider/singleslider.normal.js @@ -1,28 +1,43 @@ -/** - * normal single slider - * Created by Young on 2017/6/21. - */ -BI.SingleSliderNormal = BI.inherit(BI.Single, { +import { + shortcut, + createWidget, + parseFloat, + VerticalAdaptLayout, + AbsoluteLayout, + VerticalLayout, + clamp, + Layout, + isNull, + parseInt, + isNumeric, + isNotEmptyString, + MouseMoveTracker +} from "@/core"; +import { Single } from "@/base"; +import { SingleSlider } from "./singleslider"; - _constant: { +@shortcut() +export class SingleSliderNormal extends Single { + static xtype = "bi.single_slider_normal"; + _constant = { HEIGHT: 28, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, SLIDER_HEIGHT: 30, TRACK_HEIGHT: 24, TRACK_GAP_HALF: 7, - TRACK_GAP: 14 - }, - - props: { + TRACK_GAP: 14, + } + props = { baseCls: "bi-single-slider-normal bi-slider-track", min: 0, max: 100, value: "", - // color: "#3f8ce8" - }, + }; - beforeMount: function () { + static EVENT_DRAG = "EVENT_DRAG"; + + beforeMount() { const { value, min, max } = this.options; this.setMinAndMax({ min, @@ -30,122 +45,143 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, { }); this.setValue(value); this.populate(); - }, + } - render: function () { - var self = this; - var o = this.options; - var c = this._constant; + render() { + const c = this._constant; - var track = this._createTrack(); - this.slider = BI.createWidget({ - type: "bi.single_slider_button" + const track = this._createTrack(); + this.slider = createWidget({ + type: "bi.single_slider_button", }); this._draggable(this.slider); - var sliderVertical = BI.createWidget({ - type: "bi.vertical_adapt", + const sliderVertical = createWidget({ + type: VerticalAdaptLayout.xtype, columnSize: ["fill"], - items: [{ - type: "bi.absolute", - items: [ - { - el: this.slider, - top: 8, - } - ], - height: c.SLIDER_HEIGHT - }], + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.slider, + top: 8, + } + ], + height: c.SLIDER_HEIGHT, + } + ], hgap: c.SLIDER_WIDTH_HALF, - height: c.SLIDER_HEIGHT + height: c.SLIDER_HEIGHT, }); - sliderVertical.element.click(function (e) { - if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { - var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; - var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; - var percent = 0; + sliderVertical.element.click(e => { + if ( + this.enable && + this.isEnabled() && + sliderVertical.element[0] === e.originalEvent.target + ) { + const offset = + e.clientX - + this.element.offset().left - + c.SLIDER_WIDTH_HALF; + const trackLength = + this.track.element[0].scrollWidth - c.TRACK_GAP; + let percent = 0; if (offset < 0) { percent = 0; } if (offset > 0 && offset < trackLength) { - percent = offset * 100 / self._getGrayTrackLength(); + percent = (offset * 100) / this._getGrayTrackLength(); } if (offset >= trackLength) { percent = 100; } - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setAllPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); - self.value = v; - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setAllPosition(significantPercent); + const v = this._getValueByPercent(significantPercent); + this.value = v; + this.fireEvent(SingleSlider.EVENT_CHANGE); } }); return { - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: track, - width: "100%", - height: c.TRACK_HEIGHT - }] - }], - hgap: c.TRACK_GAP_HALF, - height: c.TRACK_HEIGHT + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: track, + width: "100%", + height: c.TRACK_HEIGHT, + } + ], + } + ], + hgap: c.TRACK_GAP_HALF, + height: c.TRACK_HEIGHT, + }, + top: 3, + left: 0, + width: "100%", }, - top: 3, - left: 0, - width: "100%" - }, { - el: sliderVertical, - top: 0, - left: 0, - width: "100%" - }] + { + el: sliderVertical, + top: 0, + left: 0, + width: "100%", + } + ], }; - }, + } - _draggable: function (widget) { - var self = this, o = this.options; - var startDrag = false; - var size = 0, offset = 0, defaultSize = 0; - var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { - if (mouseMoveTracker.isDragging()) { - startDrag = true; - offset += deltaX; - size = optimizeSize(defaultSize + offset); - widget.element.addClass("dragging"); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 - self._setBlueTrack(significantPercent); - self._setSliderPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); - v = o.digit === false ? v : v.toFixed(o.digit); - self.value = v; - self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v); - } - }, function () { - if (startDrag === true) { - size = optimizeSize(size); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setSliderPosition(significantPercent); - size = 0; - offset = 0; - defaultSize = size; - startDrag = false; - } - widget.element.removeClass("dragging"); - mouseMoveTracker.releaseMouseMoves(); - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); - }, window); + _draggable(widget) { + const o = this.options; + let startDrag = false; + let size = 0, + offset = 0, + defaultSize = 0; + const mouseMoveTracker = new MouseMoveTracker( + (deltaX => { + if (mouseMoveTracker.isDragging()) { + startDrag = true; + offset += deltaX; + size = optimizeSize(defaultSize + offset); + widget.element.addClass("dragging"); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + this._setBlueTrack(significantPercent); + this._setSliderPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); + v = o.digit === false ? v : v.toFixed(o.digit); + this.value = v; + this.fireEvent(SingleSliderNormal.EVENT_DRAG, v); + } + }), + (() => { + if (startDrag === true) { + size = optimizeSize(size); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setSliderPosition(significantPercent); + size = 0; + offset = 0; + defaultSize = size; + startDrag = false; + } + widget.element.removeClass("dragging"); + mouseMoveTracker.releaseMouseMoves(); + this.fireEvent(SingleSlider.EVENT_CHANGE); + }), + window + ); widget.element.on("mousedown", function (event) { - if(!widget.isEnabled()) { + if (!widget.isEnabled()) { return; } defaultSize = this.offsetLeft; @@ -153,110 +189,120 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, { mouseMoveTracker.captureMouseMoves(event); }); - function optimizeSize (s) { - return BI.clamp(s, 0, self._getGrayTrackLength()); - } - }, + const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength()); + } - _createTrack: function () { - var self = this; - var c = this._constant; - this.grayTrack = BI.createWidget({ - type: "bi.layout", + _createTrack() { + this.grayTrack = createWidget({ + type: Layout.xtype, cls: "gray-track", - height: 6 + height: 6, }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", + this.blueTrack = createWidget({ + type: Layout.xtype, cls: "blue-track bi-high-light-background", - height: 6 + height: 6, }); if (this.options.color) { - this.blueTrack.element.css({"background-color": this.options.color}); + this.blueTrack.element.css({ + "background-color": this.options.color, + }); } return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.grayTrack, - top: 0, - left: 0, - width: "100%" - }, { - el: this.blueTrack, - top: 0, - left: 0, - width: "0%" - }] - }], - hgap: 8, - height: 8 - }, - top: 8, - left: 0, - width: "100%" - }], - ref: function (ref) { - self.track = ref; - } + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.grayTrack, + top: 0, + left: 0, + width: "100%", + }, + { + el: this.blueTrack, + top: 0, + left: 0, + width: "0%", + } + ], + } + ], + hgap: 8, + height: 8, + }, + top: 8, + left: 0, + width: "100%", + } + ], + ref: _ref => { + this.track = _ref; + }, }; - }, + } - _checkValidation: function (v) { - return !(BI.isNull(v) || v < this.min || v > this.max); - }, + _checkValidation(v) { + return !(isNull(v) || v < this.min || v > this.max); + } - _setBlueTrack: function (percent) { - this.blueTrack.element.css({width: percent + "%"}); - }, + _setBlueTrack(percent) { + this.blueTrack.element.css({ width: `${percent}%` }); + } - _setSliderPosition: function (percent) { - this.slider.element.css({left: percent + "%"}); - }, + _setSliderPosition(percent) { + this.slider.element.css({ left: `${percent}%` }); + } - _setAllPosition: function (percent) { + _setAllPosition(percent) { this._setSliderPosition(percent); this._setBlueTrack(percent); - }, + } - _setVisible: function (visible) { + _setVisible(visible) { this.slider.setVisible(visible); - }, + } - _getGrayTrackLength: function () { + _getGrayTrackLength() { return this.grayTrack.element[0].scrollWidth; - }, + } - _getValueByPercent: function (percent) { - var thousandth = BI.parseInt(percent * 10); - return (((this.max - this.min) * thousandth) / 1000 + this.min); - }, + _getValueByPercent(percent) { + const thousandth = parseInt(percent * 10); + + return ((this.max - this.min) * thousandth) / 1000 + this.min; + } - _getPercentByValue: function (v) { - return (v - this.min) * 100 / (this.max - this.min); - }, + _getPercentByValue(v) { + return ((v - this.min) * 100) / (this.max - this.min); + } - _setEnable: function (b) { - BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]); - if(b) { - this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); + _setEnable(b) { + super._setEnable.apply(this, [b]); + if (b) { + this.blueTrack.element + .removeClass("disabled-blue-track") + .addClass("blue-track"); } else { - this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); + this.blueTrack.element + .removeClass("blue-track") + .addClass("disabled-blue-track"); } - }, + } - getValue: function () { + getValue() { return this.value; - }, + } - setValue: function (v) { - var value = BI.parseFloat(v); - if ((!isNaN(value))) { + setValue(v) { + const value = parseFloat(v); + if (!isNaN(value)) { if (this._checkValidation(value)) { this.value = value; } @@ -267,37 +313,35 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, { this.value = this.min; } } - }, + } - setMinAndMax: function (v) { - var minNumber = BI.parseFloat(v.min); - var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { + setMinAndMax(v) { + const minNumber = parseFloat(v.min); + const maxNumber = parseFloat(v.max); + if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) { this.min = minNumber; this.max = maxNumber; } - }, + } - reset: function () { + reset() { this._setVisible(false); this.enable = false; this.value = ""; this.min = 0; this.max = 0; this._setBlueTrack(0); - }, + } - populate: function () { + populate() { if (!isNaN(this.min) && !isNaN(this.max)) { this._setVisible(true); this.enable = true; - if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + if (isNumeric(this.value) || isNotEmptyString(this.value)) { this._setAllPosition(this._getPercentByValue(this.value)); } else { this._setAllPosition(100); } } } -}); -BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG"; -BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal); +}