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);
        this.populate(this.options.items);
    },

    resize: function () {
        this.stroke(this.options.items);
    },
    addItem: function (item) {
        // do nothing
        throw new Error("cannot be added");
    },

    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));
            }
            w.element.css({
                position: "absolute",
                top: ((item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
                bottom: ((item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit
            });
            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] = 0;
        right[items.length - 1] = 0;

        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 + (items[i - 1].lgap || 0) + (items[i - 1].rgap || 0) + 2 * (items[i - 1].hgap || 0) + o.hgap + o.lgap + o.rgap;
            }
            if (columnSize < 1 && columnSize > 0) {
                w.element.css({
                    left: (left[i] * 100).toFixed(1) + "%",
                    width: (columnSize * 100).toFixed(1) + "%"
                });
            } else {
                w.element.css({
                    left: (left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
                    width: BI.isNumber(columnSize) ? columnSize / BI.pixRatio + BI.pixUnit : ""
                });
            }
            if (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 + (items[i + 1].lgap || 0) + (items[i + 1].rgap || 0) + 2 * (items[i + 1].hgap || 0) + o.hgap + o.lgap + o.rgap;
            }
            if (columnSize < 1 && columnSize > 0) {
                w.element.css({
                    right: (right[i] * 100).toFixed(1) + "%",
                    width: (columnSize * 100).toFixed(1) + "%"
                });
            } else {
                w.element.css({
                    right: (right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
                    width: BI.isNumber(columnSize) ? columnSize / BI.pixRatio + BI.pixUnit : ""
                });
            }
            if (columnSize === "" || columnSize === "fill") {
                return true;
            }
        });
    },

    update: function () {
        var updated;
        BI.each(this._children, function (i, child) {
            updated = child.update() || updated;
        });
        return updated;
    },

    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-layout",
            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);
    },

    resize: function () {
        this.stroke(this.options.items);
    },

    addItem: function (item) {
        // do nothing
        throw new Error("cannot be added");
    },

    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));
            }
            w.element.css({
                position: "absolute",
                left: ((item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
                right: ((item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit
            });
            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] = 0;
        bottom[items.length - 1] = 0;

        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 + (items[i - 1].tgap || 0) + (items[i - 1].bgap || 0) + 2 * (items[i - 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
            }
            if (rowSize < 1 && rowSize > 0) {
                w.element.css({
                    top: (top[i] * 100).toFixed(1) + "%",
                    height: (rowSize * 100).toFixed(1) + "%"
                });
            } else {
                w.element.css({
                    top: (top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
                    height: BI.isNumber(rowSize) ? rowSize / BI.pixRatio + BI.pixUnit : ""
                });
            }
            if (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 + (items[i + 1].tgap || 0) + (items[i + 1].bgap || 0) + 2 * (items[i + 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
            }
            if (rowSize < 1 && rowSize > 0) {
                w.element.css({
                    bottom: (bottom[i] * 100).toFixed(1) + "%",
                    height: (rowSize * 100).toFixed(1) + "%"
                });
            } else {
                w.element.css({
                    bottom: (bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
                    height: BI.isNumber(rowSize) ? rowSize / BI.pixRatio + BI.pixUnit : ""
                });
            }
            if (rowSize === "" || rowSize === "fill") {
                return true;
            }
        });
    },

    update: function () {
    },

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