Browse Source

Merge branch 'es6' of ssh://code.fineres.com:7999/~treecat/fineui into es6

es6
Treecat 2 years ago
parent
commit
0aee12d56b
  1. 4
      src/case/calendar/calendar.js
  2. 69
      src/case/colorchooser/colorchooser.custom.js
  3. 126
      src/case/colorchooser/colorchooser.js
  4. 257
      src/case/colorchooser/colorchooser.popup.hex.js
  5. 59
      src/case/colorchooser/colorchooser.popup.hex.simple.js
  6. 201
      src/case/colorchooser/colorchooser.popup.js
  7. 61
      src/case/colorchooser/colorchooser.popup.simple.js
  8. 65
      src/case/colorchooser/colorchooser.simple.js
  9. 56
      src/case/colorchooser/colorchooser.trigger.js
  10. 71
      src/case/colorchooser/colorchooser.trigger.long.js
  11. 76
      src/case/colorchooser/colorpicker/button/button.colorpicker.js
  12. 46
      src/case/colorchooser/colorpicker/button/button.colorshow.js
  13. 2
      src/case/colorchooser/colorpicker/button/index.js
  14. 163
      src/case/colorchooser/colorpicker/colorpicker.hex.js
  15. 195
      src/case/colorchooser/colorpicker/colorpicker.js
  16. 238
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
  17. 168
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
  18. 166
      src/case/colorchooser/colorpicker/editor.colorpicker.js
  19. 111
      src/case/colorchooser/colorpicker/editor.colorpicker.simple.js
  20. 7
      src/case/colorchooser/colorpicker/index.js
  21. 198
      src/case/colorchooser/farbtastic/farbtastic.js
  22. 11
      src/case/colorchooser/index.js
  23. 3
      src/case/index.js
  24. 4
      src/case/layer/panel.js
  25. 10
      src/case/list/list.select.js
  26. 195
      src/core/1.lodash.js
  27. 2
      src/core/structure/queue.js
  28. 1
      src/core/wrapper/layout/flex/flex.vertical.js
  29. 136
      src/widget/downlist/combo.downlist.js
  30. 77
      src/widget/downlist/group.downlist.js
  31. 5
      src/widget/downlist/index.js
  32. 125
      src/widget/downlist/item.downlist.js
  33. 143
      src/widget/downlist/item.downlistgroup.js
  34. 319
      src/widget/downlist/popup.downlist.js
  35. 16
      src/widget/index.js
  36. 2
      src/widget/intervalslider/index.js
  37. 618
      src/widget/intervalslider/intervalslider.js
  38. 263
      src/widget/intervalslider/model.accuratecalculation.js
  39. 239
      src/widget/singleslider/button/editor.sign.text.js
  40. 28
      src/widget/singleslider/button/iconbutton.slider.js
  41. 5
      src/widget/singleslider/index.js
  42. 424
      src/widget/singleslider/singleslider.js
  43. 372
      src/widget/singleslider/singleslider.label.js
  44. 338
      src/widget/singleslider/singleslider.normal.js

4
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,

69
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);
}

126
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({
popup: () => {
return {
el: extend({
type: "bi.hex_color_chooser_popup",
recommendColorsGetter: o.recommendColorsGetter,
ref: function (_ref) {
self.colorPicker = _ref;
ref: _ref => {
this.colorPicker = _ref;
},
listeners: [{
eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE,
action: function () {
eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
action: () => {
fn();
if (!self._isRGBColor(self.colorPicker.getValue())) {
self.combo.hideView();
}
if (!this._isRGBColor(this.colorPicker.getValue())) {
this.combo.hideView();
}
},
}, {
eventName: BI.ColorChooserPopup.EVENT_CHANGE,
action: function () {
eventName: ColorChooserPopup.EVENT_CHANGE,
action: () => {
fn();
self.combo.hideView();
}
}]
this.combo.hideView();
},
}],
}, o.popup),
value: o.value,
width: 300
}),
value: o.value
});
var fn = function () {
var color = self.colorPicker.getValue();
self.setValue(color);
width: 300,
};
},
value: o.value,
});
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);
}

257
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() {
const o = this.options;
const hasRecommendColors = isNotNull(o.recommendColorsGetter());
render: function () {
var self = this, o = this.options;
var hasRecommendColors = BI.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: _ref => {
this.recommendColors = _ref;
},
}],
ref: function (_ref) {
self.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();
this.more.hideView();
break;
case 1:
var color = self.customColorChooser.getValue();
case 1: {
const color = this.customColorChooser.getValue();
// farbtastic选择器没有透明和自动选项,点击保存不应该设置透明
if (BI.isNotEmptyString(color)) {
self.setValue(color);
self._dealStoreColors();
if (isNotEmptyString(color)) {
this.setValue(color);
this._dealStoreColors();
}
self.more.hideView();
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
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") || "");
_isRGBColor: function (color) {
return BI.isNotEmptyString(color) && color !== "transparent";
},
return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
}
setStoreColors: function (colors) {
if (BI.isArray(colors)) {
_isRGBColor(color) {
return isNotEmptyString(color) && color !== "transparent";
}
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);
}

59
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);
}

201
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,24 +94,26 @@ 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();
this.more.hideView();
break;
case 1:
self.setValue(self.customColorChooser.getValue());
self._dealStoreColors();
self.more.hideView();
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
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") || "");
_isRGBColor: function (color) {
return BI.isNotEmptyString(color) && color !== "transparent";
},
return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
}
setStoreColors: function (colors) {
if (BI.isArray(colors)) {
_isRGBColor (color) {
return isNotEmptyString(color) && color !== "transparent";
}
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);
}

61
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);
}

65
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);
}

56
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,20 +46,20 @@ 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") {
@ -60,6 +68,4 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
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);
}

71
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 (config) {
const conf = super._defaultConfig(...arguments);
_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
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);
@ -93,6 +100,4 @@ BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, {
this.label.setVisible(false);
}
}
});
BI.LongColorChooserTrigger.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.long_color_chooser_trigger", BI.LongColorChooserTrigger);
}

76
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);

46
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";
props: {
baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius',
},
static EVENT_CHANGE = "EVENT_CHANGE";
props = {
baseCls: "bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius",
}
render() {
const o = this.options;
render: function () {
var self = this, 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);

2
src/case/colorchooser/colorpicker/button/index.js

@ -0,0 +1,2 @@
export { ColorPickerButton } from "./button.colorpicker";
export { ColorChooserShowButton } from "./button.colorshow";

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

@ -1,165 +1,172 @@
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: function () {
var self = this, o = this.options;
render() {
const o = this.options;
return {
type: "bi.button_group",
@ -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);
}

195
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);
}

238
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, {
@shortcut()
export class HexColorPickerEditor extends Widget {
static xtype = "bi.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: 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);
}

168
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);
}

166
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);
}

111
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);
}

7
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";

198
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;
@shortcut()
export class Farbtastic extends BasicButton {
static xtype = "bi.farbtastic";
props: {
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(rgb) {
const r = Math.round(rgb[0] * 255);
const g = Math.round(rgb[1] * 255);
const b = Math.round(rgb[2] * 255);
_pack: function (rgb) {
var r = Math.round(rgb[0] * 255);
var g = Math.round(rgb[1] * 255);
var 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);
},
}
_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);
}

11
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";

3
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

4
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) => {

10
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({

195
src/core/1.lodash.js

@ -1,3 +1,4 @@
/* eslint-disable */
/**
* @license
* Lodash (Custom Build) <https://lodash.com/>
@ -272,7 +273,8 @@
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);
}
@ -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;
}
@ -1066,7 +1074,8 @@
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. */
@ -1248,7 +1257,9 @@
* @returns {Object} Returns the new object.
*/
var baseCreate = (function () {
function object() {}
function object() {
}
return function (proto) {
if (!isObject(proto)) {
return {};
@ -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);
}
}
@ -2991,8 +3002,7 @@
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;
}
}
@ -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);
}
@ -3942,6 +3942,7 @@
var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func;
return fn.apply(isBind ? thisArg : this, arguments);
}
return wrapper;
}
@ -3960,14 +3961,22 @@
// 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;
}
@ -4028,7 +4038,9 @@
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;
}
@ -4154,6 +4167,7 @@
}
return apply(fn, isBind ? thisArg : this, args);
}
return wrapper;
}
@ -4727,7 +4741,8 @@
try {
value[symToStringTag] = undefined;
var unmasked = true;
} catch (e) {}
} catch (e) {
}
var result = nativeObjectToString.call(value);
if (unmasked) {
@ -4795,11 +4810,16 @@
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:
@ -5442,10 +5476,12 @@
if (func != null) {
try {
return funcToString.call(func);
} catch (e) {}
} catch (e) {
}
try {
return (func + '');
} catch (e) {}
} catch (e) {
}
}
return '';
}
@ -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);
}
@ -6318,7 +6353,9 @@
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)) {
@ -7342,6 +7379,7 @@
}
return result;
}
debounced.cancel = cancel;
debounced.flush = flush;
return debounced;
@ -7486,10 +7524,14 @@
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');
};
@ -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;
@ -10271,10 +10313,12 @@
}
});
realNames[createHybrid(undefined, WRAP_BIND_KEY_FLAG).name] = [{
realNames[createHybrid(undefined, WRAP_BIND_KEY_FLAG).name] = [
{
'name': 'wrapper',
'func': undefined
}];
}
];
// Add methods to `LazyWrapper`.
LazyWrapper.prototype.clone = lazyClone;
@ -10310,8 +10354,7 @@
(freeModule.exports = lodash)._ = lodash;
// Export for CommonJS support.
freeExports._ = lodash;
}
else {
} else {
// Export to the global object.
BI._ = lodash;
}

2
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() {

1
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",

136
src/widget/downlist/combo.downlist.js

@ -1,37 +1,45 @@
(function() {
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;
var result = BI.cloneDeep(items);
var isComplexItmes = BI.some(items, function (_, item) {
return BI.isArray(item);
});
let result = cloneDeep(items);
const isComplexItmes = some(items, (_, item) => isArray(item));
// 传一维数组,帮转二维
if (!isComplexItmes) {
result = [result];
}
// 帮转 el
BI.each(result, function (_, arr) {
BI.each(arr, function (_, item) {
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
value: item.value,
};
}
});
});
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), {
@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: [],
@ -47,15 +55,15 @@
destroyWhenHide: false,
isDefaultInit: true,
});
},
}
_init: function () {
BI.DownListCombo.superclass._init.apply(this, arguments);
var self = this, o = this.options;
_init() {
super._init(...arguments);
const o = this.options;
this.downlistcombo = BI.createWidget({
this.downlistcombo = createWidget({
element: this,
type: "bi.combo",
type: Combo.xtype,
trigger: o.trigger,
isNeedAdjustWidth: false,
isDefaultInit: o.isDefaultInit,
@ -66,78 +74,82 @@
stopPropagation: o.stopPropagation,
destroyWhenHide: o.destroyWhenHide,
el: {
type: "bi.icon_trigger",
type: IconTrigger.xtype,
extraCls: o.iconCls,
width: o.width,
height: o.height,
...o.el
...o.el,
},
popup: {
el: {
type: "bi.down_list_popup",
ref: function (ref) {
self.popupView = ref;
type: DownListPopup.xtype,
ref: _ref => {
this.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();
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
}
...o.popup,
},
});
this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
self.fireEvent(BI.DownListCombo.EVENT_BEFORE_POPUPVIEW);
this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
this.fireEvent(DownListCombo.EVENT_BEFORE_POPUPVIEW);
});
},
}
hideView: function () {
hideView() {
this.downlistcombo.hideView();
},
}
showView: function (e) {
showView(e) {
this.downlistcombo.showView(e);
},
}
populate: function (items) {
populate(items) {
this.popupView.populate(items);
},
}
setValue: function (v) {
setValue(v) {
this.popupView.setValue(v);
},
}
getValue: function () {
getValue() {
return this.popupView.getValue();
},
}
adjustWidth: function () {
adjustWidth() {
this.downlistcombo.adjustWidth();
},
}
adjustHeight: function () {
adjustHeight() {
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";
BI.shortcut("bi.down_list_combo", BI.DownListCombo);
}());
}

77
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), {
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: {}
el: {},
}
]
],
});
},
_init: function () {
BI.DownListGroup.superclass._init.apply(this, arguments);
var o = this.options, self = this;
}
_init() {
super._init(...arguments);
const o = this.options;
this.downlistgroup = BI.createWidget({
this.downlistgroup = createWidget({
element: this,
type: "bi.button_tree",
items: o.items,
chooseType: 0, // 0单选,1多选
layouts: [{
layouts: [
{
type: "bi.vertical",
hgap: 0,
vgap: 0
}],
value: o.value
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);
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: function () {
return this.downlistgroup.getValue();
},
setValue: function (v) {
this.downlistgroup.setValue(v);
}
getValue() {
return this.downlistgroup.getValue();
}
});
BI.DownListGroup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.down_list_group", BI.DownListGroup);
setValue(v) {
this.downlistgroup.setValue(v);
}
}

5
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";

125
src/widget/downlist/item.downlist.js

@ -1,12 +1,21 @@
BI.DownListItem = BI.inherit(BI.BasicButton, {
_defaultConfig: function () {
var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
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
dynamic: true,
},
selected: false,
iconHeight: null,
@ -14,13 +23,14 @@ BI.DownListItem = BI.inherit(BI.BasicButton, {
textHgap: 0,
textVgap: 0,
textLgap: 0,
textRgap: 0
textRgap: 0,
});
},
_init: function () {
BI.DownListItem.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.text = BI.createWidget({
}
_init() {
super._init(...arguments);
const o = this.options;
this.text = createWidget({
type: "bi.label",
cls: "list-item-text",
textAlign: "left",
@ -31,72 +41,85 @@ BI.DownListItem = BI.inherit(BI.BasicButton, {
text: o.text,
value: o.value,
keyword: o.keyword,
height: o.height
height: o.height,
});
var icon = BI.isPlainObject(o.icon) ? o.icon : {
const icon = isPlainObject(o.icon)
? o.icon
: {
type: "bi.icon",
width: o.iconWidth,
height: o.iconHeight,
}
};
this.icon = BI.createWidget({
this.icon = createWidget({
type: "bi.center_adapt",
width: 36,
height: o.height,
items: [{
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)
}))));
createWidget(
extend(
{
element: this,
},
LogicFactory.createLogic(
LogicFactory.createLogicTypeByDirection(Direction.Left),
extend(o.logic, {
items: LogicFactory.createLogicItemsByDirection(
Direction.Left,
this.icon,
this.text
),
})
)
)
);
}
setValue: function () {
setValue() {
if (!this.isReadOnly()) {
this.text.setValue.apply(this.text, arguments);
this.text.setValue(...arguments);
}
}
},
getValue: function () {
getValue() {
return this.text.getValue();
},
}
setText: function () {
this.text.setText.apply(this.text, arguments);
},
setText() {
this.text.setText(...arguments);
}
getText: function () {
getText() {
return this.text.getText();
},
}
doClick: function () {
BI.DownListItem.superclass.doClick.apply(this, arguments);
doClick() {
super.doClick(...arguments);
if (this.isValid()) {
this.fireEvent(BI.DownListItem.EVENT_CHANGE, this.getValue(), this);
this.fireEvent(DownListItem.EVENT_CHANGE, this.getValue(), this);
}
}
},
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},
doRedMark() {
this.text.doRedMark(...arguments);
}
unRedMark: function () {
this.text.unRedMark.apply(this.text, arguments);
},
unRedMark() {
this.text.unRedMark(...arguments);
}
doHighLight: function () {
this.text.doHighLight.apply(this.text, arguments);
},
doHighLight() {
this.text.doHighLight(...arguments);
}
unHighLight: function () {
this.text.unHighLight.apply(this.text, arguments);
unHighLight() {
this.text.unHighLight(...arguments);
}
}
});
BI.DownListItem.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.down_list_item", BI.DownListItem);

143
src/widget/downlist/item.downlistgroup.js

@ -1,21 +1,41 @@
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",
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
dynamic: false,
},
// invalid: true,
iconCls1: "dot-e-font",
icon: "",
iconCls2: "pull-right-e-font"
iconCls2: "pull-right-e-font",
});
},
render: function () {
var o = this.options;
var self = this;
this.text = BI.createWidget({
}
render() {
const o = this.options;
this.text = createWidget({
type: "bi.label",
cls: "list-group-item-text",
textAlign: "left",
@ -24,15 +44,15 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
height: o.height,
});
if (BI.isPlainObject(o.icon)) {
this.icon1 = BI.createWidget({
if (isPlainObject(o.icon)) {
this.icon1 = createWidget({
width: 36,
height: o.height,
type: "bi.center_adapt",
items: [o.icon],
});
} else {
this.icon1 = BI.createWidget({
this.icon1 = createWidget({
type: "bi.icon_button",
cls: o.iconCls1,
width: 36,
@ -44,75 +64,78 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
});
}
this.icon2 = BI.createWidget({
this.icon2 = createWidget({
type: "bi.icon_button",
cls: o.iconCls2,
width: 24,
forceNotSelected: true
forceNotSelected: true,
});
this.element.hover(function () {
if (self.isEnabled()) {
self.hover();
this.element.hover(
() => {
if (this.isEnabled()) {
this.hover();
}
}, function () {
if (self.isEnabled()) {
self.dishover();
},
() => {
if (this.isEnabled()) {
this.dishover();
}
});
}
);
return {
type: "bi.horizontal_fill",
columnSize: [36, "fill", 24],
items: [this.icon1, this.text, this.icon2]
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;
},
_getLevel() {
const child = first(this.options.childValues);
_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));
});
},
return isNotNull(child) ? (`${child}`).split(BlankSplitChar).length : 0;
}
hover: function () {
BI.DownListGroupItem.superclass.hover.apply(this, arguments);
_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: function () {
BI.DownListGroupItem.superclass.dishover.apply(this, arguments);
dishover() {
super.dishover(...arguments);
this.icon1.element.removeClass("hover");
this.icon2.element.removeClass("hover");
},
}
doClick: function () {
BI.DownListGroupItem.superclass.doClick.apply(this, arguments);
doClick() {
super.doClick(...arguments);
if (this.isValid()) {
this.fireEvent(BI.DownListGroupItem.EVENT_CHANGE, this.getValue());
this.fireEvent(DownListGroupItem.EVENT_CHANGE, this.getValue());
}
}
},
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},
doRedMark() {
this.text.doRedMark(...arguments);
}
unRedMark: function () {
this.text.unRedMark.apply(this.text, arguments);
},
unRedMark() {
this.text.unRedMark(...arguments);
}
setValue: function (v) {
setValue(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);
}
}

319
src/widget/downlist/popup.downlist.js

@ -1,94 +1,122 @@
/**
* Created by roy on 15/9/8.
* 处理popup中的item分组样式
* 一个item分组中的成员大于一时该分组设置为单选并且默认状态第一个成员设置为已选择项
*/
BI.DownListPopup = BI.inherit(BI.Pane, {
constants: {
import {
shortcut,
extend,
createWidget,
createItems,
isNotNull,
contains,
each,
isEmpty,
map,
isNotEmptyString,
isNotEmptyArray,
some,
deepClone
} from "@/core";
import { Pane, ButtonTree } from "@/base";
@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
},
_defaultConfig: function () {
var conf = BI.DownListPopup.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
border: 1,
};
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: BI.Selection.Multi
chooseType: Selection.Multi,
});
},
_init: function () {
BI.DownListPopup.superclass._init.apply(this, arguments);
}
_init() {
super._init(...arguments);
this.singleValues = [];
this.childValueMap = {};
this.fatherValueMap = {};
this.items = [];
var self = this, o = this.options, children = this._createPopupItems(o.items);
this.popup = BI.createWidget({
const o = this.options,
children = this._createPopupItems(o.items);
this.popup = createWidget({
type: "bi.button_tree",
items: BI.createItems(children,
{}, {
adjustLength: -2
items: createItems(
children,
{},
{
adjustLength: -2,
}
),
layouts: [{
layouts: [
{
type: "bi.vertical",
hgap: this.constants.hgap,
vgap: this.constants.vgap
}],
vgap: this.constants.vgap,
}
],
value: this._digest(o.value),
chooseType: o.chooseType
chooseType: o.chooseType,
});
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]);
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 {
self.fireEvent(BI.DownListPopup.EVENT_CHANGE, changedValue, object);
this.fireEvent(DownListPopup.EVENT_CHANGE, changedValue, object);
}
if (!BI.contains(self.singleValues, changedValue)) {
var item = self.getValue();
var result = [];
BI.each(item, function (i, valueObject) {
if (valueObject.value != changedValue) {
if (!contains(this.singleValues, changedValue)) {
const item = this.getValue();
const result = [];
each(item, (i, valueObject) => {
if (valueObject.value !== changedValue) {
result.push(valueObject);
}
});
self.setValue(result);
this.setValue(result);
}
});
BI.createWidget({
createWidget({
type: "bi.vertical",
element: this,
items: [this.popup],
vgap: 5
vgap: 5,
});
}
},
_createPopupItems: function (items) {
var self = this, result = [];
_createPopupItems(items) {
const result = [];
// 不能修改populate进来的item的引用
BI.each(items, function (i, it) {
var item_done = {
each(items, (i, it) => {
const item_done = {
type: "bi.down_list_group",
items: []
items: [],
};
var storeItem = [];
const storeItem = [];
BI.each(it, function (i, sourceItem) {
var item = BI.extend({}, sourceItem);
if (BI.isNotEmptyArray(sourceItem.children) && !BI.isEmpty(sourceItem.el)) {
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来避免这个问题
@ -100,130 +128,134 @@ BI.DownListPopup = BI.inherit(BI.Pane, {
item.el.title = sourceItem.el.title || sourceItem.el.text;
item.el.type = "bi.down_list_group_item";
item.el.logic = {
dynamic: true
dynamic: true,
};
item.el.height = sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
item.el.iconCls2 = self.constants.nextIcon;
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"
}]
layouts: [
{
type: "bi.vertical",
}
],
},
innerVgap: 5,
maxHeight: 378
maxHeight: 378,
};
self._createChildren(item, sourceItem);
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
dynamic: true,
};
}
var el_done = {};
const 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);
if (this._isGroup(item_done.items)) {
each(item_done.items, (i, item) => {
this.singleValues.push(item.el.value);
});
}
result.push(item_done);
self.items.push(storeItem);
if (self._needSpliter(i, items.length)) {
var spliter_container = BI.createWidget({
this.items.push(storeItem);
if (this._needSpliter(i, items.length)) {
const spliter_container = createWidget({
type: "bi.vertical",
items: [{
items: [
{
el: {
type: "bi.layout",
cls: "bi-down-list-spliter bi-split-top cursor-pointer",
height: 0
height: 0,
},
}
}],
],
cls: "bi-down-list-spliter-container cursor-pointer",
vgap: 5,
hgap: 12
hgap: 12,
});
result.push(spliter_container);
}
});
return result;
},
}
_createChildren: function (targetItem, sourceItem) {
var self = this;
_createChildren(targetItem, sourceItem) {
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);
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
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);
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);
});
},
}
_isGroup: function (i) {
_isGroup(i) {
return i.length > 1;
},
}
_needSpliter: function (i, itemLength) {
_needSpliter(i, itemLength) {
return i < itemLength - 1;
},
}
_createChildValue: function (fatherValue, childValue) {
_createChildValue(fatherValue, childValue) {
return fatherValue + BI.BlankSplitChar + childValue;
},
}
_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);
_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;
},
}
_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)) {
_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 {
@ -233,69 +265,68 @@ BI.DownListPopup = BI.inherit(BI.Pane, {
}
});
});
return value;
function joinValue(sources, targets) {
var value = "";
BI.some(sources, function (idx, s) {
return BI.some(targets, function (id, t) {
let value = "";
some(sources, (idx, s) => some(targets, (id, t) => {
if (s === t) {
value = s;
return true;
}
});
});
}));
return value;
}
},
}
populate: function (items) {
BI.DownListPopup.superclass.populate.apply(this, arguments);
populate(items) {
super.populate(...arguments);
this.items = [];
this.childValueMap = {};
this.fatherValueMap = {};
this.singleValues = [];
var children = this._createPopupItems(items);
var popupItem = BI.createItems(children,
{}, {
adjustLength: -2
const children = this._createPopupItems(items);
const popupItem = createItems(
children,
{},
{
adjustLength: -2,
}
);
this.popup.populate(popupItem);
},
}
setValue: function (valueItem) {
setValue(valueItem) {
this.popup.setValue(this._digest(valueItem));
},
}
_getValue: function () {
var v = [];
BI.each(this.popup.getAllButtons(), function (i, item) {
_getValue() {
const v = [];
each(this.popup.getAllButtons(), (i, item) => {
i % 2 === 0 && v.push(item.getValue());
});
return v;
},
}
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];
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;
}
});
BI.DownListPopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.DownListPopup.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
BI.shortcut("bi.down_list_popup", BI.DownListPopup);
}

16
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,15 +50,13 @@ 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,

2
src/widget/intervalslider/index.js

@ -0,0 +1,2 @@
export { AccurateCalculationModel } from "./model.accuratecalculation";
export { IntervalSlider } from "./intervalslider";

618
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);
}
width: toPix(c.EDITOR_WIDTH, 2),
height: toPix(c.EDITOR_HEIGHT, 2),
validationChecker: v => this._checkValidation(v),
});
this.labelTwo.element.hover(function () {
self.labelTwo.element.removeClass("bi-border").addClass("bi-border");
}, function () {
self.labelTwo.element.removeClass("bi-border");
});
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,64 +169,82 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
horizontalAlign: "stretch",
verticalAlign: "middle",
columnSize: ["fill"],
items: [{
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;
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);
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);
},
_rePosBySizeAfterStop(size, isLeft) {
const percent = (size * 100) / this._getGrayTrackLength();
const significantPercent = 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) {
_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");
self._rePosBySizeAfterMove(size, isLeft);
this._rePosBySizeAfterMove(size, isLeft);
}
}, function () {
}),
(() => {
if (startDrag === true) {
size = optimizeSize(size);
self._rePosBySizeAfterStop(size, isLeft);
this._rePosBySizeAfterStop(size, isLeft);
size = 0;
offset = 0;
defaultSize = size;
@ -200,8 +252,10 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
}
widget.element.removeClass("dragging");
mouseMoveTracker.releaseMouseMoves();
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
}, window);
this.fireEvent(IntervalSlider.EVENT_CHANGE);
}),
window
);
widget.element.on("mousedown", function (event) {
if (!widget.isEnabled()) {
return;
@ -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: [{
type: VerticalLayout.xtype,
items: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: this.labelOne,
top: 0,
left: 0,
}]
}, {
type: "bi.absolute",
items: [{
}
],
},
{
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: [{
items: [
{
el: this.grayTrack,
top: 0,
left: 0,
bottom: 0,
width: "100%"
}, {
width: "100%",
},
{
el: this.blueTrack,
top: 0,
left: 0,
bottom: 0,
width: "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)) {
let dotText = (`${v}`).split(".")[1];
// eslint-disable-next-line no-empty
if (isEmptyString(dotText)) {
} else {
if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) {
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 {
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) {
if (labelTwoLeft - labelOneLeft < 90) {
this.labelTwo.element.css({ top: 40 });
} else {
this.labelTwo.element.css({ top: 0 });
}
} else {
if ((labelOneLeft - labelTwoLeft) < 90) {
if (labelOneLeft - labelTwoLeft < 90) {
this.labelTwo.element.css({ top: 40 });
} else {
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) {
_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);
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) {
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 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 = [];
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;
},
return arr.length > 1 ? arr[1].length : 0;
}
_assertValue: function (value) {
_assertValue(value) {
if (value <= this.min) {
return this.min;
}
if (value >= this.max) {
return this.max;
}
return value;
},
}
_setEnable: function (b) {
BI.IntervalSlider.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() {
if (this.valueOne <= 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);
}

263
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);
},
_formatDecimal: function (stringNumber1, stringNumber2) {
return parseInt(magnitude);
}
_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);
}
var result = integerResult + "." + decimalResult;
return BI.parseFloat(result);
const borrow = this._getMagnitude(decimalMaxLength);
decimalResultTemp = (
borrow +
parseInt(stringNumber1.numDecimal) -
parseInt(stringNumber2.numDecimal)
).toString();
decimalResult = addZero(decimalResultTemp, decimalMaxLength);
}
const result = `${integerResult}.${decimalResult}`;
return parseFloat(result);
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;
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++; // 进一
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;
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;
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);
}
});
}

239
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: [{
items: [
{
el: this.text,
left: 0,
right: 0,
top: 0,
bottom: 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();
},
this._checkText();
}
_checkText: function () {
var o = this.options;
BI.nextTick(BI.bind(function () {
_checkText() {
const o = this.options;
nextTick(
bind(() => {
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;
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));
},
}, this)
);
}
_showInput: function () {
_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);
}

28
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);
}

5
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";

424
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,
},
};
static EVENT_CHANGE = "EVENT_CHANGE";
beforeMount: function () {
beforeMount() {
const { value, min, max } = this.options;
this.setMinAndMax({
min,
@ -30,164 +53,192 @@ 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: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: this.slider,
top: 8,
}
],
height: c.SLIDER_HEIGHT
}],
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);
}
});
this.label.element.hover(function () {
self.label.element.removeClass("bi-border").addClass("bi-border");
}, function () {
self.label.element.removeClass("bi-border");
validationChecker: v => this._checkValidation(v),
});
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: [{
type: AbsoluteLayout.xtype,
items: [
{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
type: VerticalLayout.xtype,
items: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: this.track,
width: "100%",
height: c.TRACK_HEIGHT
}]
}],
height: c.TRACK_HEIGHT,
}
],
}
],
hgap: c.TRACK_GAP_HALF,
height: c.TRACK_HEIGHT
height: c.TRACK_HEIGHT,
},
top: 23,
left: 0,
width: "100%"
}, {
width: "100%",
},
{
el: sliderVertical,
top: 20,
left: 0,
width: "100%"
}, {
width: "100%",
},
{
el: {
type: "bi.vertical",
items: [{
type: "bi.horizontal_auto",
items: [this.label]
}],
type: VerticalLayout.xtype,
items: [
{
type: HorizontalAutoLayout.xtype,
items: [this.label],
}
],
// height: c.EDITOR_HEIGHT
},
top: 0,
left: 0,
width: "100%"
}]
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) {
_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");
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);
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);
self.label.setValue(v);
self.value = v;
this.label.setValue(v);
this.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);
const percent = (size * 100) / this._getGrayTrackLength();
const significantPercent = parseFloat(percent.toFixed(1));
this._setSliderPosition(significantPercent);
size = 0;
offset = 0;
defaultSize = size;
@ -195,8 +246,10 @@ BI.SingleSlider = BI.inherit(BI.Single, {
}
widget.element.removeClass("dragging");
mouseMoveTracker.releaseMouseMoves();
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
}, window);
this.fireEvent(SingleSlider.EVENT_CHANGE);
}),
window
);
widget.element.on("mousedown", function (event) {
if (!widget.isEnabled()) {
return;
@ -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: [{
_createTrackWrapper() {
return createWidget({
type: AbsoluteLayout.xtype,
items: [
{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
type: VerticalLayout.xtype,
items: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: this.grayTrack,
top: 0,
left: 0,
width: "100%"
}, {
width: "100%",
},
{
el: this.blueTrack,
top: 0,
left: 0,
width: "0%"
}]
}],
width: "0%",
}
],
}
],
hgap: 8,
height: 8
height: 8,
},
top: 8,
left: 0,
width: "100%"
}]
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)) {
_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);
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);
_getPercentByValue: function (v) {
return (v - this.min) * 100 / (this.max - this.min);
},
return ((this.max - this.min) * thousandth) / 1000 + 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]);
_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");
}
}
},
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);
}

372
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,
},
};
static EVENT_CHANGE = "EVENT_CHANGE";
beforeMount: function () {
beforeMount() {
const { value, min, max } = this.options;
this.setMinAndMax({
min,
@ -31,143 +50,168 @@ 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: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: this.slider,
top: 8,
}
],
height: c.SLIDER_HEIGHT
}],
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: [{
return {
type: AbsoluteLayout.xtype,
items: [
{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
type: VerticalLayout.xtype,
items: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: this.track,
width: "100%",
height: c.TRACK_HEIGHT
}]
}],
height: c.TRACK_HEIGHT,
}
],
}
],
hgap: c.TRACK_GAP_HALF,
height: c.TRACK_HEIGHT
height: c.TRACK_HEIGHT,
},
top: 13,
left: 0,
width: "100%"
}, {
width: "100%",
},
{
el: sliderVertical,
top: 10,
left: 0,
width: "100%"
}, {
width: "100%",
},
{
el: {
type: "bi.vertical",
items: [{
type: "bi.horizontal_auto",
items: [this.label]
}],
height: c.EDITOR_HEIGHT
type: VerticalLayout.xtype,
items: [
{
type: HorizontalAutoLayout.xtype,
items: [this.label],
}
],
height: c.EDITOR_HEIGHT,
},
top: 0,
left: 0,
width: "100%"
}]
});
},
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) {
_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");
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);
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);
self.label.setValue(v + o.unit);
self.value = v;
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
this.label.setValue(v + o.unit);
this.value = v;
this.fireEvent(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);
const percent = (size * 100) / this._getGrayTrackLength();
const significantPercent = parseFloat(percent.toFixed(1));
this._setSliderPosition(significantPercent);
size = 0;
offset = 0;
defaultSize = size;
@ -175,8 +219,10 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
}
widget.element.removeClass("dragging");
mouseMoveTracker.releaseMouseMoves();
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
}, window);
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: [{
_createTrackWrapper() {
return createWidget({
type: AbsoluteLayout.xtype,
items: [
{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
type: VerticalLayout.xtype,
items: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: this.grayTrack,
top: 0,
left: 0,
width: "100%"
}, {
width: "100%",
},
{
el: this.blueTrack,
top: 0,
left: 0,
width: "0%"
}]
}],
width: "0%",
}
],
}
],
hgap: 8,
height: 8
height: 8,
},
top: 8,
left: 0,
width: "100%"
}]
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);
_getPercentByValue: function (v) {
return (v - this.min) * 100 / (this.max - this.min);
},
return ((this.max - this.min) * thousandth) / 1000 + this.min;
}
_setEnable: function (b) {
BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]);
_getPercentByValue(v) {
return ((v - this.min) * 100) / (this.max - this.min);
}
_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);
}

338
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,111 +45,130 @@ 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: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: this.slider,
top: 8,
}
],
height: c.SLIDER_HEIGHT
}],
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: [{
items: [
{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
type: VerticalLayout.xtype,
items: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: track,
width: "100%",
height: c.TRACK_HEIGHT
}]
}],
height: c.TRACK_HEIGHT,
}
],
}
],
hgap: c.TRACK_GAP_HALF,
height: c.TRACK_HEIGHT
height: c.TRACK_HEIGHT,
},
top: 3,
left: 0,
width: "100%"
}, {
width: "100%",
},
{
el: sliderVertical,
top: 0,
left: 0,
width: "100%"
}]
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) {
_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");
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);
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);
self.value = v;
self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
this.value = v;
this.fireEvent(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);
const percent = (size * 100) / this._getGrayTrackLength();
const significantPercent = parseFloat(percent.toFixed(1));
this._setSliderPosition(significantPercent);
size = 0;
offset = 0;
defaultSize = size;
@ -142,8 +176,10 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
}
widget.element.removeClass("dragging");
mouseMoveTracker.releaseMouseMoves();
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
}, window);
this.fireEvent(SingleSlider.EVENT_CHANGE);
}),
window
);
widget.element.on("mousedown", function (event) {
if (!widget.isEnabled()) {
return;
@ -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: [{
type: AbsoluteLayout.xtype,
items: [
{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
type: VerticalLayout.xtype,
items: [
{
type: AbsoluteLayout.xtype,
items: [
{
el: this.grayTrack,
top: 0,
left: 0,
width: "100%"
}, {
width: "100%",
},
{
el: this.blueTrack,
top: 0,
left: 0,
width: "0%"
}]
}],
width: "0%",
}
],
}
],
hgap: 8,
height: 8
height: 8,
},
top: 8,
left: 0,
width: "100%"
}],
ref: function (ref) {
self.track = ref;
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);
_getPercentByValue: function (v) {
return (v - this.min) * 100 / (this.max - this.min);
},
return ((this.max - this.min) * thousandth) / 1000 + this.min;
}
_setEnable: function (b) {
BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]);
_getPercentByValue(v) {
return ((v - this.min) * 100) / (this.max - this.min);
}
_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 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);
}

Loading…
Cancel
Save