/** * 下拉框弹出层, 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);