|
|
|
|
@ -10,11 +10,15 @@
|
|
|
|
|
* @abstract |
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
var delayingTooltips; |
|
|
|
|
import { Widget, shortcut } from "../../core"; |
|
|
|
|
import { Tooltips } from "../0.base"; |
|
|
|
|
|
|
|
|
|
BI.Single = BI.inherit(BI.Widget, { |
|
|
|
|
_defaultConfig: function () { |
|
|
|
|
var conf = BI.Single.superclass._defaultConfig.apply(this, arguments); |
|
|
|
|
@shortcut() |
|
|
|
|
export default class Single extends Widget { |
|
|
|
|
static xtype = "bi.single"; |
|
|
|
|
|
|
|
|
|
_defaultConfig() { |
|
|
|
|
const conf = super._defaultConfig(arguments); |
|
|
|
|
|
|
|
|
|
return BI.extend(conf, { |
|
|
|
|
readonly: false, |
|
|
|
|
@ -24,13 +28,22 @@ BI.Single = BI.inherit(BI.Widget, {
|
|
|
|
|
belowMouse: false, // title是否跟随鼠标
|
|
|
|
|
enableHover: false, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_showToolTip: function (e, opt) { |
|
|
|
|
_showToolTip(e, opt) { |
|
|
|
|
opt || (opt = {}); |
|
|
|
|
var self = this; |
|
|
|
|
var o = this.options; |
|
|
|
|
var title = this.getTitle(); |
|
|
|
|
const { action } = this.options; |
|
|
|
|
const title = this.getTitle(); |
|
|
|
|
|
|
|
|
|
const showToolTip = (tooltipOpt) => { |
|
|
|
|
if (BI.isKey(tooltipOpt.text) && !Tooltips.has(this.getName())) { |
|
|
|
|
Tooltips.show(e, this.getName(), tooltipOpt, this, opt); |
|
|
|
|
if (action) { |
|
|
|
|
BI.Actions.runAction(action, "hover", this.options, this); |
|
|
|
|
} |
|
|
|
|
BI.Actions.runGlobalAction("hover", this.options, this); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (title instanceof Promise) { |
|
|
|
|
this.requestingTitle = title; |
|
|
|
|
@ -42,47 +55,37 @@ BI.Single = BI.inherit(BI.Widget, {
|
|
|
|
|
showToolTip(this._getTooltipOptions(title)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function showToolTip(tooltipOpt) { |
|
|
|
|
if (BI.isKey(tooltipOpt.text) && !BI.Tooltips.has(self.getName())) { |
|
|
|
|
BI.Tooltips.show(e, self.getName(), tooltipOpt, self, opt); |
|
|
|
|
if (o.action) { |
|
|
|
|
BI.Actions.runAction(o.action, "hover", o, self); |
|
|
|
|
} |
|
|
|
|
BI.Actions.runGlobalAction("hover", o, self); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
_hideTooltip: function () { |
|
|
|
|
var self = this; |
|
|
|
|
var tooltip = BI.Tooltips.get(this.getName()); |
|
|
|
|
_hideTooltip() { |
|
|
|
|
const tooltip = Tooltips.get(this.getName()); |
|
|
|
|
if (BI.isNotNull(tooltip)) { |
|
|
|
|
tooltip.element.fadeOut(200, function () { |
|
|
|
|
BI.Tooltips.remove(self.getName()); |
|
|
|
|
tooltip.element.fadeOut(200, () => { |
|
|
|
|
Tooltips.remove(this.getName()); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_init: function () { |
|
|
|
|
var self = this, o = this.options; |
|
|
|
|
o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { |
|
|
|
|
self.setValue(newValue); |
|
|
|
|
}) : o.value; |
|
|
|
|
BI.Single.superclass._init.apply(this, arguments); |
|
|
|
|
}, |
|
|
|
|
_init() { |
|
|
|
|
const { value } = this.options; |
|
|
|
|
this.options.value = BI.isFunction(value) ? this.__watch(value, (context, newValue) => { |
|
|
|
|
this.setValue(newValue); |
|
|
|
|
}) : value; |
|
|
|
|
super._init(arguments); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_mounted: function () { |
|
|
|
|
var o = this.options; |
|
|
|
|
if (o.enableHover || BI.isKey(o.title) || BI.isKey(o.warningTitle) |
|
|
|
|
|| BI.isFunction(o.title) || BI.isFunction(o.warningTitle)) { |
|
|
|
|
_mounted() { |
|
|
|
|
const { enableHover, title, warningTitle, belowMouse, container } = this.options; |
|
|
|
|
if (enableHover || BI.isKey(title) || BI.isKey(warningTitle) |
|
|
|
|
|| BI.isFunction(title) || BI.isFunction(warningTitle)) { |
|
|
|
|
this.enableHover({ |
|
|
|
|
belowMouse: o.belowMouse, |
|
|
|
|
container: o.container, |
|
|
|
|
belowMouse, |
|
|
|
|
container, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_clearTimeOut: function () { |
|
|
|
|
_clearTimeOut() { |
|
|
|
|
if (BI.isNotNull(this.showTimeout)) { |
|
|
|
|
clearTimeout(this.showTimeout); |
|
|
|
|
this.showTimeout = null; |
|
|
|
|
@ -91,88 +94,88 @@ BI.Single = BI.inherit(BI.Widget, {
|
|
|
|
|
clearTimeout(this.hideTimeout); |
|
|
|
|
this.hideTimeout = null; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_getTooltipOptions: function (title) { |
|
|
|
|
var o = this.options; |
|
|
|
|
var tooltipOpt = {}; |
|
|
|
|
_getTooltipOptions(title) { |
|
|
|
|
const { tipType } = this.options; |
|
|
|
|
let tooltipOpt = {}; |
|
|
|
|
if (BI.isPlainObject(title)) { |
|
|
|
|
tooltipOpt = title; |
|
|
|
|
} else { |
|
|
|
|
tooltipOpt.level = this.getTipType() || "success"; |
|
|
|
|
// 由于以前的用法,存在大量disabled:true搭配warningTitle的情况,所以这里做一个兼容,disabled:true的情况下,依然优先显示warningTitle,避免只设置了warningTitle而没有设置title的情况
|
|
|
|
|
if (BI.isNull(o.tipType) && !this.isEnabled()) { |
|
|
|
|
if (BI.isNull(tipType) && !this.isEnabled()) { |
|
|
|
|
tooltipOpt.text = (this.getWarningTitle() || title); |
|
|
|
|
} else { |
|
|
|
|
tooltipOpt.text = tooltipOpt.level === "success" ? title : (this.getWarningTitle() || title); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return tooltipOpt; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
enableHover: function (opt) { |
|
|
|
|
enableHover(opt) { |
|
|
|
|
opt || (opt = {}); |
|
|
|
|
var self = this; |
|
|
|
|
let delayingTooltips; |
|
|
|
|
if (!this._hoverBinded) { |
|
|
|
|
this.element.unbind("mouseenter.title").on("mouseenter.title", function (e) { |
|
|
|
|
self._e = e; |
|
|
|
|
self.mouseOver = true; |
|
|
|
|
if (self.getTipType() === "warning" || (BI.isKey(self.getWarningTitle()) && !self.isEnabled())) { |
|
|
|
|
delayingTooltips = self.getName(); |
|
|
|
|
self.showTimeout = BI.delay(function () { |
|
|
|
|
if (BI.isNotNull(self.showTimeout) && delayingTooltips === self.getName()) { |
|
|
|
|
self._showToolTip(self._e || e, opt); |
|
|
|
|
this.element.unbind("mouseenter.title").on("mouseenter.title", (e) => { |
|
|
|
|
this._e = e; |
|
|
|
|
this.mouseOver = true; |
|
|
|
|
if (this.getTipType() === "warning" || (BI.isKey(this.getWarningTitle()) && !this.isEnabled())) { |
|
|
|
|
delayingTooltips = this.getName(); |
|
|
|
|
this.showTimeout = BI.delay(() => { |
|
|
|
|
if (BI.isNotNull(this.showTimeout) && delayingTooltips === this.getName()) { |
|
|
|
|
this._showToolTip(this._e || e, opt); |
|
|
|
|
} |
|
|
|
|
}, 200); |
|
|
|
|
} else if (self.getTipType() === "success" || self.isEnabled()) { |
|
|
|
|
delayingTooltips = self.getName(); |
|
|
|
|
self.showTimeout = BI.delay(function () { |
|
|
|
|
if (BI.isNotNull(self.showTimeout) && delayingTooltips === self.getName()) { |
|
|
|
|
self._showToolTip(self._e || e, opt); |
|
|
|
|
} else if (this.getTipType() === "success" || this.isEnabled()) { |
|
|
|
|
delayingTooltips = this.getName(); |
|
|
|
|
this.showTimeout = BI.delay(() => { |
|
|
|
|
if (BI.isNotNull(this.showTimeout) && delayingTooltips === this.getName()) { |
|
|
|
|
this._showToolTip(this._e || e, opt); |
|
|
|
|
} |
|
|
|
|
}, 500); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.element.unbind("mousemove.title").on("mousemove.title", function (e) { |
|
|
|
|
self._e = e; |
|
|
|
|
if (BI.isNotNull(self.showTimeout)) { |
|
|
|
|
clearTimeout(self.showTimeout); |
|
|
|
|
self.showTimeout = null; |
|
|
|
|
this.element.unbind("mousemove.title").on("mousemove.title", (e) => { |
|
|
|
|
this._e = e; |
|
|
|
|
if (BI.isNotNull(this.showTimeout)) { |
|
|
|
|
clearTimeout(this.showTimeout); |
|
|
|
|
this.showTimeout = null; |
|
|
|
|
} |
|
|
|
|
if (BI.isNull(self.hideTimeout)) { |
|
|
|
|
self.hideTimeout = BI.delay(function () { |
|
|
|
|
if (BI.isNotNull(self.hideTimeout)) { |
|
|
|
|
self._hideTooltip(); |
|
|
|
|
if (BI.isNull(this.hideTimeout)) { |
|
|
|
|
this.hideTimeout = BI.delay(() => { |
|
|
|
|
if (BI.isNotNull(this.hideTimeout)) { |
|
|
|
|
this._hideTooltip(); |
|
|
|
|
} |
|
|
|
|
}, 500); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
self.showTimeout = BI.delay(function () { |
|
|
|
|
this.showTimeout = BI.delay(() => { |
|
|
|
|
// DEC-5321 IE下如果回调已经进入事件队列，clearTimeout将不会起作用
|
|
|
|
|
if (BI.isNotNull(self.showTimeout)) { |
|
|
|
|
if (BI.isNotNull(self.hideTimeout)) { |
|
|
|
|
clearTimeout(self.hideTimeout); |
|
|
|
|
self.hideTimeout = null; |
|
|
|
|
if (BI.isNotNull(this.showTimeout)) { |
|
|
|
|
if (BI.isNotNull(this.hideTimeout)) { |
|
|
|
|
clearTimeout(this.hideTimeout); |
|
|
|
|
this.hideTimeout = null; |
|
|
|
|
} |
|
|
|
|
// CHART-10611 在拖拽的情况下, 鼠标拖拽着元素离开了拖拽元素的容器，但是子元素在dom结构上仍然属于容器
|
|
|
|
|
// 这样会认为鼠标仍然在容器中, 500ms内放开的话，会在容器之外显示鼠标停留处显示容器的title
|
|
|
|
|
if (self.element.__isMouseInBounds__(self._e || e)) { |
|
|
|
|
self._showToolTip(self._e || e, opt); |
|
|
|
|
if (this.element.__isMouseInBounds__(this._e || e)) { |
|
|
|
|
this._showToolTip(this._e || e, opt); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, 500); |
|
|
|
|
}); |
|
|
|
|
this.element.unbind("mouseleave.title").on("mouseleave.title", function (e) { |
|
|
|
|
self._e = null; |
|
|
|
|
self.mouseOver = false; |
|
|
|
|
self._clearTimeOut(); |
|
|
|
|
self._hideTooltip(); |
|
|
|
|
this.element.unbind("mouseleave.title").on("mouseleave.title", (e) => { |
|
|
|
|
this._e = null; |
|
|
|
|
this.mouseOver = false; |
|
|
|
|
this._clearTimeOut(); |
|
|
|
|
this._hideTooltip(); |
|
|
|
|
}); |
|
|
|
|
this._hoverBinded = true; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
disabledHover: function () { |
|
|
|
|
disabledHover() { |
|
|
|
|
// 取消hover事件
|
|
|
|
|
this._clearTimeOut(); |
|
|
|
|
this._hideTooltip(); |
|
|
|
|
@ -180,74 +183,73 @@ BI.Single = BI.inherit(BI.Widget, {
|
|
|
|
|
.unbind("mousemove.title") |
|
|
|
|
.unbind("mouseleave.title"); |
|
|
|
|
this._hoverBinded = false; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// opt: {container: '', belowMouse: false}
|
|
|
|
|
setTitle: function (title, opt) { |
|
|
|
|
setTitle(title, opt) { |
|
|
|
|
this.options.title = title; |
|
|
|
|
if (BI.isKey(title) || BI.isFunction(title)) { |
|
|
|
|
this.enableHover(opt); |
|
|
|
|
} else { |
|
|
|
|
this.disabledHover(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setWarningTitle: function (title, opt) { |
|
|
|
|
setWarningTitle(title, opt) { |
|
|
|
|
this.options.warningTitle = title; |
|
|
|
|
if (BI.isKey(title) || BI.isFunction(title)) { |
|
|
|
|
this.enableHover(opt); |
|
|
|
|
} else { |
|
|
|
|
this.disabledHover(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setTipType: function (type) { |
|
|
|
|
setTipType(type) { |
|
|
|
|
this.options.tipType = type; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getTipType: function () { |
|
|
|
|
getTipType() { |
|
|
|
|
return this.options.tipType; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
isReadOnly: function () { |
|
|
|
|
isReadOnly() { |
|
|
|
|
return !!this.options.readonly; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getTitle: function () { |
|
|
|
|
var title = this.options.title; |
|
|
|
|
getTitle() { |
|
|
|
|
const title = this.options.title; |
|
|
|
|
if (BI.isFunction(title)) { |
|
|
|
|
return title(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return title; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getWarningTitle: function () { |
|
|
|
|
var title = this.options.warningTitle; |
|
|
|
|
getWarningTitle() { |
|
|
|
|
const title = this.options.warningTitle; |
|
|
|
|
if (BI.isFunction(title)) { |
|
|
|
|
return title(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return title; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setValue: function (val) { |
|
|
|
|
setValue(val) { |
|
|
|
|
if (!this.options.readonly) { |
|
|
|
|
this.options.value = val; |
|
|
|
|
this.options.setValue && this.options.setValue(val); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getValue: function () { |
|
|
|
|
getValue() { |
|
|
|
|
return this.options.value; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_destroyed: function () { |
|
|
|
|
_destroyed() { |
|
|
|
|
if (BI.isNotNull(this.showTimeout)) { |
|
|
|
|
clearTimeout(this.showTimeout); |
|
|
|
|
this.showTimeout = null; |
|
|
|
|
} |
|
|
|
|
BI.Tooltips.remove(this.getName()); |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
BI.shortcut("bi.single", BI.Single); |
|
|
|
|
Tooltips.remove(this.getName()); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
Zhenfei.Li-李振飞
2 years ago