Browse Source

Pull request #2321: 无JIAR任务 布局支持百分比

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit '94564271eb156389eab76086cd2a466754a4f68c':
  布局支持百分比
  update
es6
guy 3 years ago
parent
commit
8546df1d5d
  1. 12
      examples/响应式布局.html
  2. 24
      src/core/wrapper/layout.js
  3. 8
      src/core/wrapper/layout/adapt/absolute.center.js
  4. 11
      src/core/wrapper/layout/adapt/adapt.table.js
  5. 14
      src/core/wrapper/layout/fill/float.fill.horizontal.js
  6. 2
      src/core/wrapper/layout/flex/flex.horizontal.js
  7. 2
      src/core/wrapper/layout/flex/flex.vertical.js
  8. 2
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
  9. 2
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
  10. 28
      src/core/wrapper/layout/layout.absolute.js
  11. 12
      src/core/wrapper/layout/layout.adaptive.js
  12. 40
      src/core/wrapper/layout/layout.border.js
  13. 8
      src/core/wrapper/layout/layout.card.js
  14. 16
      src/core/wrapper/layout/layout.flow.js
  15. 16
      src/core/wrapper/layout/layout.inline.js
  16. 14
      src/core/wrapper/layout/layout.table.js
  17. 72
      src/core/wrapper/layout/layout.tape.js
  18. 18
      src/core/wrapper/layout/layout.td.js
  19. 16
      src/core/wrapper/layout/layout.window.js
  20. 8
      src/core/wrapper/layout/middle/middle.center.js
  21. 8
      src/core/wrapper/layout/middle/middle.float.center.js
  22. 8
      src/core/wrapper/layout/middle/middle.horizontal.js
  23. 8
      src/core/wrapper/layout/middle/middle.vertical.js

12
examples/响应式布局.html

@ -53,13 +53,13 @@
box-shadow: 0 2px 5px rgb(0 0 0 / 16%), 0 2px 10px rgb(0 0 0 / 12%); box-shadow: 0 2px 5px rgb(0 0 0 / 16%), 0 2px 10px rgb(0 0 0 / 12%);
} }
.nav-logo { .nav-logo {
background-image: url(https://www.pullrequest.com/images/pullrequest-logo.svg); background-image: url(https://qn.wangchuan.cc/pullrequest-logo.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50%; background-position: 50%;
background-size: contain; background-size: contain;
} }
.image { .image {
background-image: url(https://www.pullrequest.com/images/figures/home/hero-graphic.png); background-image: url(https://qn.wangchuan.cc/hero-graphic.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
@ -79,7 +79,7 @@
border: 1px solid #4aa4e0; border: 1px solid #4aa4e0;
} }
.wave { .wave {
background-image: url(https://www.pullrequest.com/images/textures/home/wave1.png); background-image: url(https://qn.wangchuan.cc/wave.png);
background-size: cover; background-size: cover;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
@ -205,7 +205,7 @@
maxWidth: "100%", maxWidth: "100%",
maxHeight: "100%", maxHeight: "100%",
}, },
src: "https://www.pullrequest.com/images/figures/home/hero-graphic.png", src: "https://qn.wangchuan.cc/hero-graphic.png",
width: "auto", width: "auto",
height: "auto", height: "auto",
}, },
@ -318,7 +318,7 @@
maxWidth: "100%", maxWidth: "100%",
maxHeight: "100%", maxHeight: "100%",
}, },
src: "https://www.pullrequest.com/images/figures/home/velocity.png", src: "https://qn.wangchuan.cc/velocity.png",
width: "auto", width: "auto",
height: "auto", height: "auto",
}, },
@ -358,7 +358,7 @@
maxWidth: "100%", maxWidth: "100%",
maxHeight: "100%", maxHeight: "100%",
}, },
src: "https://www.pullrequest.com/images/figures/home/secure.png", src: "https://qn.wangchuan.cc/secure.png",
width: "auto", width: "auto",
height: "auto", height: "auto",
}, },

24
src/core/wrapper/layout.js

@ -276,30 +276,34 @@ BI.Layout = BI.inherit(BI.Widget, {
}) })
}, },
_optimiseGap: function (gap) {
return gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
},
_handleGap: function (w, item, hIndex, vIndex) { _handleGap: function (w, item, hIndex, vIndex) {
var o = this.options; var o = this.options;
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0); var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-top": top > 0 && top < 1 ? (top * 100).toFixed(1) + "%" : top / 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 + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0); var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-left": left > 0 && left < 1 ? (left * 100).toFixed(1) + "%" : left / 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 + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0); var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-right": right > 0 && right < 1 ? (right * 100).toFixed(1) + "%" : right / 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 + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); var bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-bottom": bottom > 0 && bottom < 1 ? (bottom * 100).toFixed(1) + "%" : bottom / BI.pixRatio + BI.pixUnit "margin-bottom": this._optimiseGap(bottom)
}); });
} }
}, },
@ -308,28 +312,28 @@ BI.Layout = BI.inherit(BI.Widget, {
_handleReverseGap: function (w, item, index) { _handleReverseGap: function (w, item, index) {
var o = this.options; var o = this.options;
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = (index === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0); var top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + (item.tgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-top": top > 0 && top < 1 ? (top * 100).toFixed(1) + "%" : top / 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 + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0); var left = o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-left": left > 0 && left < 1 ? (left * 100).toFixed(1) + "%" : left / 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 + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0); var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-right": right > 0 && right < 1 ? (right * 100).toFixed(1) + "%" : right / BI.pixRatio + BI.pixUnit "margin-right": this._optimiseGap(right)
}); });
} }
// 这里的代码是关键 // 这里的代码是关键
if (o.vgap + o.hgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.hgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + o.bgap + (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) + (item.bgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-bottom": bottom > 0 && bottom < 1 ? (bottom * 100).toFixed(1) + "%" : bottom / BI.pixRatio + BI.pixUnit "margin-bottom": this._optimiseGap(bottom)
}); });
} }
}, },

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

@ -26,10 +26,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: (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit, left: this._optimiseGap(o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)),
right: (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit, right: this._optimiseGap(o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)),
top: (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit, top: this._optimiseGap(o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)),
bottom: (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit, bottom: this._optimiseGap(o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)),
margin: "auto" margin: "auto"
}); });
return w; return w;

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

@ -48,9 +48,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
var td, width = ""; var td, width = "";
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize > 0) { if (columnSize > 0) {
width = columnSize < 1 ? width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
((columnSize * 100).toFixed(1) + "%")
: (columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
} }
if ((BI.isNull(columnSize) || columnSize === "") && this._hasFill()) { if ((BI.isNull(columnSize) || columnSize === "") && this._hasFill()) {
width = 2; width = 2;
@ -71,17 +69,16 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
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 + (item.tgap || 0) + (item.vgap || 0),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")"); w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
} }
// 对于表现为td的元素设置最大宽度,有几点需要注意 // 对于表现为td的元素设置最大宽度,有几点需要注意
// 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现 // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
// 2、不能给多个td设置最大宽度,这样只会平分宽度 // 2、不能给多个td设置最大宽度,这样只会平分宽度
// 3、多百分比宽度就算了 // 3、多百分比宽度就算了
if (columnSize > 0) { if (columnSize > 0) {
columnSize = columnSize < 1 ? width : width / BI.pixRatio + BI.pixUnit;
td.element.css({ td.element.css({
"max-width": columnSize, "max-width": width,
"min-width": columnSize "min-width": width
}); });
} }
if (i === 0) { if (i === 0) {

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

@ -43,42 +43,42 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
} }
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-top": self._optimiseGap(o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0))
}); });
} }
if (desc) { if (desc) {
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-right": ((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-right": self._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0))
}); });
} }
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-left": self._optimiseGap(o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0))
}); });
} }
} else { } else {
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-left": self._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0))
}); });
} }
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-right": self._optimiseGap(o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0))
}); });
} }
} }
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-bottom": self._optimiseGap(o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0))
}); });
} }
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
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% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")" height: "calc(100% - " + self._optimiseGap(top + bottom) + ")"
}); });
} }
w.element.css({ w.element.css({

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

@ -74,7 +74,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
} }
} }
if (columnSize > 0) { if (columnSize > 0) {
w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit)); w.element.width(this._optimiseGap(columnSize));
} }
if (columnSize === "fill") { if (columnSize === "fill") {
w.element.addClass("f-f"); w.element.addClass("f-f");

2
src/core/wrapper/layout/flex/flex.vertical.js

@ -73,7 +73,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
} }
} }
if (rowSize > 0) { if (rowSize > 0) {
w.element.height(rowSize < 1 ? ((rowSize * 100).toFixed(1) + "%") : (rowSize / BI.pixRatio + BI.pixUnit)); w.element.height(this._optimiseGap(rowSize));
} }
if (rowSize === "fill") { if (rowSize === "fill") {
w.element.addClass("f-f"); w.element.addClass("f-f");

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

@ -70,7 +70,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
} }
} }
if (columnSize > 0) { if (columnSize > 0) {
w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit)); w.element.width(this._optimiseGap(columnSize));
} }
if (columnSize === "fill") { if (columnSize === "fill") {
w.element.addClass("f-f"); w.element.addClass("f-f");

2
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js

@ -70,7 +70,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
} }
} }
if (rowSize > 0) { if (rowSize > 0) {
w.element.height(rowSize < 1 ? ((rowSize * 100).toFixed(1) + "%") : (rowSize / BI.pixRatio + BI.pixUnit)); w.element.height(this._optimiseGap(rowSize));
} }
if (rowSize === "fill") { if (rowSize === "fill") {
w.element.addClass("f-f"); w.element.addClass("f-f");

28
src/core/wrapper/layout/layout.absolute.js

@ -25,57 +25,57 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments); var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments);
var left = 0, right = 0, top = 0, bottom = 0; var left = 0, right = 0, top = 0, bottom = 0;
if (BI.isNotNull(item.left)) { if (BI.isNotNull(item.left)) {
w.element.css({left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left}); w.element.css({left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left});
left += item.left; left += item.left;
} }
if (BI.isNotNull(item.right)) { if (BI.isNotNull(item.right)) {
w.element.css({right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right}); w.element.css({right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right});
right += item.right; right += item.right;
} }
if (BI.isNotNull(item.top)) { if (BI.isNotNull(item.top)) {
w.element.css({top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top}); w.element.css({top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top});
top += item.top; top += item.top;
} }
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) ? this._optimiseGap(item.bottom) : item.bottom});
bottom += item.bottom; bottom += item.bottom;
} }
if (BI.isNotNull(o.hgap)) { if (BI.isNotNull(o.hgap)) {
left += o.hgap; left += o.hgap;
w.element.css({left: left / BI.pixRatio + BI.pixUnit}); w.element.css({left: this._optimiseGap(left)});
right += o.hgap; right += o.hgap;
w.element.css({right: right / BI.pixRatio + BI.pixUnit}); w.element.css({right: this._optimiseGap(right)});
} }
if (BI.isNotNull(o.vgap)) { if (BI.isNotNull(o.vgap)) {
top += o.vgap; top += o.vgap;
w.element.css({top: top / BI.pixRatio + BI.pixUnit}); w.element.css({top: this._optimiseGap(top)});
bottom += o.vgap; bottom += o.vgap;
w.element.css({bottom: bottom / BI.pixRatio + BI.pixUnit}); w.element.css({bottom: this._optimiseGap(bottom)});
} }
if (BI.isNotNull(o.lgap)) { if (BI.isNotNull(o.lgap)) {
left += o.lgap; left += o.lgap;
w.element.css({left: left / BI.pixRatio + BI.pixUnit}); w.element.css({left: this._optimiseGap(left)});
} }
if (BI.isNotNull(o.rgap)) { if (BI.isNotNull(o.rgap)) {
right += o.rgap; right += o.rgap;
w.element.css({right: right / BI.pixRatio + BI.pixUnit}); w.element.css({right: this._optimiseGap(right)});
} }
if (BI.isNotNull(o.tgap)) { if (BI.isNotNull(o.tgap)) {
top += o.tgap; top += o.tgap;
w.element.css({top: top / BI.pixRatio + BI.pixUnit}); w.element.css({top: this._optimiseGap(top)});
} }
if (BI.isNotNull(o.bgap)) { if (BI.isNotNull(o.bgap)) {
bottom += o.bgap; bottom += o.bgap;
w.element.css({bottom: bottom / BI.pixRatio + BI.pixUnit}); w.element.css({bottom: this._optimiseGap(bottom)});
} }
if (BI.isNotNull(item.width)) { if (BI.isNotNull(item.width)) {
w.element.css({width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : item.width}); w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
} }
if (BI.isNotNull(item.height)) { if (BI.isNotNull(item.height)) {
w.element.css({height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : item.height}); w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
} }
w.element.css({position: "absolute"}); w.element.css({position: "absolute"});
return w; return w;

12
src/core/wrapper/layout/layout.adaptive.js

@ -21,32 +21,32 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, {
w.element.css({position: "relative"}); w.element.css({position: "relative"});
if (BI.isNotNull(item.left)) { if (BI.isNotNull(item.left)) {
w.element.css({ w.element.css({
left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left
}); });
} }
if (BI.isNotNull(item.right)) { if (BI.isNotNull(item.right)) {
w.element.css({ w.element.css({
right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right
}); });
} }
if (BI.isNotNull(item.top)) { if (BI.isNotNull(item.top)) {
w.element.css({ w.element.css({
top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top
}); });
} }
if (BI.isNotNull(item.bottom)) { if (BI.isNotNull(item.bottom)) {
w.element.css({ w.element.css({
bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom
}); });
} }
this._handleGap(w, item); this._handleGap(w, item);
if (BI.isNotNull(item.width)) { if (BI.isNotNull(item.width)) {
w.element.css({width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : item.width}); w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
} }
if (BI.isNotNull(item.height)) { if (BI.isNotNull(item.height)) {
w.element.css({height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : item.height}); w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
} }
return w; return w;
}, },

40
src/core/wrapper/layout/layout.border.js

@ -35,12 +35,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
this.addWidget(this._getChildName("north"), w); this.addWidget(this._getChildName("north"), w);
} }
this.getWidgetByName(this._getChildName("north")).element.height(item.height / BI.pixRatio + BI.pixUnit) this.getWidgetByName(this._getChildName("north")).element.height(this._optimiseGap(item.height))
.css({ .css({
position: "absolute", position: "absolute",
top: (item.top || 0) / BI.pixRatio + BI.pixUnit, top: this._optimiseGap(item.top || 0),
left: (item.left || 0) / BI.pixRatio + BI.pixUnit, left: this._optimiseGap(item.left || 0),
right: (item.right || 0) / BI.pixRatio + BI.pixUnit, right: this._optimiseGap(item.right || 0),
bottom: "initial" bottom: "initial"
}); });
} }
@ -55,12 +55,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
this.addWidget(this._getChildName("south"), w); this.addWidget(this._getChildName("south"), w);
} }
this.getWidgetByName(this._getChildName("south")).element.height(item.height / BI.pixRatio + BI.pixUnit) this.getWidgetByName(this._getChildName("south")).element.height(this._optimiseGap(item.height))
.css({ .css({
position: "absolute", position: "absolute",
bottom: (item.bottom || 0) / BI.pixRatio + BI.pixUnit, bottom: this._optimiseGap(item.bottom || 0),
left: (item.left || 0) / BI.pixRatio + BI.pixUnit, left: this._optimiseGap(item.left || 0),
right: (item.right || 0) / BI.pixRatio + BI.pixUnit, right: this._optimiseGap(item.right || 0),
top: "initial" top: "initial"
}); });
} }
@ -75,12 +75,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
this.addWidget(this._getChildName("west"), w); this.addWidget(this._getChildName("west"), w);
} }
this.getWidgetByName(this._getChildName("west")).element.width(item.width / BI.pixRatio + BI.pixUnit) this.getWidgetByName(this._getChildName("west")).element.width(this._optimiseGap(item.width))
.css({ .css({
position: "absolute", position: "absolute",
left: (item.left || 0) / BI.pixRatio + BI.pixUnit, left: this._optimiseGap(item.left || 0),
top: top / BI.pixRatio + BI.pixUnit, top: this._optimiseGap(top),
bottom: bottom / BI.pixRatio + BI.pixUnit, bottom: this._optimiseGap(bottom),
right: "initial" right: "initial"
}); });
} }
@ -95,12 +95,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
this.addWidget(this._getChildName("east"), w); this.addWidget(this._getChildName("east"), w);
} }
this.getWidgetByName(this._getChildName("east")).element.width(item.width / BI.pixRatio + BI.pixUnit) this.getWidgetByName(this._getChildName("east")).element.width(this._optimiseGap(item.width))
.css({ .css({
position: "absolute", position: "absolute",
right: (item.right || 0) / BI.pixRatio + BI.pixUnit, right: this._optimiseGap(item.right || 0),
top: top / BI.pixRatio + BI.pixUnit, top: this._optimiseGap(top),
bottom: bottom / BI.pixRatio + BI.pixUnit, bottom: this._optimiseGap(bottom),
left: "initial" left: "initial"
}); });
} }
@ -117,10 +117,10 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
this.getWidgetByName(this._getChildName("center")).element this.getWidgetByName(this._getChildName("center")).element
.css({ .css({
position: "absolute", position: "absolute",
top: top / BI.pixRatio + BI.pixUnit, top: this._optimiseGap(top),
bottom: bottom / BI.pixRatio + BI.pixUnit, bottom: this._optimiseGap(bottom),
left: left / BI.pixRatio + BI.pixUnit, left: this._optimiseGap(left),
right: right / BI.pixRatio + BI.pixUnit right: this._optimiseGap(right)
}); });
} }
} }

8
src/core/wrapper/layout/layout.card.js

@ -38,7 +38,13 @@ BI.CardLayout = BI.inherit(BI.Layout, {
} else { } else {
var w = self.getWidgetByName(self._getChildName(item.cardName)); var w = self.getWidgetByName(self._getChildName(item.cardName));
} }
w.element.css({position: "absolute", top: "0", right: "0", bottom: "0", left: "0"}); w.element.css({
position: "relative",
top: "0",
left: "0",
width: "100%",
height: "100%"
});
w.setVisible(false); w.setVisible(false);
} }
}); });

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

@ -30,39 +30,39 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
var w = BI.FloatLeftLayout.superclass._addElement.apply(this, arguments); var w = BI.FloatLeftLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", float: "left"}); w.element.css({position: "relative", float: "left"});
if (BI.isNotNull(item.left)) { if (BI.isNotNull(item.left)) {
w.element.css({left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left}); w.element.css({left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left});
} }
if (BI.isNotNull(item.right)) { if (BI.isNotNull(item.right)) {
w.element.css({right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right}); w.element.css({right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right});
} }
if (BI.isNotNull(item.top)) { if (BI.isNotNull(item.top)) {
w.element.css({top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top}); w.element.css({top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top});
} }
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) ? this._optimiseGap(item.bottom) : item.bottom});
} }
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0); var top = o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-top": top > 0 && top < 1 ? (top * 100).toFixed(1) + "%" : top / 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 + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0); var left = o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-left": left > 0 && left < 1 ? (left * 100).toFixed(1) + "%" : left / 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 + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0); var right = o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-right": right > 0 && right < 1 ? (right * 100).toFixed(1) + "%" : right / 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 + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0); var bottom = o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-bottom": bottom > 0 && bottom < 1 ? (bottom * 100).toFixed(1) + "%" : bottom / BI.pixRatio + BI.pixUnit "margin-bottom": this._optimiseGap(bottom)
}); });
} }
return w; return w;

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

@ -52,7 +52,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
}); });
w.element.addClass("i-item"); w.element.addClass("i-item");
if (columnSize === "fill" || columnSize === "") { if (columnSize === "fill" || columnSize === "") {
var length = o.hgap; var length = 0, gap = o.hgap;
var fillCount = 0, autoCount = 0; var fillCount = 0, autoCount = 0;
for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
@ -63,16 +63,19 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
autoCount++; autoCount++;
cz = 0; cz = 0;
} }
length += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + cz; gap += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0);
length += cz;
} }
length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : length / BI.pixRatio + BI.pixUnit;
gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
if (columnSize === "fill") { if (columnSize === "fill") {
w.element.css("min-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); w.element.css("min-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
} }
if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) { if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
if (columnSize === "fill") { if (columnSize === "fill") {
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
} else { } else {
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")"); w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")");
} }
} }
} }
@ -80,7 +83,8 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css("height", "calc(100% - " + ((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 + ")");
} }
return w; return w;
}, },

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

@ -69,8 +69,8 @@ BI.TableLayout = BI.inherit(BI.Layout, {
abs.push(BI.extend({ abs.push(BI.extend({
top: 0, top: 0,
bottom: 0, bottom: 0,
left: o.columnSize[i] < 1 ? (left * 100).toFixed(1) + "%" : left, left: this._optimiseGap(left),
width: o.columnSize[i] < 1 ? (o.columnSize[i] * 100).toFixed(1) + "%" : o.columnSize[i] width: this._optimiseGap(o.columnSize[i])
}, arr[i])); }, arr[i]));
left += o.columnSize[i] + (o.columnSize[i] < 1 ? 0 : o.hgap); left += o.columnSize[i] + (o.columnSize[i] < 1 ? 0 : o.hgap);
} else { } else {
@ -83,8 +83,8 @@ BI.TableLayout = BI.inherit(BI.Layout, {
abs.push(BI.extend({ abs.push(BI.extend({
top: 0, top: 0,
bottom: 0, bottom: 0,
right: o.columnSize[j] < 1 ? (right * 100).toFixed(1) + "%" : right, right: this._optimiseGap(right),
width: o.columnSize[j] < 1 ? (o.columnSize[j] * 100).toFixed(1) + "%" : o.columnSize[j] width: this._optimiseGap(o.columnSize[j])
}, arr[j])); }, arr[j]));
right += o.columnSize[j] + (o.columnSize[j] < 1 ? 0 : o.hgap); right += o.columnSize[j] + (o.columnSize[j] < 1 ? 0 : o.hgap);
} else { } else {
@ -96,8 +96,8 @@ BI.TableLayout = BI.inherit(BI.Layout, {
abs.push(BI.extend({ abs.push(BI.extend({
top: 0, top: 0,
bottom: 0, bottom: 0,
left: left < 1 ? (left * 100).toFixed(1) + "%" : left, left: this._optimiseGap(left),
right: right < 1 ? (right * 100).toFixed(1) + "%" : right right: this._optimiseGap(right)
}, arr[i])); }, arr[i]));
} }
var w = BI._lazyCreateWidget({ var w = BI._lazyCreateWidget({
@ -107,7 +107,7 @@ BI.TableLayout = BI.inherit(BI.Layout, {
}); });
if (this.rows > 0) { if (this.rows > 0) {
this.getWidgetByName(this._getChildName(this.rows - 1)).element.css({ this.getWidgetByName(this._getChildName(this.rows - 1)).element.css({
"margin-bottom": o.vgap / BI.pixRatio + BI.pixUnit "margin-bottom": this._optimiseGap(o.vgap)
}); });
} }
w.element.css({ w.element.css({

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

@ -43,8 +43,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
} }
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
top: ((item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, top: self._optimiseGap((item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
bottom: ((item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap)
}); });
if (o.verticalAlign === BI.VerticalAlign.Middle) { if (o.verticalAlign === BI.VerticalAlign.Middle) {
w.element.css({ w.element.css({
@ -77,17 +77,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
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 + (items[i - 1].lgap || 0) + (items[i - 1].rgap || 0) + 2 * (items[i - 1].hgap || 0) + o.hgap + o.lgap + o.rgap;
} }
if (columnSize < 1 && columnSize > 0) { w.element.css({
w.element.css({ left: self._optimiseGap(left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
left: (left[i] * 100).toFixed(1) + "%", width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
width: (columnSize * 100).toFixed(1) + "%" });
});
} else {
w.element.css({
left: (left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
width: BI.isNumber(columnSize) ? columnSize / BI.pixRatio + BI.pixUnit : ""
});
}
if (columnSize === "" || columnSize === "fill") { if (columnSize === "" || columnSize === "fill") {
return true; return true;
} }
@ -102,17 +96,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
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 + (items[i + 1].lgap || 0) + (items[i + 1].rgap || 0) + 2 * (items[i + 1].hgap || 0) + o.hgap + o.lgap + o.rgap;
} }
if (columnSize < 1 && columnSize > 0) { w.element.css({
w.element.css({ right: self._optimiseGap(right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap),
right: (right[i] * 100).toFixed(1) + "%", width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
width: (columnSize * 100).toFixed(1) + "%" });
});
} else {
w.element.css({
right: (right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
width: BI.isNumber(columnSize) ? columnSize / BI.pixRatio + BI.pixUnit : ""
});
}
if (columnSize === "" || columnSize === "fill") { if (columnSize === "" || columnSize === "fill") {
return true; return true;
} }
@ -175,8 +163,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
} }
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: ((item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, left: self._optimiseGap((item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
right: ((item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap)
}); });
if (o.horizontalAlign === BI.HorizontalAlign.Center) { if (o.horizontalAlign === BI.HorizontalAlign.Center) {
w.element.css({ w.element.css({
@ -209,17 +197,11 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
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 + (items[i - 1].tgap || 0) + (items[i - 1].bgap || 0) + 2 * (items[i - 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
} }
if (rowSize < 1 && rowSize > 0) { w.element.css({
w.element.css({ top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
top: (top[i] * 100).toFixed(1) + "%", height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
height: (rowSize * 100).toFixed(1) + "%" });
});
} else {
w.element.css({
top: (top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
height: BI.isNumber(rowSize) ? rowSize / BI.pixRatio + BI.pixUnit : ""
});
}
if (rowSize === "" || rowSize === "fill") { if (rowSize === "" || rowSize === "fill") {
return true; return true;
} }
@ -234,17 +216,11 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
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 + (items[i + 1].tgap || 0) + (items[i + 1].bgap || 0) + 2 * (items[i + 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
} }
if (rowSize < 1 && rowSize > 0) { w.element.css({
w.element.css({ bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap),
bottom: (bottom[i] * 100).toFixed(1) + "%", height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
height: (rowSize * 100).toFixed(1) + "%" });
});
} else {
w.element.css({
bottom: (bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
height: BI.isNumber(rowSize) ? rowSize / BI.pixRatio + BI.pixUnit : ""
});
}
if (rowSize === "" || rowSize === "fill") { if (rowSize === "" || rowSize === "fill") {
return true; return true;
} }

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

@ -75,15 +75,14 @@ BI.TdLayout = BI.inherit(BI.Layout, {
} }
} }
var height = o.rowSize[idx] === "" ? "" : (o.rowSize[idx] < 1 ? ((o.rowSize[idx] * 100).toFixed(1) + "%") : o.rowSize[idx]); var height = o.rowSize[idx] === "" ? "" : this._optimiseGap(o.rowSize[idx]);
var rowHeight = BI.isNumber(o.rowSize[idx]) ? (o.rowSize[idx] <= 1 ? height : height / BI.pixRatio + BI.pixUnit) : height;
var tr = BI._lazyCreateWidget({ var tr = BI._lazyCreateWidget({
type: "bi.default", type: "bi.default",
tagName: "tr", tagName: "tr",
height: height, height: height,
css: { css: {
"max-height": rowHeight, "max-height": height,
"min-height": rowHeight "min-height": height
} }
}); });
@ -92,7 +91,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
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 + (arr[i].tgap || 0) + (arr[i].vgap || 0),
bottom = o.vgap + o.bgap + (arr[i].bgap || 0) + (arr[i].vgap || 0); bottom = o.vgap + o.bgap + (arr[i].bgap || 0) + (arr[i].vgap || 0);
w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")"); 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"});
var item = arr[i]; var item = arr[i];
@ -101,9 +100,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
var width = ""; var width = "";
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize > 0) { if (columnSize > 0) {
width = columnSize < 1 ? width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
((columnSize * 100).toFixed(1) + "%")
: (columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
} }
function hasFill() { function hasFill() {
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
@ -129,10 +126,9 @@ BI.TdLayout = BI.inherit(BI.Layout, {
// 2、不能给多个td设置最大宽度,这样只会平分宽度 // 2、不能给多个td设置最大宽度,这样只会平分宽度
// 3、多百分比宽度就算了 // 3、多百分比宽度就算了
if (columnSize > 0) { if (columnSize > 0) {
columnSize = columnSize < 1 ? width : width / BI.pixRatio + BI.pixUnit;
td.element.css({ td.element.css({
"max-width": columnSize, "max-width": width,
"min-width": columnSize "min-width": width
}); });
} }
td.element.css({ td.element.css({

16
src/core/wrapper/layout/layout.window.js

@ -100,9 +100,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
if (BI.isNull(top[i])) { if (BI.isNull(top[i])) {
top[i] = top[i - 1] + (o.rowSize[i - 1] < 1 ? o.rowSize[i - 1] : o.rowSize[i - 1] + o.vgap + o.bgap); top[i] = top[i - 1] + (o.rowSize[i - 1] < 1 ? o.rowSize[i - 1] : o.rowSize[i - 1] + o.vgap + o.bgap);
} }
var t = top[i] <= 1 ? (top[i] * 100).toFixed(1) + "%" : (top[i] + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, h = ""; var t = this._optimiseGap(top[i] + o.vgap + o.tgap), h = "";
if (BI.isNumber(o.rowSize[i])) { if (BI.isNumber(o.rowSize[i])) {
h = o.rowSize[i] <= 1 ? (o.rowSize[i] * 100).toFixed(1) + "%" : o.rowSize[i] / BI.pixRatio + BI.pixUnit; h = this._optimiseGap(o.rowSize[i]);
} }
wi.element.css({top: t, height: h}); wi.element.css({top: t, height: h});
first(wi, i, j); first(wi, i, j);
@ -118,9 +118,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
if (BI.isNull(bottom[i])) { if (BI.isNull(bottom[i])) {
bottom[i] = bottom[i + 1] + (o.rowSize[i + 1] < 1 ? o.rowSize[i + 1] : o.rowSize[i + 1] + o.vgap + o.tgap); bottom[i] = bottom[i + 1] + (o.rowSize[i + 1] < 1 ? o.rowSize[i + 1] : o.rowSize[i + 1] + o.vgap + o.tgap);
} }
var b = bottom[i] <= 1 ? (bottom[i] * 100).toFixed(1) + "%" : (bottom[i] + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, h = ""; var b = this._optimiseGap(bottom[i] + o.vgap + o.bgap), h = "";
if (BI.isNumber(o.rowSize[i])) { if (BI.isNumber(o.rowSize[i])) {
h = o.rowSize[i] <= 1 ? (o.rowSize[i] * 100).toFixed(1) + "%" : o.rowSize[i] / BI.pixRatio + BI.pixUnit; h = this._optimiseGap(o.rowSize[i]);
} }
wi.element.css({bottom: b, height: h}); wi.element.css({bottom: b, height: h});
first(wi, i, j); first(wi, i, j);
@ -136,9 +136,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
if (BI.isNull(left[j])) { if (BI.isNull(left[j])) {
left[j] = left[j - 1] + (o.columnSize[j - 1] < 1 ? o.columnSize[j - 1] : o.columnSize[j - 1] + o.hgap + o.rgap); left[j] = left[j - 1] + (o.columnSize[j - 1] < 1 ? o.columnSize[j - 1] : o.columnSize[j - 1] + o.hgap + o.rgap);
} }
var l = left[j] <= 1 ? (left[j] * 100).toFixed(1) + "%" : (left[j] + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, w = ""; var l = this._optimiseGap(left[j] + o.hgap + o.lgap), w = "";
if (BI.isNumber(o.columnSize[j])) { if (BI.isNumber(o.columnSize[j])) {
w = o.columnSize[j] <= 1 ? (o.columnSize[j] * 100).toFixed(1) + "%" : o.columnSize[j] / BI.pixRatio + BI.pixUnit; w = this._optimiseGap(o.columnSize[j]);
} }
wi.element.css({left: l, width: w}); wi.element.css({left: l, width: w});
first(wi, i, j); first(wi, i, j);
@ -154,9 +154,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
if (BI.isNull(right[j])) { if (BI.isNull(right[j])) {
right[j] = right[j + 1] + (o.columnSize[j + 1] < 1 ? o.columnSize[j + 1] : o.columnSize[j + 1] + o.hgap + o.lgap); right[j] = right[j + 1] + (o.columnSize[j + 1] < 1 ? o.columnSize[j + 1] : o.columnSize[j + 1] + o.hgap + o.lgap);
} }
var r = right[j] <= 1 ? (right[j] * 100).toFixed(1) + "%" : (right[j] + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, w = ""; var r = this._optimiseGap(right[j] + o.hgap + o.rgap), w = "";
if (BI.isNumber(o.columnSize[j])) { if (BI.isNumber(o.columnSize[j])) {
w = o.columnSize[j] <= 1 ? (o.columnSize[j] * 100).toFixed(1) + "%" : o.columnSize[j] / BI.pixRatio + BI.pixUnit; w = this._optimiseGap(o.columnSize[j]);
} }
wi.element.css({right: r, width: w}); wi.element.css({right: r, width: w});
first(wi, i, j); first(wi, i, j);

8
src/core/wrapper/layout/middle/middle.center.js

@ -35,10 +35,10 @@ BI.CenterLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, left: self._optimiseGap(o.hgap + o.lgap),
right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, right: self._optimiseGap(o.hgap + o.rgap),
top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, top: self._optimiseGap(o.vgap + o.tgap),
bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, bottom: self._optimiseGap(o.vgap + o.bgap),
width: "auto", width: "auto",
height: "auto" height: "auto"
}); });

8
src/core/wrapper/layout/middle/middle.float.center.js

@ -36,10 +36,10 @@ BI.FloatCenterLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, left: self._optimiseGap(o.hgap + o.lgap),
right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, right: self._optimiseGap(o.hgap + o.rgap),
top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, top: self._optimiseGap(o.vgap + o.tgap),
bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, bottom: self._optimiseGap(o.vgap + o.bgap),
width: "auto", width: "auto",
height: "auto" height: "auto"
}); });

8
src/core/wrapper/layout/middle/middle.horizontal.js

@ -34,10 +34,10 @@ BI.HorizontalCenterLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, left: self._optimiseGap(o.hgap + o.lgap),
right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, right: self._optimiseGap(o.hgap + o.rgap),
top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, top: self._optimiseGap(o.vgap + o.tgap),
bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, bottom: self._optimiseGap(o.vgap + o.bgap),
width: "auto" width: "auto"
}); });
list[i].el.addItem(w); list[i].el.addItem(w);

8
src/core/wrapper/layout/middle/middle.vertical.js

@ -35,10 +35,10 @@ BI.VerticalCenterLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, left: self._optimiseGap(o.hgap + o.lgap),
right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, right: self._optimiseGap(o.hgap + o.rgap),
top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, top: self._optimiseGap(o.vgap + o.tgap),
bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, bottom: self._optimiseGap(o.vgap + o.bgap),
height: "auto" height: "auto"
}); });
list[i].el.addItem(w); list[i].el.addItem(w);

Loading…
Cancel
Save