fineui/src/base/combination/switcher.js

/**
 *
 * 切换显示或隐藏面板
 *
 * Created by GUY on 2015/11/2.
 * @class BI.Switcher
 * @extends BI.Widget
 */
import { shortcut, Widget, Controller, extend, nextTick, createWidget, each, debounce, isNull } from "../../core";
import { Maskers } from "../0.base";

@shortcut()
export class Switcher extends Widget {
    static xtype = "bi.switcher";
    
    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-switcher",
            direction: BI.Direction.Top,
            trigger: "click",
            toggle: true,
            el: {},
            popup: {},
            adapter: null,
            masker: {},
            switcherClass: "bi-switcher-popup",
            hoverClass: "bi-switcher-hover",
        });
    }

    render() {
        const { hoverClass, isDefaultInit } = this.options;
        this._initSwitcher();
        // 延迟绑定事件，这样可以将自己绑定的事情优先执行
        nextTick(() => {
            !this.isDestroyed() && this._initPullDownAction();
        });
        this.switcher.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(Switcher.EVENT_EXPAND);
                }
                if (type === BI.Events.COLLAPSE) {
                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                    this.isViewVisible() && this.fireEvent(Switcher.EVENT_COLLAPSE);
                }
                if (type === BI.Events.CLICK) {
                    this.fireEvent(Switcher.EVENT_TRIGGER_CHANGE, value, obj);
                }
            }
        });

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

    _toggle() {
        this._assertPopupView();
        if (this.isExpanded()) {
            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.switcher.isEnabled()) {
                            this._popupView();
                            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.switcher);
                            this.fireEvent(Switcher.EVENT_EXPAND);
                        }
                    }, () => {
                        if (this.isEnabled() && this.switcher.isEnabled() && toggle) {
                            this._hideView();
                            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.switcher);
                            this.fireEvent(Switcher.EVENT_COLLAPSE);
                        }
                    });
                    break;
                default :
                    if (e) {
                        this.element.off(e + "." + this.getName()).on(e + "." + this.getName(), debounce((e) => {
                            if (this.switcher.element.__isMouseInBounds__(e)) {
                                if (this.isEnabled() && this.switcher.isEnabled()) {
                                    toggle ? this._toggle() : this._popupView();
                                    if (this.isExpanded()) {
                                        this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.switcher);
                                        this.fireEvent(Switcher.EVENT_EXPAND);
                                    } else {
                                        this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.switcher);
                                        this.fireEvent(Switcher.EVENT_COLLAPSE);
                                    }
                                }
                            }
                        }, BI.EVENT_RESPONSE_TIME, {
                            "leading": true,
                            "trailing": false,
                        }));
                    }
                    break;
            }
        });
    }

    _initSwitcher() {
        this.switcher = createWidget(this.options.el, {
            value: this.options.value,
        });
    }

    _assertPopupView() {
        const { popup, adapter, masker, value, direction } = this.options;
        if (!this._created) {
            this.popupView = createWidget(popup, {
                type: "bi.button_group",
                element: adapter && Maskers.create(this.getName(), adapter, extend({ container: this }, masker)),
                cls: "switcher-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) {
                    this.fireEvent(Switcher.EVENT_CHANGE, value, obj);
                }
            });
            if (direction !== BI.Direction.Custom && !adapter) {
                createWidget({
                    type: "bi.vertical",
                    scrolly: false,
                    element: this,
                    items: [
                        { el: this.popupView }
                    ],
                });
            }
            this._created = true;
            nextTick(() => {
                this.fireEvent(Switcher.EVENT_AFTER_INIT);
            });
        }
    }

    _hideView() {
        this.fireEvent(Switcher.EVENT_BEFORE_HIDEVIEW);
        const { adapter, switcherClass } = this.options;
        adapter ? Maskers.hide(this.getName()) : (this.popupView && this.popupView.setVisible(false));
        nextTick(() => {
            adapter ? Maskers.hide(this.getName()) : (this.popupView && this.popupView.setVisible(false));
            this.element.removeClass(switcherClass);
            this.fireEvent(Switcher.EVENT_AFTER_HIDEVIEW);
        });
    }

    _popupView() {
        const { adapter, switcherClass } = this.options;
        this._assertPopupView();
        this.fireEvent(Switcher.EVENT_BEFORE_POPUPVIEW);
        adapter ? Maskers.show(this.getName()) : this.popupView.setVisible(true);
        nextTick((name) => {
            adapter ? Maskers.show(name) : this.popupView.setVisible(true);
            this.element.addClass(switcherClass);
            this.fireEvent(Switcher.EVENT_AFTER_POPUPVIEW);
        }, this.getName());
    }

    _populate() {
        this._assertPopupView();
        this.popupView.populate.apply(this.popupView, arguments);
    }

    populate(items) {
        this._populate.apply(this, arguments);
        this.switcher.populate && this.switcher.populate.apply(this.switcher, arguments);
    }

    _setEnable(arg) {
        super._setEnable(arguments);
        !arg && this.isViewVisible() && this._hideView();
    }

    setValue(v) {
        this.switcher.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();
        }
    }

    setAdapter(adapter) {
        this.options.adapter = adapter;
        Maskers.remove(this.getName());
    }

    isViewVisible() {
        return this.isEnabled() && this.switcher.isEnabled() &&
            (this.options.adapter ? Maskers.isVisible(this.getName()) : (this.popupView && this.popupView.isVisible()));
    }

    isExpanded() {
        return this.isViewVisible();
    }

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

    hideView() {
        this._hideView();
    }

    getView() {
        return this.popupView;
    }

    adjustView() {
        this.isViewVisible() && Maskers.show(this.getName());
    }

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

    getNodeById(id) {
        if (this.switcher.attr("id") === id) {
            return this.switcher;
        }

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

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

    empty() {
        this.popupView && this.popupView.empty();
    }
}