• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 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 */
15import mediaQuery from '@ohos.mediaquery'
16
17export default class BreakpointSystem {
18  private currentBreakpoint: string = 'md'
19  private smListener: mediaQuery.MediaQueryListener
20  private mdListener: mediaQuery.MediaQueryListener
21  private lgListener: mediaQuery.MediaQueryListener
22
23  private updateCurrentBreakpoint(breakpoint: string) {
24    if (this.currentBreakpoint !== breakpoint) {
25      this.currentBreakpoint = breakpoint
26      AppStorage.Set<string>('currentBreakpoint', this.currentBreakpoint)
27    }
28  }
29
30  private isBreakpointSM = (mediaQueryResult) => {
31    if (mediaQueryResult.matches) {
32      this.updateCurrentBreakpoint('sm')
33      AppStorage.Set<number>('fontSize', 14)
34      AppStorage.Set<number>('coverMargin', 10)
35    }
36  }
37  private isBreakpointMD = (mediaQueryResult) => {
38    if (mediaQueryResult.matches) {
39      this.updateCurrentBreakpoint('md')
40      AppStorage.Set<number>('fontSize', 16)
41      AppStorage.Set<number>('coverMargin', 30)
42    }
43  }
44  private isBreakpointLG = (mediaQueryResult) => {
45    if (mediaQueryResult.matches) {
46      this.updateCurrentBreakpoint('lg')
47      AppStorage.Set<number>('fontSize', 18)
48      AppStorage.Set<number>('coverMargin', 40)
49    }
50  }
51
52  public register() {
53    this.smListener = mediaQuery.matchMediaSync('(320vp<=width<520vp)')
54    this.smListener.on('change', this.isBreakpointSM)
55    this.mdListener = mediaQuery.matchMediaSync('(520vp<=width<840vp)')
56    this.mdListener.on('change', this.isBreakpointMD)
57    this.lgListener = mediaQuery.matchMediaSync('(840vp<=width)')
58    this.lgListener.on('change', this.isBreakpointLG)
59  }
60
61  public unregister() {
62    this.smListener.off('change', this.isBreakpointSM)
63    this.mdListener.off('change', this.isBreakpointMD)
64    this.lgListener.off('change', this.isBreakpointLG)
65  }
66}