Browse Source

feature: 布局优化写法,为系统配置做准备

es6
guy 3 years ago
parent
commit
ff22d7cb2e
  1. 51
      src/core/wrapper/layout.js
  2. 8
      src/core/wrapper/layout/adapt/absolute.center.js
  3. 205
      src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
  4. 4
      src/core/wrapper/layout/adapt/adapt.table.js
  5. 8
      src/core/wrapper/layout/fill/auto.vtape.js
  6. 28
      src/core/wrapper/layout/fill/float.fill.horizontal.js
  7. 18
      src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
  8. 18
      src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
  9. 36
      src/core/wrapper/layout/layout.flow.js
  10. 6
      src/core/wrapper/layout/layout.inline.js
  11. 24
      src/core/wrapper/layout/layout.tape.js
  12. 4
      src/core/wrapper/layout/layout.td.js
  13. 3
      src/core/wrapper/layout/sticky/sticky.horizontal.js
  14. 3
      src/core/wrapper/layout/sticky/sticky.vertical.js

51
src/core/wrapper/layout.js

@ -292,6 +292,25 @@ BI.Layout = BI.inherit(BI.Widget, {
return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit; return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
}, },
_optimiseItemLgap: function (item) {
return item.lgap || 0;
},
_optimiseItemRgap: function (item) {
return item.rgap || 0;
},
_optimiseItemTgap: function (item) {
return item.tgap || 0;
},
_optimiseItemBgap: function (item) {
return item.bgap || 0;
},
_optimiseItemHgap: function (item) {
return item.hgap || 0;
},
_optimiseItemVgap: function (item) {
return item.vgap || 0;
},
_handleGap: function (w, item, hIndex, vIndex) { _handleGap: function (w, item, hIndex, vIndex) {
var o = this.options; var o = this.options;
var innerLgap, innerRgap, innerTgap, innerBgap; var innerLgap, innerRgap, innerTgap, innerBgap;
@ -304,26 +323,26 @@ BI.Layout = BI.inherit(BI.Widget, {
innerTgap = vIndex === 0 ? o.innerVgap : 0; innerTgap = vIndex === 0 ? o.innerVgap : 0;
innerBgap = vIndex === o.items.length - 1 ? o.innerVgap : 0; innerBgap = vIndex === o.items.length - 1 ? o.innerVgap : 0;
} }
if (o.vgap + o.tgap + innerTgap + (item.tgap || 0) + (item.vgap || 0) !== 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 + (item.tgap || 0) + (item.vgap || 0); var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
w.element.css({ w.element.css({
"margin-top": this._optimiseGap(top) "margin-top": this._optimiseGap(top)
}); });
} }
if (o.hgap + o.lgap + innerLgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { 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 + (item.lgap || 0) + (item.hgap || 0); var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
w.element.css({ w.element.css({
"margin-left": this._optimiseGap(left) "margin-left": this._optimiseGap(left)
}); });
} }
if (o.hgap + o.rgap + innerRgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
var right = o.hgap + o.rgap + innerRgap + (item.rgap || 0) + (item.hgap || 0); var right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
w.element.css({ w.element.css({
"margin-right": this._optimiseGap(right) "margin-right": this._optimiseGap(right)
}); });
} }
if (o.vgap + o.bgap + innerBgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
var bottom = o.vgap + o.bgap + innerBgap + (item.bgap || 0) + (item.vgap || 0); var bottom = o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
w.element.css({ w.element.css({
"margin-bottom": this._optimiseGap(bottom) "margin-bottom": this._optimiseGap(bottom)
}); });
@ -337,27 +356,27 @@ BI.Layout = BI.inherit(BI.Widget, {
innerLgap = innerRgap = o.innerHgap; innerLgap = innerRgap = o.innerHgap;
innerTgap = index === 0 ? o.innerVgap : 0; innerTgap = index === 0 ? o.innerVgap : 0;
innerBgap = index === o.items.length - 1 ? o.innerVgap : 0; innerBgap = index === o.items.length - 1 ? o.innerVgap : 0;
if (o.vgap + o.tgap + innerTgap + (item.tgap || 0) + (item.vgap || 0) !== 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 + (item.tgap || 0) + (item.vgap || 0); var top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
w.element.css({ w.element.css({
"margin-top": this._optimiseGap(top) "margin-top": this._optimiseGap(top)
}); });
} }
if (o.hgap + o.lgap + innerLgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
var left = o.hgap + o.lgap + innerLgap + (item.lgap || 0) + (item.hgap || 0); var left = o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
w.element.css({ w.element.css({
"margin-left": this._optimiseGap(left) "margin-left": this._optimiseGap(left)
}); });
} }
if (o.hgap + o.rgap + innerRgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
var right = o.hgap + o.rgap + innerRgap + (item.rgap || 0) + (item.hgap || 0); var right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
w.element.css({ w.element.css({
"margin-right": this._optimiseGap(right) "margin-right": this._optimiseGap(right)
}); });
} }
// 这里的代码是关键 // 这里的代码是关键
if (o.vgap + o.hgap + o.bgap + innerBgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { 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 + (item.bgap || 0) + (item.vgap || 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({ w.element.css({
"margin-bottom": this._optimiseGap(bottom) "margin-bottom": this._optimiseGap(bottom)
}); });

8
src/core/wrapper/layout/adapt/absolute.center.js

@ -30,10 +30,10 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
var w = BI.AbsoluteCenterLayout.superclass._addElement.apply(this, arguments); var w = BI.AbsoluteCenterLayout.superclass._addElement.apply(this, arguments);
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: this._optimiseGap(o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)), left: this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
right: this._optimiseGap(o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)), right: this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
top: this._optimiseGap(o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)), top: this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)),
bottom: this._optimiseGap(o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)), bottom: this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)),
margin: "auto" margin: "auto"
}); });
return w; return w;

205
src/core/wrapper/layout/adapt/adapt.leftrightvertical.js

@ -1,16 +1,8 @@
/** BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
* 左右分离垂直方向居中容器
* items:{
left: [{el:{type:"bi.button"}}],
right:[{el:{type:"bi.button"}}]
}
* @class BI.LeftRightVerticalAdaptLayout
* @extends BI.Layout
*/
BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-lr-v-a", baseCls: "bi-abs-lr-v-a",
verticalAlign: BI.VerticalAlign.Middle,
items: {}, items: {},
llgap: 0, llgap: 0,
lrgap: 0, lrgap: 0,
@ -28,59 +20,24 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
var o = this.options, self = this; var o = this.options, self = this;
BI.LeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
var leftRight = this._getLeftRight(o.items); return {
var layoutArray = []; type: "bi.htape",
if (leftRight.left || "left" in o.items) { innerHgap: o.innerHgap,
layoutArray.push({ innerVgap: o.innerVgap,
type: "bi.left",
lgap: o.innerHgap,
vgap: o.innerVgap,
items: [{
el: {
type: "bi.vertical_adapt",
ref: function (_ref) {
self.left = _ref;
},
height: "100%",
items: leftRight.left || o.items.left,
hgap: o.lhgap,
lgap: o.llgap,
rgap: o.lrgap,
tgap: o.ltgap,
bgap: o.lbgap,
vgap: o.lvgap
}
}]
});
}
if (leftRight.right || "right" in o.items) {
layoutArray.push({
type: "bi.right",
rgap: o.innerHgap,
vgap: o.innerVgap,
items: [{
el: {
type: "bi.vertical_adapt",
ref: function (_ref) { ref: function (_ref) {
self.right = _ref; self.layout = _ref;
}, },
height: "100%", verticalAlign: o.verticalAlign,
items: leftRight.right || o.items.right, items: this._formatItems(o.items),
hgap: o.rhgap, scrollx: o.scrollx,
lgap: o.rlgap, scrolly: o.scrolly,
rgap: o.rrgap, scrollable: o.scrollable
tgap: o.rtgap, };
bgap: o.rbgap,
vgap: o.rvgap
}
}]
});
}
return layoutArray;
}, },
_getLeftRight: function (items) { _formatItems: function (items) {
var o = this.options;
var left, right; var left, right;
if (BI.isArray(items)) { if (BI.isArray(items)) {
BI.each(items, function (i, item) { BI.each(items, function (i, item) {
@ -92,72 +49,51 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
} }
}); });
} }
return { var leftItems = left || items.left || [];
left: left, var rightItems = right || items.right || [];
right: right leftItems = BI.map(leftItems, function (i, item) {
var json = {
el: BI.stripEL(item),
width: item.width
}; };
}, if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
resize: function () {
var leftRight = this._getLeftRight(this.options.items);
this.left.stroke(leftRight.left || this.options.items.left);
this.right.stroke(leftRight.right || this.options.items.right);
},
addItem: function () {
// do nothing
throw new Error("不能添加子组件");
},
populate: function (items) {
var leftRight = this._getLeftRight(items);
this.left.populate(leftRight.left || items.left);
this.right.populate(leftRight.right || items.right);
} }
if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
}
if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
}
if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
}
return json;
}); });
BI.shortcut("bi.left_right_vertical_adapt", BI.LeftRightVerticalAdaptLayout); rightItems = BI.map(rightItems, function (i, item) {
var json = {
el: BI.stripEL(item),
BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, { width: item.width
props: function () {
return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-l-v-a",
items: [],
columnSize: [],
lgap: 0,
rgap: 0,
hgap: 0,
tgap: 0,
bgap: 0,
vgap: 0
});
},
render: function () {
var o = this.options, self = this;
BI.LeftVerticalAdaptLayout.superclass.render.apply(this, arguments);
return {
type: "bi.vertical_adapt",
ref: function (_ref) {
self.layout = _ref;
},
items: o.items,
columnSize: o.columnSize,
hgap: o.hgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
vgap: o.vgap,
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable
}; };
if (o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
json.tgap = o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
}
if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
}
if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
}
if (o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
json.bgap = o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
}
return json;
});
return leftItems.concat({}, rightItems);
}, },
resize: function () { resize: function () {
this.layout.resize(); this.layout.stroke(this._formatItems(this.options.items));
}, },
addItem: function () { addItem: function () {
@ -166,17 +102,17 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
}, },
populate: function (items) { populate: function (items) {
this.layout.populate.apply(this, arguments); this.layout.populate(this._formatItems(items));
} }
}); });
BI.shortcut("bi.left_vertical_adapt", BI.LeftVerticalAdaptLayout); BI.shortcut("bi.absolute_left_right_vertical_adapt", BI.AbsoluteLeftRightVerticalAdaptLayout);
BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, { BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.RightVerticalAdaptLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.AbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-r-v-a", baseCls: "bi-abs-r-v-a",
verticalAlign: BI.VerticalAlign.Middle,
items: [], items: [],
columnSize: [],
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
hgap: 0, hgap: 0,
@ -187,23 +123,20 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
var o = this.options, self = this; var o = this.options, self = this;
BI.RightVerticalAdaptLayout.superclass.render.apply(this, arguments); BI.AbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
return { return {
type: "bi.vertical_adapt", type: "bi.htape",
ref: function (_ref) { ref: function (_ref) {
self.layout = _ref; self.layout = _ref;
}, },
horizontalAlign: BI.HorizontalAlign.Right, verticalAlign: o.verticalAlign,
items: o.items, items: [{}].concat(o.items),
columnSize: o.columnSize,
hgap: o.hgap, hgap: o.hgap,
lgap: o.lgap, lgap: o.lgap,
rgap: o.rgap, rgap: o.rgap,
tgap: o.tgap, tgap: o.tgap,
bgap: o.bgap, bgap: o.bgap,
vgap: o.vgap, vgap: o.vgap,
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable scrollable: o.scrollable
@ -211,7 +144,7 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
}, },
resize: function () { resize: function () {
this.layout.resize(); this.layout.stroke([{}].concat(this.options.items));
}, },
addItem: function () { addItem: function () {
@ -220,7 +153,7 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
}, },
populate: function (items) { populate: function (items) {
this.layout.populate(items); this.layout.populate([{}].concat(items));
} }
}); });
BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout); BI.shortcut("bi.absolute_right_vertical_adapt", BI.AbsoluteRightVerticalAdaptLayout);

4
src/core/wrapper/layout/adapt/adapt.table.js

@ -70,8 +70,8 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
td.element.width(width); td.element.width(width);
} }
if (o.verticalAlign === BI.VerticalAlign.Stretch) { if (o.verticalAlign === BI.VerticalAlign.Stretch) {
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), var top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")"); w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
} }
// 对于表现为td的元素设置最大宽度,有几点需要注意 // 对于表现为td的元素设置最大宽度,有几点需要注意

8
src/core/wrapper/layout/fill/auto.vtape.js

@ -60,10 +60,10 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
if (preRowSize === "") { if (preRowSize === "") {
preRowSize = self.layout.getWidgetByName(self._getChildName(i - 1)).element.height(); preRowSize = self.layout.getWidgetByName(self._getChildName(i - 1)).element.height();
} }
top[i] = top[i - 1] + preRowSize + (items[i - 1].tgap || 0) + (items[i - 1].bgap || 0) + 2 * (items[i - 1].vgap || 0) + o.vgap + o.tgap + o.bgap; top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
} }
w.element.css({ w.element.css({
top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap)
}); });
if (rowSize === "fill") { if (rowSize === "fill") {
@ -81,10 +81,10 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
if (nextRowSize === "") { if (nextRowSize === "") {
nextRowSize = self.layout.getWidgetByName(self._getChildName(i + 1)).element.height(); nextRowSize = self.layout.getWidgetByName(self._getChildName(i + 1)).element.height();
} }
bottom[i] = bottom[i + 1] + nextRowSize + (items[i + 1].tgap || 0) + (items[i + 1].bgap || 0) + 2 * (items[i + 1].vgap || 0) + o.vgap + o.tgap + o.bgap; bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
} }
w.element.css({ w.element.css({
bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap), bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap),
}); });
if (rowSize === "fill") { if (rowSize === "fill") {

28
src/core/wrapper/layout/fill/float.fill.horizontal.js

@ -45,41 +45,41 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
} else { } else {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
} }
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-top": self._optimiseGap(o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) "margin-top": self._optimiseGap(o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item))
}); });
} }
if (desc) { if (desc) {
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-right": self._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) "margin-right": self._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item))
}); });
} }
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-left": self._optimiseGap(o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) "margin-left": self._optimiseGap(o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item))
}); });
} }
} else { } else {
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-left": self._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) "margin-left": self._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item))
}); });
} }
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-right": self._optimiseGap(o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) "margin-right": self._optimiseGap(o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item))
}); });
} }
} }
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-bottom": self._optimiseGap(o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) "margin-bottom": self._optimiseGap(o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item))
}); });
} }
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), var top = o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); bottom = o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item);
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
w.element.css({ w.element.css({
height: "calc(100% - " + self._optimiseGap(top + bottom) + ")" height: "calc(100% - " + self._optimiseGap(top + bottom) + ")"

18
src/core/wrapper/layout/flex/flex.leftrightvertical.center.js

@ -35,7 +35,7 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
}, },
_formatItems: function (items) { _formatItems: function (items) {
var o = this.options; var self = this, o = this.options;
var left, right; var left, right;
if (BI.isArray(items)) { if (BI.isArray(items)) {
BI.each(items, function (i, item) { BI.each(items, function (i, item) {
@ -53,17 +53,17 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
var json = { var json = {
el: BI.stripEL(item) el: BI.stripEL(item)
}; };
if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0); json.tgap = o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item);
} }
if (o.lhgap + o.llgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + (item.lgap || 0) + (item.hgap || 0); json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
} }
if (o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
json.rgap = o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0); json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
} }
if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0); json.bgap = o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item);
} }
return json; return json;
}); });

18
src/core/wrapper/layout/float/float.absolute.leftrightvertical.js

@ -38,7 +38,7 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
}, },
_formatItems: function (items) { _formatItems: function (items) {
var o = this.options; var self = this, o = this.options;
var left, right; var left, right;
if (BI.isArray(items)) { if (BI.isArray(items)) {
BI.each(items, function (i, item) { BI.each(items, function (i, item) {
@ -68,11 +68,11 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
// if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { // if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
// json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0); // json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0);
// } // }
if (o.lhgap + o.llgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + (item.lgap || 0) + (item.hgap || 0); json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
} }
if (o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
json.rgap = o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0); json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
} }
// if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { // if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
// json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0); // json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0);
@ -95,11 +95,11 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
// if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { // if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
// json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0); // json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0);
// } // }
if (o.rhgap + o.rlgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.rhgap + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + (item.lgap || 0) + (item.hgap || 0); json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
} }
if (o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
json.rgap = o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0); json.rgap = o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
} }
// if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { // if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
// json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0); // json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0);

36
src/core/wrapper/layout/layout.flow.js

@ -56,26 +56,26 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
if (BI.isNotNull(item.bottom)) { if (BI.isNotNull(item.bottom)) {
w.element.css({bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom}); w.element.css({bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom});
} }
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
var top = o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0); var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
w.element.css({ w.element.css({
"margin-top": this._optimiseGap(top) "margin-top": this._optimiseGap(top)
}); });
} }
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
var left = o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0); var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
w.element.css({ w.element.css({
"margin-left": this._optimiseGap(left) "margin-left": this._optimiseGap(left)
}); });
} }
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
var right = o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0); var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
w.element.css({ w.element.css({
"margin-right": this._optimiseGap(right) "margin-right": this._optimiseGap(right)
}); });
} }
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
var bottom = o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0); var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
w.element.css({ w.element.css({
"margin-bottom": this._optimiseGap(bottom) "margin-bottom": this._optimiseGap(bottom)
}); });
@ -148,24 +148,28 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
if (BI.isNotNull(item.bottom)) { if (BI.isNotNull(item.bottom)) {
w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom}); w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom});
} }
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
w.element.css({ w.element.css({
"margin-top": (o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-top": this._optimiseGap(top)
}); });
} }
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
w.element.css({ w.element.css({
"margin-left": (o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-left": this._optimiseGap(left)
}); });
} }
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
w.element.css({ w.element.css({
"margin-right": (o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-right": this._optimiseGap(right)
}); });
} }
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
w.element.css({ w.element.css({
"margin-bottom": (o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-bottom": this._optimiseGap(bottom)
}); });
} }
return w; return w;

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

@ -66,7 +66,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
autoCount++; autoCount++;
cz = 0; cz = 0;
} }
gap += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0); gap += o.hgap + o.lgap + o.rgap + this._optimiseItemLgap(o.items[k]) + this._optimiseItemRgap(o.items[k]) + this._optimiseItemHgap(o.items[k]);
length += cz; length += cz;
} }
length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : length / BI.pixRatio + BI.pixUnit; length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : length / BI.pixRatio + BI.pixUnit;
@ -84,8 +84,8 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
} }
this._handleGap(w, item, i); this._handleGap(w, item, i);
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
var top = o.innerVgap + o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), var top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
bottom = o.innerVgap + o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); bottom = o.innerVgap + o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : (top + bottom) / BI.pixRatio + BI.pixUnit; var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : (top + bottom) / BI.pixRatio + BI.pixUnit;
w.element.css("height", "calc(100% - " + gap + ")"); w.element.css("height", "calc(100% - " + gap + ")");
} }

24
src/core/wrapper/layout/layout.tape.js

@ -53,8 +53,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
} }
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
top: self._optimiseGap((item.vgap || 0) + (item.tgap || 0) + o.innerVgap + o.vgap + o.tgap), top: self._optimiseGap(self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap),
bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.innerVgap + o.vgap + o.bgap), bottom: self._optimiseGap(self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap),
width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : "" width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
}); });
if (o.verticalAlign === BI.VerticalAlign.Middle) { if (o.verticalAlign === BI.VerticalAlign.Middle) {
@ -86,10 +86,10 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
} }
if (BI.isNull(left[i])) { if (BI.isNull(left[i])) {
var preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width; var preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width;
left[i] = left[i - 1] + preColumnSize + (items[i - 1].lgap || 0) + (items[i - 1].rgap || 0) + 2 * (items[i - 1].hgap || 0) + o.hgap + o.lgap + o.rgap; left[i] = left[i - 1] + preColumnSize + self._optimiseItemLgap(items[i - 1]) + self._optimiseItemRgap(items[i - 1]) + 2 * self._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap;
} }
w.element.css({ w.element.css({
left: self._optimiseGap(left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) left: self._optimiseGap(left[i] + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.hgap + o.lgap)
}); });
if (columnSize === "" || columnSize === "fill") { if (columnSize === "" || columnSize === "fill") {
@ -104,10 +104,10 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (BI.isNull(right[i])) { if (BI.isNull(right[i])) {
var nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width; var nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width;
right[i] = right[i + 1] + nextColumnSize + (items[i + 1].lgap || 0) + (items[i + 1].rgap || 0) + 2 * (items[i + 1].hgap || 0) + o.hgap + o.lgap + o.rgap; right[i] = right[i + 1] + nextColumnSize + self._optimiseItemLgap(items[i + 1]) + self._optimiseItemRgap(items[i + 1]) + 2 * self._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap;
} }
w.element.css({ w.element.css({
right: self._optimiseGap(right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap) right: self._optimiseGap(right[i] + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.hgap + o.rgap)
}); });
if (columnSize === "" || columnSize === "fill") { if (columnSize === "" || columnSize === "fill") {
@ -178,8 +178,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
} }
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: self._optimiseGap((item.lgap || 0) + (item.hgap || 0) + o.innerHgap + o.hgap + o.lgap), left: self._optimiseGap(self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap),
right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.innerHgap + o.hgap + o.rgap), right: self._optimiseGap(self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap),
height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : "" height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
}); });
if (o.horizontalAlign === BI.HorizontalAlign.Center) { if (o.horizontalAlign === BI.HorizontalAlign.Center) {
@ -211,10 +211,10 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
} }
if (BI.isNull(top[i])) { if (BI.isNull(top[i])) {
var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height; var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
top[i] = top[i - 1] + preRowSize + (items[i - 1].tgap || 0) + (items[i - 1].bgap || 0) + 2 * (items[i - 1].vgap || 0) + o.vgap + o.tgap + o.bgap; top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
} }
w.element.css({ w.element.css({
top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap)
}); });
if (rowSize === "" || rowSize === "fill") { if (rowSize === "" || rowSize === "fill") {
@ -229,10 +229,10 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (BI.isNull(bottom[i])) { if (BI.isNull(bottom[i])) {
var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height; var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
bottom[i] = bottom[i + 1] + nextRowSize + (items[i + 1].tgap || 0) + (items[i + 1].bgap || 0) + 2 * (items[i + 1].vgap || 0) + o.vgap + o.tgap + o.bgap; bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
} }
w.element.css({ w.element.css({
bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap) bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap)
}); });
if (rowSize === "" || rowSize === "fill") { if (rowSize === "" || rowSize === "fill") {

4
src/core/wrapper/layout/layout.td.js

@ -92,8 +92,8 @@ BI.TdLayout = BI.inherit(BI.Layout, {
for (var i = 0; i < arr.length; i++) { for (var i = 0; i < arr.length; i++) {
var w = BI._lazyCreateWidget(arr[i]); var w = BI._lazyCreateWidget(arr[i]);
if (o.verticalAlign === BI.VerticalAlign.Stretch) { if (o.verticalAlign === BI.VerticalAlign.Stretch) {
var top = o.vgap + o.tgap + (arr[i].tgap || 0) + (arr[i].vgap || 0), var top = o.vgap + o.tgap + this._optimiseItemTgap(arr[i]) + this._optimiseItemVgap(arr[i]),
bottom = o.vgap + o.bgap + (arr[i].bgap || 0) + (arr[i].vgap || 0); bottom = o.vgap + o.bgap + this._optimiseItemBgap(arr[i]) + this._optimiseItemVgap(arr[i]);
w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")"); w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
} }
w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});

3
src/core/wrapper/layout/sticky/sticky.horizontal.js

@ -5,7 +5,8 @@ BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, {
props: function () { props: function () {
return BI.extend(BI.HorizontalStickyLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.HorizontalStickyLayout.superclass.props.apply(this, arguments), {
extraCls: "bi-h-sticky", extraCls: "bi-h-sticky",
horizontalAlign: BI.HorizontalAlign.Stretch, scrollx: true,
// horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch verticalAlign: BI.VerticalAlign.Stretch
}); });
}, },

3
src/core/wrapper/layout/sticky/sticky.vertical.js

@ -5,8 +5,9 @@ BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, {
props: function () { props: function () {
return BI.extend(BI.VerticalStickyLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.VerticalStickyLayout.superclass.props.apply(this, arguments), {
extraCls: "bi-v-sticky", extraCls: "bi-v-sticky",
scrolly: true,
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch // verticalAlign: BI.VerticalAlign.Stretch
}); });
}, },

Loading…
Cancel
Save