Browse Source

Pull request #3388: KERNEL-14083 refactor: widget/downlist、singleslider、intervalslider es6化

Merge in VISUAL/fineui from ~JOKER.WANG/fineui:es6 to es6

* commit 'f87bab8068dd4271cad76b57d4d8f777436cd510':
  KERNEL-14083 refactor: widget/downlist、singleslider、intervalslider es6化
es6
Joker.Wang-王顺 2 years ago
parent
commit
761f945c81
  1. 4
      src/case/calendar/calendar.js
  2. 4
      src/case/layer/panel.js
  3. 10
      src/case/list/list.select.js
  4. 1
      src/core/wrapper/layout/flex/flex.vertical.js
  5. 136
      src/widget/downlist/combo.downlist.js
  6. 77
      src/widget/downlist/group.downlist.js
  7. 5
      src/widget/downlist/index.js
  8. 125
      src/widget/downlist/item.downlist.js
  9. 143
      src/widget/downlist/item.downlistgroup.js
  10. 319
      src/widget/downlist/popup.downlist.js
  11. 9
      src/widget/index.js
  12. 2
      src/widget/intervalslider/index.js
  13. 618
      src/widget/intervalslider/intervalslider.js
  14. 263
      src/widget/intervalslider/model.accuratecalculation.js
  15. 239
      src/widget/singleslider/button/editor.sign.text.js
  16. 28
      src/widget/singleslider/button/iconbutton.slider.js
  17. 5
      src/widget/singleslider/index.js
  18. 424
      src/widget/singleslider/singleslider.js
  19. 372
      src/widget/singleslider/singleslider.label.js
  20. 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, rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8,
}))], }))],
}); });
this.days.on(Controller.EVENT_CHANGE, () => { this.days.on(Controller.EVENT_CHANGE, (...args) => {
this.fireEvent(Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
createWidget(extend({ createWidget(extend({
element: this, element: this,

4
src/case/layer/panel.js

@ -50,8 +50,8 @@ export class Panel extends Widget {
}], }],
}); });
this.button_group.on(Controller.EVENT_CHANGE, () => { this.button_group.on(Controller.EVENT_CHANGE, (...args) => {
this.fireEvent(Controller.EVENT_CHANGE, ...arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.button_group.on(ButtonGroup.EVENT_CHANGE, (value, obj) => { 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.toolbar = createWidget(o.toolbar);
this.allSelected = false; 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(); this.allSelected = this.toolbar.isSelected();
if (type === Events.CLICK) { if (type === Events.CLICK) {
this.setAllSelected(this.allSelected); this.setAllSelected(this.allSelected);
this.fireEvent(SelectList.EVENT_CHANGE, value, obj); this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
} }
this.fireEvent(Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.list = createWidget(o.el, { this.list = createWidget(o.el, {
@ -84,12 +85,13 @@ export class SelectList extends Widget {
hasNext: o.hasNext, 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) { if (type === Events.CLICK) {
this._checkAllSelected(); this._checkAllSelected();
this.fireEvent(SelectList.EVENT_CHANGE, value, obj); this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
} }
this.fireEvent(Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
createWidget(extend({ createWidget(extend({

1
src/core/wrapper/layout/flex/flex.vertical.js

@ -12,7 +12,6 @@ import { Layout } from "../../layout";
@shortcut() @shortcut()
export class FlexVerticalLayout extends Layout { export class FlexVerticalLayout extends Layout {
static xtype = "bi.flex_vertical"; static xtype = "bi.flex_vertical";
props() { props() {
return extend(super.props(...arguments), { return extend(super.props(...arguments), {
baseCls: "bi-f-v", 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) { function transformItems(items) {
if (!items) return items; if (!items) return items;
var result = BI.cloneDeep(items); let result = cloneDeep(items);
var isComplexItmes = BI.some(items, function (_, item) { const isComplexItmes = some(items, (_, item) => isArray(item));
return BI.isArray(item);
});
// 传一维数组,帮转二维 // 传一维数组,帮转二维
if (!isComplexItmes) { if (!isComplexItmes) {
result = [result]; result = [result];
} }
// 帮转 el // 帮转 el
BI.each(result, function (_, arr) { each(result, (_, arr) => {
BI.each(arr, function (_, item) { each(arr, (_, item) => {
if (item.children && !item.el) { if (item.children && !item.el) {
item.el = { item.el = {
text: item.text, text: item.text,
icon: item.icon, icon: item.icon,
cls: item.cls, cls: item.cls,
iconCls1: item.iconCls1, iconCls1: item.iconCls1,
value: item.value value: item.value,
}; };
} }
}); });
}); });
return result; return result;
} }
/** @shortcut()
* Created by roy on 15/8/14. export class DownListCombo extends Widget {
*/ static xtype = "bi.down_list_combo";
BI.DownListCombo = BI.inherit(BI.Widget, {
_defaultConfig: function () { static EVENT_CHANGE = "EVENT_CHANGE";
return BI.extend(BI.DownListCombo.superclass._defaultConfig.apply(this, arguments), { 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", baseCls: "bi-down-list-combo",
height: 24, height: 24,
items: [], items: [],
@ -47,15 +55,15 @@
destroyWhenHide: false, destroyWhenHide: false,
isDefaultInit: true, isDefaultInit: true,
}); });
}, }
_init: function () { _init() {
BI.DownListCombo.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this.downlistcombo = BI.createWidget({ this.downlistcombo = createWidget({
element: this, element: this,
type: "bi.combo", type: Combo.xtype,
trigger: o.trigger, trigger: o.trigger,
isNeedAdjustWidth: false, isNeedAdjustWidth: false,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
@ -66,78 +74,82 @@
stopPropagation: o.stopPropagation, stopPropagation: o.stopPropagation,
destroyWhenHide: o.destroyWhenHide, destroyWhenHide: o.destroyWhenHide,
el: { el: {
type: "bi.icon_trigger", type: IconTrigger.xtype,
extraCls: o.iconCls, extraCls: o.iconCls,
width: o.width, width: o.width,
height: o.height, height: o.height,
...o.el ...o.el,
}, },
popup: { popup: {
el: { el: {
type: "bi.down_list_popup", type: DownListPopup.xtype,
ref: function (ref) { ref: _ref => {
self.popupView = ref; this.popupView = _ref;
}, },
items: transformItems(o.items), items: transformItems(o.items),
chooseType: o.chooseType, chooseType: o.chooseType,
value: o.value, value: o.value,
listeners: [{ listeners: [
eventName: BI.DownListPopup.EVENT_CHANGE, {
action: function (value) { eventName: DownListPopup.EVENT_CHANGE,
self.fireEvent(BI.DownListCombo.EVENT_CHANGE, value); action: value => {
self.downlistcombo.hideView(); this.fireEvent(
} DownListCombo.EVENT_CHANGE,
}, { value
eventName: BI.DownListPopup.EVENT_SON_VALUE_CHANGE, );
action: function (value, fatherValue) { this.downlistcombo.hideView();
self.fireEvent(BI.DownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue); },
self.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, stopPropagation: o.stopPropagation,
maxHeight: o.maxHeight, maxHeight: o.maxHeight,
minWidth: o.minWidth, minWidth: o.minWidth,
...o.popup ...o.popup,
} },
}); });
this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
self.fireEvent(BI.DownListCombo.EVENT_BEFORE_POPUPVIEW); this.fireEvent(DownListCombo.EVENT_BEFORE_POPUPVIEW);
}); });
}, }
hideView: function () { hideView() {
this.downlistcombo.hideView(); this.downlistcombo.hideView();
}, }
showView: function (e) { showView(e) {
this.downlistcombo.showView(e); this.downlistcombo.showView(e);
}, }
populate: function (items) { populate(items) {
this.popupView.populate(items); this.popupView.populate(items);
}, }
setValue: function (v) { setValue(v) {
this.popupView.setValue(v); this.popupView.setValue(v);
}, }
getValue: function () { getValue() {
return this.popupView.getValue(); return this.popupView.getValue();
}, }
adjustWidth: function () { adjustWidth() {
this.downlistcombo.adjustWidth(); this.downlistcombo.adjustWidth();
}, }
adjustHeight: function () { adjustHeight() {
this.downlistcombo.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 @@
/** import {
* Created by roy on 15/9/6. shortcut,
*/ Widget,
BI.DownListGroup = BI.inherit(BI.Widget, { extend,
constants: { createWidget,
iconCls: "check-mark-ha-font" Controller,
}, Events
_defaultConfig: function () { } from "@/core";
return BI.extend(BI.DownListGroup.superclass._defaultConfig.apply(this, arguments), {
@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", baseCls: "bi-down-list-group",
items: [ items: [
{ {
el: {} el: {},
} }
] ],
}); });
}, }
_init: function () {
BI.DownListGroup.superclass._init.apply(this, arguments); _init() {
var o = this.options, self = this; super._init(...arguments);
const o = this.options;
this.downlistgroup = BI.createWidget({ this.downlistgroup = createWidget({
element: this, element: this,
type: "bi.button_tree", type: "bi.button_tree",
items: o.items, items: o.items,
chooseType: 0, // 0单选,1多选 chooseType: 0, // 0单选,1多选
layouts: [{ layouts: [
{
type: "bi.vertical", type: "bi.vertical",
hgap: 0, hgap: 0,
vgap: 0 vgap: 0,
}], }
value: o.value ],
value: o.value,
}); });
this.downlistgroup.on(BI.Controller.EVENT_CHANGE, function (type) { this.downlistgroup.on(Controller.EVENT_CHANGE, (type, ...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, type, ...args);
if(type === BI.Events.CLICK) { if (type === Events.CLICK) {
self.fireEvent(BI.DownListGroup.EVENT_CHANGE, arguments); 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();
}
}); setValue(v) {
BI.DownListGroup.EVENT_CHANGE = "EVENT_CHANGE"; this.downlistgroup.setValue(v);
BI.shortcut("bi.down_list_group", BI.DownListGroup); }
}

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, { import { shortcut, extend, createWidget, isPlainObject, LogicFactory, Direction } from "@/core";
_defaultConfig: function () { import { BasicButton } from "@/base";
var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, { @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", baseCls: "bi-down-list-item bi-list-item-active",
cls: "", cls: "",
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
logic: { logic: {
dynamic: true dynamic: true,
}, },
selected: false, selected: false,
iconHeight: null, iconHeight: null,
@ -14,13 +23,14 @@ BI.DownListItem = BI.inherit(BI.BasicButton, {
textHgap: 0, textHgap: 0,
textVgap: 0, textVgap: 0,
textLgap: 0, textLgap: 0,
textRgap: 0 textRgap: 0,
}); });
}, }
_init: function () {
BI.DownListItem.superclass._init.apply(this, arguments); _init() {
var self = this, o = this.options; super._init(...arguments);
this.text = BI.createWidget({ const o = this.options;
this.text = createWidget({
type: "bi.label", type: "bi.label",
cls: "list-item-text", cls: "list-item-text",
textAlign: "left", textAlign: "left",
@ -31,72 +41,85 @@ BI.DownListItem = BI.inherit(BI.BasicButton, {
text: o.text, text: o.text,
value: o.value, value: o.value,
keyword: o.keyword, keyword: o.keyword,
height: o.height height: o.height,
}); });
const icon = isPlainObject(o.icon)
var icon = BI.isPlainObject(o.icon) ? o.icon : { ? o.icon
: {
type: "bi.icon", type: "bi.icon",
width: o.iconWidth, width: o.iconWidth,
height: o.iconHeight, height: o.iconHeight,
} };
this.icon = BI.createWidget({ this.icon = createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
width: 36, width: 36,
height: o.height, height: o.height,
items: [{ items: [
{
el: icon, el: icon,
}], }
],
}); });
BI.createWidget(BI.extend({ createWidget(
element: this extend(
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left), BI.extend(o.logic, { {
items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, this.icon, this.text) 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()) { if (!this.isReadOnly()) {
this.text.setValue.apply(this.text, arguments); this.text.setValue(...arguments);
}
} }
},
getValue: function () { getValue() {
return this.text.getValue(); return this.text.getValue();
}, }
setText: function () { setText() {
this.text.setText.apply(this.text, arguments); this.text.setText(...arguments);
}, }
getText: function () { getText() {
return this.text.getText(); return this.text.getText();
}, }
doClick: function () { doClick() {
BI.DownListItem.superclass.doClick.apply(this, arguments); super.doClick(...arguments);
if (this.isValid()) { if (this.isValid()) {
this.fireEvent(BI.DownListItem.EVENT_CHANGE, this.getValue(), this); this.fireEvent(DownListItem.EVENT_CHANGE, this.getValue(), this);
}
} }
},
doRedMark: function () { doRedMark() {
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark(...arguments);
}, }
doHighLight: function () { doHighLight() {
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight(...arguments);
}, }
unHighLight: function () { unHighLight() {
this.text.unHighLight.apply(this.text, arguments); 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, { import {
_defaultConfig: function () { shortcut,
var conf = BI.DownListGroupItem.superclass._defaultConfig.apply(this, arguments); extend,
return BI.extend(conf, { createWidget,
baseCls: (conf.baseCls || "") + " bi-down-list-group-item", 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: { logic: {
dynamic: false dynamic: false,
}, },
// invalid: true, // invalid: true,
iconCls1: "dot-e-font", iconCls1: "dot-e-font",
icon: "", icon: "",
iconCls2: "pull-right-e-font" iconCls2: "pull-right-e-font",
}); });
}, }
render: function () {
var o = this.options; render() {
var self = this; const o = this.options;
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.label", type: "bi.label",
cls: "list-group-item-text", cls: "list-group-item-text",
textAlign: "left", textAlign: "left",
@ -24,15 +44,15 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
height: o.height, height: o.height,
}); });
if (BI.isPlainObject(o.icon)) { if (isPlainObject(o.icon)) {
this.icon1 = BI.createWidget({ this.icon1 = createWidget({
width: 36, width: 36,
height: o.height, height: o.height,
type: "bi.center_adapt", type: "bi.center_adapt",
items: [o.icon], items: [o.icon],
}); });
} else { } else {
this.icon1 = BI.createWidget({ this.icon1 = createWidget({
type: "bi.icon_button", type: "bi.icon_button",
cls: o.iconCls1, cls: o.iconCls1,
width: 36, width: 36,
@ -44,75 +64,78 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
}); });
} }
this.icon2 = BI.createWidget({ this.icon2 = createWidget({
type: "bi.icon_button", type: "bi.icon_button",
cls: o.iconCls2, cls: o.iconCls2,
width: 24, width: 24,
forceNotSelected: true forceNotSelected: true,
}); });
this.element.hover(function () { this.element.hover(
if (self.isEnabled()) { () => {
self.hover(); if (this.isEnabled()) {
this.hover();
} }
}, function () { },
if (self.isEnabled()) { () => {
self.dishover(); if (this.isEnabled()) {
this.dishover();
} }
}); }
);
return { return {
type: "bi.horizontal_fill", type: "bi.horizontal_fill",
columnSize: [36, "fill", 24], columnSize: [36, "fill", 24],
items: [this.icon1, this.text, this.icon2] items: [this.icon1, this.text, this.icon2],
};
} }
},
_getLevel: function () { _getLevel() {
var child = BI.first(this.options.childValues); const child = first(this.options.childValues);
return BI.isNotNull(child) ? (child + "").split(BI.BlankSplitChar).length : 0;
},
_digest: function (v) { return isNotNull(child) ? (`${child}`).split(BlankSplitChar).length : 0;
var self = this, o = this.options; }
v = BI.isArray(v) ? v : [v];
var level = this._getLevel();
return BI.any(v, function (idx, value) {
return BI.contains(o.childValues, (value + "").split(BI.BlankSplitChar).slice(0, level).join(BI.BlankSplitChar));
});
},
hover: function () { _digest(v) {
BI.DownListGroupItem.superclass.hover.apply(this, arguments); 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.icon1.element.addClass("hover");
this.icon2.element.addClass("hover"); this.icon2.element.addClass("hover");
}
}, dishover() {
super.dishover(...arguments);
dishover: function () {
BI.DownListGroupItem.superclass.dishover.apply(this, arguments);
this.icon1.element.removeClass("hover"); this.icon1.element.removeClass("hover");
this.icon2.element.removeClass("hover"); this.icon2.element.removeClass("hover");
}, }
doClick: function () { doClick() {
BI.DownListGroupItem.superclass.doClick.apply(this, arguments); super.doClick(...arguments);
if (this.isValid()) { if (this.isValid()) {
this.fireEvent(BI.DownListGroupItem.EVENT_CHANGE, this.getValue()); this.fireEvent(DownListGroupItem.EVENT_CHANGE, this.getValue());
}
} }
},
doRedMark: function () { doRedMark() {
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark(...arguments);
}, }
setValue: function (v) { setValue(v) {
this.icon1.setSelected && this.icon1.setSelected(this._digest(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 @@
/** import {
* Created by roy on 15/9/8. shortcut,
* 处理popup中的item分组样式 extend,
* 一个item分组中的成员大于一时该分组设置为单选并且默认状态第一个成员设置为已选择项 createWidget,
*/ createItems,
BI.DownListPopup = BI.inherit(BI.Pane, { isNotNull,
constants: { 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", nextIcon: "pull-right-e-font",
height: 24, height: 24,
iconHeight: 12, iconHeight: 12,
iconWidth: 12, iconWidth: 12,
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
border: 1 border: 1,
}, };
_defaultConfig: function () {
var conf = BI.DownListPopup.superclass._defaultConfig.apply(this, arguments); static EVENT_CHANGE = "EVENT_CHANGE";
return BI.extend(conf, { static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: "bi-down-list-popup", baseCls: "bi-down-list-popup",
items: [], items: [],
chooseType: BI.Selection.Multi chooseType: Selection.Multi,
}); });
}, }
_init: function () {
BI.DownListPopup.superclass._init.apply(this, arguments); _init() {
super._init(...arguments);
this.singleValues = []; this.singleValues = [];
this.childValueMap = {}; this.childValueMap = {};
this.fatherValueMap = {}; this.fatherValueMap = {};
this.items = []; this.items = [];
var self = this, o = this.options, children = this._createPopupItems(o.items); const o = this.options,
this.popup = BI.createWidget({ children = this._createPopupItems(o.items);
this.popup = createWidget({
type: "bi.button_tree", type: "bi.button_tree",
items: BI.createItems(children, items: createItems(
{}, { children,
adjustLength: -2 {},
{
adjustLength: -2,
} }
), ),
layouts: [{ layouts: [
{
type: "bi.vertical", type: "bi.vertical",
hgap: this.constants.hgap, hgap: this.constants.hgap,
vgap: this.constants.vgap vgap: this.constants.vgap,
}], }
],
value: this._digest(o.value), value: this._digest(o.value),
chooseType: o.chooseType chooseType: o.chooseType,
}); });
this.popup.on(BI.ButtonTree.EVENT_CHANGE, function (value, object) { this.popup.on(ButtonTree.EVENT_CHANGE, (value, object) => {
var changedValue = value; let changedValue = value;
if (BI.isNotNull(self.childValueMap[value])) { if (isNotNull(this.childValueMap[value])) {
changedValue = self.childValueMap[value]; changedValue = this.childValueMap[value];
self.fireEvent(BI.DownListPopup.EVENT_SON_VALUE_CHANGE, changedValue, self.fatherValueMap[value]); this.fireEvent(
DownListPopup.EVENT_SON_VALUE_CHANGE,
changedValue,
this.fatherValueMap[value]
);
} else { } else {
self.fireEvent(BI.DownListPopup.EVENT_CHANGE, changedValue, object); this.fireEvent(DownListPopup.EVENT_CHANGE, changedValue, object);
} }
if (!contains(this.singleValues, changedValue)) {
if (!BI.contains(self.singleValues, changedValue)) { const item = this.getValue();
var item = self.getValue(); const result = [];
var result = []; each(item, (i, valueObject) => {
BI.each(item, function (i, valueObject) { if (valueObject.value !== changedValue) {
if (valueObject.value != changedValue) {
result.push(valueObject); result.push(valueObject);
} }
}); });
self.setValue(result); this.setValue(result);
} }
}); });
BI.createWidget({ createWidget({
type: "bi.vertical", type: "bi.vertical",
element: this, element: this,
items: [this.popup], items: [this.popup],
vgap: 5 vgap: 5,
}); });
}
}, _createPopupItems(items) {
_createPopupItems: function (items) { const result = [];
var self = this, result = [];
// 不能修改populate进来的item的引用 // 不能修改populate进来的item的引用
BI.each(items, function (i, it) { each(items, (i, it) => {
var item_done = { const item_done = {
type: "bi.down_list_group", type: "bi.down_list_group",
items: [] items: [],
}; };
var storeItem = []; const storeItem = [];
BI.each(it, function (i, sourceItem) { each(it, (i, sourceItem) => {
var item = BI.extend({}, sourceItem); const item = extend({}, sourceItem);
if (BI.isNotEmptyArray(sourceItem.children) && !BI.isEmpty(sourceItem.el)) { if (isNotEmptyArray(sourceItem.children) && !isEmpty(sourceItem.el)) {
item.type = "bi.combo_group"; item.type = "bi.combo_group";
// popup未初始化返回的是options中的value, 在经过buttontree的getValue concat之后,无法区分值来自options // popup未初始化返回的是options中的value, 在经过buttontree的getValue concat之后,无法区分值来自options
// 还是item自身, 这边控制defaultInit为true来避免这个问题 // 还是item自身, 这边控制defaultInit为true来避免这个问题
@ -100,130 +128,134 @@ BI.DownListPopup = BI.inherit(BI.Pane, {
item.el.title = sourceItem.el.title || sourceItem.el.text; item.el.title = sourceItem.el.title || sourceItem.el.text;
item.el.type = "bi.down_list_group_item"; item.el.type = "bi.down_list_group_item";
item.el.logic = { item.el.logic = {
dynamic: true dynamic: true,
}; };
item.el.height = sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT; item.el.height =
item.el.iconCls2 = self.constants.nextIcon; sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
item.el.iconCls2 = this.constants.nextIcon;
item.popup = { item.popup = {
lgap: 1, lgap: 1,
el: { el: {
type: "bi.button_tree", type: "bi.button_tree",
chooseType: 0, chooseType: 0,
layouts: [{ layouts: [
type: "bi.vertical" {
}] type: "bi.vertical",
}
],
}, },
innerVgap: 5, innerVgap: 5,
maxHeight: 378 maxHeight: 378,
}; };
self._createChildren(item, sourceItem); this._createChildren(item, sourceItem);
} else { } else {
item.type = sourceItem.type || "bi.down_list_item"; item.type = sourceItem.type || "bi.down_list_item";
item.title = sourceItem.title || sourceItem.text; item.title = sourceItem.title || sourceItem.text;
item.textRgap = 10; item.textRgap = 10;
item.isNeedAdjustWidth = false; item.isNeedAdjustWidth = false;
item.logic = { item.logic = {
dynamic: true dynamic: true,
}; };
} }
var el_done = {}; const el_done = {};
el_done.el = item; el_done.el = item;
item_done.items.push(el_done); item_done.items.push(el_done);
storeItem.push(item); storeItem.push(item);
}); });
if (self._isGroup(item_done.items)) { if (this._isGroup(item_done.items)) {
BI.each(item_done.items, function (i, item) { each(item_done.items, (i, item) => {
self.singleValues.push(item.el.value); this.singleValues.push(item.el.value);
}); });
} }
result.push(item_done); result.push(item_done);
self.items.push(storeItem); this.items.push(storeItem);
if (self._needSpliter(i, items.length)) { if (this._needSpliter(i, items.length)) {
var spliter_container = BI.createWidget({ const spliter_container = createWidget({
type: "bi.vertical", type: "bi.vertical",
items: [{ items: [
{
el: { el: {
type: "bi.layout", type: "bi.layout",
cls: "bi-down-list-spliter bi-split-top cursor-pointer", cls: "bi-down-list-spliter bi-split-top cursor-pointer",
height: 0 height: 0,
},
} }
],
}],
cls: "bi-down-list-spliter-container cursor-pointer", cls: "bi-down-list-spliter-container cursor-pointer",
vgap: 5, vgap: 5,
hgap: 12 hgap: 12,
}); });
result.push(spliter_container); result.push(spliter_container);
} }
}); });
return result; return result;
}, }
_createChildren: function (targetItem, sourceItem) { _createChildren(targetItem, sourceItem) {
var self = this;
targetItem.el.childValues = []; targetItem.el.childValues = [];
targetItem.items = targetItem.children = []; targetItem.items = targetItem.children = [];
BI.each(sourceItem.children, function (i, child) { each(sourceItem.children, (i, child) => {
var item = BI.extend({}, child); const item = extend({}, child);
var fatherValue = BI.deepClone(targetItem.el.value); const fatherValue = deepClone(targetItem.el.value);
var childValue = BI.deepClone(item.value); const childValue = deepClone(item.value);
self.singleValues.push(item.value); this.singleValues.push(item.value);
item.type = item.type || "bi.down_list_item"; item.type = item.type || "bi.down_list_item";
item.extraCls = " child-down-list-item"; item.extraCls = " child-down-list-item";
item.title = item.title || item.text; item.title = item.title || item.text;
item.textRgap = 10; item.textRgap = 10;
item.isNeedAdjustWidth = false; item.isNeedAdjustWidth = false;
item.logic = { item.logic = {
dynamic: true dynamic: true,
}; };
item.father = fatherValue; item.father = fatherValue;
item.childValue = item.value; item.childValue = item.value;
self.fatherValueMap[self._createChildValue(fatherValue, childValue)] = fatherValue; this.fatherValueMap[this._createChildValue(fatherValue, childValue)] =
self.childValueMap[self._createChildValue(fatherValue, childValue)] = childValue; fatherValue;
item.value = self._createChildValue(fatherValue, childValue); this.childValueMap[this._createChildValue(fatherValue, childValue)] =
childValue;
item.value = this._createChildValue(fatherValue, childValue);
targetItem.el.childValues.push(item.value); targetItem.el.childValues.push(item.value);
targetItem.items.push(item); targetItem.items.push(item);
}); });
}, }
_isGroup: function (i) { _isGroup(i) {
return i.length > 1; return i.length > 1;
}, }
_needSpliter: function (i, itemLength) { _needSpliter(i, itemLength) {
return i < itemLength - 1; return i < itemLength - 1;
}, }
_createChildValue: function (fatherValue, childValue) { _createChildValue(fatherValue, childValue) {
return fatherValue + BI.BlankSplitChar + childValue; return fatherValue + BI.BlankSplitChar + childValue;
}, }
_digest: function (valueItem) { _digest(valueItem) {
var self = this; const valueArray = [];
var valueArray = []; each(valueItem, (i, item) => {
BI.each(valueItem, function (i, item) { let value;
var value; if (isNotNull(item.childValue)) {
if (BI.isNotNull(item.childValue)) { value = this._createChildValue(item.value, item.childValue);
value = self._createChildValue(item.value, item.childValue);
} else { } else {
value = item.value; value = item.value;
} }
valueArray.push(value); valueArray.push(value);
} });
);
return valueArray; return valueArray;
}, }
_checkValues: function (values) { _checkValues(values) {
var value = []; const value = [];
BI.each(this.items, function (idx, itemGroup) { each(this.items, (idx, itemGroup) => {
BI.each(itemGroup, function (id, item) { each(itemGroup, (id, item) => {
if(BI.isNotNull(item.children)) { if (isNotNull(item.children)) {
var childValues = BI.map(item.children, "value"); const childValues = map(item.children, "value");
var v = joinValue(childValues, values[idx]); const v = joinValue(childValues, values[idx]);
if(BI.isNotEmptyString(v)) { if (isNotEmptyString(v)) {
value.push(v); value.push(v);
} }
} else { } else {
@ -233,69 +265,68 @@ BI.DownListPopup = BI.inherit(BI.Pane, {
} }
}); });
}); });
return value; return value;
function joinValue(sources, targets) { function joinValue(sources, targets) {
var value = ""; let value = "";
BI.some(sources, function (idx, s) { some(sources, (idx, s) => some(targets, (id, t) => {
return BI.some(targets, function (id, t) {
if (s === t) { if (s === t) {
value = s; value = s;
return true; return true;
} }
}); }));
});
return value; return value;
} }
}, }
populate: function (items) { populate(items) {
BI.DownListPopup.superclass.populate.apply(this, arguments); super.populate(...arguments);
this.items = []; this.items = [];
this.childValueMap = {}; this.childValueMap = {};
this.fatherValueMap = {}; this.fatherValueMap = {};
this.singleValues = []; this.singleValues = [];
var children = this._createPopupItems(items); const children = this._createPopupItems(items);
var popupItem = BI.createItems(children, const popupItem = createItems(
{}, { children,
adjustLength: -2 {},
{
adjustLength: -2,
} }
); );
this.popup.populate(popupItem); this.popup.populate(popupItem);
}, }
setValue: function (valueItem) { setValue(valueItem) {
this.popup.setValue(this._digest(valueItem)); this.popup.setValue(this._digest(valueItem));
}, }
_getValue: function () { _getValue() {
var v = []; const v = [];
BI.each(this.popup.getAllButtons(), function (i, item) { each(this.popup.getAllButtons(), (i, item) => {
i % 2 === 0 && v.push(item.getValue()); i % 2 === 0 && v.push(item.getValue());
}); });
return v; return v;
}, }
getValue: function () { getValue() {
var self = this, result = []; const result = [];
var values = this._checkValues(this._getValue()); const values = this._checkValues(this._getValue());
BI.each(values, function (i, value) { each(values, (i, value) => {
var valueItem = {}; const valueItem = {};
if (BI.isNotNull(self.childValueMap[value])) { if (isNotNull(this.childValueMap[value])) {
var fartherValue = self.fatherValueMap[value]; const fartherValue = this.fatherValueMap[value];
valueItem.childValue = self.childValueMap[value]; valueItem.childValue = this.childValueMap[value];
valueItem.value = fartherValue; valueItem.value = fartherValue;
} else { } else {
valueItem.value = value; valueItem.value = value;
} }
result.push(valueItem); result.push(valueItem);
}); });
return result; 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);

9
src/widget/index.js

@ -7,6 +7,9 @@ import * as datetimepane from "./datetimepane";
import * as dynamicdatetime from "./dynamicdatetime"; import * as dynamicdatetime from "./dynamicdatetime";
import * as time from "./time"; import * as time from "./time";
import * as editor from "./editor"; 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 { SelectTreeCombo } from "./selecttree/selecttree.combo";
import { SingleTreeCombo } from "./singletree/singletree.combo"; import { SingleTreeCombo } from "./singletree/singletree.combo";
import { MultiTreeCombo } from "./multitree/multi.tree.combo"; import { MultiTreeCombo } from "./multitree/multi.tree.combo";
@ -27,6 +30,9 @@ Object.assign(BI, {
...dynamicdatetime, ...dynamicdatetime,
...time, ...time,
...editor, ...editor,
...downList,
...singleSliderItem,
...intervalSliderItem,
SelectTreeCombo, SelectTreeCombo,
SingleTreeCombo, SingleTreeCombo,
MultiTreeCombo, MultiTreeCombo,
@ -48,6 +54,9 @@ export * from "./time";
export * from "./editor"; export * from "./editor";
export * from "./multiselect"; export * from "./multiselect";
export * from "./multiselectlist"; export * from "./multiselectlist";
export * from "./downlist";
export * from "./singleslider";
export * from "./intervalslider";
export { export {
Collapse, 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 @@
/** import {
* Created by zcf on 2016/9/26. shortcut,
*/ createWidget,
BI.IntervalSlider = BI.inherit(BI.Single, { toPix,
_constant: { 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_WIDTH: 58,
EDITOR_R_GAP: 60, EDITOR_R_GAP: 60,
EDITOR_HEIGHT: 20, EDITOR_HEIGHT: 20,
SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH_HALF: 15,
SLIDER_WIDTH: 30, SLIDER_WIDTH: 30,
SLIDER_HEIGHT: 30, SLIDER_HEIGHT: 30,
TRACK_HEIGHT: 24 TRACK_HEIGHT: 24,
}, }
props = {
props: {
baseCls: "bi-interval-slider bi-slider-track", baseCls: "bi-interval-slider bi-slider-track",
digit: false, digit: false,
unit: "", unit: "",
min: 0, min: 0,
max: 100, max: 100,
value: { value: { min: "", max: "" },
min: "", };
max: "",
}
},
beforeMount: function () { static EVENT_CHANGE = "EVENT_CHANGE";
beforeMount() {
const { value, min, max } = this.options; const { value, min, max } = this.options;
this._setMinAndMax({ this._setMinAndMax({
min, min,
@ -32,90 +52,104 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
}); });
this.setValue(value); this.setValue(value);
this.populate(); this.populate();
}, }
render: function () {
var self = this; render() {
var c = this._constant; const c = this._constant;
this.enable = false; this.enable = false;
this.valueOne = ""; this.valueOne = "";
this.valueTwo = ""; this.valueTwo = "";
this.calculation = new BI.AccurateCalculationModel(); this.calculation = new AccurateCalculationModel();
this.grayTrack = BI.createWidget({ this.grayTrack = createWidget({
type: "bi.layout", type: Layout.xtype,
cls: "gray-track", cls: "gray-track",
height: 6 height: 6,
}); });
this.blueTrack = BI.createWidget({ this.blueTrack = createWidget({
type: "bi.layout", type: Layout.xtype,
cls: "blue-track bi-high-light-background", cls: "blue-track bi-high-light-background",
height: 6 height: 6,
}); });
this.track = this._createTrackWrapper(); this.track = this._createTrackWrapper();
this.labelOne = BI.createWidget({ this.labelOne = createWidget({
type: "bi.sign_text_editor", type: SignTextEditor.xtype,
cls: "slider-editor-button", cls: "slider-editor-button",
text: this.options.unit, text: this.options.unit,
allowBlank: false, allowBlank: false,
width: BI.toPix(c.EDITOR_WIDTH, 2), width: toPix(c.EDITOR_WIDTH, 2),
height: BI.toPix(c.EDITOR_HEIGHT, 2), height: toPix(c.EDITOR_HEIGHT, 2),
validationChecker: function (v) { validationChecker: v => this._checkValidation(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");
}); });
this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () { this.labelOne.element.hover(
var oldValueOne = self.valueOne; () => {
var v = BI.parseFloat(this.getValue()); this.labelOne.element
self.valueOne = v; .removeClass("bi-border")
var percent = self._getPercentByValue(v); .addClass("bi-border");
var significantPercent = BI.parseFloat(percent.toFixed(1));// 分成1000份 },
self._setSliderOnePosition(significantPercent); () => {
self._setBlueTrack(); this.labelOne.element.removeClass("bi-border");
self._checkLabelPosition(oldValueOne, self.valueTwo, self.valueOne, self.valueTwo); }
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); );
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({ this.labelTwo = createWidget({
type: "bi.sign_text_editor", type: SignTextEditor.xtype,
cls: "slider-editor-button", cls: "slider-editor-button",
text: this.options.unit, text: this.options.unit,
allowBlank: false, allowBlank: false,
width: BI.toPix(c.EDITOR_WIDTH, 2), width: toPix(c.EDITOR_WIDTH, 2),
height: BI.toPix(c.EDITOR_HEIGHT, 2), height: toPix(c.EDITOR_HEIGHT, 2),
validationChecker: function (v) { validationChecker: v => this._checkValidation(v),
return self._checkValidation(v);
}
}); });
this.labelTwo.element.hover(function () { this.labelTwo.element.hover(
self.labelTwo.element.removeClass("bi-border").addClass("bi-border"); () => {
}, function () { this.labelTwo.element
self.labelTwo.element.removeClass("bi-border"); .removeClass("bi-border")
}); .addClass("bi-border");
this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () { },
var oldValueTwo = self.valueTwo; () => {
var v = BI.parseFloat(this.getValue()); this.labelTwo.element.removeClass("bi-border");
self.valueTwo = v; }
var percent = self._getPercentByValue(v); );
var significantPercent = BI.parseFloat(percent.toFixed(1)); this.labelTwo.on(Editor.EVENT_CONFIRM, () => {
self._setSliderTwoPosition(significantPercent); const oldValueTwo = this.valueTwo;
self._setBlueTrack(); const v = parseFloat(this.getValue());
self._checkLabelPosition(self.valueOne, oldValueTwo, self.valueOne, self.valueTwo); this.valueTwo = v;
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); 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({ this.sliderOne = createWidget({
type: "bi.single_slider_button" type: SliderIconButton.xtype,
}); });
this.sliderTwo = BI.createWidget({ this.sliderTwo = createWidget({
type: "bi.single_slider_button" type: SliderIconButton.xtype,
}); });
this._draggable(this.sliderOne, true); this._draggable(this.sliderOne, true);
this._draggable(this.sliderTwo, false); this._draggable(this.sliderTwo, false);
@ -127,7 +161,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
items: [ items: [
this._createLabelWrapper(), this._createLabelWrapper(),
{ {
type: "bi.absolute", type: AbsoluteLayout.xtype,
items: [ items: [
{ {
el: { el: {
@ -135,64 +169,82 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
horizontalAlign: "stretch", horizontalAlign: "stretch",
verticalAlign: "middle", verticalAlign: "middle",
columnSize: ["fill"], columnSize: ["fill"],
items: [{ items: [
{
el: this.track, el: this.track,
}], }
],
hgap: 10, hgap: 10,
}, },
inset: 0 inset: 0,
}, },
this._createSliderWrapper(), this._createSliderWrapper()
] ],
} }
] ],
}; };
}, }
_rePosBySizeAfterMove: function (size, isLeft) { _rePosBySizeAfterMove(size, isLeft) {
var o = this.options; const o = this.options;
var percent = size * 100 / (this._getGrayTrackLength()); const percent = (size * 100) / this._getGrayTrackLength();
var significantPercent = BI.parseFloat(percent.toFixed(1)); const significantPercent = parseFloat(percent.toFixed(1));
var v = this._getValueByPercent(significantPercent); let v = this._getValueByPercent(significantPercent);
v = this._assertValue(v); v = this._assertValue(v);
v = o.digit === false ? v : v.toFixed(o.digit); 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) { if (isLeft) {
this._setSliderOnePosition(significantPercent); this._setSliderOnePosition(significantPercent);
this.labelOne.setValue(v); this.labelOne.setValue(v);
this.valueOne = v; this.valueOne = v;
this._checkLabelPosition(oldValueOne, oldValueTwo, v, this.valueTwo); this._checkLabelPosition(
oldValueOne,
oldValueTwo,
v,
this.valueTwo
);
} else { } else {
this._setSliderTwoPosition(significantPercent); this._setSliderTwoPosition(significantPercent);
this.labelTwo.setValue(v); this.labelTwo.setValue(v);
this.valueTwo = v; this.valueTwo = v;
this._checkLabelPosition(oldValueOne, oldValueTwo, this.valueOne, v); this._checkLabelPosition(
oldValueOne,
oldValueTwo,
this.valueOne,
v
);
} }
this._setBlueTrack(); this._setBlueTrack();
}, }
_rePosBySizeAfterStop: function (size, isLeft) { _rePosBySizeAfterStop(size, isLeft) {
var percent = size * 100 / (this._getGrayTrackLength()); const percent = (size * 100) / this._getGrayTrackLength();
var significantPercent = BI.parseFloat(percent.toFixed(1)); const significantPercent = parseFloat(percent.toFixed(1));
isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent); isLeft
}, ? this._setSliderOnePosition(significantPercent)
: this._setSliderTwoPosition(significantPercent);
}
_draggable: function (widget, isLeft) { _draggable(widget, isLeft) {
var self = this, o = this.options; let startDrag = false;
var startDrag = false; let size = 0,
var size = 0, offset = 0, defaultSize = 0; offset = 0,
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { defaultSize = 0;
const mouseMoveTracker = new MouseMoveTracker(
(deltaX => {
if (mouseMoveTracker.isDragging()) { if (mouseMoveTracker.isDragging()) {
startDrag = true; startDrag = true;
offset += deltaX; offset += deltaX;
size = optimizeSize(defaultSize + offset); size = optimizeSize(defaultSize + offset);
widget.element.addClass("dragging"); widget.element.addClass("dragging");
self._rePosBySizeAfterMove(size, isLeft); this._rePosBySizeAfterMove(size, isLeft);
} }
}, function () { }),
(() => {
if (startDrag === true) { if (startDrag === true) {
size = optimizeSize(size); size = optimizeSize(size);
self._rePosBySizeAfterStop(size, isLeft); this._rePosBySizeAfterStop(size, isLeft);
size = 0; size = 0;
offset = 0; offset = 0;
defaultSize = size; defaultSize = size;
@ -200,8 +252,10 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
} }
widget.element.removeClass("dragging"); widget.element.removeClass("dragging");
mouseMoveTracker.releaseMouseMoves(); mouseMoveTracker.releaseMouseMoves();
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); this.fireEvent(IntervalSlider.EVENT_CHANGE);
}, window); }),
window
);
widget.element.on("mousedown", function (event) { widget.element.on("mousedown", function (event) {
if (!widget.isEnabled()) { if (!widget.isEnabled()) {
return; return;
@ -211,42 +265,47 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
mouseMoveTracker.captureMouseMoves(event); mouseMoveTracker.captureMouseMoves(event);
}); });
function optimizeSize (s) { const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
return BI.clamp(s, 0, self._getGrayTrackLength());
} }
},
_createLabelWrapper: function () { _createLabelWrapper() {
var c = this._constant; const c = this._constant;
return { return {
el: { el: {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.absolute", {
items: [{ type: AbsoluteLayout.xtype,
items: [
{
el: this.labelOne, el: this.labelOne,
top: 0, top: 0,
left: 0, left: 0,
}] }
}, { ],
type: "bi.absolute", },
items: [{ {
type: AbsoluteLayout.xtype,
items: [
{
el: this.labelTwo, el: this.labelTwo,
top: 0, top: 0,
right: 0, right: 0,
}] }
}], ],
}
],
rgap: c.EDITOR_R_GAP, rgap: c.EDITOR_R_GAP,
height: c.SLIDER_HEIGHT height: c.SLIDER_HEIGHT,
}, },
top: 0, top: 0,
left: 0, left: 0,
width: "100%" width: "100%",
}; };
}, }
_createSliderWrapper: function () { _createSliderWrapper() {
var c = this._constant;
return { return {
el: { el: {
type: "bi.horizontal", type: "bi.horizontal",
@ -254,7 +313,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
verticalAlign: "middle", verticalAlign: "middle",
items: [ items: [
{ {
type: "bi.absolute", type: AbsoluteLayout.xtype,
height: 12, height: 12,
width: "fill", width: "fill",
items: [ items: [
@ -262,24 +321,25 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
el: this.sliderOne, el: this.sliderOne,
top: 0, top: 0,
bottom: 0, bottom: 0,
left: 0 left: 0,
}, { },
{
el: this.sliderTwo, el: this.sliderTwo,
top: 0, top: 0,
bottom: 0, bottom: 0,
left: "100%" left: "100%",
} }
], ],
} }
], ],
hgap: 10, hgap: 10,
}, },
inset: 0 inset: 0,
}; };
}, }
_createTrackWrapper: function () { _createTrackWrapper() {
return BI.createWidget({ return createWidget({
type: "bi.horizontal", type: "bi.horizontal",
cls: "track-wrapper", cls: "track-wrapper",
horizontalAlign: "stretch", horizontalAlign: "stretch",
@ -288,100 +348,110 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
scrollx: false, scrollx: false,
items: [ items: [
{ {
type: "bi.absolute", type: AbsoluteLayout.xtype,
height: 6, height: 6,
items: [{ items: [
{
el: this.grayTrack, el: this.grayTrack,
top: 0, top: 0,
left: 0, left: 0,
bottom: 0, bottom: 0,
width: "100%" width: "100%",
}, { },
{
el: this.blueTrack, el: this.blueTrack,
top: 0, top: 0,
left: 0, left: 0,
bottom: 0, bottom: 0,
width: "0%" width: "0%",
}] }
],
} }
], ],
}); });
}, }
_checkValidation: function (v) { _checkValidation(v) {
var o = this.options; const o = this.options;
var valid = false; let valid = false;
// 像90.这样的既不属于整数又不属于小数,是不合法的值 // 像90.这样的既不属于整数又不属于小数,是不合法的值
var dotText = (v + "").split(".")[1]; let dotText = (`${v}`).split(".")[1];
if (BI.isEmptyString(dotText)) { // eslint-disable-next-line no-empty
if (isEmptyString(dotText)) {
} else { } 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 // 100等价于100.0 100.00 100.000
if(o.digit === false || BI.isInteger(v)) { if (o.digit === false || isInteger(v)) {
valid = true; valid = true;
} else { } else {
dotText = dotText || ""; dotText = dotText || "";
valid = (dotText.length === o.digit); valid = dotText.length === o.digit;
} }
} }
} }
return valid; return valid;
}, }
_checkOverlap: function () { _checkOverlap() {
var labelOneLeft = this.labelOne.element[0].offsetLeft; const labelOneLeft = this.labelOne.element[0].offsetLeft;
var labelTwoLeft = this.labelTwo.element[0].offsetLeft; const labelTwoLeft = this.labelTwo.element[0].offsetLeft;
if (labelOneLeft <= labelTwoLeft) { if (labelOneLeft <= labelTwoLeft) {
if ((labelTwoLeft - labelOneLeft) < 90) { if (labelTwoLeft - labelOneLeft < 90) {
this.labelTwo.element.css({ top: 40 }); this.labelTwo.element.css({ top: 40 });
} else { } else {
this.labelTwo.element.css({ top: 0 }); this.labelTwo.element.css({ top: 0 });
} }
} else { } else {
if ((labelOneLeft - labelTwoLeft) < 90) { if (labelOneLeft - labelTwoLeft < 90) {
this.labelTwo.element.css({ top: 40 }); this.labelTwo.element.css({ top: 40 });
} else { } else {
this.labelTwo.element.css({ top: 0 }); this.labelTwo.element.css({ top: 0 });
} }
} }
}, }
_checkLabelPosition: function (oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) { _checkLabelPosition(oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) {
oldValueOne = BI.parseFloat(oldValueOne); oldValueOne = parseFloat(oldValueOne);
oldValueTwo = BI.parseFloat(oldValueTwo); oldValueTwo = parseFloat(oldValueTwo);
valueOne = BI.parseFloat(valueOne); valueOne = parseFloat(valueOne);
valueTwo = BI.parseFloat(valueTwo); valueTwo = parseFloat(valueTwo);
if((oldValueOne <= oldValueTwo && valueOne > valueTwo) || (oldValueOne >= oldValueTwo && valueOne < valueTwo)) { if (
var isSliderOneLeft = BI.parseFloat(this.labelOne.getValue()) < BI.parseFloat(this.labelTwo.getValue()); (oldValueOne <= oldValueTwo && valueOne > valueTwo) ||
(oldValueOne >= oldValueTwo && valueOne < valueTwo)
) {
const isSliderOneLeft =
parseFloat(this.labelOne.getValue()) <
parseFloat(this.labelTwo.getValue());
this._resetLabelPosition(!isSliderOneLeft); this._resetLabelPosition(!isSliderOneLeft);
} }
}, }
_resetLabelPosition: function(needReverse) { _resetLabelPosition(needReverse) {
this.labelOne.element.css({ left: needReverse ? "100%" : "0%" }); this.labelOne.element.css({ left: needReverse ? "100%" : "0%" });
this.labelTwo.element.css({ left: needReverse ? "0%" : "100%" }); this.labelTwo.element.css({ left: needReverse ? "0%" : "100%" });
}, }
_setSliderOnePosition: function (percent) { _setSliderOnePosition(percent) {
this.sliderOne.element.css({left: percent + "%"}); this.sliderOne.element.css({ left: `${percent}%` });
}, }
_setSliderTwoPosition: function (percent) { _setSliderTwoPosition(percent) {
this.sliderTwo.element.css({left: percent + "%"}); this.sliderTwo.element.css({ left: `${percent}%` });
}, }
_setBlueTrackLeft: function (percent) { _setBlueTrackLeft(percent) {
this.blueTrack.element.css({left: percent + "%"}); this.blueTrack.element.css({ left: `${percent}%` });
}, }
_setBlueTrackWidth: function (percent) { _setBlueTrackWidth(percent) {
this.blueTrack.element.css({width: percent + "%"}); this.blueTrack.element.css({ width: `${percent}%` });
}, }
_setBlueTrack: function () { _setBlueTrack() {
var percentOne = this._getPercentByValue(this.labelOne.getValue()); const percentOne = this._getPercentByValue(this.labelOne.getValue());
var percentTwo = this._getPercentByValue(this.labelTwo.getValue()); const percentTwo = this._getPercentByValue(this.labelTwo.getValue());
if (percentOne <= percentTwo) { if (percentOne <= percentTwo) {
this._setBlueTrackLeft(percentOne); this._setBlueTrackLeft(percentOne);
this._setBlueTrackWidth(percentTwo - percentOne); this._setBlueTrackWidth(percentTwo - percentOne);
@ -389,133 +459,165 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
this._setBlueTrackLeft(percentTwo); this._setBlueTrackLeft(percentTwo);
this._setBlueTrackWidth(percentOne - percentTwo); this._setBlueTrackWidth(percentOne - percentTwo);
} }
}, }
_setAllPosition: function (one, two) { _setAllPosition(one, two) {
this._setSliderOnePosition(one); this._setSliderOnePosition(one);
this._setSliderTwoPosition(two); this._setSliderTwoPosition(two);
this._setBlueTrack(); this._setBlueTrack();
}, }
_setVisible: function (visible) { _setVisible(visible) {
this.sliderOne.setVisible(visible); this.sliderOne.setVisible(visible);
this.sliderTwo.setVisible(visible); this.sliderTwo.setVisible(visible);
this.labelOne.setVisible(visible); this.labelOne.setVisible(visible);
this.labelTwo.setVisible(visible); this.labelTwo.setVisible(visible);
}, }
_setErrorText: function () { _setErrorText() {
var errorText = BI.i18nText("BI-Basic_Please_Enter_Number_Between", this.min, this.max); const errorText = i18nText(
"BI-Basic_Please_Enter_Number_Between",
this.min,
this.max
);
this.labelOne.setErrorText(errorText); this.labelOne.setErrorText(errorText);
this.labelTwo.setErrorText(errorText); this.labelTwo.setErrorText(errorText);
}, }
_getGrayTrackLength: function () { _getGrayTrackLength() {
return this.grayTrack.element[0].scrollWidth; return this.grayTrack.element[0].scrollWidth;
}, }
// 其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度 _getValueByPercent(percent) {
// 端点处的值有可能因为min,max相差量级很大(precision很大)而丢失精度,此时直接返回端点值即可 // return (((max-min)*percent)/100+min)
_getValueByPercent: function (percent) {// return (((max-min)*percent)/100+min)
if (percent === 0) { if (percent === 0) {
return this.min; return this.min;
} }
if (percent === 100) { if (percent === 100) {
return this.max; return this.max;
} }
var sub = this.calculation.accurateSubtraction(this.max, this.min); const sub = this.calculation.accurateSubtraction(this.max, this.min);
var mul = this.calculation.accurateMultiplication(sub, percent); const mul = this.calculation.accurateMultiplication(sub, percent);
var div = this.calculation.accurateDivisionTenExponent(mul, 2); const div = this.calculation.accurateDivisionTenExponent(mul, 2);
if (this.precision < 0) { if (this.precision < 0) {
var value = BI.parseFloat(this.calculation.accurateAddition(div, this.min)); const value = parseFloat(
var reduceValue = Math.round(this.calculation.accurateDivisionTenExponent(value, -this.precision)); this.calculation.accurateAddition(div, this.min)
return this.calculation.accurateMultiplication(reduceValue, Math.pow(10, -this.precision)); );
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) { _getPercentByValue(v) {
return (v - this.min) * 100 / (this.max - this.min); return ((v - this.min) * 100) / (this.max - this.min);
}, }
_getPrecision: function () { _getPrecision() {
// 计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度) // 计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度)
// 如果差值的整数位数大于4,toPrecision(4)得到的是科学计数法123456 => 1.235e+5 // 如果差值的整数位数大于4,toPrecision(4)得到的是科学计数法123456 => 1.235e+5
// 返回非负值: 保留的小数位数 // 返回非负值: 保留的小数位数
// 返回负值: 保留的10^n精度中的n // 返回负值: 保留的10^n精度中的n
var sub = this.calculation.accurateSubtraction(this.max, this.min); const sub = this.calculation.accurateSubtraction(this.max, this.min);
var pre = sub.toPrecision(4); const pre = sub.toPrecision(4);
// 科学计数法 // 科学计数法
var eIndex = pre.indexOf("e"); const eIndex = pre.indexOf("e");
var arr = []; let arr = [];
if (eIndex > -1) { if (eIndex > -1) {
arr = pre.split("e"); arr = pre.split("e");
var decimalPartLength = BI.size(arr[0].split(".")[1]); const decimalPartLength = size(arr[0].split(".")[1]);
var sciencePartLength = BI.parseInt(arr[1].substring(1)); const sciencePartLength = parseInt(arr[1].substring(1));
return decimalPartLength - sciencePartLength; return decimalPartLength - sciencePartLength;
} }
arr = pre.split("."); 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) { if (value <= this.min) {
return this.min; return this.min;
} }
if (value >= this.max) { if (value >= this.max) {
return this.max; return this.max;
} }
return value; return value;
}, }
_setEnable: function (b) { _setEnable(b) {
BI.IntervalSlider.superclass._setEnable.apply(this, [b]); super._setEnable.apply(this, [b]);
if (b) { if (b) {
this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); this.blueTrack.element
.removeClass("disabled-blue-track")
.addClass("blue-track");
} else { } 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) { if (this.valueOne <= this.valueTwo) {
return { min: this.valueOne, max: this.valueTwo }; return { min: this.valueOne, max: this.valueTwo };
} }
return {min: this.valueTwo, max: this.valueOne};
}, return { min: this.valueTwo, max: this.valueOne };
}
_setMinAndMax: function (v) { _setMinAndMax(v) {
var minNumber = BI.parseFloat(v.min); const minNumber = parseFloat(v.min);
var maxNumber = BI.parseFloat(v.max); const maxNumber = parseFloat(v.max);
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber)) { if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber >= minNumber) {
this.min = minNumber; this.min = minNumber;
this.max = maxNumber; this.max = maxNumber;
this.valueOne = minNumber; this.valueOne = minNumber;
this.valueTwo = maxNumber; this.valueTwo = maxNumber;
this.precision = this._getPrecision(); this.precision = this._getPrecision();
} }
}, }
setMinAndMax: function (v) { setMinAndMax(v) {
this._setMinAndMax(v); this._setMinAndMax(v);
this.setEnable(v.min <= v.max); this.setEnable(v.min <= v.max);
}, }
setValue: function (v) { setValue(v) {
var o = this.options; const o = this.options;
var valueOne = BI.parseFloat(v.min); let valueOne = parseFloat(v.min);
var valueTwo = BI.parseFloat(v.max); let valueTwo = parseFloat(v.max);
valueOne = o.digit === false ? valueOne : BI.parseFloat(valueOne.toFixed(o.digit)); valueOne =
valueTwo = o.digit === false ? valueTwo : BI.parseFloat(valueTwo.toFixed(o.digit)); 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 (!isNaN(valueOne) && !isNaN(valueTwo)) {
if (this._checkValidation(valueOne)) { if (this._checkValidation(valueOne)) {
this.valueOne = (this.valueOne <= this.valueTwo ? valueOne : valueTwo); this.valueOne =
this.valueOne <= this.valueTwo ? valueOne : valueTwo;
} }
if (this._checkValidation(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) { if (valueOne < this.min) {
this.valueOne = this.min; this.valueOne = this.min;
@ -524,9 +626,9 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
this.valueTwo = this.max; this.valueTwo = this.max;
} }
} }
}, }
reset: function () { reset() {
this._setVisible(false); this._setVisible(false);
this.enable = false; this.enable = false;
this.valueOne = ""; this.valueOne = "";
@ -534,18 +636,32 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
this.min = NaN; this.min = NaN;
this.max = NaN; this.max = NaN;
this._setBlueTrackWidth(0); this._setBlueTrackWidth(0);
}, }
populate: function () { populate() {
var o = this.options; const o = this.options;
if (!isNaN(this.min) && !isNaN(this.max)) { if (!isNaN(this.min) && !isNaN(this.max)) {
this.enable = true; this.enable = true;
this._setVisible(true); this._setVisible(true);
this._setErrorText(); this._setErrorText();
if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) { if (
this.labelOne.setValue(o.digit === false ? this.valueOne : BI.parseFloat(this.valueOne).toFixed(o.digit)); (isNumeric(this.valueOne) || isNotEmptyString(this.valueOne)) &&
this.labelTwo.setValue(o.digit === false ? this.valueTwo : BI.parseFloat(this.valueTwo).toFixed(o.digit)); (isNumeric(this.valueTwo) || isNotEmptyString(this.valueTwo))
this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(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 { } else {
this.labelOne.setValue(this.min); this.labelOne.setValue(this.min);
this.labelTwo.setValue(this.max); this.labelTwo.setValue(this.max);
@ -554,6 +670,4 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
this._resetLabelPosition(this.valueOne > this.valueTwo); 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 @@
/** import { Widget, extend, parseInt, parseFloat } from "@/core";
* Created by zcf on 2017/3/1.
* 万恶的IEEE-754 export class AccurateCalculationModel extends Widget {
* 使用字符串精确计算含小数加法减法乘法和10的指数倍除法支持负数 _defaultConfig() {
*/ return extend(super._defaultConfig(...arguments), {
BI.AccurateCalculationModel = BI.inherit(BI.Widget, { baseCls: "",
_defaultConfig: function () {
return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), {
baseCls: ""
}); });
}, }
_init: function () { _init() {
BI.AccurateCalculationModel.superclass._init.apply(this, arguments); super._init(...arguments);
}, }
_getMagnitude: function (n) { _getMagnitude(n) {
var magnitude = "1"; let magnitude = "1";
for (var i = 0; i < n; i++) { for (let i = 0; i < n; i++) {
magnitude += "0"; magnitude += "0";
} }
return BI.parseInt(magnitude);
},
_formatDecimal: function (stringNumber1, stringNumber2) { return parseInt(magnitude);
}
_formatDecimal(stringNumber1, stringNumber2) {
if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) { if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) {
return; return;
} }
var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength; let magnitudeDiff =
stringNumber1.numDecimalLength - stringNumber2.numDecimalLength;
let needAddZero;
if (magnitudeDiff > 0) { if (magnitudeDiff > 0) {
var needAddZero = stringNumber2; needAddZero = stringNumber2;
} else { } else {
var needAddZero = stringNumber1; needAddZero = stringNumber1;
magnitudeDiff = (0 - magnitudeDiff); magnitudeDiff = 0 - magnitudeDiff;
} }
for (var i = 0; i < magnitudeDiff; i++) { for (let i = 0; i < magnitudeDiff; i++) {
if (needAddZero.numDecimal === "0" && i === 0) { if (needAddZero.numDecimal === "0" && i === 0) {
continue; continue;
} }
needAddZero.numDecimal += "0"; needAddZero.numDecimal += "0";
} }
}, }
_stringNumberFactory: function (num) { _stringNumberFactory(num) {
var strNum = num.toString(); const strNum = num.toString();
var numStrArray = strNum.split("."); const numStrArray = strNum.split(".");
var numInteger = numStrArray[0]; const numInteger = numStrArray[0];
let numDecimal;
let numDecimalLength;
if (numStrArray.length === 1) { if (numStrArray.length === 1) {
var numDecimal = "0"; numDecimal = "0";
var numDecimalLength = 0; numDecimalLength = 0;
} else { } else {
var numDecimal = numStrArray[1]; numDecimal = numStrArray[1];
var numDecimalLength = numStrArray[1].length; numDecimalLength = numStrArray[1].length;
} }
return { return {
numInteger: numInteger, numInteger,
numDecimal: numDecimal, numDecimal,
numDecimalLength: numDecimalLength numDecimalLength,
}; };
}, }
_accurateSubtraction: function (num1, num2) {// num1-num2 && num1>num2 _accurateSubtraction(num1, num2) {
var stringNumber1 = this._stringNumberFactory(num1); // num1-num2 && num1>num2
var stringNumber2 = this._stringNumberFactory(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); this._formatDecimal(stringNumber1, stringNumber2);
var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2); const decimalMaxLength = getDecimalMaxLength(
stringNumber1,
stringNumber2
);
if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) { let decimalResultTemp;
var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); let decimalResult;
var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
} else {// 否则借位 if (
parseInt(stringNumber1.numDecimal) >=
parseInt(stringNumber2.numDecimal)
) {
decimalResultTemp = (
parseInt(stringNumber1.numDecimal) -
parseInt(stringNumber2.numDecimal)
).toString();
decimalResult = addZero(decimalResultTemp, decimalMaxLength);
} else {
// 否则借位
integerResult--; integerResult--;
var borrow = this._getMagnitude(decimalMaxLength); const borrow = this._getMagnitude(decimalMaxLength);
var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); decimalResultTemp = (
var decimalResult = addZero(decimalResultTemp, decimalMaxLength); borrow +
} parseInt(stringNumber1.numDecimal) -
var result = integerResult + "." + decimalResult; parseInt(stringNumber2.numDecimal)
return BI.parseFloat(result); ).toString();
decimalResult = addZero(decimalResultTemp, decimalMaxLength);
}
const result = `${integerResult}.${decimalResult}`;
return parseFloat(result);
function getDecimalMaxLength(num1, num2) { function getDecimalMaxLength(num1, num2) {
if (num1.numDecimal.length >= num2.numDecimal.length) { if (num1.numDecimal.length >= num2.numDecimal.length) {
return num1.numDecimal.length; return num1.numDecimal.length;
} }
return num2.numDecimal.length; return num2.numDecimal.length;
} }
function addZero(resultTemp, length) { function addZero(resultTemp, length) {
var diff = length - resultTemp.length; const diff = length - resultTemp.length;
for (var i = 0; i < diff; i++) { for (let i = 0; i < diff; i++) {
resultTemp = "0" + resultTemp; resultTemp = `0${resultTemp}`;
} }
return resultTemp; return resultTemp;
} }
}, }
_accurateAddition: function (num1, num2) {// 加法结合律 _accurateAddition(num1, num2) {
var stringNumber1 = this._stringNumberFactory(num1); // 加法结合律
var stringNumber2 = this._stringNumberFactory(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); 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 !== "0") {
if (decimalResult.length <= stringNumber1.numDecimal.length) { if (decimalResult.length <= stringNumber1.numDecimal.length) {
decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length); decimalResult = addZero(
decimalResult,
stringNumber1.numDecimal.length
);
} else { } else {
integerResult++; // 进一 integerResult++; // 进一
decimalResult = decimalResult.slice(1); decimalResult = decimalResult.slice(1);
} }
} }
var result = integerResult + "." + decimalResult; const result = `${integerResult}.${decimalResult}`;
return BI.parseFloat(result);
return parseFloat(result);
function addZero(resultTemp, length) { function addZero(resultTemp, length) {
var diff = length - resultTemp.length; const diff = length - resultTemp.length;
for (var i = 0; i < diff; i++) { for (let i = 0; i < diff; i++) {
resultTemp = "0" + resultTemp; resultTemp = `0${resultTemp}`;
} }
return resultTemp; return resultTemp;
} }
}, }
_accurateMultiplication: function (num1, num2) {// 乘法分配律 _accurateMultiplication(num1, num2) {
var stringNumber1 = this._stringNumberFactory(num1); // 乘法分配律
var stringNumber2 = this._stringNumberFactory(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的整数 // 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的小数 // 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 _accurateDivisionTenExponent(num, n) {
var stringNumber = this._stringNumberFactory(num); // num/10^n && n>0
const stringNumber = this._stringNumberFactory(num);
let integerResult, partDecimalResult;
if (stringNumber.numInteger.length > n) { if (stringNumber.numInteger.length > n) {
var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n)); integerResult = stringNumber.numInteger.slice(
var partDecimalResult = stringNumber.numInteger.slice(-n); 0,
stringNumber.numInteger.length - n
);
partDecimalResult = stringNumber.numInteger.slice(-n);
} else { } else {
var integerResult = "0"; integerResult = "0";
var partDecimalResult = addZero(stringNumber.numInteger, n); partDecimalResult = addZero(stringNumber.numInteger, n);
} }
var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal; const result =
return BI.parseFloat(result); `${integerResult}.${partDecimalResult}${stringNumber.numDecimal}`;
return parseFloat(result);
function addZero(resultTemp, length) { function addZero(resultTemp, length) {
var diff = length - resultTemp.length; const diff = length - resultTemp.length;
for (var i = 0; i < diff; i++) { for (let i = 0; i < diff; i++) {
resultTemp = "0" + resultTemp; resultTemp = `0${resultTemp}`;
} }
return resultTemp; return resultTemp;
} }
}, }
accurateSubtraction: function (num1, num2) { accurateSubtraction(num1, num2) {
if (num1 >= 0 && num2 >= 0) { if (num1 >= 0 && num2 >= 0) {
if (num1 >= num2) { if (num1 >= num2) {
return this._accurateSubtraction(num1, num2); return this._accurateSubtraction(num1, num2);
} }
return -this._accurateSubtraction(num2, num1); return -this._accurateSubtraction(num2, num1);
} }
if (num1 >= 0 && num2 < 0) { if (num1 >= 0 && num2 < 0) {
@ -179,11 +246,12 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
if (num1 >= num2) { if (num1 >= num2) {
return this._accurateSubtraction(-num2, -num1); return this._accurateSubtraction(-num2, -num1);
} }
return this._accurateSubtraction(-num1, -num2); return this._accurateSubtraction(-num1, -num2);
} }
}, }
accurateAddition: function (num1, num2) { accurateAddition(num1, num2) {
if (num1 >= 0 && num2 >= 0) { if (num1 >= 0 && num2 >= 0) {
return this._accurateAddition(num1, num2); return this._accurateAddition(num1, num2);
} }
@ -196,9 +264,9 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
if (num1 < 0 && num2 < 0) { if (num1 < 0 && num2 < 0) {
return -this._accurateAddition(-num1, -num2); return -this._accurateAddition(-num1, -num2);
} }
}, }
accurateMultiplication: function (num1, num2) { accurateMultiplication(num1, num2) {
if (num1 >= 0 && num2 >= 0) { if (num1 >= 0 && num2 >= 0) {
return this._accurateMultiplication(num1, num2); return this._accurateMultiplication(num1, num2);
} }
@ -211,12 +279,13 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
if (num1 < 0 && num2 < 0) { if (num1 < 0 && num2 < 0) {
return this._accurateMultiplication(-num1, -num2); return this._accurateMultiplication(-num1, -num2);
} }
}, }
accurateDivisionTenExponent: function (num1, n) { accurateDivisionTenExponent(num1, n) {
if (num1 >= 0) { if (num1 >= 0) {
return this._accurateDivisionTenExponent(num1, n); return this._accurateDivisionTenExponent(num1, n);
} }
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, { import {
_defaultConfig: function () { shortcut,
var conf = BI.SignTextEditor.superclass._defaultConfig.apply(this, arguments); Widget,
return BI.extend(conf, { extend,
baseCls: (conf.baseCls || "") + " bi-sign-initial-editor", emptyFn,
validationChecker: BI.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: "", text: "",
height: 24 height: 24,
}); });
}, }
_init: function () { _init() {
BI.SignTextEditor.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this.editor = BI.createWidget({ this.editor = createWidget({
type: "bi.editor", type: Editor.xtype,
simple: o.simple, simple: o.simple,
height: o.height, height: o.height,
hgap: 4, hgap: 4,
vgap: 2, vgap: 2,
value: o.value, value: o.value,
validationChecker: o.validationChecker, validationChecker: o.validationChecker,
allowBlank: false allowBlank: false,
}); });
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.text_button", type: TextButton.xtype,
cls: "sign-editor-text", cls: "sign-editor-text",
title: function () { title: () => this.getValue(),
return self.getValue();
},
textAlign: o.textAlign, textAlign: o.textAlign,
height: o.height, height: o.height,
hgap: 4, hgap: 4,
handler: function () { handler: () => {
self._showInput(); this._showInput();
self.editor.focus(); this.editor.focus();
self.editor.selectAll(); this.editor.selectAll();
} },
}); });
this.text.on(BI.TextButton.EVENT_CHANGE, function () { this.text.on(TextButton.EVENT_CHANGE, () => {
BI.nextTick(function () { nextTick(() => {
self.fireEvent(BI.SignTextEditor.EVENT_CLICK_LABEL); this.fireEvent(SignTextEditor.EVENT_CLICK_LABEL);
}); });
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [{ items: [
{
el: this.text, el: this.text,
left: 0, left: 0,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}] }
],
}); });
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CONFIRM, function () { this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self._checkText(); this._checkText();
self.fireEvent(BI.SignTextEditor.EVENT_CONFIRM, arguments); this.fireEvent(SignTextEditor.EVENT_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self._checkText(); this._checkText();
self.fireEvent(BI.SignTextEditor.EVENT_CHANGE_CONFIRM, arguments); this.fireEvent(SignTextEditor.EVENT_CHANGE_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ERROR, function () { this.editor.on(Editor.EVENT_ERROR, () => {
self._checkText(); this._checkText();
}); });
BI.createWidget({ createWidget({
type: "bi.vertical", type: VerticalLayout.xtype,
scrolly: false, scrolly: false,
element: this, element: this,
items: [this.editor] items: [this.editor],
}); });
this._showHint(); this._showHint();
self._checkText(); this._checkText();
}, }
_checkText: function () { _checkText() {
var o = this.options; const o = this.options;
BI.nextTick(BI.bind(function () { nextTick(
bind(() => {
if (this.editor.getValue() === "") { if (this.editor.getValue() === "") {
this.text.setValue(o.watermark || ""); this.text.setValue(o.watermark || "");
this.text.element.addClass("bi-water-mark"); this.text.element.addClass("bi-water-mark");
} else { } else {
var v = this.editor.getValue(); let v = this.editor.getValue();
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); this.text.setValue(v);
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} }
}, this)); }, this)
}, );
}
_showInput: function () { _showInput() {
this.editor.visible(); this.editor.visible();
this.text.invisible(); this.text.invisible();
}, }
_showHint: function () { _showHint() {
this.editor.invisible(); this.editor.invisible();
this.text.visible(); this.text.visible();
}, }
setTitle: function (title) { setTitle(title) {
this.text.setTitle(title); this.text.setTitle(title);
}, }
setWarningTitle: function (title) { setWarningTitle(title) {
this.text.setWarningTitle(title); this.text.setWarningTitle(title);
}, }
focus: function () { focus() {
this._showInput(); this._showInput();
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
this._showHint(); this._showHint();
this._checkText(); this._checkText();
}, }
doRedMark: function () { doRedMark() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark(...arguments);
}, }
doHighLight: function () { doHighLight() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight(...arguments);
}, }
unHighLight: function () { unHighLight() {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight(...arguments);
}, }
isValid: function () { isValid() {
return this.editor.isValid(); return this.editor.isValid();
}, }
setErrorText: function (text) { setErrorText(text) {
this.editor.setErrorText(text); this.editor.setErrorText(text);
}, }
getErrorText: function () { getErrorText() {
return this.editor.getErrorText(); return this.editor.getErrorText();
}, }
isEditing: function () { isEditing() {
return this.editor.isEditing(); return this.editor.isEditing();
}, }
getLastValidValue: function () { getLastValidValue() {
return this.editor.getLastValidValue(); return this.editor.getLastValidValue();
}, }
getLastChangedValue: function () { getLastChangedValue() {
return this.editor.getLastChangedValue(); return this.editor.getLastChangedValue();
}, }
setValue: function (v) { setValue(v) {
this.editor.setValue(v); this.editor.setValue(v);
this._checkText(); this._checkText();
}, }
getValue: function () { getValue() {
return this.editor.getValue(); return this.editor.getValue();
}, }
getState: function () { getState() {
return this.text.getValue(); return this.text.getValue();
}, }
setState: function (v) { setState(v) {
var o = this.options; const o = this.options;
this._showHint(); 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); 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 @@
/** import { shortcut, Widget, Layout } from "@/core";
* Created by zcf on 2016/9/22.
*/
BI.SliderIconButton = BI.inherit(BI.Widget, {
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", baseCls: "bi-single-slider-button slider-button bi-high-light-border",
height: 8, height: 8,
width: 8, width: 8,
}, }
constants = {
constants: {
LARGE_SIZE: 16, LARGE_SIZE: 16,
NORMAL_SIZE: 12, NORMAL_SIZE: 12,
LARGE_OFFSET: 4, LARGE_OFFSET: 4,
NORMAL_OFFSET: 6 NORMAL_OFFSET: 6,
}, };
render: function () { render() {
var self = this;
return { 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 @@
/** import {
* Created by zcf on 2016/9/22. shortcut,
*/ createWidget,
BI.SingleSlider = BI.inherit(BI.Single, { parseFloat,
_constant: { 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_WIDTH: 90,
EDITOR_HEIGHT: 20, EDITOR_HEIGHT: 20,
SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH_HALF: 15,
@ -10,19 +31,21 @@ BI.SingleSlider = BI.inherit(BI.Single, {
SLIDER_HEIGHT: 30, SLIDER_HEIGHT: 30,
TRACK_HEIGHT: 24, TRACK_HEIGHT: 24,
TRACK_GAP_HALF: 7, TRACK_GAP_HALF: 7,
TRACK_GAP: 14 TRACK_GAP: 14,
}, }
props: { props = {
baseCls: "bi-single-slider bi-slider-track", baseCls: "bi-single-slider bi-slider-track",
digit: false, digit: false,
unit: "", unit: "",
value: "", value: "",
min: 0, min: 0,
max: 100, max: 100,
}, };
static EVENT_CHANGE = "EVENT_CHANGE";
beforeMount: function () { beforeMount() {
const { value, min, max } = this.options; const { value, min, max } = this.options;
this.setMinAndMax({ this.setMinAndMax({
min, min,
@ -30,164 +53,192 @@ BI.SingleSlider = BI.inherit(BI.Single, {
}); });
this.setValue(value); this.setValue(value);
this.populate(); this.populate();
}, }
render: function () { render() {
var self = this, o = this.options; const o = this.options;
var c = this._constant; const c = this._constant;
this.enable = false; this.enable = false;
this.value = ""; this.value = "";
this.grayTrack = BI.createWidget({ this.grayTrack = createWidget({
type: "bi.layout", type: Layout.xtype,
cls: "gray-track", cls: "gray-track",
height: 6 height: 6,
}); });
this.blueTrack = BI.createWidget({ this.blueTrack = createWidget({
type: "bi.layout", type: Layout.xtype,
cls: "blue-track bi-high-light-background", cls: "blue-track bi-high-light-background",
height: 6 height: 6,
}); });
this.track = this._createTrackWrapper(); this.track = this._createTrackWrapper();
this.slider = BI.createWidget({ this.slider = createWidget({
type: "bi.single_slider_button" type: "bi.single_slider_button",
}); });
this._draggable(this.slider); this._draggable(this.slider);
var sliderVertical = BI.createWidget({ const sliderVertical = createWidget({
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
cls: "slider-wrapper", cls: "slider-wrapper",
columnSize: ["fill"], columnSize: ["fill"],
items: [{ items: [
type: "bi.absolute", {
type: AbsoluteLayout.xtype,
items: [ items: [
{ {
el: this.slider, el: this.slider,
top: 8, top: 8,
} }
], ],
height: c.SLIDER_HEIGHT height: c.SLIDER_HEIGHT,
}], }
],
hgap: c.SLIDER_WIDTH_HALF, hgap: c.SLIDER_WIDTH_HALF,
height: c.SLIDER_HEIGHT height: c.SLIDER_HEIGHT,
}); });
// 这边其实是有问题的,拖拽区域是个圆,在圆的边缘拖拽后放开,这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点 // 这边其实是有问题的,拖拽区域是个圆,在圆的边缘拖拽后放开,这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点
sliderVertical.element.click(function (e) { sliderVertical.element.click(e => {
if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { if (
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; this.enable &&
var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; this.isEnabled() &&
var percent = 0; 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) { if (offset < 0) {
percent = 0; percent = 0;
} }
if (offset > 0 && offset < trackLength) { if (offset > 0 && offset < trackLength) {
percent = offset * 100 / self._getGrayTrackLength(); percent = (offset * 100) / this._getGrayTrackLength();
} }
if (offset >= trackLength) { if (offset >= trackLength) {
percent = 100; percent = 100;
} }
var significantPercent = BI.parseFloat(percent.toFixed(1)); const significantPercent = parseFloat(percent.toFixed(1));
self._setAllPosition(significantPercent); this._setAllPosition(significantPercent);
var v = self._getValueByPercent(significantPercent); let v = this._getValueByPercent(significantPercent);
v = o.digit === false ? v : v.toFixed(o.digit); v = o.digit === false ? v : v.toFixed(o.digit);
self.label.setValue(v); this.label.setValue(v);
self.value = v; this.value = v;
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); this.fireEvent(SingleSlider.EVENT_CHANGE);
} }
}); });
this.label = BI.createWidget({ this.label = createWidget({
type: "bi.sign_text_editor", type: "bi.sign_text_editor",
cls: "slider-editor-button", cls: "slider-editor-button",
text: o.unit, text: o.unit,
width: BI.toPix(c.EDITOR_WIDTH, 2), width: toPix(c.EDITOR_WIDTH, 2),
height: BI.toPix(c.EDITOR_HEIGHT, 2), height: toPix(c.EDITOR_HEIGHT, 2),
allowBlank: false, allowBlank: false,
textAlign: "center", textAlign: "center",
validationChecker: function (v) { validationChecker: v => this._checkValidation(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");
}); });
this.label.on(BI.SignEditor.EVENT_CONFIRM, function () { this.label.element.hover(
var v = BI.parseFloat(this.getValue()); () => {
var percent = self._getPercentByValue(v); this.label.element
var significantPercent = BI.parseFloat(percent.toFixed(1)); .removeClass("bi-border")
self._setAllPosition(significantPercent); .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); this.setValue(v);
self.value = v; this.value = v;
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); this.fireEvent(SingleSlider.EVENT_CHANGE);
}); });
this._setVisible(false); this._setVisible(false);
return { return {
type: "bi.absolute", type: AbsoluteLayout.xtype,
items: [{ items: [
{
el: { el: {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.absolute", {
items: [{ type: AbsoluteLayout.xtype,
items: [
{
el: this.track, el: this.track,
width: "100%", width: "100%",
height: c.TRACK_HEIGHT height: c.TRACK_HEIGHT,
}] }
}], ],
}
],
hgap: c.TRACK_GAP_HALF, hgap: c.TRACK_GAP_HALF,
height: c.TRACK_HEIGHT height: c.TRACK_HEIGHT,
}, },
top: 23, top: 23,
left: 0, left: 0,
width: "100%" width: "100%",
}, { },
{
el: sliderVertical, el: sliderVertical,
top: 20, top: 20,
left: 0, left: 0,
width: "100%" width: "100%",
}, { },
{
el: { el: {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.horizontal_auto", {
items: [this.label] type: HorizontalAutoLayout.xtype,
}], items: [this.label],
}
],
// height: c.EDITOR_HEIGHT // height: c.EDITOR_HEIGHT
}, },
top: 0, top: 0,
left: 0, left: 0,
width: "100%" width: "100%",
}] }
],
}; };
}, }
_draggable: function (widget) { _draggable(widget) {
var self = this, o = this.options; const o = this.options;
var startDrag = false; let startDrag = false;
var size = 0, offset = 0, defaultSize = 0; let size = 0,
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { offset = 0,
defaultSize = 0;
const mouseMoveTracker = new MouseMoveTracker(
(deltaX => {
if (mouseMoveTracker.isDragging()) { if (mouseMoveTracker.isDragging()) {
startDrag = true; startDrag = true;
offset += deltaX; offset += deltaX;
size = optimizeSize(defaultSize + offset); size = optimizeSize(defaultSize + offset);
widget.element.addClass("dragging"); widget.element.addClass("dragging");
var percent = size * 100 / (self._getGrayTrackLength()); const percent = (size * 100) / this._getGrayTrackLength();
var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位,相当于分成了1000份。 const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位,相当于分成了1000份。
self._setBlueTrack(significantPercent); this._setBlueTrack(significantPercent);
self._setLabelPosition(significantPercent); this._setLabelPosition(significantPercent);
self._setSliderPosition(significantPercent); this._setSliderPosition(significantPercent);
var v = self._getValueByPercent(significantPercent); let v = this._getValueByPercent(significantPercent);
v = o.digit === false ? v : v.toFixed(o.digit); v = o.digit === false ? v : v.toFixed(o.digit);
self.label.setValue(v); this.label.setValue(v);
self.value = v; this.value = v;
} }
}, function () { }),
(() => {
if (startDrag === true) { if (startDrag === true) {
size = optimizeSize(size); size = optimizeSize(size);
var percent = size * 100 / (self._getGrayTrackLength()); const percent = (size * 100) / this._getGrayTrackLength();
var significantPercent = BI.parseFloat(percent.toFixed(1)); const significantPercent = parseFloat(percent.toFixed(1));
self._setSliderPosition(significantPercent); this._setSliderPosition(significantPercent);
size = 0; size = 0;
offset = 0; offset = 0;
defaultSize = size; defaultSize = size;
@ -195,8 +246,10 @@ BI.SingleSlider = BI.inherit(BI.Single, {
} }
widget.element.removeClass("dragging"); widget.element.removeClass("dragging");
mouseMoveTracker.releaseMouseMoves(); mouseMoveTracker.releaseMouseMoves();
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); this.fireEvent(SingleSlider.EVENT_CHANGE);
}, window); }),
window
);
widget.element.on("mousedown", function (event) { widget.element.on("mousedown", function (event) {
if (!widget.isEnabled()) { if (!widget.isEnabled()) {
return; return;
@ -206,100 +259,107 @@ BI.SingleSlider = BI.inherit(BI.Single, {
mouseMoveTracker.captureMouseMoves(event); mouseMoveTracker.captureMouseMoves(event);
}); });
function optimizeSize (s) { const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
return BI.clamp(s, 0, self._getGrayTrackLength());
} }
},
_createTrackWrapper: function () { _createTrackWrapper() {
return BI.createWidget({ return createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
items: [{ items: [
{
el: { el: {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.absolute", {
items: [{ type: AbsoluteLayout.xtype,
items: [
{
el: this.grayTrack, el: this.grayTrack,
top: 0, top: 0,
left: 0, left: 0,
width: "100%" width: "100%",
}, { },
{
el: this.blueTrack, el: this.blueTrack,
top: 0, top: 0,
left: 0, left: 0,
width: "0%" width: "0%",
}] }
}], ],
}
],
hgap: 8, hgap: 8,
height: 8 height: 8,
}, },
top: 8, top: 8,
left: 0, left: 0,
width: "100%" width: "100%",
}] }
],
}); });
}, }
_checkValidation: function (v) { _checkValidation(v) {
var o = this.options; const o = this.options;
var valid = false; let valid = false;
if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) { if (isNumeric(v) && !(isNull(v) || v < this.min || v > this.max)) {
if (o.digit === false) { if (o.digit === false) {
valid = true; valid = true;
} else { } else {
var dotText = (v + "").split(".")[1] || ""; const dotText = (`${v}`).split(".")[1] || "";
valid = (dotText.length === o.digit); valid = dotText.length === o.digit;
} }
} }
return valid; return valid;
}, }
_setBlueTrack: function (percent) { _setBlueTrack(percent) {
this.blueTrack.element.css({width: percent + "%"}); this.blueTrack.element.css({ width: `${percent}%` });
}, }
_setLabelPosition: function (percent) { _setLabelPosition(percent) {
// this.label.element.css({left: percent + "%"}); // this.label.element.css({left: percent + "%"});
}, }
_setSliderPosition: function (percent) { _setSliderPosition(percent) {
this.slider.element.css({left: percent + "%"}); this.slider.element.css({ left: `${percent}%` });
}, }
_setAllPosition: function (percent) { _setAllPosition(percent) {
this._setSliderPosition(percent); this._setSliderPosition(percent);
this._setLabelPosition(percent); this._setLabelPosition(percent);
this._setBlueTrack(percent); this._setBlueTrack(percent);
}, }
_setVisible: function (visible) { _setVisible(visible) {
this.slider.setVisible(visible); this.slider.setVisible(visible);
this.label.setVisible(visible); this.label.setVisible(visible);
}, }
_getGrayTrackLength: function () { _getGrayTrackLength() {
return this.grayTrack.element[0].scrollWidth; return this.grayTrack.element[0].scrollWidth;
}, }
_getValueByPercent: function (percent) { _getValueByPercent(percent) {
var thousandth = BI.parseInt(percent * 10); const thousandth = parseInt(percent * 10);
return (((this.max - this.min) * thousandth) / 1000 + this.min);
},
_getPercentByValue: function (v) { return ((this.max - this.min) * thousandth) / 1000 + this.min;
return (v - this.min) * 100 / (this.max - this.min); }
},
_getPercentByValue(v) {
return ((v - this.min) * 100) / (this.max - this.min);
}
getValue: function () { getValue() {
return this.value; return this.value;
}, }
setValue: function (v) { setValue(v) {
var o = this.options; const o = this.options;
v = BI.parseFloat(v); v = parseFloat(v);
v = o.digit === false ? v : v.toFixed(o.digit); v = o.digit === false ? v : v.toFixed(o.digit);
if ((!isNaN(v))) { if (!isNaN(v)) {
if (this._checkValidation(v)) { if (this._checkValidation(v)) {
this.value = v; this.value = v;
} }
@ -310,47 +370,63 @@ BI.SingleSlider = BI.inherit(BI.Single, {
this.value = this.min; this.value = this.min;
} }
} }
}, }
_setEnable: function (b) { _setEnable(b) {
BI.SingleSlider.superclass._setEnable.apply(this, [b]); super._setEnable.apply(this, [b]);
if (b) { if (b) {
this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); this.blueTrack.element
.removeClass("disabled-blue-track")
.addClass("blue-track");
} else { } else {
this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); this.blueTrack.element
.removeClass("blue-track")
.addClass("disabled-blue-track");
}
} }
},
setMinAndMax: function (v) { setMinAndMax(v) {
var minNumber = BI.parseFloat(v.min); const minNumber = parseFloat(v.min);
var maxNumber = BI.parseFloat(v.max); const maxNumber = parseFloat(v.max);
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) {
this.min = minNumber; this.min = minNumber;
this.max = maxNumber; this.max = maxNumber;
} }
}, }
reset: function () { reset() {
this._setVisible(false); this._setVisible(false);
this.enable = false; this.enable = false;
this.value = ""; this.value = "";
this.min = 0; this.min = 0;
this.max = 0; this.max = 0;
this._setBlueTrack(0); this._setBlueTrack(0);
}, }
populate: function () { populate() {
var o = this.options; const o = this.options;
if (!isNaN(this.min) && !isNaN(this.max)) { if (!isNaN(this.min) && !isNaN(this.max)) {
this._setVisible(true); this._setVisible(true);
this.enable = true; this.enable = true;
if (o.digit) { 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 { } 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.label.setValue(this.value);
this._setAllPosition(this._getPercentByValue(this.value)); this._setAllPosition(this._getPercentByValue(this.value));
} else { } 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 @@
/** import {
* Created by Urthur on 2017/9/12. shortcut,
*/ createWidget,
BI.SingleSliderLabel = BI.inherit(BI.Single, { parseFloat,
_constant: { 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_WIDTH: 90,
EDITOR_HEIGHT: 20, EDITOR_HEIGHT: 20,
HEIGHT: 20, HEIGHT: 20,
@ -11,19 +29,20 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
SLIDER_HEIGHT: 30, SLIDER_HEIGHT: 30,
TRACK_HEIGHT: 24, TRACK_HEIGHT: 24,
TRACK_GAP_HALF: 7, TRACK_GAP_HALF: 7,
TRACK_GAP: 14 TRACK_GAP: 14,
}, }
props = {
props: {
baseCls: "bi-single-slider-label bi-slider-track", baseCls: "bi-single-slider-label bi-slider-track",
digit: false, digit: false,
unit: "", unit: "",
value: "", value: "",
min: 0, min: 0,
max: 100, max: 100,
}, };
static EVENT_CHANGE = "EVENT_CHANGE";
beforeMount: function () { beforeMount() {
const { value, min, max } = this.options; const { value, min, max } = this.options;
this.setMinAndMax({ this.setMinAndMax({
min, min,
@ -31,143 +50,168 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
}); });
this.setValue(value); this.setValue(value);
this.populate(); this.populate();
}, }
render: function () { render() {
var self = this, o = this.options; const o = this.options;
var c = this._constant; const c = this._constant;
this.enable = false; this.enable = false;
this.value = ""; this.value = "";
this.grayTrack = BI.createWidget({ this.grayTrack = createWidget({
type: "bi.layout", type: Layout.xtype,
cls: "gray-track", cls: "gray-track",
height: 6 height: 6,
}); });
this.blueTrack = BI.createWidget({ this.blueTrack = createWidget({
type: "bi.layout", type: Layout.xtype,
cls: "blue-track bi-high-light-background", cls: "blue-track bi-high-light-background",
height: 6 height: 6,
}); });
this.track = this._createTrackWrapper(); this.track = this._createTrackWrapper();
this.slider = BI.createWidget({ this.slider = createWidget({
type: "bi.single_slider_button" type: "bi.single_slider_button",
}); });
this._draggable(this.slider); this._draggable(this.slider);
var sliderVertical = BI.createWidget({ const sliderVertical = createWidget({
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
columnSize: ["fill"], columnSize: ["fill"],
items: [{ items: [
type: "bi.absolute", {
type: AbsoluteLayout.xtype,
items: [ items: [
{ {
el: this.slider, el: this.slider,
top: 8, top: 8,
} }
], ],
height: c.SLIDER_HEIGHT height: c.SLIDER_HEIGHT,
}], }
],
hgap: c.SLIDER_WIDTH_HALF, hgap: c.SLIDER_WIDTH_HALF,
height: c.SLIDER_HEIGHT height: c.SLIDER_HEIGHT,
}); });
sliderVertical.element.click(function (e) { sliderVertical.element.click(e => {
if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { if (
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; this.enable &&
var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; this.isEnabled() &&
var percent = 0; 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) { if (offset < 0) {
percent = 0; percent = 0;
} }
if (offset > 0 && offset < trackLength) { if (offset > 0 && offset < trackLength) {
percent = offset * 100 / self._getGrayTrackLength(); percent = (offset * 100) / this._getGrayTrackLength();
} }
if (offset >= trackLength) { if (offset >= trackLength) {
percent = 100; percent = 100;
} }
var significantPercent = BI.parseFloat(percent.toFixed(1)); const significantPercent = parseFloat(percent.toFixed(1));
self._setAllPosition(significantPercent); this._setAllPosition(significantPercent);
var v = self._getValueByPercent(significantPercent); let v = this._getValueByPercent(significantPercent);
v = o.digit === false ? v : v.toFixed(o.digit); v = o.digit === false ? v : v.toFixed(o.digit);
self.label.setText(v + o.unit); this.label.setText(v + o.unit);
self.value = v; this.value = v;
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
} }
}); });
this.label = BI.createWidget({ this.label = createWidget({
type: "bi.label", type: Label.xtype,
height: c.HEIGHT, height: c.HEIGHT,
width: BI.toPix(c.EDITOR_WIDTH, 2) width: toPix(c.EDITOR_WIDTH, 2),
}); });
this._setVisible(false); this._setVisible(false);
return ({
type: "bi.absolute", return {
items: [{ type: AbsoluteLayout.xtype,
items: [
{
el: { el: {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.absolute", {
items: [{ type: AbsoluteLayout.xtype,
items: [
{
el: this.track, el: this.track,
width: "100%", width: "100%",
height: c.TRACK_HEIGHT height: c.TRACK_HEIGHT,
}] }
}], ],
}
],
hgap: c.TRACK_GAP_HALF, hgap: c.TRACK_GAP_HALF,
height: c.TRACK_HEIGHT height: c.TRACK_HEIGHT,
}, },
top: 13, top: 13,
left: 0, left: 0,
width: "100%" width: "100%",
}, { },
{
el: sliderVertical, el: sliderVertical,
top: 10, top: 10,
left: 0, left: 0,
width: "100%" width: "100%",
}, { },
{
el: { el: {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.horizontal_auto", {
items: [this.label] type: HorizontalAutoLayout.xtype,
}], items: [this.label],
height: c.EDITOR_HEIGHT }
],
height: c.EDITOR_HEIGHT,
}, },
top: 0, top: 0,
left: 0, left: 0,
width: "100%" width: "100%",
}] }
}); ],
}, };
}
_draggable: function (widget) { _draggable(widget) {
var self = this, o = this.options; const o = this.options;
var startDrag = false; let startDrag = false;
var size = 0, offset = 0, defaultSize = 0; let size = 0,
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { offset = 0,
defaultSize = 0;
const mouseMoveTracker = new MouseMoveTracker(
(deltaX => {
if (mouseMoveTracker.isDragging()) { if (mouseMoveTracker.isDragging()) {
startDrag = true; startDrag = true;
offset += deltaX; offset += deltaX;
size = optimizeSize(defaultSize + offset); size = optimizeSize(defaultSize + offset);
widget.element.addClass("dragging"); widget.element.addClass("dragging");
var percent = size * 100 / (self._getGrayTrackLength()); const percent = (size * 100) / this._getGrayTrackLength();
var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位,相当于分成了1000份。 const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位,相当于分成了1000份。
self._setBlueTrack(significantPercent); this._setBlueTrack(significantPercent);
self._setLabelPosition(significantPercent); this._setLabelPosition(significantPercent);
self._setSliderPosition(significantPercent); this._setSliderPosition(significantPercent);
var v = self._getValueByPercent(significantPercent); let v = this._getValueByPercent(significantPercent);
v = o.digit === false ? v : v.toFixed(o.digit); v = o.digit === false ? v : v.toFixed(o.digit);
self.label.setValue(v + o.unit); this.label.setValue(v + o.unit);
self.value = v; this.value = v;
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
} }
}, function () { }),
(() => {
if (startDrag === true) { if (startDrag === true) {
size = optimizeSize(size); size = optimizeSize(size);
var percent = size * 100 / (self._getGrayTrackLength()); const percent = (size * 100) / this._getGrayTrackLength();
var significantPercent = BI.parseFloat(percent.toFixed(1)); const significantPercent = parseFloat(percent.toFixed(1));
self._setSliderPosition(significantPercent); this._setSliderPosition(significantPercent);
size = 0; size = 0;
offset = 0; offset = 0;
defaultSize = size; defaultSize = size;
@ -175,8 +219,10 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
} }
widget.element.removeClass("dragging"); widget.element.removeClass("dragging");
mouseMoveTracker.releaseMouseMoves(); mouseMoveTracker.releaseMouseMoves();
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
}, window); }),
window
);
widget.element.on("mousedown", function (event) { widget.element.on("mousedown", function (event) {
if (!widget.isEnabled()) { if (!widget.isEnabled()) {
return; return;
@ -186,99 +232,109 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
mouseMoveTracker.captureMouseMoves(event); mouseMoveTracker.captureMouseMoves(event);
}); });
function optimizeSize(s) { const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
return BI.clamp(s, 0, self._getGrayTrackLength());
} }
},
_createTrackWrapper: function () { _createTrackWrapper() {
return BI.createWidget({ return createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
items: [{ items: [
{
el: { el: {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.absolute", {
items: [{ type: AbsoluteLayout.xtype,
items: [
{
el: this.grayTrack, el: this.grayTrack,
top: 0, top: 0,
left: 0, left: 0,
width: "100%" width: "100%",
}, { },
{
el: this.blueTrack, el: this.blueTrack,
top: 0, top: 0,
left: 0, left: 0,
width: "0%" width: "0%",
}] }
}], ],
}
],
hgap: 8, hgap: 8,
height: 8 height: 8,
}, },
top: 8, top: 8,
left: 0, left: 0,
width: "100%" width: "100%",
}] }
],
}); });
}, }
_checkValidation: function (v) { _checkValidation(v) {
return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max); return isNumeric(v) && !(isNull(v) || v < this.min || v > this.max);
}, }
_setBlueTrack: function (percent) { _setBlueTrack(percent) {
this.blueTrack.element.css({ width: percent + "%" }); this.blueTrack.element.css({ width: `${percent}%` });
}, }
_setLabelPosition: function (percent) { _setLabelPosition(percent) {
// this.label.element.css({left: percent + "%"}); // this.label.element.css({left: percent + "%"});
}, }
_setSliderPosition: function (percent) { _setSliderPosition(percent) {
this.slider.element.css({ left: percent + "%" }); this.slider.element.css({ left: `${percent}%` });
}, }
_setAllPosition: function (percent) { _setAllPosition(percent) {
this._setSliderPosition(percent); this._setSliderPosition(percent);
this._setLabelPosition(percent); this._setLabelPosition(percent);
this._setBlueTrack(percent); this._setBlueTrack(percent);
}, }
_setVisible: function (visible) { _setVisible(visible) {
this.slider.setVisible(visible); this.slider.setVisible(visible);
this.label.setVisible(visible); this.label.setVisible(visible);
}, }
_getGrayTrackLength: function () { _getGrayTrackLength() {
return this.grayTrack.element[0].scrollWidth; return this.grayTrack.element[0].scrollWidth;
}, }
_getValueByPercent: function (percent) { _getValueByPercent(percent) {
var thousandth = BI.parseInt(percent * 10); const thousandth = parseInt(percent * 10);
return (((this.max - this.min) * thousandth) / 1000 + this.min);
},
_getPercentByValue: function (v) { return ((this.max - this.min) * thousandth) / 1000 + this.min;
return (v - this.min) * 100 / (this.max - this.min); }
},
_setEnable: function (b) { _getPercentByValue(v) {
BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]); return ((v - this.min) * 100) / (this.max - this.min);
}
_setEnable(b) {
super._setEnable.apply(this, [b]);
if (b) { if (b) {
this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); this.blueTrack.element
.removeClass("disabled-blue-track")
.addClass("blue-track");
} else { } 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; return this.value;
}, }
setValue: function (v) { setValue(v) {
var o = this.options; const o = this.options;
v = BI.parseFloat(v); v = parseFloat(v);
v = o.digit === false ? v : v.toFixed(o.digit); v = o.digit === false ? v : v.toFixed(o.digit);
if ((!isNaN(v))) { if (!isNaN(v)) {
if (this._checkValidation(v)) { if (this._checkValidation(v)) {
this.value = v; this.value = v;
} }
@ -289,32 +345,32 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
this.value = this.min; this.value = this.min;
} }
} }
}, }
setMinAndMax: function (v) { setMinAndMax(v) {
var minNumber = BI.parseFloat(v.min); const minNumber = parseFloat(v.min);
var maxNumber = BI.parseFloat(v.max); const maxNumber = parseFloat(v.max);
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) { if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) {
this.min = minNumber; this.min = minNumber;
this.max = maxNumber; this.max = maxNumber;
} }
}, }
reset: function () { reset() {
this._setVisible(false); this._setVisible(false);
this.enable = false; this.enable = false;
this.value = ""; this.value = "";
this.min = 0; this.min = 0;
this.max = 0; this.max = 0;
this._setBlueTrack(0); this._setBlueTrack(0);
}, }
populate: function () { populate() {
var o = this.options; const o = this.options;
if (!isNaN(this.min) && !isNaN(this.max)) { if (!isNaN(this.min) && !isNaN(this.max)) {
this._setVisible(true); this._setVisible(true);
this.enable = 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.label.setValue(this.value + o.unit);
this._setAllPosition(this._getPercentByValue(this.value)); this._setAllPosition(this._getPercentByValue(this.value));
} else { } 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 @@
/** import {
* normal single slider shortcut,
* Created by Young on 2017/6/21. createWidget,
*/ parseFloat,
BI.SingleSliderNormal = BI.inherit(BI.Single, { 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, HEIGHT: 28,
SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH_HALF: 15,
SLIDER_WIDTH: 30, SLIDER_WIDTH: 30,
SLIDER_HEIGHT: 30, SLIDER_HEIGHT: 30,
TRACK_HEIGHT: 24, TRACK_HEIGHT: 24,
TRACK_GAP_HALF: 7, TRACK_GAP_HALF: 7,
TRACK_GAP: 14 TRACK_GAP: 14,
}, }
props = {
props: {
baseCls: "bi-single-slider-normal bi-slider-track", baseCls: "bi-single-slider-normal bi-slider-track",
min: 0, min: 0,
max: 100, max: 100,
value: "", value: "",
// color: "#3f8ce8" };
},
beforeMount: function () { static EVENT_DRAG = "EVENT_DRAG";
beforeMount() {
const { value, min, max } = this.options; const { value, min, max } = this.options;
this.setMinAndMax({ this.setMinAndMax({
min, min,
@ -30,111 +45,130 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
}); });
this.setValue(value); this.setValue(value);
this.populate(); this.populate();
}, }
render: function () { render() {
var self = this; const c = this._constant;
var o = this.options;
var c = this._constant;
var track = this._createTrack(); const track = this._createTrack();
this.slider = BI.createWidget({ this.slider = createWidget({
type: "bi.single_slider_button" type: "bi.single_slider_button",
}); });
this._draggable(this.slider); this._draggable(this.slider);
var sliderVertical = BI.createWidget({ const sliderVertical = createWidget({
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
columnSize: ["fill"], columnSize: ["fill"],
items: [{ items: [
type: "bi.absolute", {
type: AbsoluteLayout.xtype,
items: [ items: [
{ {
el: this.slider, el: this.slider,
top: 8, top: 8,
} }
], ],
height: c.SLIDER_HEIGHT height: c.SLIDER_HEIGHT,
}], }
],
hgap: c.SLIDER_WIDTH_HALF, hgap: c.SLIDER_WIDTH_HALF,
height: c.SLIDER_HEIGHT height: c.SLIDER_HEIGHT,
}); });
sliderVertical.element.click(function (e) { sliderVertical.element.click(e => {
if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { if (
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; this.enable &&
var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; this.isEnabled() &&
var percent = 0; 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) { if (offset < 0) {
percent = 0; percent = 0;
} }
if (offset > 0 && offset < trackLength) { if (offset > 0 && offset < trackLength) {
percent = offset * 100 / self._getGrayTrackLength(); percent = (offset * 100) / this._getGrayTrackLength();
} }
if (offset >= trackLength) { if (offset >= trackLength) {
percent = 100; percent = 100;
} }
var significantPercent = BI.parseFloat(percent.toFixed(1)); const significantPercent = parseFloat(percent.toFixed(1));
self._setAllPosition(significantPercent); this._setAllPosition(significantPercent);
var v = self._getValueByPercent(significantPercent); const v = this._getValueByPercent(significantPercent);
self.value = v; this.value = v;
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); this.fireEvent(SingleSlider.EVENT_CHANGE);
} }
}); });
return { return {
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [{ items: [
{
el: { el: {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.absolute", {
items: [{ type: AbsoluteLayout.xtype,
items: [
{
el: track, el: track,
width: "100%", width: "100%",
height: c.TRACK_HEIGHT height: c.TRACK_HEIGHT,
}] }
}], ],
}
],
hgap: c.TRACK_GAP_HALF, hgap: c.TRACK_GAP_HALF,
height: c.TRACK_HEIGHT height: c.TRACK_HEIGHT,
}, },
top: 3, top: 3,
left: 0, left: 0,
width: "100%" width: "100%",
}, { },
{
el: sliderVertical, el: sliderVertical,
top: 0, top: 0,
left: 0, left: 0,
width: "100%" width: "100%",
}] }
],
}; };
}, }
_draggable: function (widget) { _draggable(widget) {
var self = this, o = this.options; const o = this.options;
var startDrag = false; let startDrag = false;
var size = 0, offset = 0, defaultSize = 0; let size = 0,
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { offset = 0,
defaultSize = 0;
const mouseMoveTracker = new MouseMoveTracker(
(deltaX => {
if (mouseMoveTracker.isDragging()) { if (mouseMoveTracker.isDragging()) {
startDrag = true; startDrag = true;
offset += deltaX; offset += deltaX;
size = optimizeSize(defaultSize + offset); size = optimizeSize(defaultSize + offset);
widget.element.addClass("dragging"); widget.element.addClass("dragging");
var percent = size * 100 / (self._getGrayTrackLength()); const percent = (size * 100) / this._getGrayTrackLength();
var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位,相当于分成了1000份。 const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位,相当于分成了1000份。
self._setBlueTrack(significantPercent); this._setBlueTrack(significantPercent);
self._setSliderPosition(significantPercent); this._setSliderPosition(significantPercent);
var v = self._getValueByPercent(significantPercent); let v = this._getValueByPercent(significantPercent);
v = o.digit === false ? v : v.toFixed(o.digit); v = o.digit === false ? v : v.toFixed(o.digit);
self.value = v; this.value = v;
self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v); this.fireEvent(SingleSliderNormal.EVENT_DRAG, v);
} }
}, function () { }),
(() => {
if (startDrag === true) { if (startDrag === true) {
size = optimizeSize(size); size = optimizeSize(size);
var percent = size * 100 / (self._getGrayTrackLength()); const percent = (size * 100) / this._getGrayTrackLength();
var significantPercent = BI.parseFloat(percent.toFixed(1)); const significantPercent = parseFloat(percent.toFixed(1));
self._setSliderPosition(significantPercent); this._setSliderPosition(significantPercent);
size = 0; size = 0;
offset = 0; offset = 0;
defaultSize = size; defaultSize = size;
@ -142,8 +176,10 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
} }
widget.element.removeClass("dragging"); widget.element.removeClass("dragging");
mouseMoveTracker.releaseMouseMoves(); mouseMoveTracker.releaseMouseMoves();
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); this.fireEvent(SingleSlider.EVENT_CHANGE);
}, window); }),
window
);
widget.element.on("mousedown", function (event) { widget.element.on("mousedown", function (event) {
if (!widget.isEnabled()) { if (!widget.isEnabled()) {
return; return;
@ -153,110 +189,120 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
mouseMoveTracker.captureMouseMoves(event); mouseMoveTracker.captureMouseMoves(event);
}); });
function optimizeSize (s) { const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
return BI.clamp(s, 0, self._getGrayTrackLength());
} }
},
_createTrack: function () { _createTrack() {
var self = this; this.grayTrack = createWidget({
var c = this._constant; type: Layout.xtype,
this.grayTrack = BI.createWidget({
type: "bi.layout",
cls: "gray-track", cls: "gray-track",
height: 6 height: 6,
}); });
this.blueTrack = BI.createWidget({ this.blueTrack = createWidget({
type: "bi.layout", type: Layout.xtype,
cls: "blue-track bi-high-light-background", cls: "blue-track bi-high-light-background",
height: 6 height: 6,
}); });
if (this.options.color) { if (this.options.color) {
this.blueTrack.element.css({"background-color": this.options.color}); this.blueTrack.element.css({
"background-color": this.options.color,
});
} }
return { return {
type: "bi.absolute", type: AbsoluteLayout.xtype,
items: [{ items: [
{
el: { el: {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.absolute", {
items: [{ type: AbsoluteLayout.xtype,
items: [
{
el: this.grayTrack, el: this.grayTrack,
top: 0, top: 0,
left: 0, left: 0,
width: "100%" width: "100%",
}, { },
{
el: this.blueTrack, el: this.blueTrack,
top: 0, top: 0,
left: 0, left: 0,
width: "0%" width: "0%",
}] }
}], ],
}
],
hgap: 8, hgap: 8,
height: 8 height: 8,
}, },
top: 8, top: 8,
left: 0, left: 0,
width: "100%" width: "100%",
}],
ref: function (ref) {
self.track = ref;
} }
}; ],
ref: _ref => {
this.track = _ref;
}, },
};
}
_checkValidation: function (v) { _checkValidation(v) {
return !(BI.isNull(v) || v < this.min || v > this.max); return !(isNull(v) || v < this.min || v > this.max);
}, }
_setBlueTrack: function (percent) { _setBlueTrack(percent) {
this.blueTrack.element.css({width: percent + "%"}); this.blueTrack.element.css({ width: `${percent}%` });
}, }
_setSliderPosition: function (percent) { _setSliderPosition(percent) {
this.slider.element.css({left: percent + "%"}); this.slider.element.css({ left: `${percent}%` });
}, }
_setAllPosition: function (percent) { _setAllPosition(percent) {
this._setSliderPosition(percent); this._setSliderPosition(percent);
this._setBlueTrack(percent); this._setBlueTrack(percent);
}, }
_setVisible: function (visible) { _setVisible(visible) {
this.slider.setVisible(visible); this.slider.setVisible(visible);
}, }
_getGrayTrackLength: function () { _getGrayTrackLength() {
return this.grayTrack.element[0].scrollWidth; return this.grayTrack.element[0].scrollWidth;
}, }
_getValueByPercent: function (percent) { _getValueByPercent(percent) {
var thousandth = BI.parseInt(percent * 10); const thousandth = parseInt(percent * 10);
return (((this.max - this.min) * thousandth) / 1000 + this.min);
},
_getPercentByValue: function (v) { return ((this.max - this.min) * thousandth) / 1000 + this.min;
return (v - this.min) * 100 / (this.max - this.min); }
},
_setEnable: function (b) { _getPercentByValue(v) {
BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]); return ((v - this.min) * 100) / (this.max - this.min);
}
_setEnable(b) {
super._setEnable.apply(this, [b]);
if (b) { if (b) {
this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); this.blueTrack.element
.removeClass("disabled-blue-track")
.addClass("blue-track");
} else { } 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; return this.value;
}, }
setValue: function (v) { setValue(v) {
var value = BI.parseFloat(v); const value = parseFloat(v);
if ((!isNaN(value))) { if (!isNaN(value)) {
if (this._checkValidation(value)) { if (this._checkValidation(value)) {
this.value = value; this.value = value;
} }
@ -267,37 +313,35 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
this.value = this.min; this.value = this.min;
} }
} }
}, }
setMinAndMax: function (v) { setMinAndMax(v) {
var minNumber = BI.parseFloat(v.min); const minNumber = parseFloat(v.min);
var maxNumber = BI.parseFloat(v.max); const maxNumber = parseFloat(v.max);
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) {
this.min = minNumber; this.min = minNumber;
this.max = maxNumber; this.max = maxNumber;
} }
}, }
reset: function () { reset() {
this._setVisible(false); this._setVisible(false);
this.enable = false; this.enable = false;
this.value = ""; this.value = "";
this.min = 0; this.min = 0;
this.max = 0; this.max = 0;
this._setBlueTrack(0); this._setBlueTrack(0);
}, }
populate: function () { populate() {
if (!isNaN(this.min) && !isNaN(this.max)) { if (!isNaN(this.min) && !isNaN(this.max)) {
this._setVisible(true); this._setVisible(true);
this.enable = 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)); this._setAllPosition(this._getPercentByValue(this.value));
} else { } else {
this._setAllPosition(100); this._setAllPosition(100);
} }
} }
} }
}); }
BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG";
BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);

Loading…
Cancel
Save