Browse Source

chore: 优化布局

es6
guy 3 years ago
parent
commit
93f8ab5e2e
  1. 28
      src/core/wrapper/layout.js
  2. 4
      src/core/wrapper/layout/adapt/absolute.horizontal.js
  3. 2
      src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
  4. 4
      src/core/wrapper/layout/adapt/absolute.vertical.js
  5. 4
      src/core/wrapper/layout/adapt/adapt.center.js
  6. 8
      src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
  7. 4
      src/core/wrapper/layout/adapt/adapt.vertical.js
  8. 4
      src/core/wrapper/layout/adapt/inline.center.js
  9. 4
      src/core/wrapper/layout/adapt/inline.horizontal.js
  10. 4
      src/core/wrapper/layout/adapt/inline.vertical.js
  11. 2
      src/core/wrapper/layout/flex/flex.center.js
  12. 2
      src/core/wrapper/layout/flex/flex.horizontal.center.js
  13. 4
      src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
  14. 2
      src/core/wrapper/layout/flex/flex.vertical.center.js
  15. 4
      src/core/wrapper/layout/float/float.absolute.horizontal.js
  16. 2
      src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
  17. 4
      src/core/wrapper/layout/float/float.absolute.vertical.js
  18. 2
      src/core/wrapper/layout/float/float.horizontal.js
  19. 12
      src/core/wrapper/layout/layout.flow.js
  20. 6
      src/core/wrapper/layout/layout.inline.js
  21. 24
      src/core/wrapper/layout/layout.tape.js

28
src/core/wrapper/layout.js

@ -15,8 +15,8 @@ BI.Layout = BI.inherit(BI.Widget, {
scrollx: false, // true, false
scrolly: false, // true, false
items: [],
paddingHgap: 0,
paddingVgap: 0,
innerHGap: 0,
innerVGap: 0,
};
},
@ -286,13 +286,13 @@ BI.Layout = BI.inherit(BI.Widget, {
var o = this.options;
var innerLgap, innerRgap, innerTgap, innerBgap;
if (BI.isNull(vIndex)) {
innerTgap = innerBgap = o.paddingVgap;
innerLgap = hIndex === 0 ? o.paddingHgap : 0;
innerRgap = hIndex === o.items.length - 1 ? o.paddingHgap : 0;
innerTgap = innerBgap = o.innerVGap;
innerLgap = hIndex === 0 ? o.innerHGap : 0;
innerRgap = hIndex === o.items.length - 1 ? o.innerHGap : 0;
} else {
innerLgap = innerRgap = o.paddingHgap;
innerTgap = vIndex === 0 ? o.paddingVgap : 0;
innerBgap = vIndex === o.items.length - 1 ? o.paddingVgap : 0;
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 + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + innerTgap + (item.tgap || 0) + (item.vgap || 0);
@ -324,15 +324,9 @@ BI.Layout = BI.inherit(BI.Widget, {
_handleReverseGap: function (w, item, index) {
var o = this.options;
var innerLgap, innerRgap, innerTgap, innerBgap;
if (BI.isNull(vIndex)) {
innerTgap = innerBgap = o.paddingVgap;
innerLgap = hIndex === 0 ? o.paddingHgap : 0;
innerRgap = hIndex === o.items.length - 1 ? o.paddingHgap : 0;
} else {
innerLgap = innerRgap = o.paddingHgap;
innerTgap = vIndex === 0 ? o.paddingVgap : 0;
innerBgap = vIndex === o.items.length - 1 ? o.paddingVgap : 0;
}
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 + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + innerTgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({

4
src/core/wrapper/layout/adapt/absolute.horizontal.js

@ -37,7 +37,9 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

2
src/core/wrapper/layout/adapt/absolute.leftrightvertical.js

@ -23,6 +23,8 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
return {
type: "bi.htape",
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
ref: function (_ref) {
self.layout = _ref;
},

4
src/core/wrapper/layout/adapt/absolute.vertical.js

@ -37,7 +37,9 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

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

@ -38,7 +38,9 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

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

@ -34,6 +34,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
if (leftRight.left || "left" in o.items) {
layoutArray.push({
type: "bi.left",
lgap: o.innerHGap,
vgap: o.innerVGap,
items: [{
el: {
type: "bi.vertical_adapt",
@ -55,6 +57,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
if (leftRight.right || "right" in o.items) {
layoutArray.push({
type: "bi.right",
rgap: o.innerHGap,
vgap: o.innerVGap,
items: [{
el: {
type: "bi.vertical_adapt",
@ -144,6 +148,8 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
tgap: o.tgap,
bgap: o.bgap,
vgap: o.vgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable
@ -196,6 +202,8 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
tgap: o.tgap,
bgap: o.bgap,
vgap: o.vgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable

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

@ -38,7 +38,9 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

4
src/core/wrapper/layout/adapt/inline.center.js

@ -40,7 +40,9 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

4
src/core/wrapper/layout/adapt/inline.horizontal.js

@ -40,7 +40,9 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

4
src/core/wrapper/layout/adapt/inline.vertical.js

@ -40,7 +40,9 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

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

@ -37,6 +37,8 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
vgap: o.vgap,
tgap: o.tgap,
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
items: o.items
};
},

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

@ -38,6 +38,8 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
vgap: o.vgap,
tgap: o.tgap,
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
items: o.items
};
},

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

@ -28,7 +28,9 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
items: this._formatItems(o.items),
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable
scrollable: o.scrollable,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

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

@ -39,6 +39,8 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
lgap: o.lgap,
rgap: o.rgap,
hgap: o.hgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
items: o.items
};
},

4
src/core/wrapper/layout/float/float.absolute.horizontal.js

@ -35,7 +35,9 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
bgap: o.bgap,
// lgap和rgap不传的话内部不会设置left和right
lgap: o.lgap,
rgap: o.rgap
rgap: o.rgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

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

@ -29,6 +29,8 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
verticalAlign: o.verticalAlign,
items: this._formatItems(o.items),
vgap: "50%",
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable

4
src/core/wrapper/layout/float/float.absolute.vertical.js

@ -35,7 +35,9 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
rgap: o.rgap,
// tgap和bgap不传的话内部不会设置top和bottom
tgap: o.tgap,
bgap: o.bgap
bgap: o.bgap,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
};
},

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

@ -51,6 +51,8 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
}],
horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign,
innerHGap: o.innerHGap,
innerVGap: o.innerVGap,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable

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

@ -22,6 +22,18 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FloatLeftLayout.superclass.render.apply(this, arguments);
var o = this.options;
if (o.innerHGap !== 0) {
this.element.css({
paddingLeft: this._optimiseGap(o.innerHgap),
paddingRight: this._optimiseGap(o.innerHgap)
})
}
if (o.innerVGap !== 0) {
this.element.css({
paddingTop: this._optimiseGap(o.innerVGap),
paddingBottom: this._optimiseGap(o.innerVGap)
})
}
this.populate(this.options.items);
},

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

@ -52,7 +52,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
});
w.element.addClass("i-item");
if (columnSize === "fill" || columnSize === "") {
var length = 0, gap = o.hgap;
var length = 0, gap = o.hgap + o.innerHGap;
var fillCount = 0, autoCount = 0;
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;
@ -81,8 +81,8 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
}
this._handleGap(w, item, i);
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
var top = o.innerVGap + o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
bottom = o.innerVGap + o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
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 + ")");
}

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

@ -43,8 +43,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
}
w.element.css({
position: "absolute",
top: self._optimiseGap((item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap)
top: self._optimiseGap((item.vgap || 0) + (item.tgap || 0) + o.paddingVgap + o.vgap + o.tgap),
bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.paddingVgap + o.vgap + o.bgap)
});
if (o.verticalAlign === BI.VerticalAlign.Middle) {
w.element.css({
@ -59,8 +59,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
});
var left = {}, right = {};
left[0] = 0;
right[items.length - 1] = 0;
left[0] = o.innerHGap;
right[items.length - 1] = o.innerHGap;
BI.any(items, function (i, item) {
if (BI.isEmptyObject(item)) {
@ -81,7 +81,7 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
left: self._optimiseGap(left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
});
if (columnSize === "" || columnSize === "fill") {
return true;
}
@ -100,7 +100,7 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
right: self._optimiseGap(right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap),
width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
});
if (columnSize === "" || columnSize === "fill") {
return true;
}
@ -163,8 +163,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
}
w.element.css({
position: "absolute",
left: self._optimiseGap((item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap)
left: self._optimiseGap((item.lgap || 0) + (item.hgap || 0) + o.innerHGap + o.hgap + o.lgap),
right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.innerHGap + o.hgap + o.rgap)
});
if (o.horizontalAlign === BI.HorizontalAlign.Center) {
w.element.css({
@ -179,8 +179,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
});
var top = {}, bottom = {};
top[0] = 0;
bottom[items.length - 1] = 0;
top[0] = o.innerVGap;
bottom[items.length - 1] = o.innerVGap;
BI.any(items, function (i, item) {
if (BI.isEmptyObject(item)) {
@ -201,7 +201,7 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
});
if (rowSize === "" || rowSize === "fill") {
return true;
}
@ -220,7 +220,7 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap),
height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
});
if (rowSize === "" || rowSize === "fill") {
return true;
}

Loading…
Cancel
Save