fineui是帆软报表和BI产品线所使用的前端框架。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

286 lines
12 KiB

// 工程配置
!(function () {
// 注册布局
// adapt类布局优先级规则
// 1、支持flex的浏览器下使用flex布局
// 2、不支持flex的浏览器下使用inline布局
// 3、当列宽既需要自动列宽又需要自适应列宽时,inline布局也处理不了了。当横向出滚动条时使用table布局,不出滚动条时使用float布局
var _isSupportFlex, _isSupportGrid;
var isSupportFlex = function () {
if (_isSupportFlex == null) {
_isSupportFlex = !!(BI.isSupportCss3 && BI.isSupportCss3("flex"));
}
return _isSupportFlex;
};
var isSupportGrid = function () {
if (_isSupportGrid == null) {
_isSupportGrid = !!(BI.isSupportCss3 && BI.isSupportCss3("grid"));
}
return _isSupportGrid;
};
// 判断浏览器是否支持sticky 属性
var isSupportSticky = (function () {
var vendorList = ["", "-webkit-", "-ms-", "-moz-", "-o-"],
vendorListLength = vendorList.length,
stickyElement = document.createElement("div");
for (var i = 0; i < vendorListLength; i++) {
stickyElement.style.position = vendorList[i] + "sticky";
if (stickyElement.style.position !== "") {
return true;
}
}
return false;
})();
BI.Plugin.configWidget("bi.horizontal", function (ob) {
var supportFlex = isSupportFlex();
// // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性(flex处理不了这种情况)
// // 主要出现在center_adapt或者horizontal_adapt的场景,或者主动设置horizontalAlign的场景
// if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) {
// return BI.extend({}, ob, {type: "bi.table_adapt"});
// }
if (supportFlex) {
return BI.extend({}, ob, { type: "bi.flex_horizontal" });
}
return BI.extend({
scrollx: true
}, ob, { type: "bi.inline" });
});
BI.Plugin.configWidget("bi.vertical", function (ob) {
if (ob.horizontalAlign === BI.HorizontalAlign.Left || ob.horizontalAlign === BI.HorizontalAlign.Right) {
if (isSupportFlex()) {
return BI.extend({}, ob, { type: "bi.flex_vertical" });
}
return BI.extend({}, ob, {
horizontalAlign: BI.HorizontalAlign.Stretch,
type: "bi.vertical",
items: BI.map(ob.items, function (i, item) {
return {
type: "bi.inline",
horizontalAlign: ob.horizontalAlign,
items: [item]
};
})
});
}
if (ob.verticalAlign === BI.VerticalAlign.Stretch) {
if (isSupportFlex()) {
return BI.extend({
horizontalAlign: BI.HorizontalAlign.Stretch,
}, ob, { type: "bi.flex_vertical" });
}
}
return ob;
});
BI.Plugin.configWidget("bi.inline", function (ob) {
// 当列宽既需要自动列宽又需要自适应列宽时,inline布局也处理不了了,降级table处理吧
var hasAutoAndFillColumnSize = false;
if (ob.columnSize && ob.columnSize.length > 0) {
if ((ob.columnSize.indexOf("") >= 0 || ob.columnSize.indexOf("auto") >= 0) && ob.columnSize.indexOf("fill") >= 0) {
hasAutoAndFillColumnSize = true;
}
} else {
var hasAuto = false, hasFill = false;
BI.each(ob.items, function (i, item) {
if (item.width === "fill") {
hasFill = true;
} else if (BI.isNull(item.width) || item.width === "" || item.width === "auto") {
hasAuto = true;
}
});
hasAutoAndFillColumnSize = hasAuto && hasFill;
}
if (hasAutoAndFillColumnSize) {
// 宽度是不是受限
if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === BI.HorizontalAlign.Stretch) {
return BI.extend({
verticalAlign: BI.VerticalAlign.Top
}, ob, { type: "bi.horizontal_float_fill" });
}
return BI.extend({
horizontalAlign: BI.HorizontalAlign.Stretch
}, ob, { type: "bi.table_adapt" });
}
if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) {
return BI.extend({}, ob, { type: "bi.responsive_inline" });
}
return ob;
});
BI.Plugin.configWidget("bi.center_adapt", function (ob) {
var supportFlex = isSupportFlex();
// var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
// if (!isAdapt || justOneItem) {
if (supportFlex) {
return BI.extend({}, ob, { type: "bi.flex_center_adapt" });
}
return BI.extend({}, ob, { type: "bi.inline_center_adapt" });
// }
// return ob;
});
BI.Plugin.configWidget("bi.vertical_adapt", function (ob) {
var supportFlex = isSupportFlex();
// var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
// if (!isAdapt || justOneItem) {
if (supportFlex) {
return BI.extend({}, ob, { type: "bi.flex_vertical_center_adapt" });
}
return BI.extend({}, ob, { type: "bi.inline_vertical_adapt" });
// }
// return ob;
});
BI.Plugin.configWidget("bi.horizontal_adapt", function (ob) {
var justOneItem = (ob.items && ob.items.length <= 1);
var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
var verticalAlignTop = !ob.verticalAlign || ob.verticalAlign === BI.VerticalAlign.TOP;
if (verticalAlignTop && justOneItem) {
return BI.extend({}, ob, { type: "bi.horizontal_auto" });
}
var supportFlex = isSupportFlex();
// 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性(flex处理不了这种情况)
// 主要出现在center_adapt或者horizontal_adapt的场景,或者主动设置horizontalAlign的场景
if (isAdapt) {
return BI.extend({
horizontalAlign: BI.HorizontalAlign.Center
}, ob, { type: "bi.table_adapt" });
}
if (supportFlex) {
return BI.extend({
horizontalAlign: BI.HorizontalAlign.Center,
scrollx: false
}, ob, { type: "bi.flex_horizontal" });
}
return BI.extend({
horizontalAlign: BI.HorizontalAlign.Center
}, ob, { type: "bi.table_adapt" });
});
BI.Plugin.configWidget("bi.horizontal_float", function (ob) {
if (isSupportFlex()) {
return BI.extend({}, ob, { type: "bi.flex_horizontal_adapt" });
}
if (ob.items && ob.items.length <= 1) {
return BI.extend({}, ob, { type: "bi.inline_horizontal_adapt" });
}
return ob;
});
BI.Plugin.configWidget("bi.horizontal_fill", function (ob) {
if (isSupportFlex()) {
return BI.extend({
horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch,
scrollx: false
}, ob, { type: "bi.flex_horizontal" });
}
if ((ob.horizontalAlign && ob.horizontalAlign !== BI.HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) {
// 宽度不受限,要用table布局
return BI.extend({
horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch
}, ob, { type: "bi.table_adapt" });
}
return BI.extend({}, ob, { type: "bi.horizontal_float_fill" });
});
BI.Plugin.configWidget("bi.vertical_fill", function (ob) {
if (isSupportFlex()) {
return BI.extend({
horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch,
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 || ob.rowSize.indexOf("auto") >= 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) {
return BI.extend({ scrollx: true }, ob, { type: "bi.horizontal_fill" });
}
});
BI.Plugin.configWidget("bi.vertical_sticky", function (ob) {
if (!isSupportSticky) {
return BI.extend({ scrolly: true }, ob, { type: "bi.vertical_fill" });
}
});
BI.Plugin.configWidget("bi.left_right_vertical_adapt", function (ob) {
if (isSupportFlex()) {
// IE下其实也是可以使用flex布局的,只要排除掉出现滚动条的情况
// if (!BI.isIE() || (ob.scrollable !== true && ob.scrolly !== true)) {
return BI.extend({}, ob, { type: "bi.flex_left_right_vertical_adapt" });
// }
}
return ob;
});
BI.Plugin.configWidget("bi.flex_horizontal", function (ob) {
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
if (ob.hgap > 0 || ob.lgap > 0 || ob.rgap > 0) {
if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) {
return BI.extend({}, ob, { type: "bi.responsive_flex_scrollable_horizontal" });
}
return BI.extend({}, ob, { type: "bi.flex_scrollable_horizontal" });
}
}
if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) {
return BI.extend({}, ob, { type: "bi.responsive_flex_horizontal" });
}
});
BI.Plugin.configWidget("bi.flex_vertical", function (ob) {
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
if (ob.hgap > 0 || ob.lgap > 0 || ob.rgap > 0) {
return BI.extend({}, ob, { type: "bi.flex_scrollable_vertical" });
}
}
});
BI.Plugin.configWidget("bi.table", function (ob) {
if (!isSupportGrid()) {
return BI.extend({}, ob, { type: "bi.td" });
}
return ob;
});
BI.Plugin.configWidget("bi.radio", function (ob) {
if (BI.isIE() && BI.getIEVersion() <= 9) {
return BI.extend({}, ob, { type: "bi.image_radio" });
}
return ob;
});
BI.Plugin.configWidget("bi.checkbox", function (ob) {
if (BI.isIE() && BI.getIEVersion() <= 9) {
return BI.extend({}, ob, { type: "bi.image_checkbox" });
}
return ob;
});
BI.Plugin.configWidget("bi.half_icon_button", function (ob) {
if (BI.isIE() && BI.getIEVersion() < 9) {
return ob;
}
return BI.extend({}, ob, { type: "bi.half_button" });
});
}());