fineui/src/base/layer/layer.popup.js

/**
 * 下拉框弹出层, zIndex在1000w
 * @class BI.PopupView
 * @extends BI.Widget
 */
BI.PopupView = BI.inherit(BI.Widget, {
    _const: {
        TRIANGLE_LENGTH: 9
    },
    _defaultConfig: function (props) {
        return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
            _baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""),
            // 品牌色
            primary: false,
            maxWidth: "auto",
            minWidth: 100,
            // maxHeight: 200,
            minHeight: 24,
            lgap: 0,
            rgap: 0,
            tgap: 0,
            bgap: 0,
            vgap: 0,
            hgap: 0,
            innerVGap: 0,
            innerHGap: 0,
            showArrow: false,
            direction: BI.Direction.Top, // 工具栏的方向
            stopEvent: false, // 是否停止mousedown、mouseup事件
            stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡
            logic: {
                dynamic: true
            },

            tool: false, // 自定义工具栏
            tabs: [], // 导航栏
            buttons: [], // toolbar栏

            el: {
                type: "bi.button_group",
                items: [],
                chooseType: 0,
                behaviors: {},
                layouts: [{
                    type: "bi.vertical"
                }]
            }
        });
    },

    render: function () {
        var self = this, o = this.options;
        var fn = function (e) {
            e.stopPropagation();
        }, stop = function (e) {
            e.stopEvent();
            return false;
        };
        this.element.css({
            "z-index": BI.zIndex_popup,
            "min-width": BI.isNumeric(o.minWidth) ? (o.minWidth / BI.pixRatio + BI.pixUnit) : o.minWidth,
            "max-width": BI.isNumeric(o.maxWidth) ? (o.maxWidth / BI.pixRatio + BI.pixUnit) : o.maxWidth
        }).bind({click: fn});

        this.element.bind("mousewheel", fn);

        o.stopPropagation && this.element.bind({mousedown: fn, mouseup: fn, mouseover: fn});
        o.stopEvent && this.element.bind({mousedown: stop, mouseup: stop, mouseover: stop});
        this.tool = this._createTool();
        this.tab = this._createTab();
        this.view = this._createView();
        this.toolbar = this._createToolBar();

        this.view.on(BI.Controller.EVENT_CHANGE, function (type) {
            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
            if (type === BI.Events.CLICK) {
                self.fireEvent(BI.PopupView.EVENT_CHANGE);
            }
        });

        BI.createWidget(BI.extend({
            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            scrolly: false,
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
            bgap: o.bgap,
            vgap: o.vgap,
            hgap: o.hgap,
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, BI.extend({
                    cls: "list-view-outer bi-card list-view-shadow" + (o.primary ? " bi-primary" : "")
                }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
                    items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tool, this.tab, this.view, this.toolbar)
                })))
            )
        }))));
        if (o.showArrow) {
            this.arrow = BI.createWidget({
                type: "bi.absolute",
                cls: "bi-bubble-arrow",
                items: [{
                    type: "bi.layout",
                    cls: "bubble-arrow"
                }]
            });
            this.arrowWrapper = BI.createWidget({
                type: "bi.absolute",
                cls: "bi-bubble-arrow-wrapper",
                items: [{
                    el: this.arrow,
                }]
            });
            // 因为三角符号的原因位置变大了，需要占位
            this.placeholder = BI.createWidget({
                type: "bi.layout"
            });
            BI.createWidget({
                type: "bi.absolute",
                element: this,
                items: [{
                    el: this.arrowWrapper,
                    left: 0,
                    top: 0,
                }, {
                    el: this.placeholder
                }]
            });
        }
    },

    _createView: function () {
        var o = this.options;
        this.button_group = BI.createWidget(o.el, {type: "bi.button_group", value: o.value});
        this.button_group.element.css({
            "min-height": BI.isNumeric(o.minHeight) ? (o.minHeight / BI.pixRatio + BI.pixUnit) : o.minHeight,
            "padding-top": o.innerVGap / BI.pixRatio + BI.pixUnit,
            "padding-bottom": o.innerVGap / BI.pixRatio + BI.pixUnit,
            "padding-left": o.innerHGap / BI.pixRatio + BI.pixUnit,
            "padding-right": o.innerHGap / BI.pixRatio + BI.pixUnit
        });
        return this.button_group;
    },

    _createTool: function () {
        var o = this.options;
        if (false === o.tool) {
            return;
        }
        return BI.createWidget(o.tool);
    },

    _createTab: function () {
        var o = this.options;
        if (o.tabs.length === 0) {
            return;
        }
        return BI.createWidget({
            type: "bi.center",
            cls: "list-view-tab",
            height: 25,
            items: o.tabs,
            value: o.value
        });
    },

    _createToolBar: function () {
        var o = this.options;
        if (o.buttons.length === 0) {
            return;
        }

        return BI.createWidget({
            type: "bi.center",
            cls: "list-view-toolbar bi-high-light bi-split-top",
            height: 24,
            items: BI.createItems(o.buttons, {
                once: false,
                shadow: true,
                isShadowShowingOnSelected: true
            })
        });
    },

    setDirection: function (direction, position) {
        var o = this.options;
        if (o.showArrow) {
            var style, wrapperStyle, placeholderStyle;
            var adjustXOffset = position.adjustXOffset || 0;
            var adjustYOffset = position.adjustYOffset || 0;
            var bodyBounds = BI.Widget._renderEngine.createElement("body").bounds();
            var bodyWidth = bodyBounds.width;
            var bodyHeight = bodyBounds.height;
            var popupWidth = this.element.outerWidth();
            var popupHeight = this.element.outerHeight();
            var offset = position.offset;
            var offsetStyle = position.offsetStyle;
            var middle = offsetStyle === "center" || offsetStyle === "middle";

            var minLeft = Math.max(5, offset.left + 5 + popupWidth - bodyWidth);
            var minRight = Math.max(5, popupWidth - (offset.left + 5));
            var minTop = Math.max(5, offset.top + 5 + popupHeight - bodyHeight);
            var minBottom = Math.max(5, popupHeight - (offset.top + 5));

            var maxLeft = Math.min(popupWidth - 12 - 5, offset.left + position.width - 12 - 5);
            var maxRight = Math.min(popupWidth - 12 - 5, bodyWidth - (offset.left + position.width - 12 - 5));
            var maxTop = Math.min(popupHeight - 12 - 5, offset.top + position.height - 12 - 5);
            var maxBottom = Math.min(popupHeight - 12 - 5, bodyHeight - (offset.top + position.height - 12 - 5));
            switch (direction) {
                case "bottom":
                case "bottom,right":
                    direction = "bottom";
                    style = {
                        // 5表示留出一定的空间
                        left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 6, minLeft, maxLeft)
                    };
                    wrapperStyle = {
                        top: o.tgap + o.vgap,
                        left: 0,
                        right: "",
                        bottom: "",
                    };
                    placeholderStyle = {
                        left: 0,
                        right: 0,
                        height: this._const.TRIANGLE_LENGTH,
                        top: -this._const.TRIANGLE_LENGTH,
                        bottom: ""
                    };
                    break;
                case "bottom,left":
                    direction = "bottom";
                    style = {
                        right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 6, minRight, maxRight)
                    };
                    wrapperStyle = {
                        top: o.bgap + o.vgap,
                        left: "",
                        right: 0,
                        bottom: "",
                    };
                    placeholderStyle = {
                        left: 0,
                        right: 0,
                        height: this._const.TRIANGLE_LENGTH,
                        top: -this._const.TRIANGLE_LENGTH,
                        bottom: ""
                    };
                    break;
                case "top":
                case "top,right":
                    direction = "top";
                    style = {
                        left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 6, minLeft, maxLeft)
                    };
                    wrapperStyle = {
                        bottom: o.bgap + o.vgap,
                        left: 0,
                        right: "",
                        top: "",
                    };
                    placeholderStyle = {
                        left: 0,
                        right: 0,
                        height: this._const.TRIANGLE_LENGTH,
                        top: "",
                        bottom: -this._const.TRIANGLE_LENGTH,
                    };
                    break;
                case "top,left":
                    direction = "top";
                    style = {
                        right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 6, minRight, maxRight)
                    };
                    wrapperStyle = {
                        bottom: o.bgap + o.vgap,
                        right: 0,
                        left: "",
                        top: "",
                    };
                    placeholderStyle = {
                        left: 0,
                        right: 0,
                        height: this._const.TRIANGLE_LENGTH,
                        top: "",
                        bottom: -this._const.TRIANGLE_LENGTH,
                    };
                    break;
                case "left":
                case "left,bottom":
                    direction = "left";
                    style = {
                        top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 6, minTop, maxTop)
                    };
                    wrapperStyle = {
                        right: o.rgap + o.hgap,
                        top: 0,
                        bottom: "",
                        left: "",
                    };
                    placeholderStyle = {
                        top: 0,
                        bottom: 0,
                        width: this._const.TRIANGLE_LENGTH,
                        right: -this._const.TRIANGLE_LENGTH,
                        left: ""
                    };
                    break;
                case "left,top":
                    direction = "left";
                    style = {
                        bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 6, minBottom, maxBottom)
                    };
                    wrapperStyle = {
                        right: o.rgap + o.hgap,
                        bottom: 0,
                        top: "",
                        left: "",
                    };
                    placeholderStyle = {
                        top: 0,
                        bottom: 0,
                        width: this._const.TRIANGLE_LENGTH,
                        right: -this._const.TRIANGLE_LENGTH,
                        left: ""
                    };
                    break;
                case "right":
                case "right,bottom":
                    direction = "right";
                    style = {
                        top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 6, minTop, maxTop)
                    };
                    wrapperStyle = {
                        left: o.lgap + o.hgap,
                        top: 0,
                        bottom: "",
                        right: "",
                    };
                    placeholderStyle = {
                        top: 0,
                        bottom: 0,
                        width: this._const.TRIANGLE_LENGTH,
                        left: -this._const.TRIANGLE_LENGTH,
                        right: ""
                    };
                    break;
                case "right,top":
                    direction = "right";
                    style = {
                        bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 6, minBottom, maxBottom)
                    };
                    wrapperStyle = {
                        left: o.lgap + o.hgap,
                        bottom: 0,
                        top: "",
                        right: "",
                    };
                    placeholderStyle = {
                        top: 0,
                        bottom: 0,
                        width: this._const.TRIANGLE_LENGTH,
                        left: -this._const.TRIANGLE_LENGTH,
                        right: ""
                    };
                    break;
                case "right,innerRight":
                    break;
                case "right,innerLeft":
                    break;
                case "innerRight":
                    break;
                case "innerLeft":
                    break;
            }
            this.element.removeClass("left").removeClass("right").removeClass("top").removeClass("bottom").addClass(direction);
            this.arrow.element.css(style);
            this.arrowWrapper.element.css(wrapperStyle);
            this.placeholder.element.css(placeholderStyle);
        }
    },

    getView: function () {
        return this.view;
    },

    populate: function (items) {
        this.view.populate.apply(this.view, arguments);
    },

    resetWidth: function (w) {
        this.options.width = w;
        this.element.width(w);
    },

    resetHeight: function (h) {
        var tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0,
            tabHeight = this.tab ? (this.tab.attr("height") || 24) : 0,
            toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0);
        var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVGap;
        this.view.resetHeight ? this.view.resetHeight(resetHeight) :
            this.view.element.css({"max-height": resetHeight / BI.pixRatio + BI.pixUnit});
    },

    setValue: function (selectedValues) {
        this.tab && this.tab.setValue(selectedValues);
        this.view.setValue(selectedValues);
    },

    getValue: function () {
        return this.view.getValue();
    }
});
BI.PopupView.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.popup_view", BI.PopupView);