fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

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

es6
guy 3 years ago
parent
ff22d7cb2e
commit
06e450d1ef
2 changed files with 157 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
  2. 205
      src/core/wrapper/layout/adapt/adapt.leftrightvertical.js

32
src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
Unescape View File

@ -56,17 +56,17 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
el: BI.stripEL(item), el: BI.stripEL(item),
width: item.width width: item.width
}; };
if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0); json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
} }
if (o.lhgap + o.llgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._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 + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
} }
if (o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0); json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
} }
if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0); json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
} }
return json; return json;
}); });
@ -75,17 +75,17 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
el: BI.stripEL(item), el: BI.stripEL(item),
width: item.width width: item.width
}; };
if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0); json.tgap = o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
} }
if (o.rhgap + o.rlgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._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 + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
} }
if (o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0); json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
} }
if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0); json.bgap = o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
} }
return json; return json;
}); });

205
src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save