Browse Source

Pull request #2444: feature: 小三角换一种实现

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit '146a9fa2e1077f66eb91b1e866d8f71138dc71e0':
  feature: 小三角换一种实现
es6
guy 3 years ago
parent
commit
b4977c4c36
  1. 23
      src/base/combination/bubble.js
  2. 68
      src/base/combination/combo.js
  3. 179
      src/base/layer/layer.popup.js
  4. 118
      src/case/combo/bubblecombo/combo.bubble.js
  5. 8
      src/less/base/view/popupview.less

23
src/base/combination/bubble.js

@ -223,17 +223,6 @@
this.combo = BI.createWidget(this.options.el, { this.combo = BI.createWidget(this.options.el, {
value: this.options.value value: this.options.value
}); });
if (this.options.showArrow) {
this.arrow = BI.createWidget({
type: "bi.absolute",
cls: "bi-bubble-arrow",
items: [{
type: "bi.layout",
cls: "bubble-arrow"
}]
});
}
}, },
_assertPopupView: function () { _assertPopupView: function () {
@ -241,17 +230,9 @@
if (this.popupView == null) { if (this.popupView == null) {
this.popupView = BI.createWidget(this.options.popup, { this.popupView = BI.createWidget(this.options.popup, {
type: "bi.bubble_popup_view", type: "bi.bubble_popup_view",
showArrow: o.showArrow,
value: o.value value: o.value
}, this); }, this);
if (this.options.showArrow) {
BI.createWidget({
type: "bi.absolute",
element: this.popupView,
items: [{
el: this.arrow
}]
});
}
this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
if (type === BI.Events.CLICK) { if (type === BI.Events.CLICK) {
self.combo.setValue(self.getValue()); self.combo.setValue(self.getValue());
@ -360,7 +341,7 @@
name: "arrow", name: "arrow",
options: { options: {
padding: 5, padding: 5,
element: this.arrow.element[0] element: this.popupView.arrow.element[0]
} }
}); });
} }

68
src/base/combination/combo.js

@ -6,8 +6,11 @@
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Combo = BI.inherit(BI.Bubble, { BI.Combo = BI.inherit(BI.Bubble, {
_const: {
TRIANGLE_LENGTH: 9
},
_defaultConfig: function () { _defaultConfig: function () {
var conf = BI.Bubble.superclass._defaultConfig.apply(this, arguments); var conf = BI.Combo.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, { return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-combo" + (BI.isIE() ? " hack" : ""), baseCls: (conf.baseCls || "") + " bi-combo" + (BI.isIE() ? " hack" : ""),
attributes: { attributes: {
@ -102,27 +105,6 @@
}); });
}, },
_assertPopupView: function () {
var self = this, o = this.options;
if (this.popupView == null) {
this.popupView = BI.createWidget(this.options.popup, {
type: "bi.popup_view",
value: o.value
}, this);
this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
if (type === BI.Events.CLICK) {
self.combo.setValue(self.getValue());
self.fireEvent(BI.Combo.EVENT_CHANGE, value, obj);
}
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
});
this.popupView.setVisible(false);
BI.nextTick(function () {
self.fireEvent(BI.Combo.EVENT_AFTER_INIT);
});
}
},
_hideView: function (e) { _hideView: function (e) {
var o = this.options; var o = this.options;
this.fireEvent(BI.Combo.EVENT_BEFORE_HIDEVIEW); this.fireEvent(BI.Combo.EVENT_BEFORE_HIDEVIEW);
@ -214,69 +196,79 @@
switch (o.direction) { switch (o.direction) {
case "bottom": case "bottom":
case "bottom,right": case "bottom,right":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight, ["bottom", "top", "right", "left"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "right", "left"], o.offsetStyle);
break; break;
case "top": case "top":
case "top,right": case "top,right":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight, ["top", "bottom", "right", "left"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "right", "left"], o.offsetStyle);
break; break;
case "left": case "left":
case "left,bottom": case "left,bottom":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "bottom", "top"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "bottom", "top"], o.offsetStyle);
break; break;
case "right": case "right":
case "right,bottom": case "right,bottom":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "bottom", "top"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "bottom", "top"], o.offsetStyle);
break; break;
case "top,left": case "top,left":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight, ["top", "bottom", "left", "right"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "left", "right"], o.offsetStyle);
break; break;
case "bottom,left": case "bottom,left":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight, ["bottom", "top", "left", "right"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "left", "right"], o.offsetStyle);
break; break;
case "left,top": case "left,top":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "top", "bottom"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "top", "bottom"], o.offsetStyle);
break; break;
case "right,top": case "right,top":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "top", "bottom"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "top", "bottom"], o.offsetStyle);
break; break;
case "right,innerRight": case "right,innerRight":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], o.offsetStyle);
break; break;
case "right,innerLeft": case "right,innerLeft":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], o.offsetStyle);
break; break;
case "innerRight": case "innerRight":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], o.offsetStyle);
break; break;
case "innerLeft": case "innerLeft":
p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], o.offsetStyle); p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], o.offsetStyle);
break; break;
case "top,custom": case "top,custom":
case "custom,top": case "custom,top":
p = BI.DOM.getTopAdaptPosition(combo, this.popupView, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight); p = BI.DOM.getTopAdaptPosition(combo, this.popupView, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight);
p.dir = "top";
break; break;
case "custom,bottom": case "custom,bottom":
case "bottom,custom": case "bottom,custom":
p = BI.DOM.getBottomAdaptPosition(combo, this.popupView, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight); p = BI.DOM.getBottomAdaptPosition(combo, this.popupView, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight);
p.dir = "bottom";
break; break;
case "left,custom": case "left,custom":
case "custom,left": case "custom,left":
p = BI.DOM.getLeftAdaptPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength); p = BI.DOM.getLeftAdaptPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0));
delete p.top; delete p.top;
delete p.adaptHeight; delete p.adaptHeight;
p.dir = "left";
break; break;
case "custom,right": case "custom,right":
case "right,custom": case "right,custom":
p = BI.DOM.getRightAdaptPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength); p = BI.DOM.getRightAdaptPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0));
delete p.top; delete p.top;
delete p.adaptHeight; delete p.adaptHeight;
p.dir = "right";
break; break;
} }
if ("adaptHeight" in p) { if ("adaptHeight" in p) {
this.resetListHeight(p["adaptHeight"]); this.resetListHeight(p["adaptHeight"]);
} }
var width = this.combo.element.outerWidth();
var height = this.combo.element.outerHeight();
this.popupView.setDirection(p.dir, {
width: width,
height: height
});
if ("left" in p) { if ("left" in p) {
this.popupView.element.css({ this.popupView.element.css({
left: p.left left: p.left

179
src/base/layer/layer.popup.js

@ -4,9 +4,12 @@
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.PopupView = BI.inherit(BI.Widget, { BI.PopupView = BI.inherit(BI.Widget, {
_const: {
TRIANGLE_LENGTH: 9
},
_defaultConfig: function (props) { _defaultConfig: function (props) {
return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
_baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""), _baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""),
// 品牌色 // 品牌色
primary: false, primary: false,
maxWidth: "auto", maxWidth: "auto",
@ -21,6 +24,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
hgap: 0, hgap: 0,
innerVGap: 0, innerVGap: 0,
innerHGap: 0, innerHGap: 0,
showArrow: true,
direction: BI.Direction.Top, // 工具栏的方向 direction: BI.Direction.Top, // 工具栏的方向
stopEvent: false, // 是否停止mousedown、mouseup事件 stopEvent: false, // 是否停止mousedown、mouseup事件
stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡 stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡
@ -56,12 +60,12 @@ BI.PopupView = BI.inherit(BI.Widget, {
"z-index": BI.zIndex_popup, "z-index": BI.zIndex_popup,
"min-width": BI.isNumeric(o.minWidth) ? (o.minWidth / BI.pixRatio + BI.pixUnit) : o.minWidth, "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 "max-width": BI.isNumeric(o.maxWidth) ? (o.maxWidth / BI.pixRatio + BI.pixUnit) : o.maxWidth
}).bind({ click: fn }); }).bind({click: fn});
this.element.bind("mousewheel", fn); this.element.bind("mousewheel", fn);
o.stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn }); o.stopPropagation && this.element.bind({mousedown: fn, mouseup: fn, mouseover: fn});
o.stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop }); o.stopEvent && this.element.bind({mousedown: stop, mouseup: stop, mouseover: stop});
this.tool = this._createTool(); this.tool = this._createTool();
this.tab = this._createTab(); this.tab = this._createTab();
this.view = this._createView(); this.view = this._createView();
@ -84,25 +88,47 @@ BI.PopupView = BI.inherit(BI.Widget, {
bgap: o.bgap, bgap: o.bgap,
vgap: o.vgap, vgap: o.vgap,
hgap: o.hgap, hgap: o.hgap,
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, items: BI.LogicFactory.createLogicItemsByDirection(o.direction, BI.extend({
BI.extend({
cls: "list-view-outer bi-card list-view-shadow" + (o.primary ? " bi-primary" : "") 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, { }, 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) 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.placeholder = BI.createWidget({
type: "bi.layout"
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: this.arrow
}, {
el: this.placeholder
}]
});
}
}, },
_createView: function () { _createView: function () {
var o = this.options; var o = this.options;
this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value }); this.button_group = BI.createWidget(o.el, {type: "bi.button_group", value: o.value});
this.button_group.element.css({ this.button_group.element.css({
"min-height": BI.isNumeric(o.minHeight) ? (o.minHeight / BI.pixRatio + BI.pixUnit) : o.minHeight, "min-height": BI.isNumeric(o.minHeight) ? (o.minHeight / BI.pixRatio + BI.pixUnit) : o.minHeight,
"padding-top": o.innerVGap / BI.pixRatio + BI.pixUnit, "padding-top": o.innerVGap / BI.pixRatio + BI.pixUnit,
"padding-bottom": o.innerVGap / BI.pixRatio + BI.pixUnit, "padding-bottom": o.innerVGap / BI.pixRatio + BI.pixUnit,
"padding-left": o.innerHGap / BI.pixRatio + BI.pixUnit, "padding-left": o.innerHGap / BI.pixRatio + BI.pixUnit,
"padding-right": o.innerHGap / BI.pixRatio + BI.pixUnit, "padding-right": o.innerHGap / BI.pixRatio + BI.pixUnit
}); });
return this.button_group; return this.button_group;
}, },
@ -147,6 +173,141 @@ BI.PopupView = BI.inherit(BI.Widget, {
}); });
}, },
setDirection: function (direction, size) {
if (this.options.showArrow) {
var style, placeholderStyle;
switch (direction) {
case "bottom":
case "bottom,right":
direction = "bottom";
style = {
left: size.width / 2 - 6
};
placeholderStyle = {
width: size.width,
left: 0,
right: 0,
height: this._const.TRIANGLE_LENGTH,
top: -this._const.TRIANGLE_LENGTH,
bottom: ""
};
break;
case "bottom,left":
direction = "bottom";
style = {
right: size.width / 2 - 6
};
placeholderStyle = {
width: size.width,
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: size.width / 2 - 6
};
placeholderStyle = {
width: size.width,
left: 0,
right: 0,
height: this._const.TRIANGLE_LENGTH,
top: "",
bottom: -this._const.TRIANGLE_LENGTH
};
break;
case "top,left":
direction = "top";
style = {
right: size.width / 2 - 6
};
placeholderStyle = {
width: size.width,
left: 0,
right: 0,
height: this._const.TRIANGLE_LENGTH,
top: -this._const.TRIANGLE_LENGTH,
bottom: ""
};
break;
case "left":
case "left,bottom":
direction = "left";
style = {
top: size.height / 2 - 6
};
placeholderStyle = {
height: size.height,
top: 0,
bottom: 0,
width: this._const.TRIANGLE_LENGTH,
right: -this._const.TRIANGLE_LENGTH,
left: ""
};
break;
case "left,top":
direction = "left";
style = {
bottom: size.height / 2 - 6
};
placeholderStyle = {
height: size.height,
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: size.height / 2 - 6
};
placeholderStyle = {
height: size.height,
top: 0,
bottom: 0,
width: this._const.TRIANGLE_LENGTH,
left: -this._const.TRIANGLE_LENGTH,
right: ""
};
break;
case "right,top":
direction = "right";
style = {
bottom: size.height / 2 - 6
};
placeholderStyle = {
height: size.height,
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.placeholder.element.css(placeholderStyle);
}
},
getView: function () { getView: function () {
return this.view; return this.view;
}, },
@ -166,7 +327,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 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; var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVGap;
this.view.resetHeight ? this.view.resetHeight(resetHeight) : this.view.resetHeight ? this.view.resetHeight(resetHeight) :
this.view.element.css({ "max-height": resetHeight / BI.pixRatio + BI.pixUnit }); this.view.element.css({"max-height": resetHeight / BI.pixRatio + BI.pixUnit});
}, },
setValue: function (selectedValues) { setValue: function (selectedValues) {

118
src/case/combo/bubblecombo/combo.bubble.js

@ -5,9 +5,6 @@
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.BubbleCombo = BI.inherit(BI.Widget, { BI.BubbleCombo = BI.inherit(BI.Widget, {
_const: {
TRIANGLE_LENGTH: 9
},
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.BubbleCombo.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.BubbleCombo.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-bubble-combo", baseCls: "bi-bubble-combo",
@ -49,12 +46,12 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
hideWhenAnotherComboOpen: o.hideWhenAnotherComboOpen, hideWhenAnotherComboOpen: o.hideWhenAnotherComboOpen,
isNeedAdjustHeight: o.isNeedAdjustHeight, isNeedAdjustHeight: o.isNeedAdjustHeight,
isNeedAdjustWidth: o.isNeedAdjustWidth, isNeedAdjustWidth: o.isNeedAdjustWidth,
adjustLength: this._getAdjustLength(),
stopPropagation: o.stopPropagation, stopPropagation: o.stopPropagation,
adjustXOffset: 0, adjustXOffset: 0,
adjustYOffset: 0, adjustYOffset: 0,
hideChecker: o.hideChecker, hideChecker: o.hideChecker,
offsetStyle: o.offsetStyle, offsetStyle: o.offsetStyle,
showArrow: true,
el: o.el, el: o.el,
popup: BI.extend({ popup: BI.extend({
type: "bi.bubble_popup_view", type: "bi.bubble_popup_view",
@ -82,11 +79,9 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, arguments); self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, arguments);
}); });
this.combo.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () { this.combo.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () {
self._showTriangle();
self.fireEvent(BI.BubbleCombo.EVENT_AFTER_POPUPVIEW, arguments); self.fireEvent(BI.BubbleCombo.EVENT_AFTER_POPUPVIEW, arguments);
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () {
self._hideTriangle();
self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_HIDEVIEW, arguments); self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_HIDEVIEW, arguments);
}); });
this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
@ -94,118 +89,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
}); });
}, },
_getAdjustLength: function () {
return this._const.TRIANGLE_LENGTH + this.options.adjustLength;
},
_createTriangle: function (direction) {
var self = this, o = this.options, pos = {}, op = {};
var adjustLength = this.options.adjustLength;
var offset = this.element.offset();
var left = offset.left, right = offset.left + this.element.outerWidth();
var top = offset.top, bottom = offset.top + this.element.outerHeight();
switch (direction) {
case "left":
pos = {
top: top,
height: this.element.outerHeight(),
left: left - adjustLength - this._const.TRIANGLE_LENGTH
};
op = {width: this._const.TRIANGLE_LENGTH};
break;
case "right":
pos = {
top: top,
height: this.element.outerHeight(),
left: right + adjustLength
};
op = {width: this._const.TRIANGLE_LENGTH};
break;
case "top":
pos = {
left: left,
width: this.element.outerWidth(),
top: top - adjustLength - this._const.TRIANGLE_LENGTH
};
op = {height: this._const.TRIANGLE_LENGTH};
break;
case "bottom":
pos = {
left: left,
width: this.element.outerWidth(),
top: bottom + adjustLength
};
op = {height: this._const.TRIANGLE_LENGTH};
break;
default:
break;
}
this.triangle && this.triangle.destroy();
this.triangle = BI.createWidget(op, {
type: "bi.center_adapt",
scrollable: false,
cls: "button-combo-triangle-wrapper",
items: [{
type: "bi.layout",
cls: "bubble-combo-triangle-" + direction + (o.primary ? " bi-primary" : "")
}]
});
pos.el = this.triangle;
// 动画结束后再画三角
setTimeout(function () {
BI.createWidget({
type: "bi.absolute",
element: self,
items: [pos]
});
}, 200);
},
_createLeftTriangle: function () {
this._createTriangle("left");
},
_createRightTriangle: function () {
this._createTriangle("right");
},
_createTopTriangle: function () {
this._createTriangle("top");
},
_createBottomTriangle: function () {
this._createTriangle("bottom");
},
_showTriangle: function () {
var pos = this.combo.getPopupPosition();
switch (pos.dir) {
case "left,top":
case "left,bottom":
this._createLeftTriangle();
break;
case "right,top":
case "right,bottom":
this._createRightTriangle();
break;
case "top,left":
case "top,right":
this._createTopTriangle();
break;
case "bottom,left":
case "bottom,right":
this._createBottomTriangle();
break;
}
},
_hideTriangle: function () {
this.triangle && this.triangle.destroy();
this.triangle = null;
},
hideView: function () { hideView: function () {
this._hideTriangle();
this.combo && this.combo.hideView(); this.combo && this.combo.hideView();
}, },

8
src/less/base/view/popupview.less

@ -27,7 +27,7 @@
} }
} }
.bi-popup-view[data-popper-placement^='top'] { .bi-popup-view[data-popper-placement^='top'], .bi-popup-view.top {
> .bi-bubble-arrow { > .bi-bubble-arrow {
bottom: -12px; bottom: -12px;
> .bubble-arrow { > .bubble-arrow {
@ -35,7 +35,7 @@
} }
} }
} }
.bi-popup-view[data-popper-placement^='bottom'] { .bi-popup-view[data-popper-placement^='bottom'], .bi-popup-view.bottom {
> .bi-bubble-arrow { > .bi-bubble-arrow {
top: -12px; top: -12px;
> .bubble-arrow { > .bubble-arrow {
@ -43,7 +43,7 @@
} }
} }
} }
.bi-popup-view[data-popper-placement^='left'] { .bi-popup-view[data-popper-placement^='left'], .bi-popup-view.left {
> .bi-bubble-arrow { > .bi-bubble-arrow {
right: -12px; right: -12px;
> .bubble-arrow { > .bubble-arrow {
@ -51,7 +51,7 @@
} }
} }
} }
.bi-popup-view[data-popper-placement^='right'] { .bi-popup-view[data-popper-placement^='right'], .bi-popup-view.right {
> .bi-bubble-arrow { > .bi-bubble-arrow {
left: -12px; left: -12px;
> .bubble-arrow { > .bubble-arrow {

Loading…
Cancel
Save