1/*
2 *
3 *  * Copyright (c) 2024 Huawei Device Co., Ltd.
4 *  * Licensed under the Apache License, Version 2.0 (the "License");
5 *  * you may not use this file except in compliance with the License.
6 *  * You may obtain a copy of the License at
7 *  *
8 *  *     http://www.apache.org/licenses/LICENSE-2.0
9 *  *
10 *  * Unless required by applicable law or agreed to in writing, software
11 *  * distributed under the License is distributed on an "AS IS" BASIS,
12 *  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 *  * See the License for the specific language governing permissions and
14 *  * limitations under the License.
15 *
16 */
17import mediaQuery from '@ohos.mediaquery';
18
19const TAG = 'BreakpointSystem';
20type triggerFunc = (columnType: ColumnType) => void;
21
22export enum ColumnType {
23    BREAKPOINT_4_COLUMN = 'sm',
24    BREAKPOINT_8_COLUMN = 'md',
25    BREAKPOINT_12_COLUMN = 'lg'
26}
27
28export const BREAKPOINT_VALUE = [0, 520, 840]
29
30export default class BreakpointSystem {
31    private currentBreakpoint: string = '';
32    private smListener: mediaQuery.MediaQueryListener | null = null;
33    private mdListener: mediaQuery.MediaQueryListener | null = null;
34    private lgListener: mediaQuery.MediaQueryListener | null = null;
35    private callback: triggerFunc | null = null;
36
37    constructor() {
38        console.info(TAG, 'BreakpointSystem construct.');
39    }
40
41    private updateCurrentBreakpoint(breakpoint: ColumnType) {
42        if (this.currentBreakpoint !== breakpoint) {
43            this.currentBreakpoint = breakpoint;
44            if (this.callback) {
45                this.callback(breakpoint);
46            }
47        }
48    }
49
50    private isBreakpointSM = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
51        if (mediaQueryResult.matches) {
52            this.updateCurrentBreakpoint(ColumnType.BREAKPOINT_4_COLUMN);
53        }
54    }
55    private isBreakpointMD = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
56        if (mediaQueryResult.matches) {
57            this.updateCurrentBreakpoint(ColumnType.BREAKPOINT_8_COLUMN);
58        }
59    }
60    private isBreakpointLG = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
61        if (mediaQueryResult.matches) {
62            this.updateCurrentBreakpoint(ColumnType.BREAKPOINT_12_COLUMN);
63        }
64    }
65
66    public register(callback: triggerFunc) {
67        this.callback = callback;
68        console.info(TAG, `register.currentBreakpoint: ${this.currentBreakpoint}`)
69        if (BREAKPOINT_VALUE === null || BREAKPOINT_VALUE.length !== 3) {
70            console.info(TAG, 'breakpoint system register error');
71        }
72        this.smListener = mediaQuery.matchMediaSync('(width<' + BREAKPOINT_VALUE[1] + 'vp)');
73        this.smListener.on('change', this.isBreakpointSM);
74        this.mdListener = mediaQuery.matchMediaSync('(' + BREAKPOINT_VALUE[1] + 'vp<=width<' + BREAKPOINT_VALUE[2] + 'vp)');
75        this.mdListener.on('change', this.isBreakpointMD);
76        this.lgListener = mediaQuery.matchMediaSync('(' + BREAKPOINT_VALUE[1] + 'vp<=width)');
77        this.lgListener.on('change', this.isBreakpointLG);
78    }
79
80    public unregister() {
81        if (this.smListener !== null) {
82            this.smListener.off('change', this.isBreakpointSM)
83        }
84        if (this.mdListener !== null) {
85            this.mdListener.off('change', this.isBreakpointMD)
86        }
87        if (this.lgListener !== null) {
88            this.lgListener.off('change', this.isBreakpointLG)
89        }
90    }
91}
92