fineui/packages/fineui/src/core/controller/controller.popover.js

/**
 * guy
 * popover弹出层控制器, z-index在100w层级
 */
import { Controller } from "./0.controller";
import { isNotNull, each } from "../2.base";
import { Widget } from "../4.widget";
import { createWidget } from "../5.inject";
import { zIndex_popover } from "../constant";
import { getOuterBody } from "../utils/dom";

export class PopoverController extends Controller {
    constructor() {
        super();
        this._constructor();
        this.modal = this.options.modal;
    }

    props = {
        modal: true, // 模态窗口
        render: "body",
    }

    init() {
        this.floatManager = {};
        this.floatLayer = {};
        this.floatContainer = {};
        this.floatOpened = {};
        this.zindex = zIndex_popover;
        this.zindexMap = {};
    }

    create(name, options, context) {
        if (this.has(name)) {
            return this;
        }
        const popover = createWidget(options || {}, {
            type: "bi.popover",
        }, context);
        this.add(name, popover, options, context);

        return this;
    }

    open(name) {
        if (!this.has(name)) {
            return this;
        }
        if (!this.floatOpened[name]) {
            this.floatOpened[name] = true;
            const container = this.floatContainer[name];
            container.element.css("zIndex", this.zindex++);
            this.modal && container.element.__hasZIndexMask__(this.zindexMap[name]) && container.element.__releaseZIndexMask__(this.zindexMap[name]);
            this.zindexMap[name] = this.zindex;
            this.modal && container.element.__buildZIndexMask__(this.zindex++);
            this.get(name).setZindex(this.zindex++);
            this.floatContainer[name].visible();
            const popover = this.get(name);
            popover.show && popover.show();
            const render = this.getRender();
            const el = Widget._renderEngine.createElement(render)[0];
            const W = el.clientWidth, H = el.clientHeight;
            const w = popover.element.width(), h = popover.element.height();
            let left = (W - w) / 2, top = (H - h) / 2;
            if (left < 0) {
                left = 0;
            }
            if (top < 0) {
                top = 0;
            }
            popover.element.css({
                // 这里直接用px就可以
                left: `${left}px`,
                top: `${top}px`,
            });
        }

        return this;
    }

    close(name) {
        if (!this.has(name)) {
            return this;
        }
        if (this.floatOpened[name]) {
            delete this.floatOpened[name];
            this.floatContainer[name].invisible();
            this.modal && this.floatContainer[name].element.__releaseZIndexMask__(this.zindexMap[name]);
        }

        return this;
    }

    show(name) {
        return this.open(name);
    }

    hide(name) {
        return this.close(name);
    }

    isVisible(name) {
        return this.has(name) && this.floatOpened[name] === true;
    }

    add(name, popover, options, context) {
        options || (options = {});
        if (this.has(name)) {
            return this;
        }
        this.floatContainer[name] = createWidget({
            type: "bi.absolute",
            cls: "bi-popup-view",
            items: [{
                el: (this.floatLayer[name] = createWidget({
                    type: "bi.absolute",
                    items: [popover],
                }, context)),
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            }],
        });
        this.floatManager[name] = popover;
        popover.on(BI.Popover.EVENT_CLOSE, () => this.close(name));
        createWidget({
            type: "bi.absolute",
            element: options.container || this.getRender(),
            items: [{
                el: this.floatContainer[name],
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            }],
        });

        return this;
    }

    getRender() {
        // 默认挂在body上的都找最外层的body
        let render = this.options.render;
        if (render === 'body') {
            return getOuterBody();
        }
        return render;
    }

    get(name) {
        return this.floatManager[name];
    }

    has(name) {
        return isNotNull(this.floatManager[name]);
    }

    remove(name) {
        if (!this.has(name)) {
            return this;
        }
        this.floatContainer[name].destroy();
        this.modal && this.floatContainer[name].element.__releaseZIndexMask__(this.zindexMap[name]);
        delete this.floatManager[name];
        delete this.floatLayer[name];
        delete this.zindexMap[name];
        delete this.floatContainer[name];
        delete this.floatOpened[name];

        return this;
    }

    removeAll() {
        each(this.floatContainer, (name, container) => {
            container.destroy();
            this.modal && this.floatContainer[name].element.__releaseZIndexMask__(this.zindexMap[name]);
        });
        this.floatManager = {};
        this.floatLayer = {};
        this.floatContainer = {};
        this.floatOpened = {};
        this.zindexMap = {};

        return this;
    }

    _getZIndex() {
        return this.zindex++;
    }
}