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/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..bc43a3dff 100644
--- a/src/case/index.js
+++ b/src/case/index.js
@@ -10,6 +10,7 @@ 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";
@@ -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/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/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;
}
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() {
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 327f708f8..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,
@@ -44,16 +50,14 @@ 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";
-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";
-
+export * from "./downlist";
+export * from "./singleslider";
+export * from "./intervalslider";
+
export {
Collapse,
NumberEditor,
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);
+}