Browse Source

KERNEL-14081 refactor: case/loader、segment、toolbar

es6
Zhenfei.Li 2 years ago
parent
commit
0591f0ded9
  1. 2
      es6.js
  2. 12
      src/case/index.js
  3. 3
      src/case/loader/index.js
  4. 131
      src/case/loader/loader.lazy.js
  5. 188
      src/case/loader/loader.list.js
  6. 171
      src/case/loader/sort.list.js
  7. 49
      src/case/segment/button.segment.js
  8. 2
      src/case/segment/index.js
  9. 77
      src/case/segment/segment.js
  10. 134
      src/case/toolbar/toolbar.multiselect.js
  11. 367
      src/core/platform/web/dom.js
  12. 3
      src/core/utils/color.js

2
es6.js

@ -104,6 +104,8 @@ collection.methods.forEach(el => {
"each",
"contains",
"remove",
"createItems",
"makeArrayByArray",
];
target.forEach(t => {

12
src/case/index.js

@ -3,6 +3,9 @@ import * as calendarItem from "./calendar";
import * as pager from "./pager";
import * as editor from "./editor";
import * as trigger from "./trigger";
import * as loader from "./loader";
import * as segment from "./segment";
import { MultiSelectBar } from "./toolbar/toolbar.multiselect";
Object.assign(BI, {
...button,
@ -10,6 +13,9 @@ Object.assign(BI, {
...pager,
...editor,
...trigger,
...loader,
...segment,
MultiSelectBar,
});
export * from "./button";
@ -17,4 +23,8 @@ export * from "./calendar";
export * from "./pager";
export * from "./editor";
export * from "./trigger";
export * from "./loader";
export * from "./segment";
export {
MultiSelectBar
};

3
src/case/loader/index.js

@ -0,0 +1,3 @@
export { LazyLoader } from "./loader.lazy";
export { ListLoader } from "./loader.list";
export { SortList } from "./sort.list";

131
src/case/loader/loader.lazy.js

@ -1,103 +1,106 @@
/**
* Created by roy on 15/11/6.
*/
BI.LazyLoader = BI.inherit(BI.Widget, {
_const: {
PAGE: 100
},
_defaultConfig: function () {
return BI.extend(BI.LazyLoader.superclass._defaultConfig.apply(this, arguments), {
import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core";
import { Loader } from "@/base";
@shortcut()
export class LazyLoader extends Widget {
static xtype = "bi.lazy_loader"
_const = {
PAGE: 100,
};
static EVENT_CHANGE = "EVENT_CHANGE"
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-lazy-loader",
el: {},
items: []
items: [],
});
},
}
_init: function () {
var self = this, o = this.options;
BI.LazyLoader.superclass._init.apply(this, arguments);
var all = o.items.length;
this.loader = BI.createWidget({
_init() {
const o = this.options;
super._init(...arguments);
const all = o.items.length;
this.loader = createWidget({
type: "bi.loader",
element: this,
// 下面是button_group的属性
el: o.el,
itemsCreator: function (options, populate) {
populate(self._getNextItems(options));
itemsCreator: (options, populate) => {
populate(this._getNextItems(options));
},
hasNext: function (option) {
return option.count < all;
}
hasNext: option => option.count < all,
});
this.loader.on(BI.Loader.EVENT_CHANGE, function (obj) {
self.fireEvent(BI.LazyLoader.EVENT_CHANGE, obj);
this.loader.on(Loader.EVENT_CHANGE, obj => {
this.fireEvent(LazyLoader.EVENT_CHANGE, obj);
});
},
_getNextItems: function (options) {
var self = this, o = this.options;
var lastNum = o.items.length - this._const.PAGE * (options.times - 1);
var lastItems = BI.takeRight(o.items, lastNum);
var nextItems = BI.take(lastItems, this._const.PAGE);
}
_getNextItems(options) {
const o = this.options;
const lastNum = o.items.length - this._const.PAGE * (options.times - 1);
const lastItems = takeRight(o.items, lastNum);
const nextItems = take(lastItems, this._const.PAGE);
return nextItems;
},
}
populate: function (items) {
populate(items) {
this.loader.populate(items);
},
}
addItems: function (items) {
addItems(items) {
this.loader.addItems(items);
},
}
empty: function () {
empty() {
this.loader.empty();
},
}
setNotSelectedValue: function () {
this.loader.setNotSelectedValue.apply(this.loader, arguments);
},
setNotSelectedValue() {
this.loader.setNotSelectedValue(...arguments);
}
getNotSelectedValue: function () {
getNotSelectedValue() {
return this.loader.getNotSelectedValue();
},
}
setValue: function () {
this.loader.setValue.apply(this.loader, arguments);
},
setValue() {
this.loader.setValue(...arguments);
}
getValue: function () {
return this.loader.getValue.apply(this.loader, arguments);
},
getValue() {
return this.loader.getValue(...arguments);
}
getAllButtons: function () {
getAllButtons() {
return this.loader.getAllButtons();
},
}
getAllLeaves: function () {
getAllLeaves() {
return this.loader.getAllLeaves();
},
}
getSelectedButtons: function () {
getSelectedButtons() {
return this.loader.getSelectedButtons();
},
}
getNotSelectedButtons: function () {
getNotSelectedButtons() {
return this.loader.getNotSelectedButtons();
},
}
getIndexByValue: function (value) {
getIndexByValue(value) {
return this.loader.getIndexByValue(value);
},
}
getNodeById: function (id) {
getNodeById(id) {
return this.loader.getNodeById(id);
},
}
getNodeByValue: function (value) {
getNodeByValue(value) {
return this.loader.getNodeByValue(value);
}
});
BI.LazyLoader.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.lazy_loader", BI.LazyLoader);
}

188
src/case/loader/loader.list.js

@ -1,105 +1,112 @@
import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, nextTick, bind, isEmpty, isNumber, isObject, isFunction, each, isNotEmptyArray, DOM } from "@/core";
/**
* 恶心的加载控件 为解决排序问题引入的控件
*
* Created by GUY on 2015/11/12.
* @class BI.ListLoader
* @extends BI.Widget
* @class ListLoader
* @extends Widget
*/
BI.ListLoader = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.ListLoader.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-list-loader",
@shortcut()
export class ListLoader extends Widget {
static xtype = "bi.list_loader"
isDefaultInit: true, // 是否默认初始化数据
static EVENT_CHANGE = "EVENT_CHANGE"
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-list-loader",
isDefaultInit: true, // 是否默认初始化数据
// 下面是button_group的属性
el: {
type: "bi.button_group"
type: "bi.button_group",
},
items: [],
itemsCreator: BI.emptyFn,
onLoaded: BI.emptyFn,
itemsCreator: emptyFn,
onLoaded: emptyFn,
// 下面是分页信息
count: false,
next: {},
hasNext: BI.emptyFn
hasNext: emptyFn,
});
},
}
_nextLoad: function () {
var self = this, o = this.options;
_nextLoad() {
const o = this.options;
this.next.setLoading();
o.itemsCreator.apply(this, [{times: ++this.times}, function () {
self.next.setLoaded();
self.addItems.apply(self, arguments);
o.itemsCreator.apply(this, [{
times: ++this.times,
}, (...args) => {
this.next.setLoaded();
this.addItems(...args);
}]);
},
}
_init: function () {
BI.ListLoader.superclass._init.apply(this, arguments);
var self = this, o = this.options;
_init() {
super._init(...arguments);
const o = this.options;
if (o.itemsCreator === false) {
o.next = false;
}
this.button_group = BI.createWidget(o.el, {
this.button_group = createWidget(o.el, {
type: "bi.button_group",
element: this,
chooseType: 0,
items: o.items,
behaviors: {},
layouts: [{
type: "bi.vertical"
}]
type: "bi.vertical",
}],
});
this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.ListLoader.EVENT_CHANGE, obj);
this.button_group.on(Controller.EVENT_CHANGE, (...args) => {
const [type, , obj] = args;
this.fireEvent(Controller.EVENT_CHANGE, ...args);
if (type === Events.CLICK) {
this.fireEvent(ListLoader.EVENT_CHANGE, obj);
}
});
if (o.next !== false) {
this.next = BI.createWidget(BI.extend({
type: "bi.loading_bar"
this.next = createWidget(extend({
type: "bi.loading_bar",
}, o.next));
this.next.on(BI.Controller.EVENT_CHANGE, function (type) {
if (type === BI.Events.CLICK) {
self._nextLoad();
this.next.on(Controller.EVENT_CHANGE, type => {
if (type === Events.CLICK) {
this._nextLoad();
}
});
}
BI.createWidget({
createWidget({
type: "bi.vertical",
element: this,
items: [this.next]
items: [this.next],
});
o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () {
o.isDefaultInit && isEmpty(o.items) && nextTick(bind(function () {
this.populate();
}, this));
if (BI.isNotEmptyArray(o.items)) {
if (isNotEmptyArray(o.items)) {
this.populate(o.items);
}
},
}
hasNext: function () {
var o = this.options;
if (BI.isNumber(o.count)) {
hasNext() {
const o = this.options;
if (isNumber(o.count)) {
return this.count < o.count;
}
return !!o.hasNext.apply(this, [{
times: this.times,
count: this.count
count: this.count,
}]);
},
}
addItems: function (items) {
addItems(items) {
this.count += items.length;
if (BI.isObject(this.next)) {
if (isObject(this.next)) {
this.options.items = this.options.items.concat(items);
if (this.hasNext()) {
this.next.setLoaded();
@ -107,90 +114,91 @@ BI.ListLoader = BI.inherit(BI.Widget, {
this.next.setEnd();
}
}
this.button_group.addItems.apply(this.button_group, arguments);
this.button_group.addItems(...arguments);
this.next.element.appendTo(this.element);
},
}
populate: function (items) {
var self = this, o = this.options;
if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) {
o.itemsCreator.apply(this, [{times: 1}, function () {
if (arguments.length === 0) {
populate(items) {
const o = this.options;
if (arguments.length === 0 && (isFunction(o.itemsCreator))) {
o.itemsCreator.apply(this, [{
times: 1,
}, (...args) => {
if (args.length === 0) {
throw new Error("参数不能为空");
}
self.populate.apply(self, arguments);
this.populate(...args);
o.onLoaded();
}]);
return;
}
this.options.items = items;
this.times = 1;
this.count = 0;
this.count += items.length;
if (BI.isObject(this.next)) {
if (isObject(this.next)) {
if (this.hasNext()) {
this.next.setLoaded();
} else {
this.next.invisible();
}
}
BI.DOM.hang([this.next]);
this.button_group.populate.apply(this.button_group, arguments);
DOM.hang([this.next]);
this.button_group.populate(...arguments);
this.next.element.appendTo(this.element);
},
}
empty: function () {
BI.DOM.hang([this.next]);
empty() {
DOM.hang([this.next]);
this.button_group.empty();
this.next.element.appendTo(this.element);
BI.each([this.next], function (i, ob) {
each([this.next], (i, ob) => {
ob && ob.setVisible(false);
});
},
}
setNotSelectedValue: function () {
this.button_group.setNotSelectedValue.apply(this.button_group, arguments);
},
setNotSelectedValue() {
this.button_group.setNotSelectedValue(...arguments);
}
getNotSelectedValue: function () {
getNotSelectedValue() {
return this.button_group.getNotSelectedValue();
},
}
setValue: function () {
this.button_group.setValue.apply(this.button_group, arguments);
},
setValue() {
this.button_group.setValue(...arguments);
}
getValue: function () {
return this.button_group.getValue.apply(this.button_group, arguments);
},
getValue() {
return this.button_group.getValue(...arguments);
}
getAllButtons: function () {
getAllButtons() {
return this.button_group.getAllButtons();
},
}
getAllLeaves: function () {
getAllLeaves() {
return this.button_group.getAllLeaves();
},
}
getSelectedButtons: function () {
getSelectedButtons() {
return this.button_group.getSelectedButtons();
},
}
getNotSelectedButtons: function () {
getNotSelectedButtons() {
return this.button_group.getNotSelectedButtons();
},
}
getIndexByValue: function (value) {
getIndexByValue(value) {
return this.button_group.getIndexByValue(value);
},
}
getNodeById: function (id) {
getNodeById(id) {
return this.button_group.getNodeById(id);
},
}
getNodeByValue: function (value) {
getNodeByValue(value) {
return this.button_group.getNodeByValue(value);
}
});
BI.ListLoader.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.list_loader", BI.ListLoader);
}

171
src/case/loader/sort.list.js

@ -1,58 +1,61 @@
import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core";
/**
* Created by GUY on 2016/4/29.
*
* @class BI.SortList
* @extends BI.Widget
* @class SortList
* @extends Widget
*/
BI.SortList = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.SortList.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-sort-list",
@shortcut()
export class SortList extends Widget {
static xtype = "bi.sort_list"
isDefaultInit: true, // 是否默认初始化数据
static EVENT_CHANGE = "EVENT_CHANGE"
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-sort-list",
isDefaultInit: true, // 是否默认初始化数据
// 下面是button_group的属性
el: {
type: "bi.button_group"
type: "bi.button_group",
},
items: [],
itemsCreator: BI.emptyFn,
onLoaded: BI.emptyFn,
itemsCreator: emptyFn,
onLoaded: emptyFn,
// 下面是分页信息
count: false,
next: {},
hasNext: BI.emptyFn
hasNext: emptyFn,
// containment: this.element,
// connectWith: ".bi-sort-list",
});
},
}
_init: function () {
BI.SortList.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.loader = BI.createWidget({
_init() {
super._init(...arguments);
const o = this.options;
this.loader = createWidget({
type: "bi.list_loader",
element: this,
isDefaultInit: o.isDefaultInit,
el: o.el,
items: this._formatItems(o.items),
itemsCreator: function (op, callback) {
o.itemsCreator(op, function (items) {
callback(self._formatItems(items));
itemsCreator (op, callback) {
o.itemsCreator(op, items => {
callback(this._formatItems(items));
});
},
onLoaded: o.onLoaded,
count: o.count,
next: o.next,
hasNext: o.hasNext
hasNext: o.hasNext,
});
this.loader.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.SortList.EVENT_CHANGE, value, obj);
this.loader.on(Controller.EVENT_CHANGE, (...args) => {
const [type, value, obj] = args;
this.fireEvent(Controller.EVENT_CHANGE, ...args);
if (type === Events.CLICK) {
this.fireEvent(SortList.EVENT_CHANGE, value, obj);
}
});
@ -63,114 +66,116 @@ BI.SortList = BI.inherit(BI.Widget, {
cursor: o.cursor || "drag",
tolerance: o.tolerance || "intersect",
placeholder: {
element: function ($currentItem) {
var holder = BI.createWidget({
element ($currentItem) {
const holder = createWidget({
type: "bi.layout",
cls: "bi-sortable-holder",
height: $currentItem.outerHeight()
height: $currentItem.outerHeight(),
});
holder.element.css({
"margin-left": $currentItem.css("margin-left"),
"margin-right": $currentItem.css("margin-right"),
"margin-top": $currentItem.css("margin-top"),
"margin-bottom": $currentItem.css("margin-bottom"),
margin: $currentItem.css("margin")
margin: $currentItem.css("margin"),
});
return holder.element;
},
update: function () {
update () {
}
},
},
start: function (event, ui) {
start (event, ui) {
},
stop: function (event, ui) {
self.fireEvent(BI.SortList.EVENT_CHANGE);
stop: (event, ui) => {
this.fireEvent(SortList.EVENT_CHANGE);
},
over: function (event, ui) {
over (event, ui) {
}
},
});
},
}
_formatItems: function (items) {
BI.each(items, function (i, item) {
item = BI.stripEL(item);
item.cls = item.cls ? item.cls + " sort-item" : "sort-item";
_formatItems(items) {
each(items, (i, item) => {
item = stripEL(item);
item.cls = item.cls ? `${item.cls} sort-item` : "sort-item";
item.attributes = {
sorted: item.value
sorted: item.value,
};
});
return items;
},
}
hasNext: function () {
hasNext() {
return this.loader.hasNext();
},
}
addItems: function (items) {
addItems(items) {
this.loader.addItems(items);
},
}
populate: function (items) {
populate(items) {
if (items) {
arguments[0] = this._formatItems(items);
}
this.loader.populate.apply(this.loader, arguments);
},
this.loader.populate(...arguments);
}
empty: function () {
empty() {
this.loader.empty();
},
}
setNotSelectedValue: function () {
this.loader.setNotSelectedValue.apply(this.loader, arguments);
},
setNotSelectedValue() {
this.loader.setNotSelectedValue(...arguments);
}
getNotSelectedValue: function () {
getNotSelectedValue() {
return this.loader.getNotSelectedValue();
},
}
setValue: function () {
this.loader.setValue.apply(this.loader, arguments);
},
setValue() {
this.loader.setValue(...arguments);
}
getValue: function () {
getValue() {
return this.loader.getValue();
},
}
getAllButtons: function () {
getAllButtons() {
return this.loader.getAllButtons();
},
}
getAllLeaves: function () {
getAllLeaves() {
return this.loader.getAllLeaves();
},
}
getSelectedButtons: function () {
getSelectedButtons() {
return this.loader.getSelectedButtons();
},
}
getNotSelectedButtons: function () {
getNotSelectedButtons() {
return this.loader.getNotSelectedButtons();
},
}
getIndexByValue: function (value) {
getIndexByValue(value) {
return this.loader.getIndexByValue(value);
},
}
getNodeById: function (id) {
getNodeById(id) {
return this.loader.getNodeById(id);
},
}
getNodeByValue: function (value) {
getNodeByValue(value) {
return this.loader.getNodeByValue(value);
},
}
getSortedValues: function () {
return this.loader.element.sortable("toArray", {attribute: "sorted"});
getSortedValues() {
return this.loader.element.sortable("toArray", {
attribute: "sorted",
});
}
});
BI.SortList.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.sort_list", BI.SortList);
}

49
src/case/segment/button.segment.js

@ -1,43 +1,48 @@
import { shortcut, extend, createWidget } from "@/core";
import { BasicButton } from "@/base";
/**
* 分段控件使用的button
*
* Created by GUY on 2015/9/7.
* @class BI.SegmentButton
* @extends BI.BasicButton
* @class SegmentButton
* @extends BasicButton
*/
BI.SegmentButton = BI.inherit(BI.BasicButton, {
@shortcut()
export class SegmentButton extends BasicButton {
static xtype = "bi.segment_button"
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
_defaultConfig: function () {
var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select bi-card",
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-segment-button bi-list-item-select bi-card`,
shadow: true,
readonly: true,
hgap: 5
hgap: 5,
});
},
}
_init: function () {
BI.SegmentButton.superclass._init.apply(this, arguments);
var opts = this.options, self = this;
this.text = BI.createWidget({
_init() {
super._init(...arguments);
const opts = this.options;
this.text = createWidget({
type: "bi.label",
element: this,
textHeight: opts.height,
whiteSpace: opts.whiteSpace,
text: opts.text,
value: opts.value,
hgap: opts.hgap
hgap: opts.hgap,
});
},
}
setSelected: function () {
BI.SegmentButton.superclass.setSelected.apply(this, arguments);
},
setSelected() {
super.setSelected(...arguments);
}
setText: function (text) {
BI.SegmentButton.superclass.setText.apply(this, arguments);
setText(text) {
super.setText(...arguments);
this.text.setText(text);
}
});
BI.shortcut("bi.segment_button", BI.SegmentButton);
}

2
src/case/segment/index.js

@ -0,0 +1,2 @@
export { SegmentButton } from "./button.segment";
export { Segment } from "./segment";

77
src/case/segment/segment.js

@ -1,72 +1,79 @@
import { shortcut, Widget, extend, toPix, Controller, createWidget, createItems, makeArrayByArray } from "@/core";
import { ButtonGroup } from "@/base";
/**
* 单选按钮组
*
* Created by GUY on 2015/9/7.
* @class BI.Segment
* @extends BI.Widget
* @class Segment
* @extends Widget
*/
BI.Segment = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.Segment.superclass._defaultConfig.apply(this, arguments), {
@shortcut()
export class Segment extends Widget {
static xtype = "bi.segment"
static EVENT_CHANGE = "EVENT_CHANGE"
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-segment",
items: [],
height: 24,
});
},
_init: function () {
BI.Segment.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.buttonGroup = BI.createWidget({
}
_init() {
super._init(...arguments);
const o = this.options;
this.buttonGroup = createWidget({
element: this,
type: "bi.button_group",
value: o.value,
items: [BI.createItems(o.items, {
items: [createItems(o.items, {
type: "bi.segment_button",
height: BI.toPix(o.height, 2),
height: toPix(o.height, 2),
whiteSpace: o.whiteSpace,
})],
layouts: [{
type: "bi.table",
columnSize: BI.makeArrayByArray(o.items, "fill"),
columnSize: makeArrayByArray(o.items, "fill"),
}],
});
this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
this.buttonGroup.on(Controller.EVENT_CHANGE, (...args) => {
this.fireEvent(Controller.EVENT_CHANGE, ...args);
});
this.buttonGroup.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) {
self.fireEvent(BI.Segment.EVENT_CHANGE, value, obj);
this.buttonGroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {
this.fireEvent(Segment.EVENT_CHANGE, value, obj);
});
},
}
_setEnable: function (enable) {
BI.Segment.superclass._setEnable.apply(this, arguments);
_setEnable(enable) {
super._setEnable(...arguments);
if (enable === true) {
this.element.removeClass("base-disabled disabled");
} else if (enable === false) {
this.element.addClass("base-disabled disabled");
}
},
}
setValue: function (v) {
setValue(v) {
this.buttonGroup.setValue(v);
},
}
setEnabledValue: function (v) {
setEnabledValue(v) {
this.buttonGroup.setEnabledValue(v);
},
}
getValue: function () {
getValue() {
return this.buttonGroup.getValue();
},
}
populate: function (buttons) {
var o = this.options;
this.buttonGroup.populate([BI.createItems(buttons, {
populate(buttons) {
const o = this.options;
this.buttonGroup.populate([createItems(buttons, {
type: "bi.segment_button",
height: BI.toPix(o.height, 2),
height: toPix(o.height, 2),
whiteSpace: o.whiteSpace,
})]);
},
});
BI.Segment.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.segment", BI.Segment);
}
}

134
src/case/toolbar/toolbar.multiselect.js

@ -1,20 +1,29 @@
import { shortcut, extend, emptyFn, i18nText, Controller, createWidget, Events } from "@/core";
import { BasicButton, Checkbox } from "@/base";
import { HalfIconButton } from "../button";
/**
* guy
* 复选导航条
* Created by GUY on 2015/8/25.
* @class BI.MultiSelectBar
* @extends BI.BasicButton
* @class MultiSelectBar
* @extends BasicButton
*/
BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
_defaultConfig: function () {
return BI.extend(BI.MultiSelectBar.superclass._defaultConfig.apply(this, arguments), {
@shortcut()
export class MultiSelectBar extends BasicButton {
static xtype = "bi.multi_select_bar"
static EVENT_CHANGE = "EVENT_CHANGE"
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
extraCls: "bi-multi-select-bar",
height: 25,
text: BI.i18nText("BI-Select_All"),
isAllCheckedBySelectedValue: BI.emptyFn,
text: i18nText("BI-Select_All"),
isAllCheckedBySelectedValue: emptyFn,
// 手动控制选中
disableSelected: true,
isHalfCheckedBySelectedValue: function (selectedValues) {
isHalfCheckedBySelectedValue (selectedValues) {
return selectedValues.length > 0;
},
halfSelected: false,
@ -22,46 +31,47 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
iconWidth: 14,
iconHeight: 14,
});
},
_init: function () {
BI.MultiSelectBar.superclass._init.apply(this, arguments);
var self = this, o = this.options;
var isSelect = o.selected === true;
var isHalfSelect = !o.selected && o.halfSelected;
this.checkbox = BI.createWidget({
}
_init() {
super._init(...arguments);
const o = this.options;
const isSelect = o.selected === true;
const isHalfSelect = !o.selected && o.halfSelected;
this.checkbox = createWidget({
type: "bi.checkbox",
stopPropagation: true,
handler: function () {
self.setSelected(self.isSelected());
handler: () => {
this.setSelected(this.isSelected());
},
selected: isSelect,
invisible: isHalfSelect,
iconWidth: o.iconWidth,
iconHeight: o.iconHeight
iconHeight: o.iconHeight,
});
this.half = BI.createWidget({
this.half = createWidget({
type: "bi.half_icon_button",
stopPropagation: true,
handler: function () {
self.setSelected(true);
handler: () => {
this.setSelected(true);
},
invisible: isSelect || !isHalfSelect,
iconWidth: o.iconWidth,
iconHeight: o.iconHeight
iconHeight: o.iconHeight,
});
this.checkbox.on(BI.Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, self.isSelected(), self);
this.checkbox.on(Controller.EVENT_CHANGE, () => {
this.fireEvent(Controller.EVENT_CHANGE, Events.CLICK, this.isSelected(), this);
});
this.checkbox.on(BI.Checkbox.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, self.isSelected(), self);
this.checkbox.on(Checkbox.EVENT_CHANGE, () => {
this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
});
this.half.on(BI.Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, self.isSelected(), self);
this.half.on(Controller.EVENT_CHANGE, () => {
this.fireEvent(Controller.EVENT_CHANGE, Events.CLICK, this.isSelected(), this);
});
this.half.on(BI.HalfIconButton.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, self.isSelected(), self);
this.half.on(HalfIconButton.EVENT_CHANGE, () => {
this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
});
this.text = BI.createWidget({
this.text = createWidget({
type: "bi.label",
textAlign: "left",
whiteSpace: "nowrap",
@ -71,43 +81,43 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
text: o.text,
keyword: o.keyword,
value: o.value,
py: o.py
py: o.py,
});
BI.createWidget({
createWidget({
type: "bi.htape",
element: this,
items: [{
width: o.iconWrapperWidth,
el: {
type: "bi.center_adapt",
items: [this.checkbox, this.half]
}
items: [this.checkbox, this.half],
},
}, {
el: this.text
}]
el: this.text,
}],
});
},
}
_setSelected: function (v) {
_setSelected(v) {
this.checkbox.setSelected(!!v);
},
}
// 自己手动控制选中
beforeClick: function () {
var isHalf = this.isHalfSelected(), isSelected = this.isSelected();
beforeClick() {
const isHalf = this.isHalfSelected(),
isSelected = this.isSelected();
if (isHalf === true) {
this.setSelected(true);
} else {
this.setSelected(!isSelected);
}
},
}
setSelected: function (v) {
setSelected(v) {
this.checkbox.setSelected(v);
this.setHalfSelected(false);
},
}
setHalfSelected: function (b) {
setHalfSelected(b) {
this.halfSelected = !!b;
if (b === true) {
this.checkbox.setSelected(false);
@ -117,29 +127,27 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
this.half.invisible();
this.checkbox.visible();
}
},
}
isHalfSelected: function () {
isHalfSelected() {
return !this.isSelected() && !!this.halfSelected;
},
}
isSelected: function () {
isSelected() {
return this.checkbox.isSelected();
},
}
setValue: function (selectedValues) {
BI.MultiSelectBar.superclass.setValue.apply(this, arguments);
var isAllChecked = this.options.isAllCheckedBySelectedValue.apply(this, arguments);
setValue(selectedValues) {
super.setValue(...arguments);
const isAllChecked = this.options.isAllCheckedBySelectedValue.apply(this, arguments);
this.setSelected(isAllChecked);
!isAllChecked && this.setHalfSelected(this.options.isHalfCheckedBySelectedValue.apply(this, arguments));
},
}
doClick: function () {
BI.MultiSelectBar.superclass.doClick.apply(this, arguments);
if(this.isValid()) {
this.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
doClick() {
super.doClick(...arguments);
if (this.isValid()) {
this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
}
}
});
BI.MultiSelectBar.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multi_select_bar", BI.MultiSelectBar);
}

367
src/core/platform/web/dom.js

@ -502,207 +502,208 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
for (i = 0; i < directions.length; i++) {
direct = directions[i];
switch (direct) {
case "left":
leftRight.push(direct);
break;
case "right":
leftRight.push(direct);
break;
case "top":
topBottom.push(direct);
break;
case "bottom":
topBottom.push(direct);
break;
case "innerLeft":
innerLeftRight.push(direct);
break;
case "innerRight":
innerLeftRight.push(direct);
break;
default:
break;
case "left":
leftRight.push(direct);
break;
case "right":
leftRight.push(direct);
break;
case "top":
topBottom.push(direct);
break;
case "bottom":
topBottom.push(direct);
break;
case "innerLeft":
innerLeftRight.push(direct);
break;
case "innerRight":
innerLeftRight.push(direct);
break;
default:
break;
}
}
for (i = 0; i < directions.length; i++) {
let tW, tH;
direct = directions[i];
switch (direct) {
case "left":
if (!isNeedAdaptHeight) {
var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
if (isLeftSpaceEnough(combo, popup, tW)) {
left = getLeftPosition(combo, popup, tW, container).left;
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container);
} else {
pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container);
}
pos.dir = `left,${pos.dir}`;
if (tbFirst) {
pos.change = "left";
}
pos.left = left;
return pos;
case "left":
if (!isNeedAdaptHeight) {
tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
if (isLeftSpaceEnough(combo, popup, tW)) {
left = getLeftPosition(combo, popup, tW, container).left;
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container);
} else {
pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container);
}
}
lrFirst = true;
break;
case "right":
if (!isNeedAdaptHeight) {
var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
if (isRightSpaceEnough(combo, popup, tW)) {
left = getRightPosition(combo, popup, tW, container).left;
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container);
} else {
pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container);
}
pos.dir = `right,${pos.dir}`;
if (tbFirst) {
pos.change = "right";
}
pos.left = left;
return pos;
pos.dir = `left,${pos.dir}`;
if (tbFirst) {
pos.change = "left";
}
pos.left = left;
return pos;
}
lrFirst = true;
break;
case "top":
var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
if (isTopSpaceEnough(combo, popup, tH)) {
top = getTopPosition(combo, popup, tH, container).top;
if (leftRight[0] === "right") {
pos = getLeftAlignPosition(combo, popup, tW, container);
}
lrFirst = true;
break;
case "right":
if (!isNeedAdaptHeight) {
tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
if (isRightSpaceEnough(combo, popup, tW)) {
left = getRightPosition(combo, popup, tW, container).left;
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container);
} else {
pos = getRightAlignPosition(combo, popup, tW, container);
pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container);
}
pos.dir = `top,${pos.dir}`;
if (lrFirst) {
pos.change = "top";
pos.dir = `right,${pos.dir}`;
if (tbFirst) {
pos.change = "right";
}
pos.top = top;
pos.left = left;
return pos;
}
if (needAdaptHeight) {
isNeedAdaptHeight = true;
}
lrFirst = true;
break;
case "top":
tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
if (isTopSpaceEnough(combo, popup, tH)) {
top = getTopPosition(combo, popup, tH, container).top;
if (leftRight[0] === "right") {
pos = getLeftAlignPosition(combo, popup, tW, container);
} else {
pos = getRightAlignPosition(combo, popup, tW, container);
}
pos.dir = `top,${pos.dir}`;
if (lrFirst) {
pos.change = "top";
}
tbFirst = true;
break;
case "bottom":
var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
if (isBottomSpaceEnough(combo, popup, tH)) {
top = getBottomPosition(combo, popup, tH, container).top;
if (leftRight[0] === "right") {
pos = getLeftAlignPosition(combo, popup, tW, container);
pos.top = top;
return pos;
}
if (needAdaptHeight) {
isNeedAdaptHeight = true;
}
tbFirst = true;
break;
case "bottom":
tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
if (isBottomSpaceEnough(combo, popup, tH)) {
top = getBottomPosition(combo, popup, tH, container).top;
if (leftRight[0] === "right") {
pos = getLeftAlignPosition(combo, popup, tW, container);
} else {
pos = getRightAlignPosition(combo, popup, tW, container);
}
pos.dir = `bottom,${pos.dir}`;
if (lrFirst) {
pos.change = "bottom";
}
pos.top = top;
return pos;
}
if (needAdaptHeight) {
isNeedAdaptHeight = true;
}
tbFirst = true;
break;
case "innerLeft":
if (!isNeedAdaptHeight) {
tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
if (isInnerLeftSpaceEnough(combo, popup, tW)) {
left = getInnerLeftPosition(combo, popup, tW).left;
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight);
} else {
pos = getRightAlignPosition(combo, popup, tW, container);
pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight);
}
pos.dir = `bottom,${pos.dir}`;
if (lrFirst) {
pos.change = "bottom";
pos.dir = `innerLeft,${pos.dir}`;
if (tbFirst) {
pos.change = "innerLeft";
}
pos.top = top;
pos.left = left;
return pos;
}
if (needAdaptHeight) {
isNeedAdaptHeight = true;
}
tbFirst = true;
break;
case "innerLeft":
if (!isNeedAdaptHeight) {
var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
if (isInnerLeftSpaceEnough(combo, popup, tW)) {
left = getInnerLeftPosition(combo, popup, tW).left;
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight);
} else {
pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight);
}
pos.dir = `innerLeft,${pos.dir}`;
if (tbFirst) {
pos.change = "innerLeft";
}
pos.left = left;
return pos;
}
lrFirst = true;
break;
case "innerRight":
if (!isNeedAdaptHeight) {
tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
if (isInnerRightSpaceEnough(combo, popup, tW)) {
left = getInnerRightPosition(combo, popup, tW).left;
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight);
} else {
pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight);
}
}
lrFirst = true;
break;
case "innerRight":
if (!isNeedAdaptHeight) {
var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
if (isInnerRightSpaceEnough(combo, popup, tW)) {
left = getInnerRightPosition(combo, popup, tW).left;
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight);
} else {
pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight);
}
pos.dir = `innerLeft,${pos.dir}`;
if (tbFirst) {
pos.change = "innerRight";
}
pos.left = left;
return pos;
pos.dir = `innerLeft,${pos.dir}`;
if (tbFirst) {
pos.change = "innerRight";
}
pos.left = left;
return pos;
}
break;
default:
break;
}
break;
default:
break;
}
}
// 此处为四个方向放不下时挑空间最大的方向去放置, 也就是说我设置了弹出方向为"bottom,left",
// 最后发现实际弹出方向可能是"top,left",那么此时外界获取popup的方向应该是"top,left"
switch (directions[0]) {
case "left":
case "right":
if (isRightSpaceLarger(combo)) {
left = getRightAdaptPosition(combo, popup, extraWidth, container).left;
firstDir = "right";
} else {
left = getLeftAdaptPosition(combo, popup, extraWidth, container).left;
firstDir = "left";
}
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, extraHeight, needAdaptHeight);
pos.left = left;
pos.dir = `${firstDir},${pos.dir}`;
return pos;
}
pos = getBottomAlignPosition(combo, popup, extraHeight, needAdaptHeight);
case "left":
case "right":
if (isRightSpaceLarger(combo)) {
left = getRightAdaptPosition(combo, popup, extraWidth, container).left;
firstDir = "right";
} else {
left = getLeftAdaptPosition(combo, popup, extraWidth, container).left;
firstDir = "left";
}
if (topBottom[0] === "bottom") {
pos = getTopAlignPosition(combo, popup, extraHeight, needAdaptHeight);
pos.left = left;
pos.dir = `${firstDir},${pos.dir}`;
return pos;
default :
if (isBottomSpaceLarger(combo)) {
top = getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top;
firstDir = "bottom";
} else {
top = getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top;
firstDir = "top";
}
if (leftRight[0] === "right") {
pos = getLeftAlignPosition(combo, popup, extraWidth, container);
pos.top = top;
pos.dir = `${firstDir},${pos.dir}`;
return pos;
}
pos = getRightAlignPosition(combo, popup, extraWidth, container);
}
pos = getBottomAlignPosition(combo, popup, extraHeight, needAdaptHeight);
pos.left = left;
pos.dir = `${firstDir},${pos.dir}`;
return pos;
default :
if (isBottomSpaceLarger(combo)) {
top = getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top;
firstDir = "bottom";
} else {
top = getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top;
firstDir = "top";
}
if (leftRight[0] === "right") {
pos = getLeftAlignPosition(combo, popup, extraWidth, container);
pos.top = top;
pos.dir = `${firstDir},${pos.dir}`;
return pos;
}
pos = getRightAlignPosition(combo, popup, extraWidth, container);
pos.top = top;
pos.dir = `${firstDir},${pos.dir}`;
return pos;
}
}
@ -715,26 +716,26 @@ export function getComboPosition(combo, popup, extraWidth, extraHeight, needAdap
popup.resetHeight && popup.resetHeight(maxHeight);
const position = getComboPositionByDirections(combo, popup, extraWidth, extraHeight, needAdaptHeight, directions || ["bottom", "top", "right", "left"], positionRelativeElement);
switch (offsetStyle) {
case "center":
if (position.change) {
var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
position.top = p.top;
} else {
var p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
position.left = p.left;
}
break;
case "middle":
if (position.change) {
var p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
position.left = p.left;
} else {
var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
position.top = p.top;
}
break;
default:
break;
case "center":
if (position.change) {
const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
position.top = p.top;
} else {
const p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
position.left = p.left;
}
break;
case "middle":
if (position.change) {
const p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
position.left = p.left;
} else {
const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
position.top = p.top;
}
break;
default:
break;
}
if (needAdaptHeight === true) {
popup.resetHeight && popup.resetHeight(Math.min(viewportBounds.height - position.top - (positionRelativeElement ? positionRelativeElement.getBoundingClientRect().top : 0), maxHeight));

3
src/core/utils/color.js

@ -1,4 +1,5 @@
import { parseInt, parseFloat, isNull, isKey } from "../2.base";
import * as DOMUtils from "../platform/web/dom";
export const DOM = {
isColor(color) {
@ -198,4 +199,6 @@ export const DOM = {
Math.floor(255 * (bgColor * (1 - A)) + G * A)},${
Math.floor(255 * (bgColor * (1 - A)) + B * A)})`;
},
...DOMUtils,
};

Loading…
Cancel
Save