/** * tooltip控制器 * 控制tooltip的显示, 且页面中只有一个tooltip显示 * * Created by GUY on 2015/9/8. * @class BI.TooltipsController * @extends BI.Controller */ import { Controller } from "./0.controller"; export class TooltipsController extends Controller { init() { this.tooltipsManager = {}; this.showingTips = {};// 存储正在显示的tooltip } /** * * @param opt * @param opt.text {String} 文本 * @param opt.level {String} 级别, success或warning * @param opt.textAlign {String} 文本对齐方式, left, center, right * @returns {*} * @private */ _createTooltip(opt) { return BI.createWidget({ type: "bi.tooltip", ...opt, stopEvent: true }); } // opt: {container: '', belowMouse: false} show(e, name, tooltipOpt, context, opt) { opt || (opt = {}); BI.each(this.showingTips, (i, tip) => this.hide(i)); this.showingTips = {}; if (!this.has(name)) { this.create(name, tooltipOpt, document.fullscreenElement ? context : (opt.container || "body")); } const offset = context.element.offset(); let top; if (!opt.belowMouse) { const bounds = context.element.bounds(); if (bounds.height === 0 || bounds.width === 0) { return; } top = offset.top + bounds.height + 5; } const tooltip = this.get(name); tooltip.element.css({ left: "0px", top: "0px" }); tooltip.visible(); tooltip.element.height(tooltip.element[0].scrollHeight); this.showingTips[name] = true; // scale影响要计算在内 // const scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left; // const x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15; let x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15; if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) { x -= tooltip.element.outerWidth() + 15; } const bodyHeight = BI.Widget._renderEngine.createElement("body").outerHeight(); if (y + tooltip.element.outerHeight() > bodyHeight || top + tooltip.element.outerHeight() > bodyHeight) { y -= tooltip.element.outerHeight() + 15; !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5)); } else { !opt.belowMouse && (y = Math.max(y, top)); } tooltip.element.css({ // 这里直接用px就可以 left: x < 0 ? 0 : x + "px", top: y < 0 ? 0 : y + "px" }); tooltip.element.hover(() => { this.remove(name); context.element.trigger("mouseleave.title" + context.getName()); }); return this; } hide(name, callback) { if (!this.has(name)) { return this; } delete this.showingTips[name]; this.get(name).element.hide(0, callback); this.get(name).invisible(); return this; } create(name, tooltipOpt, context) { if (!this.has(name)) { const tooltip = this._createTooltip(tooltipOpt); this.add(name, tooltip); BI.createWidget({ type: "bi.absolute", element: context || "body", items: [{ el: tooltip }] }); tooltip.invisible(); } return this.get(name); } add(name, bubble) { if (this.has(name)) { return this; } this.set(name, bubble); return this; } get(name) { return this.tooltipsManager[name]; } set(name, bubble) { this.tooltipsManager[name] = bubble; } has(name) { return this.tooltipsManager[name] != null; } remove(name) { if (!this.has(name)) { return this; } this.tooltipsManager[name].destroy(); delete this.tooltipsManager[name]; return this; } removeAll() { BI.each(this.tooltipsManager, function (name, tooltip) { tooltip.destroy(); }); this.tooltipsManager = {}; this.showingTips = {}; return this; } }