fineui/src/core/controller/controller.tooltips.js

/**
 * 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;
    }
}