fineui/src/core/controller/controller.layer.js

/**
 * 弹出层面板控制器, z-index在10w层级
 *
 * Created by GUY on 2015/6/24.
 */
import { Controller } from "./0.controller";
import { isNull, isNotNull, each, keys, isWidget, isNotEmptyString, extend } from "../2.base";
import { Widget } from "../4.widget";
import { createWidget } from "../5.inject";

export class LayerController extends Controller {
    constructor() {
        super();
        this._constructor();
    }
    
    props = {
        render: "body",
    }

    init() {
        this.layerManager = {};
        this.layouts = {};
        this.zindex = BI.zIndex_layer;
    }

    _initResizer() {
        this.resizer = BI.Resizers.add(`layerController${BI.uniqueId()}`, BI.bind(this._resize, this));
    }

    _resize() {
        each(this.layouts, (i, layer) => {
            if (layer.element.is(":visible")) {
                layer.element.trigger("__resize__");
            }
        });
    }

    make(name, container, op, context) {
        if (isWidget(container)) {
            op = op || {};
            op.container = container;
        } else {
            context = op;
            op = container;
        }
        
        return this.create(name, null, op, context);
    }

    create(name, from, op, context) {
        isNull(this.resizer) && this._initResizer();
        if (this.has(name)) {
            return this.get(name);
        }
        op || (op = {});
        const offset = op.offset || {};
        let w = from;
        if (isWidget(from)) {
            w = from.element;
        }
        if (isNotEmptyString(w)) {
            w = Widget._renderEngine.createElement(w);
        }
        if (this.has(name)) {
            return this.get(name);
        }
        const widget = createWidget((op.render || {}), extend({
            type: "bi.layout",
        }, op), context);
        const layout = createWidget({
            type: "bi.absolute",
            invisible: true,
            items: [
                {
                    el: widget,
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                }
            ],
        }, context);
        createWidget({
            type: "bi.absolute",
            element: op.container || this.options.render,
            items: [
                {
                    el: layout,
                    left: offset.left || 0,
                    right: offset.right || 0,
                    top: offset.top || 0,
                    bottom: offset.bottom || 0,
                }
            ],
        });
        if (w) {
            layout.element.addClass("bi-popup-view");

            function getComputedPosition() {
                const css = {
                    left: w.offset().left + (offset.left || 0),
                    top: w.offset().top + (offset.top || 0),
                    width: offset.width || (w.outerWidth() - (offset.left || 0) - (offset.right || 0)) || "",
                    height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || "",
                };

                const { top, left, scaleY, scaleX } = BI.DOM.getPositionRelativeContainingBlockRect(layout.element[0]);

                css.top = (css.top - top) / scaleY;
                css.left = (css.left - left) / scaleX;

                return css;
            }


            layout.element.css(getComputedPosition());
            layout.element.on("__resize__", () => {
                w.is(":visible") &&
                layout.element.css(getComputedPosition());
            });
        }
        this.add(name, widget, layout);
        
        return widget;
    }

    show(name, callback) {
        if (!this.has(name)) {
            return this;
        }
        this._getLayout(name).visible();
        this._getLayout(name).element.css("z-index", this.zindex++).show(0, callback).trigger("__resize__");
        
        return this;
    }

    hide(name, callback) {
        if (!this.has(name)) {
            return this;
        }
        this._getLayout(name).invisible();
        this._getLayout(name).element.hide(0, callback);
        
        return this;
    }

    isVisible(name) {
        return this.has(name) && this._getLayout(name).isVisible();
    }

    add(name, layer, layout) {
        if (this.has(name)) {
            throw new Error("不能创建同名的Layer");
        }
        layout.setVisible(false);
        this.layerManager[name] = layer;
        this.layouts[name] = layout;
        layout.element.css("z-index", this.zindex++);
        
        return this;
    }

    _getLayout(name) {
        return this.layouts[name];
    }

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

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

    remove(name) {
        if (!this.has(name)) {
            return this;
        }
        this.layerManager[name].destroy();
        this.layouts[name].destroy();
        delete this.layerManager[name];
        delete this.layouts[name];
        
        return this;
    }

    removeAll() {
        each(keys(this.layerManager), (index, name) => {
            this.layerManager[name].destroy();
            this.layouts[name].destroy();
        });
        this.layerManager = {};
        this.layouts = {};
        
        return this;
    }
}