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

Pull request #2583: 无JIRA任务 feature: 增加IE9支持的vertical_fill动态布局 

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

* commit 'fab836ba8a6a1a18891ed19dece8ed97eb8323fd':
  feature: 增加IE9支持的vertical_fill动态布局
es6
guy 3 years ago
parent
f14f240a1c fab836ba8a
commit
2c6968d010
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. 32
      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

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

@ -156,12 +156,32 @@ BI.prepares.push(function () {
scrolly: false
}, ob, {type: "bi.flex_vertical"});
}
return BI.extend({}, ob, {
type: "bi.td",
items: BI.map(ob.items, function (i, item) {
return [item];
})
});
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