// 工程配置 !(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" }); }); }());