You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
774 lines
29 KiB
774 lines
29 KiB
/** |
|
* 布局容器类 |
|
* @class BI.Layout |
|
* @extends BI.Widget |
|
* |
|
* @cfg {JSON} options 配置属性 |
|
* @cfg {Boolean} [options.scrollable=false] 子组件超出容器边界之后是否会出现滚动条 |
|
* @cfg {Boolean} [options.scrollx=false] 子组件超出容器边界之后是否会出现横向滚动条 |
|
* @cfg {Boolean} [options.scrolly=false] 子组件超出容器边界之后是否会出现纵向滚动条 |
|
*/ |
|
BI.Layout = BI.inherit(BI.Widget, { |
|
props: function () { |
|
return { |
|
scrollable: null, // true, false, null |
|
scrollx: false, // true, false |
|
scrolly: false, // true, false |
|
items: [], |
|
innerHgap: 0, |
|
innerVgap: 0 |
|
}; |
|
}, |
|
|
|
render: function () { |
|
var self = this, o = this.options; |
|
this._init4Margin(); |
|
this._init4Scroll(); |
|
if (BI.isFunction(o.columnSize)) { |
|
var columnSizeFn = o.columnSize; |
|
o.columnSize = this.__watch(columnSizeFn, function (context, newValue) { |
|
o.columnSize = newValue; |
|
self.resize(); |
|
}); |
|
} |
|
if (BI.isFunction(o.rowSize)) { |
|
var rowSizeFn = o.rowSize; |
|
o.rowSize = this.__watch(rowSizeFn, function (context, newValue) { |
|
o.rowSize = newValue; |
|
self.resize(); |
|
}); |
|
} |
|
}, |
|
|
|
_init4Margin: function () { |
|
if (this.options.top) { |
|
this.element.css("top", BI.isNumber(this.options.top) ? this.options.top / BI.pixRatio + BI.pixUnit : this.options.top); |
|
} |
|
if (this.options.left) { |
|
this.element.css("left", BI.isNumber(this.options.left) ? this.options.left / BI.pixRatio + BI.pixUnit : this.options.left); |
|
} |
|
if (this.options.bottom) { |
|
this.element.css("bottom", BI.isNumber(this.options.bottom) ? this.options.bottom / BI.pixRatio + BI.pixUnit : this.options.bottom); |
|
} |
|
if (this.options.right) { |
|
this.element.css("right", BI.isNumber(this.options.right) ? this.options.right / BI.pixRatio + BI.pixUnit : this.options.right); |
|
} |
|
}, |
|
|
|
_init4Scroll: function () { |
|
switch (this.options.scrollable) { |
|
case true: |
|
case "xy": |
|
this.element.css("overflow", "auto"); |
|
return; |
|
case false: |
|
this.element.css("overflow", "hidden"); |
|
return; |
|
case "x": |
|
this.element.css({ |
|
"overflow-x": "auto", |
|
"overflow-y": "hidden" |
|
}); |
|
return; |
|
case "y": |
|
this.element.css({ |
|
"overflow-x": "hidden", |
|
"overflow-y": "auto" |
|
}); |
|
return; |
|
default : |
|
break; |
|
} |
|
if (this.options.scrollx) { |
|
this.element.css({ |
|
"overflow-x": "auto", |
|
"overflow-y": "hidden" |
|
}); |
|
return; |
|
} |
|
if (this.options.scrolly) { |
|
this.element.css({ |
|
"overflow-x": "hidden", |
|
"overflow-y": "auto" |
|
}); |
|
} |
|
}, |
|
|
|
appendFragment: function (frag) { |
|
this.element.append(frag); |
|
}, |
|
|
|
_mountChildren: function () { |
|
var self = this; |
|
var frag = BI.Widget._renderEngine.createFragment(); |
|
var hasChild = false; |
|
for (var key in this._children) { |
|
var child = this._children[key]; |
|
if (child.element !== self.element) { |
|
frag.appendChild(child.element[0]); |
|
hasChild = true; |
|
} |
|
} |
|
if (hasChild === true) { |
|
this.appendFragment(frag); |
|
} |
|
}, |
|
|
|
_getChildName: function (index) { |
|
return "" + index; |
|
}, |
|
|
|
_addElement: function (i, item, context, widget) { |
|
var self = this, w; |
|
if (widget) { |
|
return widget; |
|
} |
|
if (!this.hasWidget(this._getChildName(i))) { |
|
w = BI._lazyCreateWidget(item, context); |
|
w.on(BI.Events.DESTROY, function () { |
|
BI.each(self._children, function (name, child) { |
|
if (child === w) { |
|
delete self._children[name]; |
|
self.removeItemAt(name | 0); |
|
} |
|
}); |
|
}); |
|
this.addWidget(this._getChildName(i), w); |
|
} else { |
|
w = this.getWidgetByName(this._getChildName(i)); |
|
} |
|
return w; |
|
}, |
|
|
|
_newElement: function (i, item, context) { |
|
var self = this; |
|
var w = BI._lazyCreateWidget(item, context); |
|
w.on(BI.Events.DESTROY, function () { |
|
BI.each(self._children, function (name, child) { |
|
if (child === w) { |
|
delete self._children[name]; |
|
self.removeItemAt(name | 0); |
|
} |
|
}); |
|
}); |
|
return this._addElement(i, item, context, w); |
|
}, |
|
|
|
_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; |
|
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; |
|
} |
|
}, |
|
|
|
_getWrapper: function () { |
|
return this.element; |
|
}, |
|
|
|
// 不依赖于this.options.items进行更新 |
|
_updateItemAt: function (oldIndex, newIndex, item) { |
|
var del = this._children[this._getChildName(oldIndex)]; |
|
var w = this._newElement(newIndex, item); |
|
// 需要有个地方临时存一下新建的组件，否则如果直接使用newIndex的话，newIndex位置的元素可能会被用到 |
|
this._children[this._getChildName(newIndex) + "-temp"] = w; |
|
var nextSibling = del.element.next(); |
|
if (nextSibling.length > 0) { |
|
BI.Widget._renderEngine.createElement(nextSibling).before(w.element); |
|
} else { |
|
w.element.appendTo(this._getWrapper()); |
|
} |
|
del._destroy(); |
|
w._mount(); |
|
return true; |
|
}, |
|
|
|
_addItemAt: 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[this._getChildName(index)]; |
|
this.options.items.splice(index, 0, item); |
|
}, |
|
|
|
_removeItemAt: function (index) { |
|
for (var i = index; i < this.options.items.length - 1; i++) { |
|
this._children[this._getChildName(i)] = this._children[this._getChildName(i + 1)]; |
|
} |
|
delete this._children[this._getChildName(this.options.items.length - 1)]; |
|
this.options.items.splice(index, 1); |
|
}, |
|
|
|
_clearGap: function (w) { |
|
w.element.css({ |
|
"margin-top": "", |
|
"margin-bottom": "", |
|
"margin-left": "", |
|
"margin-right": "" |
|
}); |
|
}, |
|
|
|
_optimiseGap: function (gap) { |
|
return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit; |
|
}, |
|
|
|
_optimiseItemLgap: function (item) { |
|
if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { |
|
return ((!item.type && item.el) ? ((item._lgap || 0) + (item.lgap || 0)) : item._lgap) || 0; |
|
} |
|
return (item._lgap || 0) + (item.lgap || 0); |
|
}, |
|
_optimiseItemRgap: function (item) { |
|
if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { |
|
return ((!item.type && item.el) ? ((item._rgap || 0) + (item.rgap || 0)) : item._rgap) || 0; |
|
} |
|
return (item._rgap || 0) + (item.rgap || 0); |
|
}, |
|
_optimiseItemTgap: function (item) { |
|
if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { |
|
return ((!item.type && item.el) ? ((item._tgap || 0) + (item.tgap || 0)) : item._tgap) || 0; |
|
} |
|
return (item._tgap || 0) + (item.tgap || 0); |
|
}, |
|
_optimiseItemBgap: function (item) { |
|
if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { |
|
return ((!item.type && item.el) ? ((item._bgap || 0) + (item.bgap || 0)) : item._bgap) || 0; |
|
} |
|
return (item._bgap || 0) + (item.bgap || 0); |
|
}, |
|
_optimiseItemHgap: function (item) { |
|
if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { |
|
return ((!item.type && item.el) ? ((item._hgap || 0) + (item.hgap || 0)) : item._hgap) || 0; |
|
} |
|
return (item._hgap || 0) + (item.hgap || 0); |
|
}, |
|
_optimiseItemVgap: function (item) { |
|
if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { |
|
return ((!item.type && item.el) ? ((item._vgap || 0) + (item.vgap || 0)) : item._vgap) || 0; |
|
} |
|
return (item._vgap || 0) + (item.vgap || 0); |
|
}, |
|
|
|
_handleGap: function (w, item, hIndex, vIndex) { |
|
var o = this.options; |
|
var innerLgap, innerRgap, innerTgap, innerBgap; |
|
if (BI.isNull(vIndex)) { |
|
innerTgap = innerBgap = o.innerVgap; |
|
innerLgap = hIndex === 0 ? o.innerHgap : 0; |
|
innerRgap = hIndex === o.items.length - 1 ? o.innerHgap : 0; |
|
} else { |
|
innerLgap = innerRgap = o.innerHgap; |
|
innerTgap = vIndex === 0 ? o.innerVgap : 0; |
|
innerBgap = vIndex === o.items.length - 1 ? o.innerVgap : 0; |
|
} |
|
if (o.vgap + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { |
|
var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); |
|
w.element.css({ |
|
"margin-top": this._optimiseGap(top) |
|
}); |
|
} |
|
if (o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { |
|
var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); |
|
w.element.css({ |
|
"margin-left": this._optimiseGap(left) |
|
}); |
|
} |
|
if (o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { |
|
var right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); |
|
w.element.css({ |
|
"margin-right": this._optimiseGap(right) |
|
}); |
|
} |
|
if (o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { |
|
var bottom = o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); |
|
w.element.css({ |
|
"margin-bottom": this._optimiseGap(bottom) |
|
}); |
|
} |
|
}, |
|
|
|
// 横向换纵向 |
|
_handleReverseGap: function (w, item, index) { |
|
var o = this.options; |
|
var innerLgap, innerRgap, innerTgap, innerBgap; |
|
innerLgap = innerRgap = o.innerHgap; |
|
innerTgap = index === 0 ? o.innerVgap : 0; |
|
innerBgap = index === o.items.length - 1 ? o.innerVgap : 0; |
|
if (o.vgap + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { |
|
var top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); |
|
w.element.css({ |
|
"margin-top": this._optimiseGap(top) |
|
}); |
|
} |
|
if (o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { |
|
var left = o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); |
|
w.element.css({ |
|
"margin-left": this._optimiseGap(left) |
|
}); |
|
} |
|
if (o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { |
|
var right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); |
|
w.element.css({ |
|
"margin-right": this._optimiseGap(right) |
|
}); |
|
} |
|
// 这里的代码是关键 |
|
if (o.vgap + o.hgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { |
|
var bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + (index === o.items.length - 1 ? o.bgap : 0) + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); |
|
w.element.css({ |
|
"margin-bottom": this._optimiseGap(bottom) |
|
}); |
|
} |
|
}, |
|
|
|
/** |
|
* 添加一个子组件到容器中 |
|
* @param {JSON/BI.Widget} item 子组件 |
|
*/ |
|
addItem: function (item) { |
|
return this.addItemAt(this.options.items.length, item); |
|
}, |
|
|
|
prependItem: function (item) { |
|
return this.addItemAt(0, item); |
|
}, |
|
|
|
addItemAt: function (index, item) { |
|
if (index < 0 || index > this.options.items.length) { |
|
return; |
|
} |
|
this._addItemAt(index, item); |
|
var w = this._addElement(index, item); |
|
// addItemAt 还是用之前的找上个兄弟节点向后插入的方式 |
|
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 (indexes) { |
|
indexes = BI.isArray(indexes) ? indexes : [indexes]; |
|
var deleted = []; |
|
var newItems = [], newChildren = {}; |
|
for (var i = 0, len = this.options.items.length; i < len; i++) { |
|
var child = this._children[this._getChildName(i)]; |
|
if (BI.contains(indexes, i)) { |
|
child && deleted.push(child); |
|
} else { |
|
newChildren[this._getChildName(newItems.length)] = child; |
|
newItems.push(this.options.items[i]); |
|
} |
|
} |
|
this.options.items = newItems; |
|
this._children = newChildren; |
|
BI.each(deleted, function (i, c) { |
|
c._destroy(); |
|
}); |
|
}, |
|
|
|
shouldUpdateItem: function (index, item) { |
|
var child = this._children[this._getChildName(index)]; |
|
if (!child || !child.shouldUpdate) { |
|
return null; |
|
} |
|
return child.shouldUpdate(this._getOptions(item)); |
|
}, |
|
|
|
addItems: function (items, context) { |
|
var self = this, o = this.options; |
|
var fragment = BI.Widget._renderEngine.createFragment(); |
|
var added = []; |
|
BI.each(items, function (i, item) { |
|
var w = self._addElement(o.items.length, item, context); |
|
self._children[self._getChildName(o.items.length)] = w; |
|
o.items.push(item); |
|
added.push(w); |
|
fragment.appendChild(w.element[0]); |
|
}); |
|
if (this._isMounted) { |
|
this._getWrapper().append(fragment); |
|
BI.each(added, function (i, w) { |
|
w._mount(); |
|
}); |
|
} |
|
}, |
|
|
|
prependItems: function (items, context) { |
|
items = items || []; |
|
var fragment = BI.Widget._renderEngine.createFragment(); |
|
var added = []; |
|
for (var i = items.length - 1; i >= 0; i--) { |
|
this._addItemAt(0, items[i]); |
|
var w = this._addElement(0, items[i], context); |
|
this._children[this._getChildName(0)] = w; |
|
this.options.items.unshift(items[i]); |
|
added.push(w); |
|
fragment.appendChild(w.element[0]); |
|
} |
|
if (this._isMounted) { |
|
this._getWrapper().prepend(fragment); |
|
BI.each(added, function (i, w) { |
|
w._mount(); |
|
}); |
|
} |
|
}, |
|
|
|
getValue: function () { |
|
var self = this, value = [], child; |
|
BI.each(this.options.items, function (i) { |
|
if (child = self._children[self._getChildName(i)]) { |
|
var v = child.getValue(); |
|
v = BI.isArray(v) ? v : [v]; |
|
value = value.concat(v); |
|
} |
|
}); |
|
return value; |
|
}, |
|
|
|
setValue: function (v) { |
|
var self = this, child; |
|
BI.each(this.options.items, function (i) { |
|
if (child = self._children[self._getChildName(i)]) { |
|
child.setValue(v); |
|
} |
|
}); |
|
}, |
|
|
|
setText: function (v) { |
|
var self = this, child; |
|
BI.each(this.options.items, function (i) { |
|
if (child = self._children[self._getChildName(i)]) { |
|
child.setText(v); |
|
} |
|
}); |
|
}, |
|
|
|
patchItem: function (oldVnode, vnode, oldIndex, newIndex) { |
|
var shouldUpdate = this.shouldUpdateItem(oldIndex, vnode); |
|
var child = this._children[this._getChildName(oldIndex)]; |
|
if (shouldUpdate) { |
|
this._children[this._getChildName(newIndex) + "-temp"] = child; |
|
return child._update(this._getOptions(vnode), shouldUpdate); |
|
} |
|
if (shouldUpdate === null && !this._compare(oldVnode, vnode)) { |
|
// if (child.update) { |
|
// return child.update(this._getOptions(vnode)); |
|
// } |
|
return this._updateItemAt(oldIndex, newIndex, vnode); |
|
} |
|
}, |
|
|
|
updateChildren: function (oldCh, newCh, context) { |
|
var self = this; |
|
var oldStartIdx = 0, newStartIdx = 0; |
|
var oldEndIdx = oldCh.length - 1; |
|
var oldStartVnode = oldCh[0]; |
|
var oldEndVnode = oldCh[oldEndIdx]; |
|
var newEndIdx = newCh.length - 1; |
|
var newStartVnode = newCh[0]; |
|
var newEndVnode = newCh[newEndIdx]; |
|
var before; |
|
var updated; |
|
var children = {}; |
|
BI.each(oldCh, function (i, child) { |
|
child = self._getOptions(child); |
|
var key = child.key == null ? i : child.key; |
|
if (BI.isKey(key)) { |
|
children[key] = self._children[self._getChildName(i)]; |
|
} |
|
}); |
|
|
|
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { |
|
if (BI.isNull(oldStartVnode)) { |
|
oldStartVnode = oldCh[++oldStartIdx]; |
|
} else if (BI.isNull(oldEndVnode)) { |
|
oldEndVnode = oldCh[--oldEndIdx]; |
|
} else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) { |
|
var willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx); |
|
updated = willUpdate || updated; |
|
children[oldStartVnode.key == null ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[this._getChildName(newStartIdx) + "-temp"] : this._children[this._getChildName(oldStartIdx)]; |
|
oldStartVnode = oldCh[++oldStartIdx]; |
|
newStartVnode = newCh[++newStartIdx]; |
|
} else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) { |
|
var willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx); |
|
updated = willUpdate || updated; |
|
children[oldEndVnode.key == null ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[this._getChildName(newEndIdx) + "-temp"] : this._children[this._getChildName(oldEndIdx)]; |
|
oldEndVnode = oldCh[--oldEndIdx]; |
|
newEndVnode = newCh[--newEndIdx]; |
|
} else if (sameVnode(oldStartVnode, newEndVnode)) { |
|
var willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx); |
|
updated = willUpdate || updated; |
|
children[oldStartVnode.key == null ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[this._getChildName(newStartIdx) + "-temp"] : this._children[this._getChildName(oldStartIdx)]; |
|
insertBefore(oldStartVnode, oldEndVnode, true); |
|
oldStartVnode = oldCh[++oldStartIdx]; |
|
newEndVnode = newCh[--newEndIdx]; |
|
} else if (sameVnode(oldEndVnode, newStartVnode)) { |
|
var willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx); |
|
updated = willUpdate || updated; |
|
children[oldEndVnode.key == null ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[this._getChildName(newEndIdx) + "-temp"] : this._children[this._getChildName(oldEndIdx)]; |
|
insertBefore(oldEndVnode, oldStartVnode); |
|
oldEndVnode = oldCh[--oldEndIdx]; |
|
newStartVnode = newCh[++newStartIdx]; |
|
} else { |
|
var sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx); |
|
if (BI.isNull(sameOldVnode[0])) { // 不存在就把新的放到左边 |
|
var node = addNode(newStartVnode, newStartIdx, context); |
|
insertBefore(node, oldStartVnode); |
|
} else { // 如果新节点在旧节点区间中存在就复用一下 |
|
var sameOldIndex = sameOldVnode[1]; |
|
var willUpdate = self.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx); |
|
updated = willUpdate || updated; |
|
children[sameOldVnode[0].key == null ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[this._getChildName(newStartIdx) + "-temp"] : self._children[self._getChildName(sameOldIndex)]; |
|
oldCh[sameOldIndex] = undefined; |
|
insertBefore(sameOldVnode[0], oldStartVnode); |
|
} |
|
newStartVnode = newCh[++newStartIdx]; |
|
} |
|
} |
|
if (oldStartIdx > oldEndIdx) { |
|
before = BI.isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1]; |
|
addVnodes(before, newCh, newStartIdx, newEndIdx, context); |
|
} else if (newStartIdx > newEndIdx) { |
|
removeVnodes(oldCh, oldStartIdx, oldEndIdx); |
|
} |
|
|
|
this._children = {}; |
|
BI.each(newCh, function (i, child) { |
|
var node = self._getOptions(child); |
|
var key = node.key == null ? i : node.key; |
|
children[key]._setParent && children[key]._setParent(self); |
|
children[key]._mount(); |
|
self._children[self._getChildName(i)] = children[key]; |
|
}); |
|
|
|
function sameVnode (vnode1, vnode2, oldIndex, newIndex) { |
|
vnode1 = self._getOptions(vnode1); |
|
vnode2 = self._getOptions(vnode2); |
|
if (BI.isKey(vnode1.key)) { |
|
return vnode1.key === vnode2.key; |
|
} |
|
if (oldIndex >= 0) { |
|
return oldIndex === newIndex; |
|
} |
|
} |
|
|
|
function addNode (vnode, index, context) { |
|
var opt = self._getOptions(vnode); |
|
var key = opt.key == null ? index : opt.key; |
|
return children[key] = self._newElement(index, vnode, context); |
|
} |
|
|
|
function addVnodes (before, vnodes, startIdx, endIdx, context) { |
|
for (; startIdx <= endIdx; ++startIdx) { |
|
var node = addNode(vnodes[startIdx], startIdx, context); |
|
insertBefore(node, before, false, startIdx); |
|
} |
|
} |
|
|
|
function removeVnodes (vnodes, startIdx, endIdx) { |
|
for (; startIdx <= endIdx; ++startIdx) { |
|
var ch = vnodes[startIdx]; |
|
if (BI.isNotNull(ch)) { |
|
var node = self._getOptions(ch); |
|
var key = node.key == null ? startIdx : node.key; |
|
children[key]._destroy(); |
|
} |
|
} |
|
} |
|
|
|
function insertBefore (insert, before, isNext, index) { |
|
insert = self._getOptions(insert); |
|
before = before && self._getOptions(before); |
|
var insertKey = BI.isKey(insert.key) ? insert.key : index; |
|
if (before && children[before.key]) { |
|
var beforeKey = BI.isKey(before.key) ? before.key : index; |
|
var next; |
|
if (isNext) { |
|
next = children[beforeKey].element.next(); |
|
} else { |
|
next = children[beforeKey].element; |
|
} |
|
if (next.length > 0) { |
|
next.before(children[insertKey].element); |
|
} else { |
|
self._getWrapper().append(children[insertKey].element); |
|
} |
|
} else { |
|
self._getWrapper().append(children[insertKey].element); |
|
} |
|
} |
|
|
|
function findOldVnode (vnodes, vNode, beginIdx, endIdx) { |
|
var i, found, findIndex; |
|
for (i = beginIdx; i <= endIdx; ++i) { |
|
if (vnodes[i] && sameVnode(vnodes[i], vNode)) { |
|
found = vnodes[i]; |
|
findIndex = i; |
|
} |
|
} |
|
return [found, findIndex]; |
|
} |
|
|
|
return updated; |
|
}, |
|
|
|
forceUpdate: function (opt) { |
|
if (this._isMounted) { |
|
BI.each(this._children, function (i, c) { |
|
c.destroy(); |
|
}); |
|
this._children = {}; |
|
this._isMounted = false; |
|
} |
|
this.options.items = opt.items; |
|
this.stroke(opt.items); |
|
this._mount(); |
|
}, |
|
|
|
update: function (opt) { |
|
var o = this.options; |
|
var items = opt.items || []; |
|
var context = opt.context; |
|
var oldItems = o.items; |
|
this.options.items = items; |
|
return this.updateChildren(oldItems, items, context); |
|
}, |
|
|
|
stroke: function (items, options) { |
|
options = options || {}; |
|
var self = this; |
|
BI.each(items, function (i, item) { |
|
if (item) { |
|
self._addElement(i, item, options.context); |
|
} |
|
}); |
|
}, |
|
|
|
removeWidget: function (nameOrWidget) { |
|
var removeIndex, self = this; |
|
if (BI.isWidget(nameOrWidget)) { |
|
BI.each(this._children, function (name, child) { |
|
if (child === nameOrWidget) { |
|
removeIndex = name; |
|
} |
|
}); |
|
} else { |
|
removeIndex = nameOrWidget; |
|
} |
|
if (removeIndex) { |
|
this._removeItemAt(removeIndex | 0); |
|
} |
|
}, |
|
|
|
empty: function () { |
|
BI.Layout.superclass.empty.apply(this, arguments); |
|
this.options.items = []; |
|
}, |
|
|
|
destroy: function () { |
|
BI.Layout.superclass.destroy.apply(this, arguments); |
|
this.options.items = []; |
|
}, |
|
|
|
populate: function (items, options) { |
|
items = items || []; |
|
options = options || {}; |
|
if (this._isMounted) { |
|
this.update({ |
|
items: items, |
|
context: options.context |
|
}); |
|
return; |
|
} |
|
this.options.items = items; |
|
this.stroke(items, options); |
|
}, |
|
|
|
resize: function () { |
|
this.stroke(this.options.items); |
|
} |
|
}); |
|
BI.shortcut("bi.layout", BI.Layout);
|
|
|