ui-state-service.ts 3.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157
import { SingletonMode } from '../../decorators/singleton-mode';
import { LayoutState } from 'ibiz-core';
import { on } from '../../utils';
import { Observable, Subject } from 'rxjs';

/**
 * 应用UI状态管理服务类
 *
 * @export
 * @class UIStateService
 */
@SingletonMode()
export class UIStateService {
    /**
     * 事件组
     *
     * @private
     * @type {*}
     * @memberof OsObject
     */
    private events = new Subject();
    /**
     * 缓存标识
     *
     * @protected
     * @type {string}
     * @memberof UIStateService
     */
    protected localStoreKey: string = 'UIStateCache';

    /**
     * 全局布局状态管理
     *
     * @type {LayoutState}
     * @memberof UIStateService
     */
    public layoutState!: LayoutState;

    /**
     * Creates an instance of UIStateService.
     * @memberof UIStateService
     */
    constructor() {
        try {
            const data: any = localStorage.getItem(this.localStoreKey);
            if (data) {
                this.fillLayoutState(JSON.parse(data));
            } else {
                this.fillLayoutState({});
            }
        } catch (error) {
            this.fillLayoutState({});
        }
        on(window, 'beforeunload', () => {
            localStorage.setItem(this.localStoreKey, JSON.stringify(this.layoutState));
        });
    }

    /**
     * 填充状态
     *
     * @protected
     * @param {*} data
     * @memberof UIStateService
     */
    protected fillLayoutState(data: any): void {
        this.layoutState = {
            styleMode: 'DEFAULT',
            theme: 'dark',
            contentBottomShow: true,
            contentHorizontalSplit: 0.23,
            contentVerticalSplit: 0.65,
            leftExpActiveIndex: 0,
            bottomExpActiveIndex: 0,
            leftExpContentShow: true,
            leftNavMenuCollapse: false,
            leftNavOpenedMenus: [],
        };
        Object.assign(this.layoutState, data);
    }

    /**
     * 改变布局状态
     *
     * @param {LayoutState} state
     * @memberof UIStateService
     */
    public changeLayoutState(state: any): void {
        if (state) {
            Object.assign(this.layoutState, state);
            for (const key in state) {
                this.events.next({ key, val: state[key] });
            }
        }
    }

    /**
     * 获取某项UI状态
     *
     * @template K
     * @param {K} key
     * @returns {*}
     * @memberof UIStateService
     */
    public getState<K extends keyof LayoutState>(key: K): any {
        return this.layoutState[key];
    }

    /**
     * 左侧导航内容区显示切换
     *
     * @param {boolean} [bool]
     * @memberof UIStateService
     */
    public leftExpContentShowChange(bool?: boolean): void {
        if (bool !== undefined) {
            this.layoutState.leftExpContentShow = bool;
        } else {
            this.layoutState.leftExpContentShow = !this.layoutState.leftExpContentShow;
        }
    }

    /**
     * 改变左侧菜单收缩状态
     *
     * @param {boolean} [bool]
     * @memberof UIStateService
     */
    public leftNavMenuCollapseChange(bool?: boolean): void {
        if (bool !== undefined) {
            this.layoutState.leftNavMenuCollapse = bool;
        } else {
            this.layoutState.leftNavMenuCollapse = !this.layoutState.leftNavMenuCollapse;
        }
    }

    /**
     * 是否为Style2模式
     *
     * @returns {boolean}
     * @memberof UIStateService
     */
    public isStyle2(): boolean {
        return this.layoutState.styleMode === 'STYLE2';
    }

    /**
     * 注册事件
     *
     * @param {string} [eventName]
     * @return {*}  {Observable<any>}
     * @memberof UIStateService
     */
    on(eventName?: string): Observable<any> {
        return this.events.asObservable();
    }
}