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

Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit 'fab836ba8a6a1a18891ed19dece8ed97eb8323fd': feature: 增加IE9支持的vertical_fill动态布局
3 years ago · 2c6968d010
5 changed files with 164 additions and 18 deletions
--- a/src/core/platform/web/config.js
+++ b/src/core/platform/web/config.js
@ -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) {
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@ -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) {
--- a/src/core/wrapper/layout/fill/auto.vtape.js
+++ b/src/core/wrapper/layout/fill/auto.vtape.js
@ -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);
--- a/src/core/wrapper/layout/layout.tape.js
+++ b/src/core/wrapper/layout/layout.tape.js
@ -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") {
--- a/src/core/wrapper/layout/layout.td.js
+++ b/src/core/wrapper/layout/layout.td.js
@ -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",