• 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 { Browser } from '../model/Browser'
16import { WebTab } from './TitleBar'
17import Logger from '../model/Logger'
18
19const TAG: string = '[PhoneLayout]'
20const BUTTON_WIDTH: number = 22
21const BUTTON_RADIUS: number = 4
22const DOWN_COLOR: string = '#e4e4e4'
23const UP_COLOR: string = '#00000000'
24
25@Component
26export struct PhoneLayout {
27  @Link browser: Browser;
28  @State isPhone: boolean = true;
29  @State hasDown: boolean = false;
30  @State pageCount: string = '1';
31  @State arrayIndex: number = 0;
32  private addr: string = ''
33  private toolPoneArray: Array<{
34    imageSrc: Resource,
35    id: number
36  }> = [
37    {
38      imageSrc: $r('app.media.ic_public_back'),
39      id: 1
40    },
41    {
42      imageSrc: $r('app.media.ic_public_advance'),
43      id: 2
44    },
45    {
46      imageSrc: $r('app.media.ic_public_home'),
47      id: 5
48    },
49    {
50      imageSrc: $r('app.media.ic_public_refresh'),
51      id: 3
52    }
53  ]
54
55  @Builder ToolBar() {
56    Column() {
57      if (!this.browser.hideProgress) {
58        Progress({ value: this.browser.progress, total: 100 })
59          .color('#0000ff')
60      }
61      Row() {
62        ForEach(this.toolPoneArray, item => {
63          Column() {
64            Divider().color('#e9eaec')
65            Button({ type: ButtonType.Normal }) {
66              Column() {
67                if (item.id !== 4) {
68                  Image(item.imageSrc)
69                } else {
70                  Column() {
71                    Text(this.pageCount)
72                      .fontSize(16)
73                  }
74                  .border({ width: 2 })
75                  .width(22)
76                  .height(22)
77                  .borderRadius(5)
78                  .justifyContent(FlexAlign.Center)
79                }
80              }
81              .width(BUTTON_WIDTH)
82              .height(BUTTON_WIDTH)
83              .justifyContent(FlexAlign.Center)
84            }
85            .height('100%')
86            .width('100%')
87            .backgroundColor(this.arrayIndex === item.id ? DOWN_COLOR : UP_COLOR)
88            .borderRadius(BUTTON_RADIUS)
89            .flexShrink(0)
90            .onTouch((event: TouchEvent) => {
91              if (event.type === TouchType.Down) {
92                this.arrayIndex = item.id
93              } else if (event.type === TouchType.Up) {
94                this.arrayIndex = 0
95              }
96            })
97            .onClick((event: ClickEvent) => {
98              switch (item.id) {
99                case 1:
100                  this.browser.Back()
101                  break;
102                case 2:
103                  this.browser.Forward()
104                  break;
105                case 3:
106                  this.browser.Refresh()
107                  break;
108                case 5:
109                  this.browser.webControllerArray[this.browser.tabArrayIndex].controller.loadUrl({
110                    url: $rawfile('phone.html')
111                  })
112                  break;
113                default:
114                  break;
115              }
116            })
117          }
118          .width('20%')
119        })
120      }
121      .justifyContent(FlexAlign.SpaceAround)
122      .width('100%')
123      .height('100%')
124      .backgroundColor('#fdfdfd')
125    }
126    .height('100%')
127  }
128
129  build() {
130    Column() {
131      Navigation() {
132        Column() {
133          Row() {
134            TextInput({ placeholder: '输入网址...', text: this.browser.inputValue })
135              .placeholderFont({ size: 16, weight: 500 })
136              .fontSize(16)
137              .margin(2)
138              .height(30)
139              .onChange((value: string) => {
140                Logger.info(TAG, `onChange`)
141                this.addr = value
142              })
143              .onSubmit((enterKey: EnterKeyType) => {
144                Logger.info(TAG, `onSubmit`)
145                this.browser.webControllerArray[this.browser.tabArrayIndex].controller.loadUrl({
146                  url: `https://${this.addr}`
147                })
148                this.addr = ''
149              })
150            Button({ type: ButtonType.Normal }) {
151              Image($r('app.media.submit'))
152            }
153            .margin(8)
154            .width(BUTTON_WIDTH)
155            .height(BUTTON_WIDTH)
156            .backgroundColor(this.hasDown ? DOWN_COLOR : UP_COLOR)
157            .borderRadius(BUTTON_RADIUS)
158            .flexShrink(0)
159            .onTouch((event: TouchEvent) => {
160              if (event.type === TouchType.Down) {
161                this.hasDown = true
162              } else if (event.type === TouchType.Up) {
163                this.hasDown = false
164              }
165            })
166            .onClick((event: ClickEvent) => {
167              this.browser.loadUrl(this.addr)
168              this.addr = ''
169            })
170          }
171
172          Column() {
173            WebTab({ browser: $browser, isPhone: $isPhone })
174          }
175        }
176      }
177      .hideTitleBar(true)
178      .toolBar(this.ToolBar)
179      .hideBackButton(true)
180    }
181  }
182}