• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 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 { Constants, Log, PhotoDataSource, ScreenManager } from '@ohos/common';
17import { MouseTurnPageButton } from './MouseTurnPageButton';
18
19const TAG: string = 'browser_MouseTurnPageOperation';
20
21@Component
22export struct MouseTurnPageOperation {
23  @State isOnLeftHover: boolean = false
24  @State isOnRightHover: boolean = false
25  @State isOnFirstHover: boolean = false
26  isShowBar: boolean = false
27  @Consume('transitionIndex') currentIndex: number
28  @Prop isPhotoScaled: boolean = false
29  private controller: SwiperController | null = null;
30  private dataSource: PhotoDataSource | null = null;
31
32  aboutToAppear(): void {
33    this.isOnFirstHover = true
34  }
35
36  build() {
37    if (!this.isPhotoScaled) {
38      Row() {
39        this.PhotoSwiperArrow()
40      }
41      .width('100%')
42      .justifyContent(FlexAlign.SpaceBetween)
43      .alignItems(VerticalAlign.Center)
44      .padding({
45        top: $r('app.float.mouse_turn_page_button_margin'),
46        bottom: $r('app.float.mouse_turn_page_button_margin')
47      })
48      .hitTestBehavior(HitTestMode.Transparent)
49      .onMouse((event?: MouseEvent) => {
50        if (this.isOnFirstHover) {
51          this.isOnFirstHover = false
52          this.isOnLeftHover = true
53          this.isOnRightHover = true
54          setTimeout(() => {
55            this.isOnLeftHover = false
56            this.isOnRightHover = false
57          }, Constants.MOUSE_TURN_PAGE_BUTTON_DISAPPEAR_TIMEOUT)
58        }
59      })
60    }
61  }
62
63  @Builder
64  PhotoSwiperArrow() {
65    // Left
66    Stack({ alignContent: Alignment.Center }) {
67      Column() {
68        Column()
69          .width('100%')
70          .height('100%')
71          .onHover((isHover?: boolean) => {
72            if (isHover != null) {
73              this.isOnLeftHover = isHover
74            }
75          })
76      }
77      .hitTestBehavior(HitTestMode.Transparent)
78      .margin({
79        top: this.isShowBar ? (ScreenManager.getInstance().getStatusBarHeight() + Constants.ActionBarHeight)
80                            : ScreenManager.getInstance().getStatusBarHeight()
81      })
82
83      Column() {
84        if (this.isOnLeftHover &&
85        this.currentIndex > Constants.NUMBER_0) {
86          MouseTurnPageButton({ isStart: true })
87            .key('LeftMouseTurnPageButton')
88            .onClick(() => {
89              if (this.controller != null) {
90                this.controller.showPrevious();
91              }
92            })
93        }
94      }
95      .onHover((isHover?: boolean) => {
96        if (isHover != null) {
97          this.isOnLeftHover = isHover
98        }
99      })
100      .width($r('app.float.mouse_turn_page_button_response_size'))
101      .height($r('app.float.mouse_turn_page_button_response_size'))
102      .padding({
103        top: $r('app.float.mouse_turn_page_button_wrapper_padding'),
104        bottom: $r('app.float.mouse_turn_page_button_wrapper_padding')
105      })
106    }
107    .width($r('app.float.mouse_turn_page_button_hot_zone_width'))
108
109    // Right
110    Stack({ alignContent: Alignment.Center }) {
111      Column() {
112        Column()
113          .width('100%')
114          .height('100%')
115          .onHover((isHover?: boolean) => {
116            if (isHover != null) {
117              this.isOnRightHover = isHover
118            }
119          })
120      }
121      .hitTestBehavior(HitTestMode.Transparent)
122      .margin({
123        top: this.isShowBar ? (ScreenManager.getInstance().getStatusBarHeight() + Constants.ActionBarHeight)
124                            : ScreenManager.getInstance().getStatusBarHeight()
125      })
126
127      Column() {
128        if (this.isOnRightHover && this.dataSource != null &&
129        this.currentIndex < this.dataSource.totalCount() - Constants.NUMBER_1) {
130          MouseTurnPageButton({ isStart: false })
131            .key('RightMouseTurnPageButton')
132            .onClick(() => {
133              if (this.controller != null) {
134                this.controller.showNext();
135              }
136            })
137        }
138      }
139      .onHover((isHover?: boolean) => {
140        if (isHover != null) {
141          this.isOnRightHover = isHover
142        }
143      })
144      .width($r('app.float.mouse_turn_page_button_response_size'))
145      .height($r('app.float.mouse_turn_page_button_response_size'))
146      .padding({
147        top: $r('app.float.mouse_turn_page_button_wrapper_padding'),
148        bottom: $r('app.float.mouse_turn_page_button_wrapper_padding')
149      })
150    }
151    .width($r('app.float.mouse_turn_page_button_hot_zone_width'))
152  }
153}