super-hero/assets/cc-common/cc-ui/UmPopupBase.ts

import { _decorator, Button, CCBoolean, Component, Sprite, tween, Vec3, view, Widget } from 'cc';

const { ccclass, property } = _decorator;

@ccclass('UmPopupBase')
export class UmPopupBase extends Component {
    @property(Button) public bgBlack: Button = null!;
    @property(Sprite) public bgPopup: Sprite = null!;
    @property(CCBoolean) public isAnimShowHide = true;

    _transitions_type: string = "Z";
    _is_black_panel: boolean = true;
    public popup_pos = Vec3.ZERO;

    private OPACITY_BLACK = 150;

    DURATION_SHOW_ZOOM = 0.35;
    DURATION_HIDE_ZOOM = 0.35;
    SCALE_START_SHOW_ZOOM = 0.8;
    SCALE_END_HIDE_ZOOM = 0.8;

    DURATION_SHOW_MOVE = 0.35;
    DURATION_HIDE_MOVE = 0.35;

    public static TRANSITIONS_TYPE = {
        ZOOM_IN: "Z",
        MOVE_IN_TOP: "T",
        MOVE_IN_BOTTOM: "B",
        MOVE_IN_RIGHT: "R",
        MOVE_IN_LEFT: "L",
    }

    public static MOVE_TYPE = {
        BOTTOM: 0,
        TOP: 1,
        LEFT: 2,
        RIGHT: 3,
        ORIGIN: 4
    }

    onLoad() {
        if (this.bgBlack) {
            this.bgBlack.node.on(Button.EventType.CLICK, this.onBtnCloseClicked, this);
        }
    }

    public show(callback: Function = null!) {
        if (this.isAnimShowHide) {
            this._fadeInBlackPanel();
            if (this.bgPopup) {
                this.popup_pos = new Vec3(this.bgPopup.node.position);
                this.bgPopup.node.setScale(new Vec3(this.SCALE_START_SHOW_ZOOM, this.SCALE_START_SHOW_ZOOM, 1));
                tween(this.bgPopup.node).to(this.DURATION_SHOW_ZOOM, { scale: Vec3.ONE }, { easing: 'backOut' }).call(() => {
                    if (this.bgBlack) {
                        this.bgBlack.interactable = true;
                    }
                    callback?.();
                }).start();
                this.bgPopup.node.onFadeIn(this.DURATION_SHOW_ZOOM, 255);
            }
        }
        else {
            this.bgBlack?.setOpacity(this.OPACITY_BLACK);
            if (this.bgBlack) {
                this.bgBlack.interactable = true;
            }
            callback?.();
        }
    }

    public hide(callback: Function = null!) {
        if (this.isAnimShowHide) {
            this._fadeOutBlackPanel();
            if (this.bgPopup) {
                let duration = this.DURATION_HIDE_ZOOM;
                tween(this.bgPopup.node).to(duration, { scale: new Vec3(this.SCALE_END_HIDE_ZOOM, this.SCALE_END_HIDE_ZOOM, 1) }, { easing: 'backIn' }).call(() => {
                    callback?.();
                    this.node.destroyAllChildren();
                    this.node.destroy();
                }).start();

                tween(this.bgPopup.node).delay(0.1).call(() => this.bgPopup.node.onFadeOut(duration)).start();
            }
            else {
                callback?.();
                this.node.destroy();
            }
        }
        else {
            callback?.();
            this.node.destroy();
        }
    }

    private _fadeInBlackPanel() {
        if (this.bgBlack) {
            this.bgBlack.node.onFadeIn(this.DURATION_SHOW_MOVE, this.OPACITY_BLACK);
        }
    }

    private _fadeOutBlackPanel() {
        if (this.bgBlack) {
            this.bgBlack.node.onFadeOut(this.DURATION_HIDE_MOVE);
        }
    }

    public showWithTransitions(type: string, isBlackPanel: boolean = true, callback: Function = null!) {
        this._transitions_type = type;
        this._is_black_panel = isBlackPanel;
        if (type === UmPopupBase.TRANSITIONS_TYPE.ZOOM_IN) {
            this.show();
        }
        else {
            this.bgPopup.getComponent(Widget)?.updateAlignment();
            let pos = new Vec3(this.bgPopup.node.position);
            this.popup_pos = pos;
            let new_pos = new Vec3();

            switch (type) {
                case UmPopupBase.TRANSITIONS_TYPE.MOVE_IN_TOP:
                    {
                        let value = view.getDesignResolutionSize().y;
                        new_pos = new Vec3(pos.x, pos.y + value, pos.z);
                    }
                    break;

                case UmPopupBase.TRANSITIONS_TYPE.MOVE_IN_BOTTOM:
                    {
                        let value = view.getDesignResolutionSize().y;
                        new_pos = new Vec3(pos.x, pos.y - value, pos.z);
                    }
                    break;

                case UmPopupBase.TRANSITIONS_TYPE.MOVE_IN_RIGHT:
                    {
                        let value = view.getDesignResolutionSize().x;
                        new_pos = new Vec3(pos.x + value, pos.y, pos.z);
                    }
                    break;

                case UmPopupBase.TRANSITIONS_TYPE.MOVE_IN_LEFT:
                    {
                        let value = view.getDesignResolutionSize().x;
                        new_pos = new Vec3(pos.x - value, pos.y, pos.z);
                    }
                    break;
            }

            this.bgPopup.node.position = new_pos;
            let duration = this.DURATION_SHOW_MOVE;
            tween(this.bgPopup.node).to(duration, { position: pos }, { easing: 'sineOut' }).call(() => {
                if (this.bgBlack) {
                    this.bgBlack.interactable = true;
                }
                callback?.();
            }).start();

            if (isBlackPanel) {
                this._fadeInBlackPanel();
            }
        }
    }

    public hideWithTransitions(callback: Function = null!) {
        if (this._transitions_type === UmPopupBase.TRANSITIONS_TYPE.ZOOM_IN) {
            this.hide(callback);
        }
        else {
            let pos = new Vec3(this.bgPopup.node.position);
            let new_pos = new Vec3();

            switch (this._transitions_type) {
                case UmPopupBase.TRANSITIONS_TYPE.MOVE_IN_TOP:
                    {
                        let value = view.getDesignResolutionSize().y;
                        new_pos = new Vec3(pos.x, pos.y + value, pos.z);
                    }
                    break;

                case UmPopupBase.TRANSITIONS_TYPE.MOVE_IN_BOTTOM:
                    {
                        let value = view.getDesignResolutionSize().y;
                        new_pos = new Vec3(pos.x, pos.y - value, pos.z);
                    }
                    break;

                case UmPopupBase.TRANSITIONS_TYPE.MOVE_IN_RIGHT:
                    {
                        let value = view.getDesignResolutionSize().x;
                        new_pos = new Vec3(pos.x + value, pos.y, pos.z);
                    }
                    break;

                case UmPopupBase.TRANSITIONS_TYPE.MOVE_IN_LEFT:
                    {
                        let value = view.getDesignResolutionSize().x;
                        new_pos = new Vec3(pos.x - value, pos.y, pos.z);
                    }
                    break;
            }

            if (this._is_black_panel) {
                this._fadeOutBlackPanel();
            }

            let duration = this.DURATION_HIDE_MOVE;
            tween(this.bgPopup.node).to(duration, { position: new_pos }, { easing: 'sineIn' }).call(() => {
                if (this.bgBlack) {
                    this.bgBlack.node.active = false;
                }
                callback?.();
                this.node.destroyAllChildren();
                this.node.destroy();
            }).start();
        }
    }

    public setTransitionsType(transitions_type: string) {
        this._transitions_type = transitions_type;
    }


    onBtnCloseClicked(button: Button) {
        if (button) {
            button.interactable = false;
        }
        this.hideWithTransitions();
    }

    closePopupWithCallBack(btn: Button, callback: Function) {
        if (btn) {
            btn.interactable = false;
        }
        this.hideWithTransitions(callback);
    }

    public onClosePopupWithAnim(isAnim: boolean = true) {
        this.isAnimShowHide = isAnim;
        this.hide();
    }
}