fineui/src/base/combination/expander.js

/**
 *
 * 某个可以展开的节点
 *
 * Created by GUY on 2015/9/10.
 * @class BI.Expander
 * @extends BI.Widget
 */
import { shortcut, Widget, Controller, extend, nextTick, each, debounce, isNull, createWidget } from "../../core";

@shortcut()
export class Expander extends Widget {
    static xtype = "bi.expander";

    static EVENT_EXPAND = "EVENT_EXPAND";
    static EVENT_COLLAPSE = "EVENT_COLLAPSE";
    static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_AFTER_INIT = "EVENT_AFTER_INIT";

    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
    static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
    static EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";

    _defaultConfig() {
        return extend(super._defaultConfig(arguments), {
            baseCls: "bi-expander",
            trigger: "click",
            toggle: true,
            // direction: "bottom", //top,bottom四个方向
            isDefaultInit: false, // 是否默认初始化子节点
            el: {},
            popup: {},
            expanderClass: "bi-expander-popup",
            hoverClass: "bi-expander-hover",
        });
    }

    render() {
        const { el, hoverClass, isDefaultInit } = this.options;
        this._expanded = !!el.open;
        this._initExpander();
        // 延迟绑定事件，这样可以将自己绑定的事情优先执行
        nextTick(() => {
            !this.isDestroyed() && this._initPullDownAction();
        });
        this.expander.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
            if (this.isEnabled() && this.isValid()) {
                if (type === BI.Events.EXPAND) {
                    this._popupView();
                }
                if (type === BI.Events.COLLAPSE) {
                    this._hideView();
                }
                if (type === BI.Events.EXPAND) {
                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                    this.fireEvent(Expander.EVENT_EXPAND);
                }
                if (type === BI.Events.COLLAPSE) {
                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                    this.isViewVisible() && this.fireEvent(Expander.EVENT_COLLAPSE);
                }
                if (type === BI.Events.CLICK) {
                    this.fireEvent(Expander.EVENT_TRIGGER_CHANGE, value, obj);
                }
            }
        });

        this.element.hover(() => {
            if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) {
                this.element.addClass(hoverClass);
            }
        }, () => {
            if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) {
                this.element.removeClass(hoverClass);
            }
        });
        createWidget({
            type: "bi.vertical",
            scrolly: false,
            element: this,
            items: [
                { el: this.expander }
            ],
        });
        isDefaultInit && this._assertPopupView();
        if (this.expander.isOpened() === true) {
            this._popupView();
        }
    }

    _toggle() {
        this._assertPopupViewRender();
        if (this.popupView.isVisible()) {
            this._hideView();
        } else {
            if (this.isEnabled()) {
                this._popupView();
            }
        }
    }

    _initPullDownAction() {
        const { toggle } = this.options;
        const evs = this.options.trigger.split(",");
        each(evs, (i, e) => {
            switch (e) {
                case "hover":
                    this.element[e]((e) => {
                        if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) {
                            this._popupView();
                            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.expander);
                            this.fireEvent(Expander.EVENT_EXPAND);
                        }
                    }, () => {
                        if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid() && toggle) {
                            this._hideView();
                            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.expander);
                            this.fireEvent(Expander.EVENT_COLLAPSE);
                        }
                    });
                    break;
                case "click":
                    if (e) {
                        this.element.off(e + "." + this.getName()).on(e + "." + this.getName(), debounce((e) => {
                            if (this.expander.element.__isMouseInBounds__(e)) {
                                if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) {
                                    toggle ? this._toggle() : this._popupView();
                                    if (this.isExpanded()) {
                                        this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.expander);
                                        this.fireEvent(Expander.EVENT_EXPAND);
                                    } else {
                                        this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.expander);
                                        this.fireEvent(Expander.EVENT_COLLAPSE);
                                    }
                                }
                            }
                        }, BI.EVENT_RESPONSE_TIME, {
                            "leading": true,
                            "trailing": false,
                        }));
                    }
                    break;
                default:
                    break;
            }
        });
    }

    _initExpander() {
        this.expander = createWidget(this.options.el);
    }

    _assertPopupView() {
        const { value } = this.options;
        if (isNull(this.popupView)) {
            this.popupView = createWidget(this.options.popup, {
                type: "bi.button_group",
                cls: "expander-popup",
                layouts: [{
                    type: "bi.vertical",
                    hgap: 0,
                    vgap: 0,
                }],
                value,
            }, this);
            this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args)=> {
                this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                if (type === BI.Events.CLICK) {
                    // self.setValue(self.getValue());
                    this.fireEvent(Expander.EVENT_CHANGE, value, obj);
                }
            });
            this.popupView.setVisible(this.isExpanded());
            nextTick(() => {
                this.fireEvent(Expander.EVENT_AFTER_INIT);
            });
        }
    }

    _assertPopupViewRender() {
        this._assertPopupView();
        if (!this._rendered) {
            createWidget({
                type: "bi.vertical",
                scrolly: false,
                element: this,
                items: [
                    { el: this.popupView }
                ],
            });
            this._rendered = true;
        }
    }

    _hideView() {
        this.fireEvent(Expander.EVENT_BEFORE_HIDEVIEW);
        this._expanded = false;
        this.expander.setOpened(false);
        this.popupView && this.popupView.invisible();
        this.element.removeClass(this.options.expanderClass);

        this.fireEvent(Expander.EVENT_AFTER_HIDEVIEW);
    }

    _popupView() {
        this._assertPopupViewRender();
        this.fireEvent(Expander.EVENT_BEFORE_POPUPVIEW);
        this._expanded = true;
        this.expander.setOpened(true);
        this.popupView.visible();
        this.element.addClass(this.options.expanderClass);
        this.fireEvent(Expander.EVENT_AFTER_POPUPVIEW);
    }

    populate(items) {
        // this._assertPopupView();
        this.popupView && this.popupView.populate.apply(this.popupView, arguments);
        this.expander.populate && this.expander.populate.apply(this.expander, arguments);
    }

    _setEnable(arg) {
        super._setEnable(arguments);
        !arg && this.element.removeClass(this.options.hoverClass);
        !arg && this.isViewVisible() && this._hideView();
    }

    setValue(v) {
        this.expander.setValue(v);
        if (isNull(this.popupView)) {
            this.options.popup.value = v;
        } else {
            this.popupView.setValue(v);
        }
    }

    getValue() {
        if (isNull(this.popupView)) {
            return this.options.popup.value;
        } else {
            return this.popupView.getValue();
        }
    }

    isViewVisible() {
        return this.isEnabled() && this.expander.isEnabled() && !!this.popupView && this.popupView.isVisible();
    }

    isExpanded() {
        return this._expanded;
    }

    showView() {
        if (this.isEnabled() && this.expander.isEnabled()) {
            this._popupView();
        }
    }

    hideView() {
        this._hideView();
    }

    getView() {
        return this.popupView;
    }

    getAllLeaves() {
        return this.popupView && this.popupView.getAllLeaves();
    }

    getNodeById(id) {
        if (this.expander.options.id === id) {
            return this.expander;
        }

        return this.popupView && this.popupView.getNodeById(id);
    }

    getNodeByValue(value) {
        if (this.expander.getValue() === value) {
            return this.expander;
        }
        
        return this.popupView && this.popupView.getNodeByValue(value);
    }

    destroy() {
        super.destroy(arguments);
    }
}