• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import mediaQuery from '@ohos.mediaquery';
17import { Constants } from '../model/common/Constants';
18import { ScreenManager } from '../model/common/ScreenManager';
19import { Log } from './Log';
20
21const TAG: string = 'common_BreakPointSystem';
22
23declare interface BreakPointTypeOption<T> {
24  xs?: T
25  sm?: T
26  md?: T
27  lg?: T
28  xl?: T
29  xxl?: T
30}
31
32export class BreakPointType<T> {
33  options: BreakPointTypeOption<T>;
34
35  constructor(option: BreakPointTypeOption<T>) {
36    this.options = option;
37  }
38
39  getValue(currentBreakPoint: string): T {
40    switch (currentBreakPoint) {
41      case Constants.BREAKPOINT_XS:
42        return this.options.xs;
43      case Constants.BREAKPOINT_SM:
44        return this.options.sm;
45      case Constants.BREAKPOINT_MD:
46        return this.options.md;
47      case Constants.BREAKPOINT_LG:
48        return this.options.lg;
49      default:
50        return undefined;
51    }
52  }
53}
54
55type Breakpoint = {
56  name: string
57  size: number
58  mediaQueryListener?: mediaQuery.MediaQueryListener
59}
60
61export class BreakpointSystem {
62  private currentBreakpoint: string = Constants.BREAKPOINT_MD;
63  private breakpointStorageKey: string = 'currentBreakpoint';
64  private breakpoints: Breakpoint[] = [
65    { name: Constants.BREAKPOINT_XS, size: Constants.BREAKPOINT_XS_MIN_SIZE },
66    { name: Constants.BREAKPOINT_SM, size: Constants.BREAKPOINT_SM_MIN_SIZE },
67    { name: Constants.BREAKPOINT_MD, size: Constants.BREAKPOINT_MD_MIN_SIZE },
68    { name: Constants.BREAKPOINT_LG, size: Constants.BREAKPOINT_LG_MIN_SIZE }
69  ];
70
71  public register(): void {
72    this.breakpoints.forEach((breakpoint: Breakpoint, index) => {
73      let breakpointsSql;
74      if (index === this.breakpoints.length - 1) {
75        breakpointsSql = '(' + breakpoint.size + 'vp<=width' + ')';
76      } else {
77        breakpointsSql = '(' + breakpoint.size + 'vp<=width<' + this.breakpoints[index + 1].size + 'vp)';
78      }
79      breakpoint.mediaQueryListener = mediaQuery.matchMediaSync(breakpointsSql);
80      breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => {
81        if (mediaQueryResult.matches) {
82          this.updateCurrentBreakpoint(breakpoint.name);
83        }
84      })
85    })
86  }
87
88  public unregister(): void {
89    this.breakpoints.forEach((breakpoint: Breakpoint) => {
90      breakpoint.mediaQueryListener.off('change');
91    })
92  }
93
94  public registerOrientationChange(): void {
95    mediaQuery.matchMediaSync('(orientation: landscape)')
96      .on('change', (mediaQueryResult) => {
97        if (mediaQueryResult.matches) {
98          ScreenManager.getInstance().onRotationAngleChanged(true);
99        }
100      })
101
102    mediaQuery.matchMediaSync('(orientation: portrait)')
103      .on('change', (mediaQueryResult) => {
104        if (mediaQueryResult.matches) {
105          ScreenManager.getInstance().onRotationAngleChanged(false);
106        }
107      })
108  }
109
110  public unregisterOrientationChange(): void {
111    mediaQuery.matchMediaSync('(orientation: landscape)').off('change');
112    mediaQuery.matchMediaSync('(orientation: portrait)').off('change');
113  }
114
115  private updateCurrentBreakpoint(breakpoint: string): void {
116    if (this.currentBreakpoint !== breakpoint) {
117      this.currentBreakpoint = breakpoint;
118      AppStorage.setOrCreate<string>(this.breakpointStorageKey, this.currentBreakpoint);
119      Log.debug(TAG, 'on current breakpoint: ' + this.currentBreakpoint);
120    }
121  }
122}