|
|
|
@ -14,14 +14,14 @@ import { |
|
|
|
isNull, |
|
|
|
isNull, |
|
|
|
isFunction, |
|
|
|
isFunction, |
|
|
|
contains, |
|
|
|
contains, |
|
|
|
bind |
|
|
|
bind, |
|
|
|
|
|
|
|
Events, |
|
|
|
|
|
|
|
emptyFn, |
|
|
|
|
|
|
|
LogicFactory, |
|
|
|
|
|
|
|
EVENT_RESPONSE_TIME, |
|
|
|
|
|
|
|
EVENT_BLUR |
|
|
|
} from "@/core"; |
|
|
|
} from "@/core"; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* @class BI.Bubble |
|
|
|
|
|
|
|
* @extends BI.Widget |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@shortcut() |
|
|
|
@shortcut() |
|
|
|
export class Bubble extends Widget { |
|
|
|
export class Bubble extends Widget { |
|
|
|
static xtype = "bi.bubble"; |
|
|
|
static xtype = "bi.bubble"; |
|
|
|
@ -65,7 +65,7 @@ export class Bubble extends Widget { |
|
|
|
adjustLength: 0, // 调整的距离
|
|
|
|
adjustLength: 0, // 调整的距离
|
|
|
|
adjustXOffset: 0, |
|
|
|
adjustXOffset: 0, |
|
|
|
adjustYOffset: 0, |
|
|
|
adjustYOffset: 0, |
|
|
|
hideChecker: BI.emptyFn, |
|
|
|
hideChecker: emptyFn, |
|
|
|
offsetStyle: "left", // left,right,center
|
|
|
|
offsetStyle: "left", // left,right,center
|
|
|
|
el: {}, |
|
|
|
el: {}, |
|
|
|
popup: {}, |
|
|
|
popup: {}, |
|
|
|
@ -83,32 +83,32 @@ export class Bubble extends Widget { |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.combo.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { |
|
|
|
this.combo.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { |
|
|
|
if (this.isEnabled() && this.isValid()) { |
|
|
|
if (this.isEnabled() && this.isValid()) { |
|
|
|
if (type === BI.Events.EXPAND) { |
|
|
|
if (type === Events.EXPAND) { |
|
|
|
this._popupView(); |
|
|
|
this._popupView(); |
|
|
|
} |
|
|
|
} |
|
|
|
if (type === BI.Events.COLLAPSE) { |
|
|
|
if (type === Events.COLLAPSE) { |
|
|
|
this._hideView(); |
|
|
|
this._hideView(); |
|
|
|
} |
|
|
|
} |
|
|
|
if (type === BI.Events.EXPAND) { |
|
|
|
if (type === Events.EXPAND) { |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
} |
|
|
|
} |
|
|
|
if (type === BI.Events.COLLAPSE) { |
|
|
|
if (type === Events.COLLAPSE) { |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); |
|
|
|
this.isViewVisible() && this.fireEvent(Bubble.EVENT_COLLAPSE); |
|
|
|
this.isViewVisible() && this.fireEvent(Bubble.EVENT_COLLAPSE); |
|
|
|
} |
|
|
|
} |
|
|
|
if (type === BI.Events.CLICK) { |
|
|
|
if (type === Events.CLICK) { |
|
|
|
this.fireEvent(Bubble.EVENT_TRIGGER_CHANGE, obj); |
|
|
|
this.fireEvent(Bubble.EVENT_TRIGGER_CHANGE, obj); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
this.element.on(`mouseenter.${this.getName()}`, (e) => { |
|
|
|
this.element.on(`mouseenter.${this.getName()}`, e => { |
|
|
|
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
|
|
|
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
|
|
|
this.element.addClass(hoverClass); |
|
|
|
this.element.addClass(hoverClass); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.element.on(`mouseleave.${this.getName()}`, (e) => { |
|
|
|
this.element.on(`mouseleave.${this.getName()}`, e => { |
|
|
|
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
|
|
|
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
|
|
|
this.element.removeClass(hoverClass); |
|
|
|
this.element.removeClass(hoverClass); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -120,7 +120,7 @@ export class Bubble extends Widget { |
|
|
|
element: this, |
|
|
|
element: this, |
|
|
|
scrolly: false, |
|
|
|
scrolly: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
BI.LogicFactory.createLogic( |
|
|
|
LogicFactory.createLogic( |
|
|
|
"vertical", |
|
|
|
"vertical", |
|
|
|
extend(logic, { |
|
|
|
extend(logic, { |
|
|
|
items: [{ el: this.combo }], |
|
|
|
items: [{ el: this.combo }], |
|
|
|
@ -146,7 +146,7 @@ export class Bubble extends Widget { |
|
|
|
const { stopEvent, stopPropagation, toggle } = this.options; |
|
|
|
const { stopEvent, stopPropagation, toggle } = this.options; |
|
|
|
const evs = (this.options.trigger || "").split(","); |
|
|
|
const evs = (this.options.trigger || "").split(","); |
|
|
|
|
|
|
|
|
|
|
|
const st = (e) => { |
|
|
|
const st = e => { |
|
|
|
if (stopEvent) { |
|
|
|
if (stopEvent) { |
|
|
|
e.stopEvent(); |
|
|
|
e.stopEvent(); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -157,7 +157,7 @@ export class Bubble extends Widget { |
|
|
|
|
|
|
|
|
|
|
|
let enterPopup = false; |
|
|
|
let enterPopup = false; |
|
|
|
|
|
|
|
|
|
|
|
const hide = (e) => { |
|
|
|
const hide = e => { |
|
|
|
if ( |
|
|
|
if ( |
|
|
|
this.isEnabled() && |
|
|
|
this.isEnabled() && |
|
|
|
this.isValid() && |
|
|
|
this.isValid() && |
|
|
|
@ -166,7 +166,7 @@ export class Bubble extends Widget { |
|
|
|
toggle === true |
|
|
|
toggle === true |
|
|
|
) { |
|
|
|
) { |
|
|
|
this._hideView(e); |
|
|
|
this._hideView(e); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.combo); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, Events.COLLAPSE, "", this.combo); |
|
|
|
this.fireEvent(Bubble.EVENT_COLLAPSE); |
|
|
|
this.fireEvent(Bubble.EVENT_COLLAPSE); |
|
|
|
} |
|
|
|
} |
|
|
|
this.popupView && |
|
|
|
this.popupView && |
|
|
|
@ -178,18 +178,18 @@ export class Bubble extends Widget { |
|
|
|
let debounced; |
|
|
|
let debounced; |
|
|
|
switch (ev) { |
|
|
|
switch (ev) { |
|
|
|
case "hover": |
|
|
|
case "hover": |
|
|
|
this.element.on(`mouseenter.${this.getName()}`, (e) => { |
|
|
|
this.element.on(`mouseenter.${this.getName()}`, e => { |
|
|
|
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
|
|
|
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
|
|
|
this._popupView(e); |
|
|
|
this._popupView(e); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, Events.EXPAND, "", this.combo); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.element.on(`mouseleave.${this.getName()}`, (e) => { |
|
|
|
this.element.on(`mouseleave.${this.getName()}`, e => { |
|
|
|
if (this.popupView) { |
|
|
|
if (this.popupView) { |
|
|
|
this.popupView.element.on(`mouseenter.${this.getName()}`, (e) => { |
|
|
|
this.popupView.element.on(`mouseenter.${this.getName()}`, e => { |
|
|
|
enterPopup = true; |
|
|
|
enterPopup = true; |
|
|
|
this.popupView.element.on(`mouseleave.${this.getName()}`, (e) => { |
|
|
|
this.popupView.element.on(`mouseleave.${this.getName()}`, e => { |
|
|
|
hide(e); |
|
|
|
hide(e); |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.popupView.element.off(`mouseenter.${this.getName()}`); |
|
|
|
this.popupView.element.off(`mouseenter.${this.getName()}`); |
|
|
|
@ -204,7 +204,7 @@ export class Bubble extends Widget { |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "click": |
|
|
|
case "click": |
|
|
|
debounced = debounce( |
|
|
|
debounced = debounce( |
|
|
|
(e) => { |
|
|
|
e => { |
|
|
|
if (this.combo.element.__isMouseInBounds__(e)) { |
|
|
|
if (this.combo.element.__isMouseInBounds__(e)) { |
|
|
|
if ( |
|
|
|
if ( |
|
|
|
this.isEnabled() && |
|
|
|
this.isEnabled() && |
|
|
|
@ -217,29 +217,29 @@ export class Bubble extends Widget { |
|
|
|
// }
|
|
|
|
// }
|
|
|
|
toggle ? this._toggle(e) : this._popupView(e); |
|
|
|
toggle ? this._toggle(e) : this._popupView(e); |
|
|
|
if (this.isViewVisible()) { |
|
|
|
if (this.isViewVisible()) { |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, Events.EXPAND, "", this.combo); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.combo); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, Events.COLLAPSE, "", this.combo); |
|
|
|
this.fireEvent(Bubble.EVENT_COLLAPSE); |
|
|
|
this.fireEvent(Bubble.EVENT_COLLAPSE); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
BI.EVENT_RESPONSE_TIME, |
|
|
|
EVENT_RESPONSE_TIME, |
|
|
|
{ |
|
|
|
{ |
|
|
|
leading: true, |
|
|
|
leading: true, |
|
|
|
trailing: false, |
|
|
|
trailing: false, |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
); |
|
|
|
this.element.off(`${ev}.${this.getName()}`).on(`${ev}.${this.getName()}`, (e) => { |
|
|
|
this.element.off(`${ev}.${this.getName()}`).on(`${ev}.${this.getName()}`, e => { |
|
|
|
debounced(e); |
|
|
|
debounced(e); |
|
|
|
st(e); |
|
|
|
st(e); |
|
|
|
}); |
|
|
|
}); |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "click-hover": |
|
|
|
case "click-hover": |
|
|
|
debounced = debounce( |
|
|
|
debounced = debounce( |
|
|
|
(e) => { |
|
|
|
e => { |
|
|
|
if (this.combo.element.__isMouseInBounds__(e)) { |
|
|
|
if (this.combo.element.__isMouseInBounds__(e)) { |
|
|
|
if ( |
|
|
|
if ( |
|
|
|
this.isEnabled() && |
|
|
|
this.isEnabled() && |
|
|
|
@ -252,27 +252,27 @@ export class Bubble extends Widget { |
|
|
|
// }
|
|
|
|
// }
|
|
|
|
this._popupView(e); |
|
|
|
this._popupView(e); |
|
|
|
if (this.isViewVisible()) { |
|
|
|
if (this.isViewVisible()) { |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, Events.EXPAND, "", this.combo); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
BI.EVENT_RESPONSE_TIME, |
|
|
|
EVENT_RESPONSE_TIME, |
|
|
|
{ |
|
|
|
{ |
|
|
|
leading: true, |
|
|
|
leading: true, |
|
|
|
trailing: false, |
|
|
|
trailing: false, |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
); |
|
|
|
this.element.off(`click.${this.getName()}`).on(`click.${this.getName()}`, (e) => { |
|
|
|
this.element.off(`click.${this.getName()}`).on(`click.${this.getName()}`, e => { |
|
|
|
debounced(e); |
|
|
|
debounced(e); |
|
|
|
st(e); |
|
|
|
st(e); |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.element.on(`mouseleave.${this.getName()}`, (e) => { |
|
|
|
this.element.on(`mouseleave.${this.getName()}`, e => { |
|
|
|
if (this.popupView) { |
|
|
|
if (this.popupView) { |
|
|
|
this.popupView.element.on(`mouseenter.${this.getName()}`, (e) => { |
|
|
|
this.popupView.element.on(`mouseenter.${this.getName()}`, e => { |
|
|
|
enterPopup = true; |
|
|
|
enterPopup = true; |
|
|
|
this.popupView.element.on(`mouseleave.${this.getName()}`, (e) => { |
|
|
|
this.popupView.element.on(`mouseleave.${this.getName()}`, e => { |
|
|
|
hide(e); |
|
|
|
hide(e); |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.popupView.element.off(`mouseenter.${this.getName()}`); |
|
|
|
this.popupView.element.off(`mouseenter.${this.getName()}`); |
|
|
|
@ -286,10 +286,10 @@ export class Bubble extends Widget { |
|
|
|
}); |
|
|
|
}); |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "hover-click": |
|
|
|
case "hover-click": |
|
|
|
this.element.on(`mouseenter.${this.getName()}`, (e) => { |
|
|
|
this.element.on(`mouseenter.${this.getName()}`, e => { |
|
|
|
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
|
|
|
if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { |
|
|
|
this._popupView(e); |
|
|
|
this._popupView(e); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo); |
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, Events.EXPAND, "", this.combo); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
this.fireEvent(Bubble.EVENT_EXPAND); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
@ -319,7 +319,7 @@ export class Bubble extends Widget { |
|
|
|
this |
|
|
|
this |
|
|
|
); |
|
|
|
); |
|
|
|
this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { |
|
|
|
this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { |
|
|
|
if (type === BI.Events.CLICK) { |
|
|
|
if (type === Events.CLICK) { |
|
|
|
this.combo.setValue(this.getValue()); |
|
|
|
this.combo.setValue(this.getValue()); |
|
|
|
this.fireEvent(Bubble.EVENT_CHANGE, value, obj); |
|
|
|
this.fireEvent(Bubble.EVENT_CHANGE, value, obj); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -404,7 +404,7 @@ export class Bubble extends Widget { |
|
|
|
.createElement(document) |
|
|
|
.createElement(document) |
|
|
|
.unbind(`mousedown.${this.getName()}`) |
|
|
|
.unbind(`mousedown.${this.getName()}`) |
|
|
|
.unbind(`mousewheel.${this.getName()}`); |
|
|
|
.unbind(`mousewheel.${this.getName()}`); |
|
|
|
BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind(`blur.${this.getName()}`); |
|
|
|
EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind(`blur.${this.getName()}`); |
|
|
|
this.fireEvent(Bubble.EVENT_AFTER_HIDEVIEW); |
|
|
|
this.fireEvent(Bubble.EVENT_AFTER_HIDEVIEW); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -427,7 +427,7 @@ export class Bubble extends Widget { |
|
|
|
options: { |
|
|
|
options: { |
|
|
|
offset: () => [adjustXOffset, (showArrow ? 12 : 0) + (adjustYOffset + adjustLength)], |
|
|
|
offset: () => [adjustXOffset, (showArrow ? 12 : 0) + (adjustYOffset + adjustLength)], |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
]; |
|
|
|
]; |
|
|
|
if (this.options.showArrow) { |
|
|
|
if (this.options.showArrow) { |
|
|
|
modifiers.push({ |
|
|
|
modifiers.push({ |
|
|
|
@ -448,11 +448,11 @@ export class Bubble extends Widget { |
|
|
|
|
|
|
|
|
|
|
|
this.element.addClass(this.options.comboClass); |
|
|
|
this.element.addClass(this.options.comboClass); |
|
|
|
hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind(`mousedown.${this.getName()}`); |
|
|
|
hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind(`mousedown.${this.getName()}`); |
|
|
|
BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind(`blur.${this.getName()}`); |
|
|
|
EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind(`blur.${this.getName()}`); |
|
|
|
|
|
|
|
|
|
|
|
hideWhenClickOutside && |
|
|
|
hideWhenClickOutside && |
|
|
|
Widget._renderEngine.createElement(document).bind(`mousedown.${this.getName()}`, bind(this._hideIf, this)); |
|
|
|
Widget._renderEngine.createElement(document).bind(`mousedown.${this.getName()}`, bind(this._hideIf, this)); |
|
|
|
BI.EVENT_BLUR && |
|
|
|
EVENT_BLUR && |
|
|
|
hideWhenBlur && |
|
|
|
hideWhenBlur && |
|
|
|
Widget._renderEngine.createElement(window).bind(`blur.${this.getName()}`, bind(this._hideIf, this)); |
|
|
|
Widget._renderEngine.createElement(window).bind(`blur.${this.getName()}`, bind(this._hideIf, this)); |
|
|
|
this.fireEvent(Bubble.EVENT_AFTER_POPUPVIEW); |
|
|
|
this.fireEvent(Bubble.EVENT_AFTER_POPUPVIEW); |
|
|
|
@ -500,8 +500,8 @@ export class Bubble extends Widget { |
|
|
|
|
|
|
|
|
|
|
|
populate(items) { |
|
|
|
populate(items) { |
|
|
|
this._assertPopupView(); |
|
|
|
this._assertPopupView(); |
|
|
|
this.popupView.populate.apply(this.popupView, arguments); |
|
|
|
this.popupView.populate(...arguments); |
|
|
|
this.combo.populate && this.combo.populate.apply(this.combo, arguments); |
|
|
|
this.combo.populate && this.combo.populate(...arguments); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_setEnable(arg) { |
|
|
|
_setEnable(arg) { |
|
|
|
|
Zhenfei.Li
2 years ago