caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feature: 增加IE9支持的vertical_fill动态布局

es6
guy 3 years ago
parent
f14f240a1c
commit
fab836ba8a
5 changed files with 164 additions and 18 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. 20
      src/core/platform/web/config.js
  2. 2
      src/core/wrapper/layout.js
  3. 116
      src/core/wrapper/layout/fill/auto.vtape.js
  4. 30
      src/core/wrapper/layout/layout.tape.js
  5. 2
      src/core/wrapper/layout/layout.td.js

20
src/core/platform/web/config.js
Unescape View File

@ -156,12 +156,32 @@ BI.prepares.push(function () {
scrolly: false
}, ob, {type: "bi.flex_vertical"});
}
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 有滚动条，降级到table布局处理
return BI.extend({}, ob, {
type: "bi.td",
items: BI.map(ob.items, function (i, item) {
return [item];
})
});
}
var hasAuto = false;
if (ob.rowSize && ob.rowSize.length > 0) {
if (ob.rowSize.indexOf("") >= 0) {
hasAuto = true;
}
} else {
BI.each(ob.items, function (i, item) {
if (BI.isNull(item.height) || item.height === "") {
hasAuto = true;
}
});
}
if (hasAuto) {
// 有自动高的时候
return BI.extend({}, ob, {type: "bi.vtape_auto"});
}
return BI.extend({}, ob, {type: "bi.vtape"});
});
BI.Plugin.configWidget("bi.horizontal_sticky", function (ob) {
if (!isSupportSticky) {

2
src/core/wrapper/layout.js
Unescape View File

@ -289,7 +289,7 @@ BI.Layout = BI.inherit(BI.Widget, {
},
_optimiseGap: function (gap) {
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;
},
_handleGap: function (w, item, hIndex, vIndex) {

116
src/core/wrapper/layout/fill/auto.vtape.js
Unescape View File

@ -0,0 +1,116 @@
BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.AutoVerticalTapeLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-auto-htape",
horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0,
rowSize: [],
items: []
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.vtape",
ref: function (_ref) {
self.layout = _ref;
},
items: o.items,
horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
};
},
_handleResize: function () {
var self = this, o = this.options;
var items = o.items;
var top = {}, bottom = {};
top[0] = o.innerVgap;
bottom[items.length - 1] = o.innerVgap;
BI.any(items, function (i, item) {
if (BI.isEmptyObject(item)) {
return true;
}
var w = self.layout.getWidgetByName(self._getChildName(i));
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = item.height;
}
}
if (BI.isNull(top[i])) {
var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
if (preRowSize === "") {
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;
}
w.element.css({
top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap)
});
if (rowSize === "fill") {
return true;
}
});
BI.backAny(items, function (i, item) {
if (BI.isEmptyObject(item)) {
return true;
}
var w = self.layout.getWidgetByName(self._getChildName(i));
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (BI.isNull(bottom[i])) {
var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
if (nextRowSize === "") {
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;
}
w.element.css({
bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap),
});
if (rowSize === "fill") {
return true;
}
});
},
mounted: function () {
if (window.MutationObserver) {
this.mutationObserver = new window.MutationObserver(this._handleResize.bind(this));
this.mutationObserver.observe(this.element[0], {
attributes: true,
childList: true,
subtree: true
});
}
this._handleResize();
},
resize: function () {
this.layout.resize();
},
populate: function (items) {
this.layout.populate.apply(this.layout, arguments);
}
});
BI.shortcut("bi.vtape_auto", BI.AutoVerticalTapeLayout);

30
src/core/wrapper/layout/layout.tape.js
Unescape View File

@ -45,10 +45,17 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
} else {
w = self.getWidgetByName(self._getChildName(i));
}
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = item.width;
}
}
w.element.css({
position: "absolute",
top: self._optimiseGap((item.vgap || 0) + (item.tgap || 0) + o.innerVgap + o.vgap + o.tgap),
bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.innerVgap + o.vgap + o.bgap)
bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.innerVgap + o.vgap + o.bgap),
width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
});
if (o.verticalAlign === BI.VerticalAlign.Middle) {
w.element.css({
@ -82,8 +89,7 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
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;
}
w.element.css({
left: self._optimiseGap(left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
left: self._optimiseGap(left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap)
});
if (columnSize === "" || columnSize === "fill") {
@ -101,8 +107,7 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
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;
}
w.element.css({
right: self._optimiseGap(right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap),
width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
right: self._optimiseGap(right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap)
});
if (columnSize === "" || columnSize === "fill") {
@ -165,10 +170,17 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
} else {
w = self.getWidgetByName(self._getChildName(i));
}
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = item.height;
}
}
w.element.css({
position: "absolute",
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)
right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.innerHgap + o.hgap + o.rgap),
height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
});
if (o.horizontalAlign === BI.HorizontalAlign.Center) {
w.element.css({
@ -202,8 +214,7 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
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;
}
w.element.css({
top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap)
});
if (rowSize === "" || rowSize === "fill") {
@ -221,8 +232,7 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
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;
}
w.element.css({
bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap),
height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap)
});
if (rowSize === "" || rowSize === "fill") {

2
src/core/wrapper/layout/layout.td.js
Unescape View File

@ -78,7 +78,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
}
}
var height = o.rowSize[idx] === "" ? "" : this._optimiseGap(o.rowSize[idx]);
var height = o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx]);
var tr = BI._lazyCreateWidget({
type: "bi.default",
tagName: "tr",

Write Preview
Loading…
Cancel
Save