Browse Source

加入虚拟dom

es6
guy 7 years ago
parent
commit
5d9d3cc80a
  1. 6
      demo/js/case/tree/demo.branch_tree.js
  2. 4
      demo/js/config/core.js
  3. 26
      demo/js/core/abstract/demo.button_map.js
  4. 74
      demo/js/core/abstract/demo.virtual_group.js
  5. 189
      dist/base.js
  6. 364
      dist/core.js
  7. 5
      src/base/combination/group.button.js
  8. 69
      src/base/combination/group.virtual.js
  9. 115
      src/base/combination/map.button.js
  10. 9
      src/core/widget.js
  11. 221
      src/core/wrapper/layout.js
  12. 22
      src/core/wrapper/layout/adapt/adapt.center.js
  13. 22
      src/core/wrapper/layout/adapt/adapt.horizontal.js
  14. 22
      src/core/wrapper/layout/adapt/adapt.vertical.js
  15. 16
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
  16. 16
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
  17. 16
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
  18. 14
      src/core/wrapper/layout/layout.horizontal.js
  19. 6
      src/core/wrapper/layout/layout.lattice.js

6
demo/js/case/tree/demo.branch_tree.js

@ -72,7 +72,7 @@ Demo.Func = BI.inherit(BI.Widget, {
var tree = BI.createWidget({
type: "bi.branch_tree",
el: {
type: "bi.button_group"
type: "bi.virtual_group"
},
items: [{
text: "且",
@ -159,8 +159,8 @@ Demo.Func = BI.inherit(BI.Widget, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字" + BI.UUID(),
value: "这里是一段文字" + BI.UUID()
text: "这里是一段文字" ,
value: "这里是一段文字"
}, {
text: "且",
value: "且3",

4
demo/js/config/core.js

@ -91,8 +91,8 @@ Demo.CORE_CONFIG = [{
value: "demo.button_tree"
}, {
pId: 102,
text: "bi.button_map",
value: "demo.button_map"
text: "bi.virtual_group",
value: "demo.virtual_group"
}, {
pId: 102,
id: 10201,

26
demo/js/core/abstract/demo.button_map.js

@ -1,26 +0,0 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
},
render: function () {
return {
type: "bi.button_map",
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
layouts: [{
type: "bi.vertical"
}, {
type: "bi.center_adapt",
}],
items: [{
type: "bi.label",
text: "0",
value: 0
}, {
type: "bi.button",
text: "1",
value: 1
}]
}
}
});
$.shortcut("demo.button_map", Demo.Func);

74
demo/js/core/abstract/demo.virtual_group.js

@ -0,0 +1,74 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
},
_createItems: function () {
var items = BI.makeArray(100, {
type: "demo.virtual_group_item"
});
items[0].value = BI.UUID();
return items;
},
render: function () {
var self = this;
return {
type: "bi.vertical",
vgap: 20,
items: [{
type: "bi.virtual_group",
width: 200,
height: 300,
ref: function () {
self.buttonMap = this;
},
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
layouts: [{
type: "bi.vertical"
}, {
type: "bi.center_adapt",
}],
items: this._createItems()
}, {
type: "bi.button",
text: "点击刷新",
handler: function () {
self.buttonMap.populate(self._createItems());
}
}]
}
}
});
$.shortcut("demo.virtual_group", Demo.Func);
Demo.Item = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-item",
height: 30
},
render: function () {
var self = this;
return {
type: "bi.label",
ref: function () {
self.label = this;
},
height: this.options.height,
text: "这是一个测试项" + BI.UUID()
}
},
update: function (item) {
this.label.setText(item.value);
console.log("更新了一项");
return true;
},
created: function () {
console.log("创建了一项");
}
});
$.shortcut("demo.virtual_group_item", Demo.Item);

189
dist/base.js vendored

@ -1129,11 +1129,12 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
},
populate: function (items) {
this.options.items = items || [];
items = items || [];
this.options.items = items;
this.empty();
this.buttons = this._btnsCreator.apply(this, arguments);
var items = this._packageItems(items, this._packageBtns(this.buttons));
items = this._packageItems(items, this._packageBtns(this.buttons));
this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items)));
},
@ -1454,120 +1455,6 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
BI.ButtonTree.EVENT_CHANGE = "EVENT_CHANGE";
$.shortcut("bi.button_tree", BI.ButtonTree);/**
* value作为key值缓存button 不支持顺序读写
* 适合用于频繁增删的一组button
* Created by GUY on 2015/8/10.
* @class BI.ButtonMap
* @extends BI.ButtonTree
*/
BI.ButtonMap = BI.inherit(BI.ButtonTree, {
_defaultConfig: function () {
return BI.extend(BI.ButtonMap.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-button-map"
})
},
_init: function () {
BI.ButtonMap.superclass._init.apply(this, arguments);
},
_createBtns: function (items) {
var self = this, o = this.options;
var buttons = BI.createWidgets(BI.createItems(items, {type: "bi.text_button", once: o.chooseType === 0}));
var keys = BI.map(items, function (i, item) {
item = BI.stripEL(item);
if (!(BI.isKey(item.id) || BI.isKey(item.value))) {
throw new Error("item必须包含id或value属性");
}
return item.id || item.value;
});
return BI.object(keys, buttons);
},
setValue: function (v) {
var self = this;
v = BI.isArray(v) ? v : [v];
BI.each(this.buttons, function (val, item) {
if (!BI.isFunction(item.setSelected)) {
item.setValue(v);
return;
}
if (v.contains(val)) {
item.setSelected && item.setSelected(true);
} else {
item.setSelected && item.setSelected(false);
}
});
},
setNotSelectedValue: function (v) {
var self = this;
v = BI.isArray(v) ? v : [v];
BI.each(this.buttons, function (val, item) {
if (!BI.isFunction(item.setSelected)) {
item.setNotSelectedValue(v);
return;
}
if (v.contains(val)) {
item.setSelected && item.setSelected(false);
} else {
item.setSelected && item.setSelected(true);
}
});
},
populate: function (items) {
var self = this;
var args = [].slice.call(arguments);
var linkHashMap = new BI.LinkHashMap();
var val = function (item) {
return item.id || item.value;
};
if (!this.buttons) {
this.buttons = {};
}
//所有已存在的和新添加的
var willCreated = [];
BI.each(items, function (i, item) {
item = BI.stripEL(item);
if (self.buttons[val(item)]) {
var ob = self.buttons[val(item)];
args[0] = item.items;
args[2] = item;
ob.populate && ob.populate.apply(ob, args);
} else {
willCreated.push(item);
}
});
//创建新元素
args[0] = willCreated;
var newBtns = this._btnsCreator.apply(this, args);
//整理
var array = [];
BI.each(items, function (i, item) {
item = BI.stripEL(item);
var button = self.buttons[val(item)] || newBtns[val(item)];
linkHashMap.add(val(item), button);
array.push(button);
});
this.buttons = linkHashMap.map;
BI.DOM.hang(this.buttons);
this.empty();
var packages = this._packageItems(items, this._packageBtns(array));
BI.createWidget(BI.extend({element: this}, this._packageLayout(packages)));
},
getIndexByValue: function (value) {
throw new Error("不能使用getIndexByValue方法");
}
});
BI.ButtonMap.EVENT_CHANGE = "EVENT_CHANGE";
$.shortcut("bi.button_map", BI.ButtonMap);/**
* guy
* 异步树
* @class BI.TreeView
@ -3665,7 +3552,75 @@ BI.ComboGroup = BI.inherit(BI.Widget, {
});
BI.ComboGroup.EVENT_CHANGE = "EVENT_CHANGE";
$.shortcut("bi.combo_group", BI.ComboGroup);/**
$.shortcut("bi.combo_group", BI.ComboGroup);BI.VirtualGroup = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.VirtualGroup.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-virtual-group",
items: [],
layouts: [{
type: "bi.center",
hgap: 0,
vgap: 0
}]
})
},
render: function () {
this.populate(this.options.items);
},
_createBtns: function (items) {
var o = this.options;
return BI.createItems(items, {
type: "bi.text_button"
});
},
_packageBtns: function (btns) {
var o = this.options;
for (var i = o.layouts.length - 1; i > 0; i--) {
btns = BI.map(btns, function (k, it) {
return BI.extend({}, o.layouts[i], {
items: [
BI.extend({}, o.layouts[i].el, it)
]
})
})
}
return btns;
},
_packageItems: function (items, packBtns) {
return BI.createItems(BI.makeArrayByArray(items, {}), BI.clone(packBtns));
},
_packageLayout: function (items) {
var o = this.options, layout = BI.deepClone(o.layouts[0]);
var lay = BI.formatEL(layout).el;
while (lay && lay.items && !BI.isEmpty(lay.items)) {
lay = BI.formatEL(lay.items[0]).el;
}
lay.items = items;
return layout;
},
populate: function (items) {
var self = this;
items = items || [];
this.options.items = items;
items = this._packageItems(items, this._packageBtns(this._createBtns(items)));
if (!this.layouts) {
this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items)));
} else {
this.layouts.populate(this._packageLayout(items).items);
}
}
});
BI.VirtualGroup.EVENT_CHANGE = "EVENT_CHANGE";
$.shortcut("bi.virtual_group", BI.VirtualGroup);/**
* 加载控件
*
* Created by GUY on 2015/8/31.

364
dist/core.js vendored

@ -14342,6 +14342,10 @@ BI.Widget = BI.inherit(BI.OB, {
},
update: function () {
},
destroyed: function () {
},
@ -14666,10 +14670,7 @@ BI.Widget = BI.inherit(BI.OB, {
},
destroy: function () {
this.empty();
this._isMounted = false;
this._parent = null;
this.destroyed();
this._unMount();
this.element.destroy();
this.fireEvent(BI.Events.DESTROY);
}
@ -19320,35 +19321,117 @@ BI.Layout = BI.inherit(BI.Widget, {
}
},
_getChildName: function (index) {
return index + "";
},
_addElement: function (i, item) {
var o = this.options;
var w;
if (!this.hasWidget(this.getName() + "-" + i)) {
var self = this, w;
if (!this.hasWidget(this._getChildName(i))) {
w = BI.createWidget(item);
this.addWidget(this.getName() + "-" + i, w);
this.addWidget(this._getChildName(i), w);
w.on(BI.Events.DESTROY, function () {
BI.each(self._children, function (name, child) {
if (child === w) {
self.removeItemAt(name | 0);
}
});
});
} else {
w = this.getWidgetByName(this.getName() + "-" + i);
w = this.getWidgetByName(this._getChildName(i));
}
return w;
},
stroke: function (items) {
_getOptions: function (item) {
if (item instanceof BI.Widget) {
item = item.options;
}
item = BI.stripEL(item);
if (item instanceof BI.Widget) {
item = item.options;
}
return item;
},
_compare: function (item1, item2) {
var self = this;
BI.each(items, function (i, item) {
if (!!item) {
self._addElement(i, item);
return eq(item1, item2);
//不比较函数
function eq(a, b, aStack, bStack) {
if (a === b) return a !== 0 || 1 / a === 1 / b;
if (a == null || b == null) return a === b;
var className = Object.prototype.toString.call(a);
switch (className) {
case '[object RegExp]':
case '[object String]':
return '' + a === '' + b;
case '[object Number]':
if (+a !== +a) return +b !== +b;
return +a === 0 ? 1 / +a === 1 / b : +a === +b;
case '[object Date]':
case '[object Boolean]':
return +a === +b;
}
var areArrays = className === '[object Array]';
if (!areArrays) {
if (BI.isFunction(a) && BI.isFunction(b)) {
return true;
}
a = self._getOptions(a);
b = self._getOptions(b);
}
});
aStack = aStack || [];
bStack = bStack || [];
var length = aStack.length;
while (length--) {
if (aStack[length] === a) return bStack[length] === b;
}
aStack.push(a);
bStack.push(b);
if (areArrays) {
length = a.length;
if (length !== b.length) return false;
while (length--) {
if (!eq(a[length], b[length], aStack, bStack)) return false;
}
} else {
var keys = _.keys(a), key;
length = keys.length;
if (_.keys(b).length !== length) return false;
while (length--) {
key = keys[length];
if (!(_.has(b, key) && eq(a[key], b[key], aStack, bStack))) return false;
}
}
aStack.pop();
bStack.pop();
return true;
}
},
populate: function (items) {
var self = this;
this.options.items = items || [];
this.stroke(items);
_getWrapper: function () {
return this.element;
},
resize: function () {
_addItem: function (index, item) {
for (var i = this.options.items.length; i > index; i--) {
this._children[this._getChildName(i)] = this._children[this._getChildName(i - 1)];
}
delete this._children[index];
this.options.items.splice(index, 0, item);
},
_removeItem: function (index) {
for (var i = index; i < this.options.items.length - 1; i++) {
this._children[this._getChildName(i)] = this._children[this._getChildName(i + 1)];
}
this.options.items.splice(index, 1);
},
/**
@ -19358,7 +19441,7 @@ BI.Layout = BI.inherit(BI.Widget, {
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.element);
w.element.appendTo(this._getWrapper());
w._mount();
return w;
},
@ -19366,11 +19449,54 @@ BI.Layout = BI.inherit(BI.Widget, {
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.prependTo(this.element);
w.element.prependTo(this._getWrapper());
w._mount();
return w;
},
addItemAt: function (index, item) {
if (index < 0 || index > this.options.items.length) {
return;
}
this._addItem(index, item);
var w = this._addElement(index, item);
if (index > 0) {
this._children[this._getChildName(index - 1)].element.after(w.element);
} else {
w.element.prependTo(this._getWrapper());
}
w._mount();
return w;
},
removeItemAt: function (index) {
if (index < 0 || index > this.options.items.length - 1) {
return;
}
this._children[this._getChildName(index)].destroy();
this._removeItem(index);
},
updateItemAt: function (index, item) {
if (index < 0 || index > this.options.items.length - 1) {
return;
}
var updated;
if (updated = this._children[this._getChildName(index)].update(this._getOptions(item))) {
return updated;
}
this._children[this._getChildName(index)].destroy();
var w = this._addElement(index, item);
this._children[this._getChildName(index)] = w;
if (index > 0) {
this._children[this._getChildName(index - 1)].element.after(w.element);
} else {
w.element.prependTo(this._getWrapper());
}
w._mount();
},
addItems: function (items) {
var self = this;
BI.each(items, function (i, item) {
@ -19386,9 +19512,9 @@ BI.Layout = BI.inherit(BI.Widget, {
},
getValue: function () {
var value = [];
BI.each(this._children, function (i, wi) {
var v = wi.getValue();
var self = this, value = [];
BI.each(this.options.items, function (i) {
var v = self._children[self._getChildName(i)].getValue();
v = BI.isArray(v) ? v : [v];
value = value.concat(v);
});
@ -19396,15 +19522,63 @@ BI.Layout = BI.inherit(BI.Widget, {
},
setValue: function (v) {
BI.each(this._children, function (i, wi) {
wi.setValue(v);
var self = this;
BI.each(this.options.items, function (i) {
self._children[self._getChildName(i)].setValue(v);
})
},
setText: function (v) {
BI.each(this._children, function (i, wi) {
wi.setText(v);
var self = this;
BI.each(this.options.items, function (i) {
self._children[self._getChildName(i)].setText(v);
})
},
update: function (item) {
var o = this.options;
var items = item.items;
var updated = false, i, len;
for (i = 0, len = o.items.length; i < len; i++) {
if (!this._compare(o.items[i], items[i])) {
updated = this.updateItemAt(i, items[i]) || updated;
}
}
if (o.items.length > items.length) {
for (i = items.length; i < o.items.length; i++) {
this.removeItemAt(i);
}
} else if (items.length > o.items.length) {
for (i = o.items.length; i < items.length; i++) {
this.addItemAt(i, items[i]);
}
}
this.options.items = items;
return updated;
},
stroke: function (items) {
var self = this;
BI.each(items, function (i, item) {
if (!!item) {
self._addElement(i, item);
}
});
},
populate: function (items) {
var self = this, o = this.options;
items = items || [];
if (this._isMounted) {
this.update({items: items});
return;
}
this.options.items = items;
this.stroke(items);
},
resize: function () {
}
});
$.shortcut('bi.layout', BI.Layout);/**
@ -24978,7 +25152,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
var o = this.options;
var td;
var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
if (!this.hasWidget(this.getName() + "-" + i)) {
if (!this.hasWidget(this._getChildName(i))) {
var w = BI.createWidget(item);
w.element.css({"position": "relative", "top": "0", "left": "0", "margin": "0px auto"});
td = BI.createWidget({
@ -24989,9 +25163,9 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
},
items: [w]
});
this.addWidget(this.getName() + "-" + i, td);
this.addWidget(this._getChildName(i), td);
} else {
td = this.getWidgetByName(this.getName() + "-" + i);
td = this.getWidgetByName(this._getChildName(i));
td.element.attr("width", width);
}
td.element.css({"max-width": o.columnSize[i]});
@ -25049,20 +25223,8 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
// console.log("center_adapt布局不需要resize");
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
_getWrapper: function(){
return this.$tr;
},
populate: function (items) {
@ -25108,7 +25270,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
var o = this.options;
var td;
var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
if (!this.hasWidget(this.getName() + "-" + i)) {
if (!this.hasWidget(this._getChildName(i))) {
var w = BI.createWidget(item);
w.element.css({"position": "relative", "top": "0", "left": "0", "margin": "0px auto"});
td = BI.createWidget({
@ -25119,9 +25281,9 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
},
items: [w]
});
this.addWidget(this.getName() + "-" + i, td);
this.addWidget(this._getChildName(i), td);
} else {
td = this.getWidgetByName(this.getName() + "-" + i);
td = this.getWidgetByName(this._getChildName(i));
td.element.attr("width", width);
}
td.element.css({"max-width": o.columnSize[i] + "px"});
@ -25178,20 +25340,8 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
// console.log("horizontal_adapt布局不需要resize");
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
_getWrapper: function () {
return this.$tr;
},
populate: function (items) {
@ -25406,7 +25556,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
var o = this.options;
var td;
var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
if (!this.hasWidget(this.getName() + "-" + i)) {
if (!this.hasWidget(this._getChildName(i))) {
var w = BI.createWidget(item);
w.element.css({"position": "relative", "top": "0", "left": "0", "margin": "0px auto"});
td = BI.createWidget({
@ -25417,9 +25567,9 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
},
items: [w]
});
this.addWidget(this.getName() + "-" + i, td);
this.addWidget(this._getChildName(i), td);
} else {
td = this.getWidgetByName(this.getName() + "-" + i);
td = this.getWidgetByName(this._getChildName(i));
td.element.attr("width", width);
}
@ -25473,20 +25623,8 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
}
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
_getWrapper: function(){
return this.$tr;
},
resize: function () {
@ -26063,20 +26201,8 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
}
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
_getWrapper: function(){
return this.$wrapper;
},
resize: function () {
@ -26160,20 +26286,8 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
_getWrapper: function(){
return this.$wrapper;
},
resize: function () {
@ -26255,20 +26369,8 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
}
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
_getWrapper: function(){
return this.$wrapper;
},
resize: function () {
@ -27275,7 +27377,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
var o = this.options;
var td;
var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
if (!this.hasWidget(this.getName() + i)) {
if (!this.hasWidget(this._getChildName(i))) {
var w = BI.createWidget(item);
w.element.css({"position": "relative", "margin": "0px auto"});
td = BI.createWidget({
@ -27286,9 +27388,9 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
},
items: [w]
});
this.addWidget(this.getName() + i, td);
this.addWidget(this._getChildName(i), td);
} else {
td = this.getWidgetByName(this.getName() + i);
td = this.getWidgetByName(this._getChildName(i));
td.element.attr("width", width);
}
@ -27346,12 +27448,8 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
// console.log("horizontal layout do not need to resize");
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
w._mount();
this.options.items.push(item);
w.element.appendTo(this.$tr);
return w;
_getWrapper: function(){
return this.$tr;
},
populate: function (items) {
@ -27522,6 +27620,12 @@ BI.LatticeLayout = BI.inherit(BI.Layout, {
return w;
},
addItemAt: function (item) {
var w = BI.LatticeLayout.superclass.addItemAt.apply(this, arguments);
this.resize();
return w;
},
resize: function () {
this.stroke(this.options.items);
},

5
src/base/combination/group.button.js

@ -166,11 +166,12 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
},
populate: function (items) {
this.options.items = items || [];
items = items || [];
this.options.items = items;
this.empty();
this.buttons = this._btnsCreator.apply(this, arguments);
var items = this._packageItems(items, this._packageBtns(this.buttons));
items = this._packageItems(items, this._packageBtns(this.buttons));
this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items)));
},

69
src/base/combination/group.virtual.js

@ -0,0 +1,69 @@
BI.VirtualGroup = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.VirtualGroup.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-virtual-group",
items: [],
layouts: [{
type: "bi.center",
hgap: 0,
vgap: 0
}]
})
},
render: function () {
this.populate(this.options.items);
},
_createBtns: function (items) {
var o = this.options;
return BI.createItems(items, {
type: "bi.text_button"
});
},
_packageBtns: function (btns) {
var o = this.options;
for (var i = o.layouts.length - 1; i > 0; i--) {
btns = BI.map(btns, function (k, it) {
return BI.extend({}, o.layouts[i], {
items: [
BI.extend({}, o.layouts[i].el, it)
]
})
})
}
return btns;
},
_packageItems: function (items, packBtns) {
return BI.createItems(BI.makeArrayByArray(items, {}), BI.clone(packBtns));
},
_packageLayout: function (items) {
var o = this.options, layout = BI.deepClone(o.layouts[0]);
var lay = BI.formatEL(layout).el;
while (lay && lay.items && !BI.isEmpty(lay.items)) {
lay = BI.formatEL(lay.items[0]).el;
}
lay.items = items;
return layout;
},
populate: function (items) {
var self = this;
items = items || [];
this.options.items = items;
items = this._packageItems(items, this._packageBtns(this._createBtns(items)));
if (!this.layouts) {
this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items)));
} else {
this.layouts.populate(this._packageLayout(items).items);
}
}
});
BI.VirtualGroup.EVENT_CHANGE = "EVENT_CHANGE";
$.shortcut("bi.virtual_group", BI.VirtualGroup);

115
src/base/combination/map.button.js

@ -1,115 +0,0 @@
/**
* value作为key值缓存button 不支持顺序读写
* 适合用于频繁增删的一组button
* Created by GUY on 2015/8/10.
* @class BI.ButtonMap
* @extends BI.ButtonTree
*/
BI.ButtonMap = BI.inherit(BI.ButtonTree, {
_defaultConfig: function () {
return BI.extend(BI.ButtonMap.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-button-map"
})
},
_init: function () {
BI.ButtonMap.superclass._init.apply(this, arguments);
},
_createBtns: function (items) {
var self = this, o = this.options;
var buttons = BI.createWidgets(BI.createItems(items, {type: "bi.text_button", once: o.chooseType === 0}));
var keys = BI.map(items, function (i, item) {
item = BI.stripEL(item);
if (!(BI.isKey(item.id) || BI.isKey(item.value))) {
throw new Error("item必须包含id或value属性");
}
return item.id || item.value;
});
return BI.object(keys, buttons);
},
setValue: function (v) {
var self = this;
v = BI.isArray(v) ? v : [v];
BI.each(this.buttons, function (val, item) {
if (!BI.isFunction(item.setSelected)) {
item.setValue(v);
return;
}
if (v.contains(val)) {
item.setSelected && item.setSelected(true);
} else {
item.setSelected && item.setSelected(false);
}
});
},
setNotSelectedValue: function (v) {
var self = this;
v = BI.isArray(v) ? v : [v];
BI.each(this.buttons, function (val, item) {
if (!BI.isFunction(item.setSelected)) {
item.setNotSelectedValue(v);
return;
}
if (v.contains(val)) {
item.setSelected && item.setSelected(false);
} else {
item.setSelected && item.setSelected(true);
}
});
},
populate: function (items) {
var self = this;
var args = [].slice.call(arguments);
var linkHashMap = new BI.LinkHashMap();
var val = function (item) {
return item.id || item.value;
};
if (!this.buttons) {
this.buttons = {};
}
//所有已存在的和新添加的
var willCreated = [];
BI.each(items, function (i, item) {
item = BI.stripEL(item);
if (self.buttons[val(item)]) {
var ob = self.buttons[val(item)];
args[0] = item.items;
args[2] = item;
ob.populate && ob.populate.apply(ob, args);
} else {
willCreated.push(item);
}
});
//创建新元素
args[0] = willCreated;
var newBtns = this._btnsCreator.apply(this, args);
//整理
var array = [];
BI.each(items, function (i, item) {
item = BI.stripEL(item);
var button = self.buttons[val(item)] || newBtns[val(item)];
linkHashMap.add(val(item), button);
array.push(button);
});
this.buttons = linkHashMap.map;
BI.DOM.hang(this.buttons);
this.empty();
var packages = this._packageItems(items, this._packageBtns(array));
BI.createWidget(BI.extend({element: this}, this._packageLayout(packages)));
},
getIndexByValue: function (value) {
throw new Error("不能使用getIndexByValue方法");
}
});
BI.ButtonMap.EVENT_CHANGE = "EVENT_CHANGE";
$.shortcut("bi.button_map", BI.ButtonMap);

9
src/core/widget.js

@ -43,6 +43,10 @@ BI.Widget = BI.inherit(BI.OB, {
},
update: function () {
},
destroyed: function () {
},
@ -367,10 +371,7 @@ BI.Widget = BI.inherit(BI.OB, {
},
destroy: function () {
this.empty();
this._isMounted = false;
this._parent = null;
this.destroyed();
this._unMount();
this.element.destroy();
this.fireEvent(BI.Events.DESTROY);
}

221
src/core/wrapper/layout.js

@ -63,35 +63,117 @@ BI.Layout = BI.inherit(BI.Widget, {
}
},
_getChildName: function (index) {
return index + "";
},
_addElement: function (i, item) {
var o = this.options;
var w;
if (!this.hasWidget(this.getName() + "-" + i)) {
var self = this, w;
if (!this.hasWidget(this._getChildName(i))) {
w = BI.createWidget(item);
this.addWidget(this.getName() + "-" + i, w);
this.addWidget(this._getChildName(i), w);
w.on(BI.Events.DESTROY, function () {
BI.each(self._children, function (name, child) {
if (child === w) {
self.removeItemAt(name | 0);
}
});
});
} else {
w = this.getWidgetByName(this.getName() + "-" + i);
w = this.getWidgetByName(this._getChildName(i));
}
return w;
},
stroke: function (items) {
_getOptions: function (item) {
if (item instanceof BI.Widget) {
item = item.options;
}
item = BI.stripEL(item);
if (item instanceof BI.Widget) {
item = item.options;
}
return item;
},
_compare: function (item1, item2) {
var self = this;
BI.each(items, function (i, item) {
if (!!item) {
self._addElement(i, item);
return eq(item1, item2);
//不比较函数
function eq(a, b, aStack, bStack) {
if (a === b) return a !== 0 || 1 / a === 1 / b;
if (a == null || b == null) return a === b;
var className = Object.prototype.toString.call(a);
switch (className) {
case '[object RegExp]':
case '[object String]':
return '' + a === '' + b;
case '[object Number]':
if (+a !== +a) return +b !== +b;
return +a === 0 ? 1 / +a === 1 / b : +a === +b;
case '[object Date]':
case '[object Boolean]':
return +a === +b;
}
});
var areArrays = className === '[object Array]';
if (!areArrays) {
if (BI.isFunction(a) && BI.isFunction(b)) {
return true;
}
a = self._getOptions(a);
b = self._getOptions(b);
}
aStack = aStack || [];
bStack = bStack || [];
var length = aStack.length;
while (length--) {
if (aStack[length] === a) return bStack[length] === b;
}
aStack.push(a);
bStack.push(b);
if (areArrays) {
length = a.length;
if (length !== b.length) return false;
while (length--) {
if (!eq(a[length], b[length], aStack, bStack)) return false;
}
} else {
var keys = _.keys(a), key;
length = keys.length;
if (_.keys(b).length !== length) return false;
while (length--) {
key = keys[length];
if (!(_.has(b, key) && eq(a[key], b[key], aStack, bStack))) return false;
}
}
aStack.pop();
bStack.pop();
return true;
}
},
populate: function (items) {
var self = this;
this.options.items = items || [];
this.stroke(items);
_getWrapper: function () {
return this.element;
},
resize: function () {
_addItem: function (index, item) {
for (var i = this.options.items.length; i > index; i--) {
this._children[this._getChildName(i)] = this._children[this._getChildName(i - 1)];
}
delete this._children[index];
this.options.items.splice(index, 0, item);
},
_removeItem: function (index) {
for (var i = index; i < this.options.items.length - 1; i++) {
this._children[this._getChildName(i)] = this._children[this._getChildName(i + 1)];
}
this.options.items.splice(index, 1);
},
/**
@ -101,7 +183,7 @@ BI.Layout = BI.inherit(BI.Widget, {
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.element);
w.element.appendTo(this._getWrapper());
w._mount();
return w;
},
@ -109,11 +191,54 @@ BI.Layout = BI.inherit(BI.Widget, {
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.prependTo(this.element);
w.element.prependTo(this._getWrapper());
w._mount();
return w;
},
addItemAt: function (index, item) {
if (index < 0 || index > this.options.items.length) {
return;
}
this._addItem(index, item);
var w = this._addElement(index, item);
if (index > 0) {
this._children[this._getChildName(index - 1)].element.after(w.element);
} else {
w.element.prependTo(this._getWrapper());
}
w._mount();
return w;
},
removeItemAt: function (index) {
if (index < 0 || index > this.options.items.length - 1) {
return;
}
this._children[this._getChildName(index)].destroy();
this._removeItem(index);
},
updateItemAt: function (index, item) {
if (index < 0 || index > this.options.items.length - 1) {
return;
}
var updated;
if (updated = this._children[this._getChildName(index)].update(this._getOptions(item))) {
return updated;
}
this._children[this._getChildName(index)].destroy();
var w = this._addElement(index, item);
this._children[this._getChildName(index)] = w;
if (index > 0) {
this._children[this._getChildName(index - 1)].element.after(w.element);
} else {
w.element.prependTo(this._getWrapper());
}
w._mount();
},
addItems: function (items) {
var self = this;
BI.each(items, function (i, item) {
@ -129,9 +254,9 @@ BI.Layout = BI.inherit(BI.Widget, {
},
getValue: function () {
var value = [];
BI.each(this._children, function (i, wi) {
var v = wi.getValue();
var self = this, value = [];
BI.each(this.options.items, function (i) {
var v = self._children[self._getChildName(i)].getValue();
v = BI.isArray(v) ? v : [v];
value = value.concat(v);
});
@ -139,15 +264,63 @@ BI.Layout = BI.inherit(BI.Widget, {
},
setValue: function (v) {
BI.each(this._children, function (i, wi) {
wi.setValue(v);
var self = this;
BI.each(this.options.items, function (i) {
self._children[self._getChildName(i)].setValue(v);
})
},
setText: function (v) {
BI.each(this._children, function (i, wi) {
wi.setText(v);
var self = this;
BI.each(this.options.items, function (i) {
self._children[self._getChildName(i)].setText(v);
})
},
update: function (item) {
var o = this.options;
var items = item.items;
var updated = false, i, len;
for (i = 0, len = o.items.length; i < len; i++) {
if (!this._compare(o.items[i], items[i])) {
updated = this.updateItemAt(i, items[i]) || updated;
}
}
if (o.items.length > items.length) {
for (i = items.length; i < o.items.length; i++) {
this.removeItemAt(i);
}
} else if (items.length > o.items.length) {
for (i = o.items.length; i < items.length; i++) {
this.addItemAt(i, items[i]);
}
}
this.options.items = items;
return updated;
},
stroke: function (items) {
var self = this;
BI.each(items, function (i, item) {
if (!!item) {
self._addElement(i, item);
}
});
},
populate: function (items) {
var self = this, o = this.options;
items = items || [];
if (this._isMounted) {
this.update({items: items});
return;
}
this.options.items = items;
this.stroke(items);
},
resize: function () {
}
});
$.shortcut('bi.layout', BI.Layout);

22
src/core/wrapper/layout/adapt/adapt.center.js

@ -36,7 +36,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
var o = this.options;
var td;
var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
if (!this.hasWidget(this.getName() + "-" + i)) {
if (!this.hasWidget(this._getChildName(i))) {
var w = BI.createWidget(item);
w.element.css({"position": "relative", "top": "0", "left": "0", "margin": "0px auto"});
td = BI.createWidget({
@ -47,9 +47,9 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
},
items: [w]
});
this.addWidget(this.getName() + "-" + i, td);
this.addWidget(this._getChildName(i), td);
} else {
td = this.getWidgetByName(this.getName() + "-" + i);
td = this.getWidgetByName(this._getChildName(i));
td.element.attr("width", width);
}
td.element.css({"max-width": o.columnSize[i]});
@ -107,20 +107,8 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
// console.log("center_adapt布局不需要resize");
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
_getWrapper: function(){
return this.$tr;
},
populate: function (items) {

22
src/core/wrapper/layout/adapt/adapt.horizontal.js

@ -36,7 +36,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
var o = this.options;
var td;
var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
if (!this.hasWidget(this.getName() + "-" + i)) {
if (!this.hasWidget(this._getChildName(i))) {
var w = BI.createWidget(item);
w.element.css({"position": "relative", "top": "0", "left": "0", "margin": "0px auto"});
td = BI.createWidget({
@ -47,9 +47,9 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
},
items: [w]
});
this.addWidget(this.getName() + "-" + i, td);
this.addWidget(this._getChildName(i), td);
} else {
td = this.getWidgetByName(this.getName() + "-" + i);
td = this.getWidgetByName(this._getChildName(i));
td.element.attr("width", width);
}
td.element.css({"max-width": o.columnSize[i] + "px"});
@ -106,20 +106,8 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
// console.log("horizontal_adapt布局不需要resize");
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
_getWrapper: function () {
return this.$tr;
},
populate: function (items) {

22
src/core/wrapper/layout/adapt/adapt.vertical.js

@ -33,7 +33,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
var o = this.options;
var td;
var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
if (!this.hasWidget(this.getName() + "-" + i)) {
if (!this.hasWidget(this._getChildName(i))) {
var w = BI.createWidget(item);
w.element.css({"position": "relative", "top": "0", "left": "0", "margin": "0px auto"});
td = BI.createWidget({
@ -44,9 +44,9 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
},
items: [w]
});
this.addWidget(this.getName() + "-" + i, td);
this.addWidget(this._getChildName(i), td);
} else {
td = this.getWidgetByName(this.getName() + "-" + i);
td = this.getWidgetByName(this._getChildName(i));
td.element.attr("width", width);
}
@ -100,20 +100,8 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
}
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$tr);
w._mount();
return w;
_getWrapper: function(){
return this.$tr;
},
resize: function () {

16
src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js

@ -40,20 +40,8 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
}
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
_getWrapper: function(){
return this.$wrapper;
},
resize: function () {

16
src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js

@ -70,20 +70,8 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
_getWrapper: function(){
return this.$wrapper;
},
resize: function () {

16
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js

@ -68,20 +68,8 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
}
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.push(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
},
prependItem: function (item) {
var w = this._addElement(this.options.items.length, item);
this.options.items.unshift(item);
w.element.appendTo(this.$wrapper);
w._mount();
return w;
_getWrapper: function(){
return this.$wrapper;
},
resize: function () {

14
src/core/wrapper/layout/layout.horizontal.js

@ -36,7 +36,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
var o = this.options;
var td;
var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
if (!this.hasWidget(this.getName() + i)) {
if (!this.hasWidget(this._getChildName(i))) {
var w = BI.createWidget(item);
w.element.css({"position": "relative", "margin": "0px auto"});
td = BI.createWidget({
@ -47,9 +47,9 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
},
items: [w]
});
this.addWidget(this.getName() + i, td);
this.addWidget(this._getChildName(i), td);
} else {
td = this.getWidgetByName(this.getName() + i);
td = this.getWidgetByName(this._getChildName(i));
td.element.attr("width", width);
}
@ -107,12 +107,8 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
// console.log("horizontal layout do not need to resize");
},
addItem: function (item) {
var w = this._addElement(this.options.items.length, item);
w._mount();
this.options.items.push(item);
w.element.appendTo(this.$tr);
return w;
_getWrapper: function(){
return this.$tr;
},
populate: function (items) {

6
src/core/wrapper/layout/layout.lattice.js

@ -37,6 +37,12 @@ BI.LatticeLayout = BI.inherit(BI.Layout, {
return w;
},
addItemAt: function (item) {
var w = BI.LatticeLayout.superclass.addItemAt.apply(this, arguments);
this.resize();
return w;
},
resize: function () {
this.stroke(this.options.items);
},

Loading…
Cancel
Save