forked from fanruan/fineui
Browse Source
Merge in VISUAL/fineui from ~IMPACT/fine_ui:es6 to es6 * commit '4edb0d9b23139d38d3913765396c6c49d69d61b3': KERNEL-13948 refactor: base/combination文件夹ES6化 KERNEL-13948 docs: 修复combo_group demo接口错误es6
Impact-吴家豪
2 years ago
18 changed files with 1969 additions and 1878 deletions
@ -1,374 +1,374 @@ |
|||||||
!(function () { |
/** |
||||||
var needHideWhenAnotherComboOpen = {}; |
* @class BI.Combo |
||||||
var currentOpenedCombos = {}; |
* @extends BI.Widget |
||||||
|
*/ |
||||||
|
|
||||||
/** |
import { shortcut, Widget, Controller, extend, createWidget, nextTick, bind, isNotNull, isNull, isFunction, each } from "../../core"; |
||||||
* @class BI.Combo |
import Bubble from "./bubble"; |
||||||
* @extends BI.Widget |
import { Resizers } from "../0.base"; |
||||||
*/ |
|
||||||
BI.Combo = BI.inherit(BI.Bubble, { |
|
||||||
_const: { |
|
||||||
TRIANGLE_LENGTH: 12, |
|
||||||
}, |
|
||||||
_defaultConfig: function () { |
|
||||||
var conf = BI.Combo.superclass._defaultConfig.apply(this, arguments); |
|
||||||
|
|
||||||
return BI.extend(conf, { |
let needHideWhenAnotherComboOpen = {}; |
||||||
baseCls: (conf.baseCls || "") + " bi-combo" + (BI.isIE() ? " hack" : ""), |
let currentOpenedCombos = {}; |
||||||
attributes: { |
|
||||||
tabIndex: -1, |
|
||||||
}, |
|
||||||
trigger: "click", // click || hover || click-hover || ""
|
|
||||||
toggle: true, |
|
||||||
direction: "bottom", // top||bottom||left||right||top,left||top,right||bottom,left||bottom,right||right,innerRight||right,innerLeft||innerRight||innerLeft
|
|
||||||
logic: { |
|
||||||
dynamic: true, |
|
||||||
}, |
|
||||||
container: null, // popupview放置的容器,默认为this.element
|
|
||||||
isDefaultInit: false, |
|
||||||
destroyWhenHide: false, |
|
||||||
hideWhenBlur: true, |
|
||||||
hideWhenAnotherComboOpen: false, |
|
||||||
hideWhenClickOutside: true, |
|
||||||
showArrow: false, |
|
||||||
isNeedAdjustHeight: true, // 是否需要高度调整
|
|
||||||
isNeedAdjustWidth: true, |
|
||||||
stopEvent: false, |
|
||||||
stopPropagation: false, |
|
||||||
adjustLength: 0, // 调整的距离
|
|
||||||
adjustXOffset: 0, |
|
||||||
adjustYOffset: 0, |
|
||||||
supportCSSTransform: true, |
|
||||||
hideChecker: BI.emptyFn, |
|
||||||
offsetStyle: "", // "",center,middle
|
|
||||||
el: {}, |
|
||||||
popup: {}, |
|
||||||
comboClass: "bi-combo-popup", |
|
||||||
hoverClass: "bi-combo-hover", |
|
||||||
belowMouse: false, |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
var self = this, o = this.options; |
export default class Combo extends Bubble { |
||||||
this._initCombo(); |
static xtype = "bi.combo"; |
||||||
// 延迟绑定事件,这样可以将自己绑定的事情优先执行
|
|
||||||
BI.nextTick(() => { |
|
||||||
!this.isDestroyed() && this._initPullDownAction(); |
|
||||||
}); |
|
||||||
this.combo.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { |
|
||||||
if (self.isEnabled() && self.isValid()) { |
|
||||||
if (type === BI.Events.TOGGLE) { |
|
||||||
self._toggle(); |
|
||||||
} |
|
||||||
if (type === BI.Events.EXPAND) { |
|
||||||
self._popupView(); |
|
||||||
} |
|
||||||
if (type === BI.Events.COLLAPSE) { |
|
||||||
self._hideView(); |
|
||||||
} |
|
||||||
if (type === BI.Events.EXPAND) { |
|
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
|
||||||
self.fireEvent(BI.Combo.EVENT_EXPAND); |
|
||||||
} |
|
||||||
if (type === BI.Events.COLLAPSE) { |
|
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
|
||||||
self.isViewVisible() && self.fireEvent(BI.Combo.EVENT_COLLAPSE); |
|
||||||
} |
|
||||||
if (type === BI.Events.CLICK) { |
|
||||||
self.fireEvent(BI.Combo.EVENT_TRIGGER_CHANGE, obj); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
self.element.on("mouseenter." + self.getName(), function (e) { |
static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; |
||||||
if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { |
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
self.element.addClass(o.hoverClass); |
static EVENT_EXPAND = "EVENT_EXPAND"; |
||||||
|
static EVENT_COLLAPSE = "EVENT_COLLAPSE"; |
||||||
|
static EVENT_AFTER_INIT = "EVENT_AFTER_INIT"; |
||||||
|
|
||||||
|
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; |
||||||
|
static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; |
||||||
|
static EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW"; |
||||||
|
static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; |
||||||
|
|
||||||
|
_defaultConfig() { |
||||||
|
const conf = super._defaultConfig(arguments); |
||||||
|
|
||||||
|
return extend(conf, { |
||||||
|
baseCls: (conf.baseCls || "") + " bi-combo" + (BI.isIE() ? " hack" : ""), |
||||||
|
attributes: { |
||||||
|
tabIndex: -1, |
||||||
|
}, |
||||||
|
trigger: "click", // click || hover || click-hover || ""
|
||||||
|
toggle: true, |
||||||
|
direction: "bottom", // top||bottom||left||right||top,left||top,right||bottom,left||bottom,right||right,innerRight||right,innerLeft||innerRight||innerLeft
|
||||||
|
logic: { |
||||||
|
dynamic: true, |
||||||
|
}, |
||||||
|
container: null, // popupview放置的容器,默认为this.element
|
||||||
|
isDefaultInit: false, |
||||||
|
destroyWhenHide: false, |
||||||
|
hideWhenBlur: true, |
||||||
|
hideWhenAnotherComboOpen: false, |
||||||
|
hideWhenClickOutside: true, |
||||||
|
showArrow: false, |
||||||
|
isNeedAdjustHeight: true, // 是否需要高度调整
|
||||||
|
isNeedAdjustWidth: true, |
||||||
|
stopEvent: false, |
||||||
|
stopPropagation: false, |
||||||
|
adjustLength: 0, // 调整的距离
|
||||||
|
adjustXOffset: 0, |
||||||
|
adjustYOffset: 0, |
||||||
|
supportCSSTransform: true, |
||||||
|
hideChecker: BI.emptyFn, |
||||||
|
offsetStyle: "", // "",center,middle
|
||||||
|
el: {}, |
||||||
|
popup: {}, |
||||||
|
comboClass: "bi-combo-popup", |
||||||
|
hoverClass: "bi-combo-hover", |
||||||
|
belowMouse: false, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { hoverClass, logic, isDefaultInit } = this.options; |
||||||
|
this._initCombo(); |
||||||
|
// 延迟绑定事件,这样可以将自己绑定的事情优先执行
|
||||||
|
nextTick(() => { |
||||||
|
!this.isDestroyed() && this._initPullDownAction(); |
||||||
|
}); |
||||||
|
this.combo.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { |
||||||
|
if (this.isEnabled() && this.isValid()) { |
||||||
|
if (type === BI.Events.TOGGLE) { |
||||||
|
this._toggle(); |
||||||
} |
} |
||||||
}); |
if (type === BI.Events.EXPAND) { |
||||||
self.element.on("mouseleave." + self.getName(), function (e) { |
this._popupView(); |
||||||
if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { |
|
||||||
self.element.removeClass(o.hoverClass); |
|
||||||
} |
} |
||||||
}); |
if (type === BI.Events.COLLAPSE) { |
||||||
|
this._hideView(); |
||||||
BI.createWidget(BI.extend({ |
} |
||||||
element: this, |
if (type === BI.Events.EXPAND) { |
||||||
scrolly: false, |
this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); |
||||||
}, BI.LogicFactory.createLogic("vertical", BI.extend(o.logic, { |
this.fireEvent(Combo.EVENT_EXPAND); |
||||||
items: [ |
} |
||||||
{ el: this.combo } |
if (type === BI.Events.COLLAPSE) { |
||||||
], |
this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); |
||||||
})))); |
this.isViewVisible() && this.fireEvent(Combo.EVENT_COLLAPSE); |
||||||
o.isDefaultInit && (this._assertPopupView()); |
} |
||||||
BI.Resizers.add(this.getName(), BI.bind(function (e) { |
if (type === BI.Events.CLICK) { |
||||||
// 如果resize对象是combo的子元素,则不应该收起,或交由hideChecker去处理
|
this.fireEvent(Combo.EVENT_TRIGGER_CHANGE, obj); |
||||||
if (this.isViewVisible()) { |
|
||||||
BI.isNotNull(e) ? this._hideIf(e) : this._hideView(); |
|
||||||
} |
} |
||||||
}, this)); |
|
||||||
}, |
|
||||||
|
|
||||||
_assertPopupView: function () { |
|
||||||
var self = this, o = this.options; |
|
||||||
if (BI.isNull(this.popupView)) { |
|
||||||
this.popupView = BI.createWidget(BI.isFunction(this.options.popup) ? this.options.popup() : this.options.popup, { |
|
||||||
type: "bi.popup_view", |
|
||||||
showArrow: o.showArrow, |
|
||||||
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.Bubble.EVENT_CHANGE, value, obj); |
|
||||||
} |
|
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
|
||||||
}); |
|
||||||
this.popupView.setVisible(false); |
|
||||||
BI.nextTick(function () { |
|
||||||
self.fireEvent(BI.Bubble.EVENT_AFTER_INIT); |
|
||||||
}); |
|
||||||
} |
} |
||||||
}, |
}); |
||||||
|
|
||||||
_hideView: function (e) { |
this.element.on("mouseenter." + this.getName(), (e) => { |
||||||
var o = this.options; |
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
||||||
this.fireEvent(BI.Combo.EVENT_BEFORE_HIDEVIEW); |
this.element.addClass(hoverClass); |
||||||
if (this.options.destroyWhenHide === true) { |
|
||||||
this.popupView && this.popupView.destroy(); |
|
||||||
this.popupView = null; |
|
||||||
this._rendered = false; |
|
||||||
} else { |
|
||||||
this.popupView && this.popupView.invisible(); |
|
||||||
} |
} |
||||||
|
}); |
||||||
if (!e || !this.combo.element.__isMouseInBounds__(e)) { |
this.element.on("mouseleave." + this.getName(), (e) => { |
||||||
this.element.removeClass(this.options.hoverClass); |
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
||||||
// 应对bi-focus-shadow在收起时不失焦
|
this.element.removeClass(hoverClass); |
||||||
this.element.blur(); |
|
||||||
} |
} |
||||||
|
}); |
||||||
|
|
||||||
this.element.removeClass(this.options.comboClass); |
createWidget(extend({ |
||||||
delete needHideWhenAnotherComboOpen[this.getName()]; |
element: this, |
||||||
delete currentOpenedCombos[this.getName()]; |
scrolly: false, |
||||||
|
}, BI.LogicFactory.createLogic("vertical", extend(logic, { |
||||||
o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); |
items: [ |
||||||
BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); |
{ el: this.combo } |
||||||
this.fireEvent(BI.Combo.EVENT_AFTER_HIDEVIEW, e); |
], |
||||||
}, |
})))); |
||||||
|
isDefaultInit && (this._assertPopupView()); |
||||||
|
Resizers.add(this.getName(), bind((e) => { |
||||||
|
// 如果resize对象是combo的子元素,则不应该收起,或交由hideChecker去处理
|
||||||
|
if (this.isViewVisible()) { |
||||||
|
isNotNull(e) ? this._hideIf(e) : this._hideView(); |
||||||
|
} |
||||||
|
}, this)); |
||||||
|
} |
||||||
|
|
||||||
_popupView: function (e) { |
_assertPopupView() { |
||||||
var self = this, o = this.options; |
const { showArrow, value, hideWhenClickOutside, hideWhenBlur } = this.options; |
||||||
this._assertPopupViewRender(); |
if (isNull(this.popupView)) { |
||||||
this.fireEvent(BI.Combo.EVENT_BEFORE_POPUPVIEW); |
this.popupView = createWidget(isFunction(this.options.popup) ? this.options.popup() : this.options.popup, { |
||||||
// popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下
|
type: "bi.popup_view", |
||||||
this.popupView.css({ left: -99999, top: -99999 }); |
showArrow, |
||||||
this.popupView.visible(); |
value, |
||||||
BI.each(needHideWhenAnotherComboOpen, function (i, combo) { |
}, this); |
||||||
if (i !== self.getName()) { |
this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { |
||||||
if (combo && combo._hideIf(e, true) === true) { |
if (type === BI.Events.CLICK) { |
||||||
delete needHideWhenAnotherComboOpen[i]; |
this.combo.setValue(this.getValue()); |
||||||
} |
this.fireEvent(Bubble.EVENT_CHANGE, value, obj); |
||||||
} |
} |
||||||
|
this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); |
||||||
|
}); |
||||||
|
this.popupView.setVisible(false); |
||||||
|
nextTick(() => { |
||||||
|
this.fireEvent(Bubble.EVENT_AFTER_INIT); |
||||||
}); |
}); |
||||||
currentOpenedCombos[this.getName()] = this; |
} |
||||||
this.options.hideWhenAnotherComboOpen && (needHideWhenAnotherComboOpen[this.getName()] = this); |
} |
||||||
this.adjustWidth(e); |
|
||||||
this.adjustHeight(e); |
|
||||||
|
|
||||||
this.element.addClass(this.options.comboClass); |
_hideView(e) { |
||||||
o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); |
const { hideWhenClickOutside, hideWhenBlur } = this.options; |
||||||
o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousewheel." + this.getName()); |
this.fireEvent(Combo.EVENT_BEFORE_HIDEVIEW); |
||||||
BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); |
if (this.options.destroyWhenHide === true) { |
||||||
|
this.popupView && this.popupView.destroy(); |
||||||
|
this.popupView = null; |
||||||
|
this._rendered = false; |
||||||
|
} else { |
||||||
|
this.popupView && this.popupView.invisible(); |
||||||
|
} |
||||||
|
|
||||||
o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this)); |
if (!e || !this.combo.element.__isMouseInBounds__(e)) { |
||||||
o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this)); |
this.element.removeClass(this.options.hoverClass); |
||||||
BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).bind("blur." + this.getName(), BI.bind(this._hideIf, this)); |
// 应对bi-focus-shadow在收起时不失焦
|
||||||
this.fireEvent(BI.Combo.EVENT_AFTER_POPUPVIEW); |
this.element.blur(); |
||||||
}, |
} |
||||||
|
|
||||||
adjustHeight: function (e) { |
this.element.removeClass(this.options.comboClass); |
||||||
var o = this.options, p = {}; |
delete needHideWhenAnotherComboOpen[this.getName()]; |
||||||
if (!this.popupView) { |
delete currentOpenedCombos[this.getName()]; |
||||||
return; |
|
||||||
} |
|
||||||
var isVisible = this.popupView.isVisible(); |
|
||||||
this.popupView.visible(); |
|
||||||
var combo = (o.belowMouse && BI.isNotNull(e)) ? { |
|
||||||
element: { |
|
||||||
0: BI.extend({}, e.target, { |
|
||||||
getBoundingClientRect: function () { |
|
||||||
return { |
|
||||||
left: e.pageX, |
|
||||||
top: e.pageY, |
|
||||||
width: 0, |
|
||||||
height: 0, |
|
||||||
}; |
|
||||||
} |
|
||||||
}), |
|
||||||
offset: function () { |
|
||||||
return { |
|
||||||
left: e.pageX, |
|
||||||
top: e.pageY, |
|
||||||
}; |
|
||||||
}, |
|
||||||
}, |
|
||||||
} : this.combo; |
|
||||||
|
|
||||||
var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock( |
hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); |
||||||
BI.isNull(o.container) |
BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); |
||||||
? this.element[0] |
this.fireEvent(Combo.EVENT_AFTER_HIDEVIEW, e); |
||||||
: BI.isWidget(o.container) |
} |
||||||
? o.container.element[0] |
|
||||||
: BI.Widget._renderEngine.createElement(BI.isFunction(o.container) ? o.container() : o.container)[0] |
|
||||||
); |
|
||||||
|
|
||||||
switch (o.direction) { |
_popupView(e) { |
||||||
case "bottom": |
const { hideWhenClickOutside, hideWhenBlur } = this.options; |
||||||
case "bottom,right": |
this._assertPopupViewRender(); |
||||||
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, positionRelativeElement); |
this.fireEvent(Combo.EVENT_BEFORE_POPUPVIEW); |
||||||
break; |
// popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下
|
||||||
case "top": |
this.popupView.css({ left: -99999, top: -99999 }); |
||||||
case "top,right": |
this.popupView.visible(); |
||||||
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, positionRelativeElement); |
each(needHideWhenAnotherComboOpen, (i, combo) => { |
||||||
break; |
if (i !== this.getName()) { |
||||||
case "left": |
if (combo && combo._hideIf(e, true) === true) { |
||||||
case "left,bottom": |
delete needHideWhenAnotherComboOpen[i]; |
||||||
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, positionRelativeElement); |
} |
||||||
break; |
|
||||||
case "right": |
|
||||||
case "right,bottom": |
|
||||||
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, positionRelativeElement); |
|
||||||
break; |
|
||||||
case "top,left": |
|
||||||
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, positionRelativeElement); |
|
||||||
break; |
|
||||||
case "bottom,left": |
|
||||||
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, positionRelativeElement); |
|
||||||
break; |
|
||||||
case "left,top": |
|
||||||
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, positionRelativeElement); |
|
||||||
break; |
|
||||||
case "right,top": |
|
||||||
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, positionRelativeElement); |
|
||||||
break; |
|
||||||
case "right,innerRight": |
|
||||||
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, positionRelativeElement); |
|
||||||
break; |
|
||||||
case "right,innerLeft": |
|
||||||
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, positionRelativeElement); |
|
||||||
break; |
|
||||||
case "innerRight": |
|
||||||
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, positionRelativeElement); |
|
||||||
break; |
|
||||||
case "innerLeft": |
|
||||||
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, positionRelativeElement); |
|
||||||
break; |
|
||||||
case "top,custom": |
|
||||||
case "custom,top": |
|
||||||
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.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) + (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) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0)); |
|
||||||
delete p.top; |
|
||||||
delete p.adaptHeight; |
|
||||||
p.dir = "right"; |
|
||||||
break; |
|
||||||
default: |
|
||||||
break; |
|
||||||
} |
} |
||||||
|
}); |
||||||
|
currentOpenedCombos[this.getName()] = this; |
||||||
|
this.options.hideWhenAnotherComboOpen && (needHideWhenAnotherComboOpen[this.getName()] = this); |
||||||
|
this.adjustWidth(e); |
||||||
|
this.adjustHeight(e); |
||||||
|
|
||||||
var width = this.combo.element.outerWidth(); |
this.element.addClass(this.options.comboClass); |
||||||
var height = this.combo.element.outerHeight(); |
hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); |
||||||
this.popupView.setDirection && this.popupView.setDirection(p.dir, { |
hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousewheel." + this.getName()); |
||||||
width: width, |
BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); |
||||||
height: height, |
|
||||||
offsetStyle: o.offsetStyle, |
|
||||||
adjustXOffset: o.adjustXOffset, |
|
||||||
adjustYOffset: o.adjustYOffset, |
|
||||||
offset: this.combo.element.offset(), |
|
||||||
}); |
|
||||||
|
|
||||||
if (o.supportCSSTransform) { |
hideWhenClickOutside && Widget._renderEngine.createElement(document).bind("mousewheel." + this.getName(), bind(this._hideIf, this)); |
||||||
|
hideWhenClickOutside && Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), bind(this._hideIf, this)).bind("mousewheel." + this.getName(), bind(this._hideIf, this)); |
||||||
|
BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).bind("blur." + this.getName(), bind(this._hideIf, this)); |
||||||
|
this.fireEvent(Combo.EVENT_AFTER_POPUPVIEW); |
||||||
|
} |
||||||
|
|
||||||
var positonedRect = positionRelativeElement.getBoundingClientRect(); |
adjustHeight(e) { |
||||||
|
const { belowMouse, supportCSSTransform, container, direction, adjustXOffset, adjustYOffset, adjustLength, showArrow, isNeedAdjustHeight, offsetStyle } = this.options; |
||||||
|
let p = {}; |
||||||
|
if (!this.popupView) { |
||||||
|
return; |
||||||
|
} |
||||||
|
const isVisible = this.popupView.isVisible(); |
||||||
|
this.popupView.visible(); |
||||||
|
const combo = (belowMouse && isNotNull(e)) ? { |
||||||
|
element: { |
||||||
|
0: e.target, |
||||||
|
offset: () => { |
||||||
|
return { |
||||||
|
left: e.pageX, |
||||||
|
top: e.pageY, |
||||||
|
}; |
||||||
|
}, |
||||||
|
bounds: () => { |
||||||
|
// offset为其相对于父定位元素的偏移
|
||||||
|
return { |
||||||
|
x: e.offsetX, |
||||||
|
y: e.offsetY, |
||||||
|
width: 0, |
||||||
|
height: 24, |
||||||
|
}; |
||||||
|
}, |
||||||
|
outerWidth: () => { |
||||||
|
return 0; |
||||||
|
}, |
||||||
|
outerHeight: () => { |
||||||
|
return 24; |
||||||
|
}, |
||||||
|
}, |
||||||
|
} : this.combo; |
||||||
|
const positionRelativeElement = supportCSSTransform ? BI.DOM.getPositionRelativeContainingBlock(isNull(container) ? this.element[0] : Widget._renderEngine.createElement(isFunction(container) ? container() : container)[0]) : null; |
||||||
|
const TRIANGLE_LENGTH = 12; |
||||||
|
switch (direction) { |
||||||
|
case "bottom": |
||||||
|
case "bottom,right": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, adjustXOffset, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight, ["bottom", "top", "right", "left"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "top": |
||||||
|
case "top,right": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, adjustXOffset, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight, ["top", "bottom", "right", "left"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "left": |
||||||
|
case "left,bottom": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["left", "right", "bottom", "top"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "right": |
||||||
|
case "right,bottom": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["right", "left", "bottom", "top"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "top,left": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, adjustXOffset, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight, ["top", "bottom", "left", "right"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "bottom,left": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, adjustXOffset, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight, ["bottom", "top", "left", "right"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "left,top": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["left", "right", "top", "bottom"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "right,top": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["right", "left", "top", "bottom"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "right,innerRight": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "right,innerLeft": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "innerRight": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "innerLeft": |
||||||
|
p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], offsetStyle, positionRelativeElement); |
||||||
|
break; |
||||||
|
case "top,custom": |
||||||
|
case "custom,top": |
||||||
|
p = BI.DOM.getTopAdaptPosition(combo, this.popupView, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight); |
||||||
|
p.dir = "top"; |
||||||
|
break; |
||||||
|
case "custom,bottom": |
||||||
|
case "bottom,custom": |
||||||
|
p = BI.DOM.getBottomAdaptPosition(combo, this.popupView, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight); |
||||||
|
p.dir = "bottom"; |
||||||
|
break; |
||||||
|
case "left,custom": |
||||||
|
case "custom,left": |
||||||
|
p = BI.DOM.getLeftAdaptPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? 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, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0)); |
||||||
|
delete p.top; |
||||||
|
delete p.adaptHeight; |
||||||
|
p.dir = "right"; |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
var scaleX = positonedRect.width / positionRelativeElement.offsetWidth; |
if ("adaptHeight" in p) { |
||||||
var scaleY = positonedRect.height / positionRelativeElement.offsetHeight; |
this.resetListHeight(p.adaptHeight); |
||||||
|
} |
||||||
|
|
||||||
p.top && (p.top = Math.round(p.top / scaleY + positionRelativeElement.scrollTop)); |
const width = this.combo.element.outerWidth(); |
||||||
p.left && (p.left = Math.round(p.left / scaleX + positionRelativeElement.scrollLeft)); |
const height = this.combo.element.outerHeight(); |
||||||
|
this.popupView.setDirection && this.popupView.setDirection(p.dir, { |
||||||
|
width, |
||||||
|
height, |
||||||
|
offsetStyle, |
||||||
|
adjustXOffset, |
||||||
|
adjustYOffset, |
||||||
|
offset: this.combo.element.offset(), |
||||||
|
}); |
||||||
|
|
||||||
p.adaptHeight && (p.adaptHeight = Math.round(p.adaptHeight / scaleY)); |
if (supportCSSTransform) { |
||||||
} |
|
||||||
|
|
||||||
if ("adaptHeight" in p) { |
const positonedRect = positionRelativeElement.getBoundingClientRect(); |
||||||
this.resetListHeight(p.adaptHeight); |
|
||||||
} |
|
||||||
|
|
||||||
if ("left" in p) { |
const scaleX = positonedRect.width / positionRelativeElement.offsetWidth; |
||||||
this.popupView.element.css({ |
const scaleY = positonedRect.height / positionRelativeElement.offsetHeight; |
||||||
left: p.left, |
|
||||||
}); |
|
||||||
} |
|
||||||
if ("top" in p) { |
|
||||||
this.popupView.element.css({ |
|
||||||
top: p.top, |
|
||||||
}); |
|
||||||
} |
|
||||||
this.position = p; |
|
||||||
this.popupView.setVisible(isVisible); |
|
||||||
}, |
|
||||||
|
|
||||||
destroyed: function () { |
p.top && (p.top = p.top / scaleY); |
||||||
BI.Widget._renderEngine.createElement(document) |
p.left && (p.left = p.left / scaleX); |
||||||
.unbind("click." + this.getName()) |
} |
||||||
.unbind("mousedown." + this.getName()) |
|
||||||
.unbind("mousewheel." + this.getName()) |
|
||||||
.unbind("mouseenter." + this.getName()) |
|
||||||
.unbind("mouseleave." + this.getName()); |
|
||||||
BI.Widget._renderEngine.createElement(window) |
|
||||||
.unbind("blur." + this.getName()); |
|
||||||
BI.Resizers.remove(this.getName()); |
|
||||||
this.popupView && this.popupView._destroy(); |
|
||||||
delete needHideWhenAnotherComboOpen[this.getName()]; |
|
||||||
delete currentOpenedCombos[this.getName()]; |
|
||||||
}, |
|
||||||
}); |
|
||||||
BI.Combo.closeAll = function () { |
|
||||||
BI.each(currentOpenedCombos, function (i, combo) { |
|
||||||
if (combo) { |
|
||||||
combo.hideView(); |
|
||||||
} |
|
||||||
}); |
|
||||||
currentOpenedCombos = {}; |
|
||||||
needHideWhenAnotherComboOpen = {}; |
|
||||||
}; |
|
||||||
BI.Combo.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; |
|
||||||
BI.Combo.EVENT_CHANGE = "EVENT_CHANGE"; |
|
||||||
BI.Combo.EVENT_EXPAND = "EVENT_EXPAND"; |
|
||||||
BI.Combo.EVENT_COLLAPSE = "EVENT_COLLAPSE"; |
|
||||||
BI.Combo.EVENT_AFTER_INIT = "EVENT_AFTER_INIT"; |
|
||||||
|
|
||||||
|
if ("left" in p) { |
||||||
|
this.popupView.element.css({ |
||||||
|
left: p.left, |
||||||
|
}); |
||||||
|
} |
||||||
|
if ("top" in p) { |
||||||
|
this.popupView.element.css({ |
||||||
|
top: p.top, |
||||||
|
}); |
||||||
|
} |
||||||
|
this.position = p; |
||||||
|
this.popupView.setVisible(isVisible); |
||||||
|
} |
||||||
|
|
||||||
BI.Combo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; |
destroyed() { |
||||||
BI.Combo.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; |
Widget._renderEngine.createElement(document) |
||||||
BI.Combo.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW"; |
.unbind("click." + this.getName()) |
||||||
BI.Combo.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; |
.unbind("mousedown." + this.getName()) |
||||||
|
.unbind("mousewheel." + this.getName()) |
||||||
|
.unbind("mouseenter." + this.getName()) |
||||||
|
.unbind("mouseleave." + this.getName()); |
||||||
|
Widget._renderEngine.createElement(window) |
||||||
|
.unbind("blur." + this.getName()); |
||||||
|
Resizers.remove(this.getName()); |
||||||
|
this.popupView && this.popupView._destroy(); |
||||||
|
delete needHideWhenAnotherComboOpen[this.getName()]; |
||||||
|
delete currentOpenedCombos[this.getName()]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
BI.shortcut("bi.combo", BI.Combo); |
Combo.closeAll = () => { |
||||||
}()); |
each(currentOpenedCombos, (i, combo) => { |
||||||
|
if (combo) { |
||||||
|
combo.hideView(); |
||||||
|
} |
||||||
|
}); |
||||||
|
currentOpenedCombos = {}; |
||||||
|
needHideWhenAnotherComboOpen = {}; |
||||||
|
}; |
||||||
|
Loading…
Reference in new issue