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

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 () {
return BI.extend(BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-abs-lr-v-a",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-lr-v-a",
items: {},
llgap: 0,
lrgap: 0,
@ -20,24 +28,59 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
},
render: function () {
var o = this.options, self = this;
BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
return {
type: "bi.htape",
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
BI.LeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
var leftRight = this._getLeftRight(o.items);
var layoutArray = [];
if (leftRight.left || "left" in o.items) {
layoutArray.push({
type: "bi.left",
lgap: o.innerHgap,
vgap: o.innerVgap,
items: [{
el: {
type: "bi.vertical_adapt",
ref: function (_ref) {
self.layout = _ref;
self.left = _ref;
},
verticalAlign: o.verticalAlign,
items: this._formatItems(o.items),
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable
};
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) {
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) {
var o = this.options;
_getLeftRight: function (items) {
var left, right;
if (BI.isArray(items)) {
BI.each(items, function (i, item) {
@ -49,51 +92,72 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
}
});
}
var leftItems = left || items.left || [];
var rightItems = right || items.right || [];
leftItems = BI.map(leftItems, function (i, item) {
var json = {
el: BI.stripEL(item),
width: item.width
return {
left: left,
right: right
};
if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
}
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);
},
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);
}
return json;
});
BI.shortcut("bi.left_right_vertical_adapt", BI.LeftRightVerticalAdaptLayout);
BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
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
});
rightItems = BI.map(rightItems, function (i, item) {
var json = {
el: BI.stripEL(item),
width: item.width
},
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 () {
this.layout.stroke(this._formatItems(this.options.items));
this.layout.resize();
},
addItem: function () {
@ -102,17 +166,17 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
},
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 () {
return BI.extend(BI.AbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-abs-r-v-a",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.RightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-r-v-a",
items: [],
columnSize: [],
lgap: 0,
rgap: 0,
hgap: 0,
@ -123,20 +187,23 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
},
render: function () {
var o = this.options, self = this;
BI.AbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
BI.RightVerticalAdaptLayout.superclass.render.apply(this, arguments);
return {
type: "bi.htape",
type: "bi.vertical_adapt",
ref: function (_ref) {
self.layout = _ref;
},
verticalAlign: o.verticalAlign,
items: [{}].concat(o.items),
horizontalAlign: BI.HorizontalAlign.Right,
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
@ -144,7 +211,7 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
},
resize: function () {
this.layout.stroke([{}].concat(this.options.items));
this.layout.resize();
},
addItem: function () {
@ -153,7 +220,7 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
},
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