fineui/src/core/wrapper/layout/layout.tape.js

/**
 * 水平tape布局
 * @class BI.HTapeLayout
 * @extends BI.Layout
 */
BI.HTapeLayout = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.HTapeLayout.superclass.props.apply(this, arguments), {
            baseCls: "bi-h-tape",
            verticalAlign: BI.VerticalAlign.Top,
            hgap: 0,
            vgap: 0,
            lgap: 0,
            rgap: 0,
            tgap: 0,
            bgap: 0,
            columnSize: [],
            items: []
        });
    },
    render: function () {
        BI.HTapeLayout.superclass.render.apply(this, arguments);
        var self = this, o = this.options;
        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
            self.populate(newValue);
        }) : o.items;
        this.populate(items);
    },

    addItem: function (item) {
        // do nothing
        throw new Error("Cannot add subwidget");
    },

    stroke: function (items) {
        var self = this, o = this.options;
        items = BI.compact(items);
        BI.each(items, function (i, item) {
            if (BI.isEmptyObject(item)) {
                return;
            }
            if (!self.hasWidget(self._getChildName(i))) {
                var w = BI._lazyCreateWidget(item);
                self.addWidget(self._getChildName(i), w);
            } 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(self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap),
                bottom: self._optimiseGap(self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap),
                width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
            });
            if (o.verticalAlign === BI.VerticalAlign.Middle) {
                w.element.css({
                    marginTop: "auto",
                    marginBottom: "auto"
                });
            } else if (o.verticalAlign === BI.VerticalAlign.Bottom) {
                w.element.css({
                    marginTop: "auto"
                });
            }
        });

        var left = {}, right = {};
        left[0] = o.innerHgap;
        right[items.length - 1] = o.innerHgap;

        BI.any(items, function (i, item) {
            if (BI.isEmptyObject(item)) {
                return true;
            }
            var 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;
                }
            }
            if (BI.isNull(left[i])) {
                var preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width;
                left[i] = left[i - 1] + preColumnSize + self._optimiseItemLgap(items[i - 1]) + self._optimiseItemRgap(items[i - 1]) + 2 * self._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap;
            }
            w.element.css({
                left: self._optimiseGap(left[i] + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.hgap + o.lgap)
            });

            if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") {
                return true;
            }
        });
        BI.backAny(items, function (i, item) {
            if (BI.isEmptyObject(item)) {
                return true;
            }
            var w = self.getWidgetByName(self._getChildName(i));
            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
            if (BI.isNull(right[i])) {
                var nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width;
                right[i] = right[i + 1] + nextColumnSize + self._optimiseItemLgap(items[i + 1]) + self._optimiseItemRgap(items[i + 1]) + 2 * self._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap;
            }
            w.element.css({
                right: self._optimiseGap(right[i] + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.hgap + o.rgap)
            });

            if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") {
                return true;
            }
        });
    },

    update: function (opt) {
        return this.forceUpdate(opt);
    },

    populate: function (items) {
        BI.HTapeLayout.superclass.populate.apply(this, arguments);
        this._mount();
    }
});
BI.shortcut("bi.htape", BI.HTapeLayout);

/**
 * 垂直tape布局
 * @class BI.VTapeLayout
 * @extends BI.Layout
 */
BI.VTapeLayout = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.VTapeLayout.superclass.props.apply(this, arguments), {
            baseCls: "bi-v-tape",
            horizontalAlign: BI.HorizontalAlign.Left,
            hgap: 0,
            vgap: 0,
            lgap: 0,
            rgap: 0,
            tgap: 0,
            bgap: 0,
            rowSize: [],
            items: []
        });
    },
    render: function () {
        BI.VTapeLayout.superclass.render.apply(this, arguments);
        this.populate(this.options.items);
    },

    addItem: function (item) {
        // do nothing
        throw new Error("Cannot add subwidget");
    },

    stroke: function (items) {
        var self = this, o = this.options;
        items = BI.compact(items);
        BI.each(items, function (i, item) {
            if (BI.isEmptyObject(item)) {
                return;
            }
            if (!self.hasWidget(self._getChildName(i))) {
                var w = BI._lazyCreateWidget(item);
                self.addWidget(self._getChildName(i), w);
            } 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(self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap),
                right: self._optimiseGap(self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap),
                height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
            });
            if (o.horizontalAlign === BI.HorizontalAlign.Center) {
                w.element.css({
                    marginLeft: "auto",
                    marginRight: "auto"
                });
            } else if (o.horizontalAlign === BI.HorizontalAlign.Right) {
                w.element.css({
                    marginLeft: "auto"
                });
            }
        });

        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.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;
                top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
            }
            w.element.css({
                top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap)
            });

            if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") {
                return true;
            }
        });
        BI.backAny(items, function (i, item) {
            if (BI.isEmptyObject(item)) {
                return true;
            }
            var w = self.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;
                bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
            }
            w.element.css({
                bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap)
            });

            if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") {
                return true;
            }
        });
    },

    update: function (opt) {
        return this.forceUpdate(opt);
    },

    populate: function (items) {
        BI.VTapeLayout.superclass.populate.apply(this, arguments);
        this._mount();
    }
});
BI.shortcut("bi.vtape", BI.VTapeLayout);