fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

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

es6
Zhenfei.Li 2 years ago
parent
0c009add2c
commit
0591f0ded9
12 changed files with 598 additions and 541 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 21
      src/core/platform/web/dom.js
  12. 3
      src/core/utils/color.js

2
es6.js
Unescape View File

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

12
src/case/index.js
Unescape View File

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

3
src/case/loader/index.js
Unescape View File

@ -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
Unescape View File

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

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

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

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

2
src/case/segment/index.js
Unescape View File

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

77
src/case/segment/segment.js
Unescape View File

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

134
src/case/toolbar/toolbar.multiselect.js
Unescape View File

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

21
src/core/platform/web/dom.js
Unescape View File

@ -525,11 +525,12 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
} }
} }
for (i = 0; i < directions.length; i++) { for (i = 0; i < directions.length; i++) {
let tW, tH;
direct = directions[i]; direct = directions[i];
switch (direct) { switch (direct) {
case "left": case "left":
if (!isNeedAdaptHeight) { if (!isNeedAdaptHeight) {
var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
if (isLeftSpaceEnough(combo, popup, tW)) { if (isLeftSpaceEnough(combo, popup, tW)) {
left = getLeftPosition(combo, popup, tW, container).left; left = getLeftPosition(combo, popup, tW, container).left;
if (topBottom[0] === "bottom") { if (topBottom[0] === "bottom") {
@ -550,7 +551,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
break; break;
case "right": case "right":
if (!isNeedAdaptHeight) { if (!isNeedAdaptHeight) {
var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
if (isRightSpaceEnough(combo, popup, tW)) { if (isRightSpaceEnough(combo, popup, tW)) {
left = getRightPosition(combo, popup, tW, container).left; left = getRightPosition(combo, popup, tW, container).left;
if (topBottom[0] === "bottom") { if (topBottom[0] === "bottom") {
@ -570,7 +571,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
lrFirst = true; lrFirst = true;
break; break;
case "top": case "top":
var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
if (isTopSpaceEnough(combo, popup, tH)) { if (isTopSpaceEnough(combo, popup, tH)) {
top = getTopPosition(combo, popup, tH, container).top; top = getTopPosition(combo, popup, tH, container).top;
if (leftRight[0] === "right") { if (leftRight[0] === "right") {
@ -592,7 +593,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
tbFirst = true; tbFirst = true;
break; break;
case "bottom": case "bottom":
var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
if (isBottomSpaceEnough(combo, popup, tH)) { if (isBottomSpaceEnough(combo, popup, tH)) {
top = getBottomPosition(combo, popup, tH, container).top; top = getBottomPosition(combo, popup, tH, container).top;
if (leftRight[0] === "right") { if (leftRight[0] === "right") {
@ -615,7 +616,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
break; break;
case "innerLeft": case "innerLeft":
if (!isNeedAdaptHeight) { if (!isNeedAdaptHeight) {
var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
if (isInnerLeftSpaceEnough(combo, popup, tW)) { if (isInnerLeftSpaceEnough(combo, popup, tW)) {
left = getInnerLeftPosition(combo, popup, tW).left; left = getInnerLeftPosition(combo, popup, tW).left;
if (topBottom[0] === "bottom") { if (topBottom[0] === "bottom") {
@ -636,7 +637,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
break; break;
case "innerRight": case "innerRight":
if (!isNeedAdaptHeight) { if (!isNeedAdaptHeight) {
var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
if (isInnerRightSpaceEnough(combo, popup, tW)) { if (isInnerRightSpaceEnough(combo, popup, tW)) {
left = getInnerRightPosition(combo, popup, tW).left; left = getInnerRightPosition(combo, popup, tW).left;
if (topBottom[0] === "bottom") { if (topBottom[0] === "bottom") {
@ -717,19 +718,19 @@ export function getComboPosition(combo, popup, extraWidth, extraHeight, needAdap
switch (offsetStyle) { switch (offsetStyle) {
case "center": case "center":
if (position.change) { if (position.change) {
var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
position.top = p.top; position.top = p.top;
} else { } else {
var p = getCenterAdaptPosition(combo, popup, positionRelativeElement); const p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
position.left = p.left; position.left = p.left;
} }
break; break;
case "middle": case "middle":
if (position.change) { if (position.change) {
var p = getCenterAdaptPosition(combo, popup, positionRelativeElement); const p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
position.left = p.left; position.left = p.left;
} else { } else {
var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
position.top = p.top; position.top = p.top;
} }
break; break;

3
src/core/utils/color.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save