fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

feature: 小三角换一种实现

es6
guy 3 years ago
parent
d610564ca8
commit
146a9fa2e1
5 changed files with 207 additions and 189 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      src/base/combination/bubble.js
  2. 68
      src/base/combination/combo.js
  3. 167
      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
Unescape View File

@ -223,17 +223,6 @@
this.combo = BI.createWidget(this.options.el, {
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 () {
@ -241,17 +230,9 @@
if (this.popupView == null) {
this.popupView = BI.createWidget(this.options.popup, {
type: "bi.bubble_popup_view",
showArrow: o.showArrow,
value: o.value
}, 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) {
if (type === BI.Events.CLICK) {
self.combo.setValue(self.getValue());
@ -360,7 +341,7 @@
name: "arrow",
options: {
padding: 5,
element: this.arrow.element[0]
element: this.popupView.arrow.element[0]
}
});
}

68
src/base/combination/combo.js
Unescape View File

@ -6,8 +6,11 @@
* @extends BI.Widget
*/
BI.Combo = BI.inherit(BI.Bubble, {
_const: {
TRIANGLE_LENGTH: 9
},
_defaultConfig: function () {
var conf = BI.Bubble.superclass._defaultConfig.apply(this, arguments);
var conf = BI.Combo.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-combo" + (BI.isIE() ? " hack" : ""),
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) {
var o = this.options;
this.fireEvent(BI.Combo.EVENT_BEFORE_HIDEVIEW);
@ -214,69 +196,79 @@
switch (o.direction) {
case "bottom":
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;
case "top":
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;
case "left":
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;
case "right":
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;
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;
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;
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;
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;
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;
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;
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;
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;
case "top,custom":
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;
case "custom,bottom":
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;
case "left,custom":
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.adaptHeight;
p.dir = "left";
break;
case "custom,right":
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.adaptHeight;
p.dir = "right";
break;
}
if ("adaptHeight" in p) {
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) {
this.popupView.element.css({
left: p.left

167
src/base/layer/layer.popup.js
Unescape View File

@ -4,6 +4,9 @@
* @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" : ""),
@ -21,6 +24,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
hgap: 0,
innerVGap: 0,
innerHGap: 0,
showArrow: true,
direction: BI.Direction.Top, // 工具栏的方向
stopEvent: false, // 是否停止mousedown、mouseup事件
stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡
@ -84,14 +88,36 @@ BI.PopupView = BI.inherit(BI.Widget, {
bgap: o.bgap,
vgap: o.vgap,
hgap: o.hgap,
items: BI.LogicFactory.createLogicItemsByDirection(o.direction,
BI.extend({
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.placeholder = BI.createWidget({
type: "bi.layout"
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: this.arrow
}, {
el: this.placeholder
}]
});
}
},
_createView: function () {
@ -102,7 +128,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
"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,
"padding-right": o.innerHGap / BI.pixRatio + BI.pixUnit
});
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 () {
return this.view;
},

118
src/case/combo/bubblecombo/combo.bubble.js
Unescape View File

@ -5,9 +5,6 @@
* @extends BI.Widget
*/
BI.BubbleCombo = BI.inherit(BI.Widget, {
_const: {
TRIANGLE_LENGTH: 9
},
_defaultConfig: function () {
return BI.extend(BI.BubbleCombo.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-bubble-combo",
@ -49,12 +46,12 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
hideWhenAnotherComboOpen: o.hideWhenAnotherComboOpen,
isNeedAdjustHeight: o.isNeedAdjustHeight,
isNeedAdjustWidth: o.isNeedAdjustWidth,
adjustLength: this._getAdjustLength(),
stopPropagation: o.stopPropagation,
adjustXOffset: 0,
adjustYOffset: 0,
hideChecker: o.hideChecker,
offsetStyle: o.offsetStyle,
showArrow: true,
el: o.el,
popup: BI.extend({
type: "bi.bubble_popup_view",
@ -82,11 +79,9 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, arguments);
});
this.combo.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () {
self._showTriangle();
self.fireEvent(BI.BubbleCombo.EVENT_AFTER_POPUPVIEW, arguments);
});
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () {
self._hideTriangle();
self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_HIDEVIEW, arguments);
});
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 () {
this._hideTriangle();
this.combo && this.combo.hideView();
},

8
src/less/base/view/popupview.less
Unescape View File

@ -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 {
bottom: -12px;
> .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 {
top: -12px;
> .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 {
right: -12px;
> .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 {
left: -12px;
> .bubble-arrow {

Write Preview
Loading…
Cancel
Save