1/* 2 * Copyright (c) 2023-2024 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 16if (!('finalizeConstruction' in ViewPU.prototype)) { 17 Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { }); 18} 19if (PUV2ViewBase.contextStack === undefined) { 20 Reflect.set(PUV2ViewBase, 'contextStack', []); 21} 22const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; 23const hilog = requireNapi('hilog'); 24const PUBLIC_MORE = { 'id': -1, 'type': 20000, params: ['sys.media.ohos_ic_public_more'], 25 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; 26const PUBLIC_BACK = { 'id': -1, 'type': 20000, params: ['sys.media.ohos_ic_back'], 27 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; 28const TEXT_EDITABLE_DIALOG = '18.3fp'; 29const IMAGE_SIZE = '64vp'; 30const MAX_DIALOG = '256vp'; 31const MIN_DIALOG = '216vp'; 32 33export class SelectTitleBar extends ViewPU { 34 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 35 super(parent, __localStorage, elmtId, extraInfo); 36 if (typeof paramsLambda === 'function') { 37 this.paramsGenerator_ = paramsLambda; 38 } 39 this.__selected = new SynchedPropertySimpleOneWayPU(params.selected, this, 'selected'); 40 this.options = []; 41 this.menuItems = []; 42 this.subtitle = ''; 43 this.badgeValue = 0; 44 this.hidesBackButton = false; 45 this.onSelected = () => { }; 46 this.__selectMaxWidth = new ObservedPropertySimplePU(0, this, 'selectMaxWidth'); 47 this.__fontSize = new ObservedPropertySimplePU(1, this, 'fontSize'); 48 this.setInitiallyProvidedValue(params); 49 this.finalizeConstruction(); 50 } 51 52 setInitiallyProvidedValue(params) { 53 if (params.selected === undefined) { 54 this.__selected.set(0); 55 } 56 if (params.options !== undefined) { 57 this.options = params.options; 58 } 59 if (params.menuItems !== undefined) { 60 this.menuItems = params.menuItems; 61 } 62 if (params.subtitle !== undefined) { 63 this.subtitle = params.subtitle; 64 } 65 if (params.badgeValue !== undefined) { 66 this.badgeValue = params.badgeValue; 67 } 68 if (params.hidesBackButton !== undefined) { 69 this.hidesBackButton = params.hidesBackButton; 70 } 71 if (params.onSelected !== undefined) { 72 this.onSelected = params.onSelected; 73 } 74 if (params.selectMaxWidth !== undefined) { 75 this.selectMaxWidth = params.selectMaxWidth; 76 } 77 if (params.fontSize !== undefined) { 78 this.fontSize = params.fontSize; 79 } 80 } 81 82 updateStateVars(params) { 83 this.__selected.reset(params.selected); 84 } 85 86 purgeVariableDependenciesOnElmtId(rmElmtId) { 87 this.__selected.purgeDependencyOnElmtId(rmElmtId); 88 this.__selectMaxWidth.purgeDependencyOnElmtId(rmElmtId); 89 this.__fontSize.purgeDependencyOnElmtId(rmElmtId); 90 } 91 92 aboutToBeDeleted() { 93 this.__selected.aboutToBeDeleted(); 94 this.__selectMaxWidth.aboutToBeDeleted(); 95 this.__fontSize.aboutToBeDeleted(); 96 SubscriberManager.Get().delete(this.id__()); 97 this.aboutToBeDeletedInternal(); 98 } 99 100 get selected() { 101 return this.__selected.get(); 102 } 103 104 set selected(newValue) { 105 this.__selected.set(newValue); 106 } 107 108 get selectMaxWidth() { 109 return this.__selectMaxWidth.get(); 110 } 111 112 set selectMaxWidth(newValue) { 113 this.__selectMaxWidth.set(newValue); 114 } 115 116 get fontSize() { 117 return this.__fontSize.get(); 118 } 119 120 set fontSize(newValue) { 121 this.__fontSize.set(newValue); 122 } 123 124 initialRender() { 125 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 126 this.observeComponentCreation2((elmtId, isInitialRender) => { 127 Flex.create({ 128 justifyContent: FlexAlign.SpaceBetween, 129 alignItems: ItemAlign.Stretch 130 }); 131 Flex.width('100%'); 132 Flex.height(SelectTitleBar.totalHeight); 133 Flex.backgroundColor({ 134 'id': -1, 135 'type': 10001, 136 params: ['sys.color.ohos_id_color_background'], 137 'bundleName': '__harDefaultBundleName__', 138 'moduleName': '__harDefaultModuleName__' 139 }); 140 Flex.onAreaChange((_oldValue, newValue) => { 141 let newWidth = Number(newValue.width); 142 if (!this.hidesBackButton) { 143 newWidth -= ImageMenuItem.imageHotZoneWidth; 144 newWidth += SelectTitleBar.leftPadding; 145 newWidth -= SelectTitleBar.leftPaddingWithBack; 146 } 147 if (this.menuItems !== undefined) { 148 let menusLength = this.menuItems.length; 149 if (menusLength >= CollapsibleMenuSection.maxCountOfVisibleItems) { 150 newWidth -= ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems; 151 } else if (menusLength > 0) { 152 newWidth -= ImageMenuItem.imageHotZoneWidth * menusLength; 153 } 154 } 155 if (this.badgeValue) { 156 this.selectMaxWidth = newWidth - SelectTitleBar.badgeSize - SelectTitleBar.leftPadding - 157 SelectTitleBar.rightPadding - SelectTitleBar.badgePadding; 158 } else { 159 this.selectMaxWidth = newWidth - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding; 160 } 161 }); 162 }, Flex); 163 this.observeComponentCreation2((elmtId, isInitialRender) => { 164 Row.create(); 165 Row.margin({ 166 left: this.hidesBackButton ? { 167 'id': -1, 168 'type': 10002, 169 params: ['sys.float.ohos_id_max_padding_start'], 170 'bundleName': '__harDefaultBundleName__', 171 'moduleName': '__harDefaultModuleName__' 172 } : { 173 'id': -1, 174 'type': 10002, 175 params: ['sys.float.ohos_id_default_padding_start'], 176 'bundleName': '__harDefaultBundleName__', 177 'moduleName': '__harDefaultModuleName__' 178 } 179 }); 180 }, Row); 181 this.observeComponentCreation2((elmtId, isInitialRender) => { 182 If.create(); 183 if (!this.hidesBackButton) { 184 this.ifElseBranchUpdateFunction(0, () => { 185 { 186 this.observeComponentCreation2((elmtId, isInitialRender) => { 187 if (isInitialRender) { 188 let componentCall = new ImageMenuItem(this, { item: { 189 value: PUBLIC_BACK, 190 isEnabled: true, 191 action: () => this.getUIContext()?.getRouter()?.back() 192 }, index: -1 }, undefined, elmtId, () => { 193 }, { 194 page: 'library/src/main/ets/components/mainpage/selecttitlebar.ets', 195 line: 71, 196 col: 11 197 }); 198 ViewPU.create(componentCall); 199 let paramsLambda = () => { 200 return { 201 item: { 202 value: PUBLIC_BACK, 203 isEnabled: true, 204 action: () => this.getUIContext()?.getRouter()?.back() 205 }, 206 index: -1 207 }; 208 }; 209 componentCall.paramsGenerator_ = paramsLambda; 210 } else { 211 this.updateStateVarsOfChildByElmtId(elmtId, {}); 212 } 213 }, { name: 'ImageMenuItem' }); 214 } 215 }); 216 } else { 217 this.ifElseBranchUpdateFunction(1, () => { 218 }); 219 } 220 }, If); 221 If.pop(); 222 this.observeComponentCreation2((elmtId, isInitialRender) => { 223 Column.create(); 224 Column.justifyContent(FlexAlign.Start); 225 Column.alignItems(HorizontalAlign.Start); 226 Column.constraintSize({ maxWidth: this.selectMaxWidth }); 227 }, Column); 228 this.observeComponentCreation2((elmtId, isInitialRender) => { 229 If.create(); 230 if (this.badgeValue) { 231 this.ifElseBranchUpdateFunction(0, () => { 232 this.observeComponentCreation2((elmtId, isInitialRender) => { 233 Badge.create({ 234 count: this.badgeValue, 235 position: BadgePosition.Right, 236 style: { 237 badgeSize: SelectTitleBar.badgeSize, 238 badgeColor: { 239 'id': -1, 240 'type': 10001, 241 params: ['sys.color.ohos_id_color_emphasize'], 242 'bundleName': '__harDefaultBundleName__', 243 'moduleName': '__harDefaultModuleName__' 244 }, 245 borderColor: { 246 'id': -1, 247 'type': 10001, 248 params: ['sys.color.ohos_id_color_emphasize'], 249 'bundleName': '__harDefaultBundleName__', 250 'moduleName': '__harDefaultModuleName__' 251 }, 252 borderWidth: 0 253 } 254 }); 255 }, Badge); 256 this.observeComponentCreation2((elmtId, isInitialRender) => { 257 Row.create(); 258 Row.justifyContent(FlexAlign.Start); 259 Row.margin({ 260 right: { 261 'id': -1, 262 'type': 10002, 263 params: ['sys.float.ohos_id_elements_margin_horizontal_l'], 264 'bundleName': '__harDefaultBundleName__', 265 'moduleName': '__harDefaultModuleName__' 266 } 267 }); 268 }, Row); 269 this.observeComponentCreation2((elmtId, isInitialRender) => { 270 Select.create(this.options); 271 Select.selected(this.selected); 272 Select.value(this.selected >= 0 && this.selected < this.options.length ? 273 this.options[this.selected].value : ''); 274 Select.font({ size: this.hidesBackButton && !this.subtitle 275 ? { 276 'id': -1, 277 'type': 10002, 278 params: ['sys.float.ohos_id_text_size_headline7'], 279 'bundleName': '__harDefaultBundleName__', 280 'moduleName': '__harDefaultModuleName__' 281 } : { 282 'id': -1, 283 'type': 10002, 284 params: ['sys.float.ohos_id_text_size_headline8'], 285 'bundleName': '__harDefaultBundleName__', 286 'moduleName': '__harDefaultModuleName__' 287 } }); 288 Select.fontColor({ 289 'id': -1, 290 'type': 10001, 291 params: ['sys.color.ohos_id_color_titlebar_text'], 292 'bundleName': '__harDefaultBundleName__', 293 'moduleName': '__harDefaultModuleName__' 294 }); 295 Select.backgroundColor(Color.Transparent); 296 Select.onSelect(this.onSelected); 297 Select.constraintSize({ maxWidth: this.selectMaxWidth }); 298 Select.offset({ x: -4 }); 299 }, Select); 300 Select.pop(); 301 Row.pop(); 302 Badge.pop(); 303 }); 304 } else { 305 this.ifElseBranchUpdateFunction(1, () => { 306 this.observeComponentCreation2((elmtId, isInitialRender) => { 307 Row.create(); 308 Row.justifyContent(FlexAlign.Start); 309 }, Row); 310 this.observeComponentCreation2((elmtId, isInitialRender) => { 311 Select.create(this.options); 312 Select.selected(this.selected); 313 Select.value(this.selected >= 0 && this.selected < this.options.length ? 314 this.options[this.selected].value : ''); 315 Select.font({ size: this.hidesBackButton && !this.subtitle ? 316 { 317 'id': -1, 318 'type': 10002, 319 params: ['sys.float.ohos_id_text_size_headline7'], 320 'bundleName': '__harDefaultBundleName__', 321 'moduleName': '__harDefaultModuleName__' 322 } : { 323 'id': -1, 324 'type': 10002, 325 params: ['sys.float.ohos_id_text_size_headline8'], 326 'bundleName': '__harDefaultBundleName__', 327 'moduleName': '__harDefaultModuleName__' 328 } }); 329 Select.fontColor({ 330 'id': -1, 331 'type': 10001, 332 params: ['sys.color.ohos_id_color_titlebar_text'], 333 'bundleName': '__harDefaultBundleName__', 334 'moduleName': '__harDefaultModuleName__' 335 }); 336 Select.backgroundColor(Color.Transparent); 337 Select.onSelect(this.onSelected); 338 Select.constraintSize({ maxWidth: this.selectMaxWidth }); 339 Select.offset({ x: -4 }); 340 }, Select); 341 Select.pop(); 342 Row.pop(); 343 }); 344 } 345 }, If); 346 If.pop(); 347 this.observeComponentCreation2((elmtId, isInitialRender) => { 348 If.create(); 349 if (this.subtitle !== undefined) { 350 this.ifElseBranchUpdateFunction(0, () => { 351 this.observeComponentCreation2((elmtId, isInitialRender) => { 352 Row.create(); 353 Row.justifyContent(FlexAlign.Start); 354 Row.margin({ left: SelectTitleBar.subtitleLeftPadding }); 355 }, Row); 356 this.observeComponentCreation2((elmtId, isInitialRender) => { 357 Text.create(this.subtitle); 358 Text.fontSize({ 359 'id': -1, 360 'type': 10002, 361 params: ['sys.float.ohos_id_text_size_over_line'], 362 'bundleName': '__harDefaultBundleName__', 363 'moduleName': '__harDefaultModuleName__' 364 }); 365 Text.fontColor({ 366 'id': -1, 367 'type': 10001, 368 params: ['sys.color.ohos_id_color_titlebar_subtitle_text'], 369 'bundleName': '__harDefaultBundleName__', 370 'moduleName': '__harDefaultModuleName__' 371 }); 372 Text.maxLines(1); 373 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 374 Text.constraintSize({ maxWidth: this.selectMaxWidth }); 375 Text.offset({ y: -4 }); 376 }, Text); 377 Text.pop(); 378 Row.pop(); 379 }); 380 } else { 381 this.ifElseBranchUpdateFunction(1, () => { 382 }); 383 } 384 }, If); 385 If.pop(); 386 Column.pop(); 387 Row.pop(); 388 this.observeComponentCreation2((elmtId, isInitialRender) => { 389 If.create(); 390 if (this.menuItems !== undefined && this.menuItems.length > 0) { 391 this.ifElseBranchUpdateFunction(0, () => { 392 { 393 this.observeComponentCreation2((elmtId, isInitialRender) => { 394 if (isInitialRender) { 395 let componentCall = new CollapsibleMenuSection(this, { 396 menuItems: this.menuItems, 397 index: 1 + SelectTitleBar.instanceCount++ 398 }, undefined, elmtId, () => { 399 }, { 400 page: 'library/src/main/ets/components/mainpage/selecttitlebar.ets', 401 line: 146, 402 col: 9 403 }); 404 ViewPU.create(componentCall); 405 let paramsLambda = () => { 406 return { 407 menuItems: this.menuItems, 408 index: 1 + SelectTitleBar.instanceCount++ 409 }; 410 }; 411 componentCall.paramsGenerator_ = paramsLambda; 412 } else { 413 this.updateStateVarsOfChildByElmtId(elmtId, {}); 414 } 415 }, { name: 'CollapsibleMenuSection' }); 416 } 417 }); 418 } else { 419 this.ifElseBranchUpdateFunction(1, () => { 420 }); 421 } 422 }, If); 423 If.pop(); 424 Flex.pop(); 425 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 426 } 427 428 rerender() { 429 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 430 this.updateDirtyElements(); 431 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 432 } 433} 434SelectTitleBar.badgeSize = 16; 435SelectTitleBar.totalHeight = 56; 436SelectTitleBar.leftPadding = 24; 437SelectTitleBar.leftPaddingWithBack = 12; 438SelectTitleBar.rightPadding = 24; 439SelectTitleBar.badgePadding = 16; 440SelectTitleBar.subtitleLeftPadding = 4; 441SelectTitleBar.instanceCount = 0; 442 443class CollapsibleMenuSection extends ViewPU { 444 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 445 super(parent, __localStorage, elmtId, extraInfo); 446 if (typeof paramsLambda === 'function') { 447 this.paramsGenerator_ = paramsLambda; 448 } 449 this.menuItems = []; 450 this.item = { 451 value: PUBLIC_MORE, 452 label: { 453 'id': -1, 454 'type': 10003, 455 params: ['sys.string.ohos_toolbar_more'], 456 'bundleName': '__harDefaultBundleName__', 457 'moduleName': '__harDefaultModuleName__' 458 }, 459 }; 460 this.index = 0; 461 this.longPressTime = 500; 462 this.minFontSize = 1.75; 463 this.isFollowingSystemFontScale = false; 464 this.maxFontScale = 1; 465 this.systemFontScale = 1; 466 this.firstFocusableIndex = -1; 467 this.__isPopupShown = new ObservedPropertySimplePU(false, this, 'isPopupShown'); 468 this.__isMoreIconOnFocus = new ObservedPropertySimplePU(false, this, 'isMoreIconOnFocus'); 469 this.__isMoreIconOnHover = new ObservedPropertySimplePU(false, this, 'isMoreIconOnHover'); 470 this.__isMoreIconOnClick = new ObservedPropertySimplePU(false, this, 'isMoreIconOnClick'); 471 this.__fontSize = new ObservedPropertySimplePU(1, this, 'fontSize'); 472 this.dialogController = new CustomDialogController({ 473 builder: () => { 474 let jsDialog = new SelectTitleBarDialog(this, { 475 cancel: () => { 476 }, 477 confirm: () => { 478 }, 479 selectTitleDialog: this.item, 480 selectTitleBarDialog: this.item.label ? this.item.label : '', 481 fontSize: this.fontSize, 482 }, undefined, -1, () => { 483 }, { page: 'library/src/main/ets/components/mainpage/selecttitlebar.ets', line: 204, col: 14 }); 484 jsDialog.setController(this.dialogController); 485 ViewPU.create(jsDialog); 486 let paramsLambda = () => { 487 return { 488 cancel: () => { 489 }, 490 confirm: () => { 491 }, 492 selectTitleDialog: this.item, 493 selectTitleBarDialog: this.item.label ? this.item.label : '', 494 fontSize: this.fontSize 495 }; 496 }; 497 jsDialog.paramsGenerator_ = paramsLambda; 498 }, 499 maskColor: Color.Transparent, 500 isModal: true, 501 customStyle: true 502 }, this); 503 this.setInitiallyProvidedValue(params); 504 this.finalizeConstruction(); 505 } 506 507 setInitiallyProvidedValue(params) { 508 if (params.menuItems !== undefined) { 509 this.menuItems = params.menuItems; 510 } 511 if (params.item !== undefined) { 512 this.item = params.item; 513 } 514 if (params.index !== undefined) { 515 this.index = params.index; 516 } 517 if (params.longPressTime !== undefined) { 518 this.longPressTime = params.longPressTime; 519 } 520 if (params.minFontSize !== undefined) { 521 this.minFontSize = params.minFontSize; 522 } 523 if (params.isFollowingSystemFontScale !== undefined) { 524 this.isFollowingSystemFontScale = params.isFollowingSystemFontScale; 525 } 526 if (params.maxFontScale !== undefined) { 527 this.maxFontScale = params.maxFontScale; 528 } 529 if (params.systemFontScale !== undefined) { 530 this.systemFontScale = params.systemFontScale; 531 } 532 if (params.firstFocusableIndex !== undefined) { 533 this.firstFocusableIndex = params.firstFocusableIndex; 534 } 535 if (params.isPopupShown !== undefined) { 536 this.isPopupShown = params.isPopupShown; 537 } 538 if (params.isMoreIconOnFocus !== undefined) { 539 this.isMoreIconOnFocus = params.isMoreIconOnFocus; 540 } 541 if (params.isMoreIconOnHover !== undefined) { 542 this.isMoreIconOnHover = params.isMoreIconOnHover; 543 } 544 if (params.isMoreIconOnClick !== undefined) { 545 this.isMoreIconOnClick = params.isMoreIconOnClick; 546 } 547 if (params.fontSize !== undefined) { 548 this.fontSize = params.fontSize; 549 } 550 if (params.dialogController !== undefined) { 551 this.dialogController = params.dialogController; 552 } 553 } 554 555 updateStateVars(params) { 556 } 557 558 purgeVariableDependenciesOnElmtId(rmElmtId) { 559 this.__isPopupShown.purgeDependencyOnElmtId(rmElmtId); 560 this.__isMoreIconOnFocus.purgeDependencyOnElmtId(rmElmtId); 561 this.__isMoreIconOnHover.purgeDependencyOnElmtId(rmElmtId); 562 this.__isMoreIconOnClick.purgeDependencyOnElmtId(rmElmtId); 563 this.__fontSize.purgeDependencyOnElmtId(rmElmtId); 564 } 565 566 aboutToBeDeleted() { 567 this.__isPopupShown.aboutToBeDeleted(); 568 this.__isMoreIconOnFocus.aboutToBeDeleted(); 569 this.__isMoreIconOnHover.aboutToBeDeleted(); 570 this.__isMoreIconOnClick.aboutToBeDeleted(); 571 this.__fontSize.aboutToBeDeleted(); 572 SubscriberManager.Get().delete(this.id__()); 573 this.aboutToBeDeletedInternal(); 574 } 575 576 get isPopupShown() { 577 return this.__isPopupShown.get(); 578 } 579 580 set isPopupShown(newValue) { 581 this.__isPopupShown.set(newValue); 582 } 583 584 get isMoreIconOnFocus() { 585 return this.__isMoreIconOnFocus.get(); 586 } 587 588 set isMoreIconOnFocus(newValue) { 589 this.__isMoreIconOnFocus.set(newValue); 590 } 591 592 get isMoreIconOnHover() { 593 return this.__isMoreIconOnHover.get(); 594 } 595 596 set isMoreIconOnHover(newValue) { 597 this.__isMoreIconOnHover.set(newValue); 598 } 599 600 get isMoreIconOnClick() { 601 return this.__isMoreIconOnClick.get(); 602 } 603 604 set isMoreIconOnClick(newValue) { 605 this.__isMoreIconOnClick.set(newValue); 606 } 607 608 get fontSize() { 609 return this.__fontSize.get(); 610 } 611 612 set fontSize(newValue) { 613 this.__fontSize.set(newValue); 614 } 615 616 getMoreIconFgColor() { 617 return this.isMoreIconOnClick ? 618 { 619 'id': -1, 620 'type': 10001, 621 params: ['sys.color.ohos_id_color_titlebar_icon_pressed'], 622 'bundleName': '__harDefaultBundleName__', 623 'moduleName': '__harDefaultModuleName__' 624 } : { 625 'id': -1, 626 'type': 10001, 627 params: ['sys.color.ohos_id_color_titlebar_icon'], 628 'bundleName': '__harDefaultBundleName__', 629 'moduleName': '__harDefaultModuleName__' 630 }; 631 } 632 633 getMoreIconBgColor() { 634 if (this.isMoreIconOnClick) { 635 return { 636 'id': -1, 637 'type': 10001, 638 params: ['sys.color.ohos_id_color_click_effect'], 639 'bundleName': '__harDefaultBundleName__', 640 'moduleName': '__harDefaultModuleName__' 641 }; 642 } else if (this.isMoreIconOnHover) { 643 return { 644 'id': -1, 645 'type': 10001, 646 params: ['sys.color.ohos_id_color_hover'], 647 'bundleName': '__harDefaultBundleName__', 648 'moduleName': '__harDefaultModuleName__' 649 }; 650 } else { 651 return Color.Transparent; 652 } 653 } 654 655 aboutToAppear() { 656 try { 657 let uiContent = this.getUIContext(); 658 this.isFollowingSystemFontScale = uiContent.isFollowingSystemFontScale(); 659 this.maxFontScale = uiContent.getMaxFontScale(); 660 } catch (exception) { 661 let code = exception.code; 662 let message = exception.message; 663 hilog.error(0x3900, 'Ace', `Faild to decideFontScale,cause, code: ${code}, message: ${message}`); 664 } 665 this.menuItems.forEach((item, index) => { 666 if (item.isEnabled && this.firstFocusableIndex == -1 && 667 index > CollapsibleMenuSection.maxCountOfVisibleItems - 2) { 668 this.firstFocusableIndex = this.index * 1000 + index + 1; 669 } 670 }); 671 } 672 673 decideFontScale() { 674 let uiContent = this.getUIContext(); 675 this.systemFontScale = uiContent.getHostContext()?.config?.fontSizeScale ?? 1; 676 if (!this.isFollowingSystemFontScale) { 677 return 1; 678 } 679 return Math.min(this.systemFontScale, this.maxFontScale); 680 } 681 682 initialRender() { 683 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 684 this.observeComponentCreation2((elmtId, isInitialRender) => { 685 Column.create(); 686 Column.height('100%'); 687 Column.margin({ 688 right: { 689 'id': -1, 690 'type': 10002, 691 params: ['sys.float.ohos_id_default_padding_end'], 692 'bundleName': '__harDefaultBundleName__', 693 'moduleName': '__harDefaultModuleName__' 694 } 695 }); 696 Column.justifyContent(FlexAlign.Center); 697 }, Column); 698 this.observeComponentCreation2((elmtId, isInitialRender) => { 699 Row.create(); 700 }, Row); 701 this.observeComponentCreation2((elmtId, isInitialRender) => { 702 If.create(); 703 if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) { 704 this.ifElseBranchUpdateFunction(0, () => { 705 this.observeComponentCreation2((elmtId, isInitialRender) => { 706 ForEach.create(); 707 const forEachItemGenFunction = (_item, index) => { 708 const item = _item; 709 { 710 this.observeComponentCreation2((elmtId, isInitialRender) => { 711 if (isInitialRender) { 712 let componentCall = new ImageMenuItem(this, { 713 item: item, 714 index: this.index * 1000 + index + 1 715 }, undefined, elmtId, () => { 716 }, { 717 page: 'library/src/main/ets/components/mainpage/selecttitlebar.ets', 718 line: 266, 719 col: 13 720 }); 721 ViewPU.create(componentCall); 722 let paramsLambda = () => { 723 return { 724 item: item, 725 index: this.index * 1000 + index + 1 726 }; 727 }; 728 componentCall.paramsGenerator_ = paramsLambda; 729 } else { 730 this.updateStateVarsOfChildByElmtId(elmtId, {}); 731 } 732 }, { name: 'ImageMenuItem' }); 733 } 734 }; 735 this.forEachUpdateFunction(elmtId, this.menuItems, forEachItemGenFunction, undefined, true, false); 736 }, ForEach); 737 ForEach.pop(); 738 }); 739 } else { 740 this.ifElseBranchUpdateFunction(1, () => { 741 this.observeComponentCreation2((elmtId, isInitialRender) => { 742 ForEach.create(); 743 const forEachItemGenFunction = (_item, index) => { 744 const item = _item; 745 { 746 this.observeComponentCreation2((elmtId, isInitialRender) => { 747 if (isInitialRender) { 748 let componentCall = new ImageMenuItem(this, { 749 item: item, 750 index: this.index * 1000 + index + 1 751 }, undefined, elmtId, () => { 752 }, { 753 page: 'library/src/main/ets/components/mainpage/selecttitlebar.ets', 754 line: 271, 755 col: 15 756 }); 757 ViewPU.create(componentCall); 758 let paramsLambda = () => { 759 return { 760 item: item, 761 index: this.index * 1000 + index + 1 762 }; 763 }; 764 componentCall.paramsGenerator_ = paramsLambda; 765 } else { 766 this.updateStateVarsOfChildByElmtId(elmtId, {}); 767 } 768 }, { name: 'ImageMenuItem' }); 769 } 770 }; 771 this.forEachUpdateFunction(elmtId, this.menuItems.slice(0, 772 CollapsibleMenuSection.maxCountOfVisibleItems - 1), forEachItemGenFunction, undefined, true, false); 773 }, ForEach); 774 ForEach.pop(); 775 this.observeComponentCreation2((elmtId, isInitialRender) => { 776 Row.create(); 777 Row.width(ImageMenuItem.imageHotZoneWidth); 778 Row.height(ImageMenuItem.imageHotZoneWidth); 779 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 780 Row.foregroundColor(this.getMoreIconFgColor()); 781 Row.backgroundColor(this.getMoreIconBgColor()); 782 Row.justifyContent(FlexAlign.Center); 783 ViewStackProcessor.visualState('focused'); 784 Row.border({ 785 radius: { 786 'id': -1, 787 'type': 10002, 788 params: ['sys.float.ohos_id_corner_radius_clicked'], 789 'bundleName': '__harDefaultBundleName__', 790 'moduleName': '__harDefaultModuleName__' 791 }, 792 width: ImageMenuItem.focusBorderWidth, 793 color: { 794 'id': -1, 795 'type': 10001, 796 params: ['sys.color.ohos_id_color_focused_outline'], 797 'bundleName': '__harDefaultBundleName__', 798 'moduleName': '__harDefaultModuleName__' 799 }, 800 style: BorderStyle.Solid 801 }); 802 ViewStackProcessor.visualState('normal'); 803 Row.border({ 804 radius: { 805 'id': -1, 806 'type': 10002, 807 params: ['sys.float.ohos_id_corner_radius_clicked'], 808 'bundleName': '__harDefaultBundleName__', 809 'moduleName': '__harDefaultModuleName__' 810 }, 811 width: 0 812 }); 813 ViewStackProcessor.visualState(); 814 Row.onFocus(() => this.isMoreIconOnFocus = true); 815 Row.onBlur(() => this.isMoreIconOnFocus = false); 816 Row.onHover((isOn) => this.isMoreIconOnHover = isOn); 817 Row.onKeyEvent((event) => { 818 if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { 819 return; 820 } 821 if (event.type === KeyType.Down) { 822 this.isMoreIconOnClick = true; 823 } 824 if (event.type === KeyType.Up) { 825 this.isMoreIconOnClick = false; 826 } 827 }); 828 Row.onTouch((event) => { 829 if (event.type === TouchType.Down) { 830 this.isMoreIconOnClick = true; 831 } 832 if (event.type === TouchType.Up || event.type === TouchType.Cancel) { 833 this.isMoreIconOnClick = false; 834 if (this.fontSize >= this.minFontSize) { 835 this.dialogController?.close(); 836 } 837 } 838 }); 839 Row.onClick(() => this.isPopupShown = true); 840 Gesture.create(GesturePriority.Low); 841 LongPressGesture.create({ repeat: false, duration: this.longPressTime }); 842 LongPressGesture.onAction((event) => { 843 this.fontSize = this.decideFontScale(); 844 if (event) { 845 if (this.fontSize >= this.minFontSize) { 846 this.dialogController?.open(); 847 } 848 } 849 }); 850 LongPressGesture.pop(); 851 Gesture.pop(); 852 Row.bindPopup(this.isPopupShown, { 853 builder: { builder: this.popupBuilder.bind(this) }, 854 placement: Placement.Bottom, 855 popupColor: Color.White, 856 enableArrow: false, 857 onStateChange: (e) => { 858 this.isPopupShown = e.isVisible; 859 if (!e.isVisible) { 860 this.isMoreIconOnClick = false; 861 } 862 } 863 }); 864 }, Row); 865 this.observeComponentCreation2((elmtId, isInitialRender) => { 866 Image.create(PUBLIC_MORE); 867 Image.width(ImageMenuItem.imageSize); 868 Image.height(ImageMenuItem.imageSize); 869 Image.focusable(true); 870 Image.draggable(false); 871 Image.fillColor({ 872 'id': -1, 873 'type': 10001, 874 params: ['sys.color.icon_primary'], 875 'bundleName': '__harDefaultBundleName__', 876 'moduleName': '__harDefaultModuleName__' 877 }); 878 }, Image); 879 Row.pop(); 880 }); 881 } 882 }, If); 883 If.pop(); 884 Row.pop(); 885 Column.pop(); 886 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 887 } 888 889 popupBuilder(parent = null) { 890 this.observeComponentCreation2((elmtId, isInitialRender) => { 891 Column.create(); 892 Column.width( 893 ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum 894 ); 895 Column.margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding }); 896 Column.onAppear(() => { 897 focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex); 898 }); 899 }, Column); 900 this.observeComponentCreation2((elmtId, isInitialRender) => { 901 ForEach.create(); 902 const forEachItemGenFunction = (_item, index) => { 903 const item = _item; 904 { 905 this.observeComponentCreation2((elmtId, isInitialRender) => { 906 if (isInitialRender) { 907 let componentCall = new ImageMenuItem(this, { 908 item: item, 909 index: this.index * 1000 + 910 CollapsibleMenuSection.maxCountOfVisibleItems + index, 911 isPopup: true 912 }, undefined, elmtId, () => { 913 }, { 914 page: 'library/src/main/ets/components/mainpage/selecttitlebar.ets', 915 line: 365, 916 col: 11 917 }); 918 ViewPU.create(componentCall); 919 let paramsLambda = () => { 920 return { 921 item: item, 922 index: this.index * 1000 + 923 CollapsibleMenuSection.maxCountOfVisibleItems + index, 924 isPopup: true 925 }; 926 }; 927 componentCall.paramsGenerator_ = paramsLambda; 928 } else { 929 this.updateStateVarsOfChildByElmtId(elmtId, {}); 930 } 931 }, { name: 'ImageMenuItem' }); 932 } 933 }; 934 this.forEachUpdateFunction(elmtId, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, 935 this.menuItems.length), forEachItemGenFunction, undefined, true, false); 936 }, ForEach); 937 ForEach.pop(); 938 Column.pop(); 939 } 940 941 rerender() { 942 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 943 this.updateDirtyElements(); 944 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 945 } 946} 947 948CollapsibleMenuSection.maxCountOfVisibleItems = 3; 949CollapsibleMenuSection.focusPadding = 4; 950CollapsibleMenuSection.marginsNum = 2; 951 952class ImageMenuItem extends ViewPU { 953 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 954 super(parent, __localStorage, elmtId, extraInfo); 955 if (typeof paramsLambda === 'function') { 956 this.paramsGenerator_ = paramsLambda; 957 } 958 this.item = {}; 959 this.index = 0; 960 this.longPressTime = 500; 961 this.minFontSize = 1.75; 962 this.isFollowingSystemFontScale = false; 963 this.maxFontScale = 1; 964 this.systemFontScale = 1; 965 this.isPopup = false; 966 this.__isOnFocus = new ObservedPropertySimplePU(false, this, 'isOnFocus'); 967 this.__isOnHover = new ObservedPropertySimplePU(false, this, 'isOnHover'); 968 this.__isOnClick = new ObservedPropertySimplePU(false, this, 'isOnClick'); 969 this.__fontSize = new SynchedPropertySimpleOneWayPU(params.fontSize, this, 'fontSize'); 970 this.dialogController = new CustomDialogController({ 971 builder: () => { 972 let jsDialog = new SelectTitleBarDialog(this, { 973 cancel: () => { 974 }, 975 confirm: () => { 976 }, 977 selectTitleDialog: this.item, 978 selectTitleBarDialog: this.item.label ? this.item.label : this.textDialog(), 979 fontSize: this.fontSize, 980 }, undefined, -1, () => { 981 }, { page: 'library/src/main/ets/components/mainpage/selecttitlebar.ets', line: 401, col: 14 }); 982 jsDialog.setController(this.dialogController); 983 ViewPU.create(jsDialog); 984 let paramsLambda = () => { 985 return { 986 cancel: () => { 987 }, 988 confirm: () => { 989 }, 990 selectTitleDialog: this.item, 991 selectTitleBarDialog: this.item.label ? this.item.label : this.textDialog(), 992 fontSize: this.fontSize 993 }; 994 }; 995 jsDialog.paramsGenerator_ = paramsLambda; 996 }, 997 maskColor: Color.Transparent, 998 isModal: true, 999 customStyle: true 1000 }, this); 1001 this.setInitiallyProvidedValue(params); 1002 this.finalizeConstruction(); 1003 } 1004 1005 setInitiallyProvidedValue(params) { 1006 if (params.item !== undefined) { 1007 this.item = params.item; 1008 } 1009 if (params.index !== undefined) { 1010 this.index = params.index; 1011 } 1012 if (params.longPressTime !== undefined) { 1013 this.longPressTime = params.longPressTime; 1014 } 1015 if (params.minFontSize !== undefined) { 1016 this.minFontSize = params.minFontSize; 1017 } 1018 if (params.isFollowingSystemFontScale !== undefined) { 1019 this.isFollowingSystemFontScale = params.isFollowingSystemFontScale; 1020 } 1021 if (params.maxFontScale !== undefined) { 1022 this.maxFontScale = params.maxFontScale; 1023 } 1024 if (params.systemFontScale !== undefined) { 1025 this.systemFontScale = params.systemFontScale; 1026 } 1027 if (params.isPopup !== undefined) { 1028 this.isPopup = params.isPopup; 1029 } 1030 if (params.isOnFocus !== undefined) { 1031 this.isOnFocus = params.isOnFocus; 1032 } 1033 if (params.isOnHover !== undefined) { 1034 this.isOnHover = params.isOnHover; 1035 } 1036 if (params.isOnClick !== undefined) { 1037 this.isOnClick = params.isOnClick; 1038 } 1039 if (params.fontSize === undefined) { 1040 this.__fontSize.set(1); 1041 } 1042 if (params.dialogController !== undefined) { 1043 this.dialogController = params.dialogController; 1044 } 1045 } 1046 1047 updateStateVars(params) { 1048 this.__fontSize.reset(params.fontSize); 1049 } 1050 1051 purgeVariableDependenciesOnElmtId(rmElmtId) { 1052 this.__isOnFocus.purgeDependencyOnElmtId(rmElmtId); 1053 this.__isOnHover.purgeDependencyOnElmtId(rmElmtId); 1054 this.__isOnClick.purgeDependencyOnElmtId(rmElmtId); 1055 this.__fontSize.purgeDependencyOnElmtId(rmElmtId); 1056 } 1057 1058 aboutToBeDeleted() { 1059 this.__isOnFocus.aboutToBeDeleted(); 1060 this.__isOnHover.aboutToBeDeleted(); 1061 this.__isOnClick.aboutToBeDeleted(); 1062 this.__fontSize.aboutToBeDeleted(); 1063 SubscriberManager.Get().delete(this.id__()); 1064 this.aboutToBeDeletedInternal(); 1065 } 1066 1067 get isOnFocus() { 1068 return this.__isOnFocus.get(); 1069 } 1070 1071 set isOnFocus(newValue) { 1072 this.__isOnFocus.set(newValue); 1073 } 1074 1075 get isOnHover() { 1076 return this.__isOnHover.get(); 1077 } 1078 1079 set isOnHover(newValue) { 1080 this.__isOnHover.set(newValue); 1081 } 1082 1083 get isOnClick() { 1084 return this.__isOnClick.get(); 1085 } 1086 1087 set isOnClick(newValue) { 1088 this.__isOnClick.set(newValue); 1089 } 1090 1091 get fontSize() { 1092 return this.__fontSize.get(); 1093 } 1094 1095 set fontSize(newValue) { 1096 this.__fontSize.set(newValue); 1097 } 1098 1099 textDialog() { 1100 if (this.item.value === PUBLIC_MORE) { 1101 return { 1102 'id': -1, 1103 'type': 10003, 1104 params: ['sys.string.ohos_toolbar_more'], 1105 'bundleName': '__harDefaultBundleName__', 1106 'moduleName': '__harDefaultModuleName__' 1107 }; 1108 } else if (this.item.value === PUBLIC_BACK) { 1109 return { 1110 'id': -1, 1111 'type': 10003, 1112 params: ['sys.string.icon_back'], 1113 'bundleName': '__harDefaultBundleName__', 1114 'moduleName': '__harDefaultModuleName__' 1115 }; 1116 } else { 1117 return this.item.label ? this.item.label : ''; 1118 } 1119 } 1120 1121 getFgColor() { 1122 return this.isOnClick ? 1123 { 1124 'id': -1, 1125 'type': 10001, 1126 params: ['sys.color.ohos_id_color_titlebar_icon_pressed'], 1127 'bundleName': '__harDefaultBundleName__', 1128 'moduleName': '__harDefaultModuleName__' 1129 } : { 1130 'id': -1, 1131 'type': 10001, 1132 params: ['sys.color.ohos_id_color_titlebar_icon'], 1133 'bundleName': '__harDefaultBundleName__', 1134 'moduleName': '__harDefaultModuleName__' 1135 }; 1136 } 1137 1138 getBgColor() { 1139 if (this.isOnClick) { 1140 return { 1141 'id': -1, 1142 'type': 10001, 1143 params: ['sys.color.ohos_id_color_click_effect'], 1144 'bundleName': '__harDefaultBundleName__', 1145 'moduleName': '__harDefaultModuleName__' 1146 }; 1147 } else if (this.isOnHover) { 1148 return { 1149 'id': -1, 1150 'type': 10001, 1151 params: ['sys.color.ohos_id_color_hover'], 1152 'bundleName': '__harDefaultBundleName__', 1153 'moduleName': '__harDefaultModuleName__' 1154 }; 1155 } else { 1156 return Color.Transparent; 1157 } 1158 } 1159 1160 aboutToAppear() { 1161 try { 1162 let uiContent = this.getUIContext(); 1163 this.isFollowingSystemFontScale = uiContent.isFollowingSystemFontScale(); 1164 this.maxFontScale = uiContent.getMaxFontScale(); 1165 } 1166 catch (exception) { 1167 let code = exception.code; 1168 let message = exception.message; 1169 hilog.error(0x3900, 'Ace', `Faild to decideFontScale,cause, code: ${code}, message: ${message}`); 1170 } 1171 } 1172 1173 decideFontScale() { 1174 let uiContent = this.getUIContext(); 1175 this.systemFontScale = uiContent.getHostContext()?.config?.fontSizeScale ?? 1; 1176 if (!this.isFollowingSystemFontScale) { 1177 return 1; 1178 } 1179 return Math.min(this.systemFontScale, this.maxFontScale); 1180 } 1181 1182 initialRender() { 1183 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 1184 this.observeComponentCreation2((elmtId, isInitialRender) => { 1185 Row.create(); 1186 Row.width(ImageMenuItem.imageHotZoneWidth); 1187 Row.height(ImageMenuItem.imageHotZoneWidth); 1188 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 1189 Row.foregroundColor(this.getFgColor()); 1190 Row.backgroundColor(this.getBgColor()); 1191 Row.justifyContent(FlexAlign.Center); 1192 Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity); 1193 ViewStackProcessor.visualState('focused'); 1194 Row.border({ 1195 radius: { 1196 'id': -1, 1197 'type': 10002, 1198 params: ['sys.float.ohos_id_corner_radius_clicked'], 1199 'bundleName': '__harDefaultBundleName__', 1200 'moduleName': '__harDefaultModuleName__' 1201 }, 1202 width: ImageMenuItem.focusBorderWidth, 1203 color: { 1204 'id': -1, 1205 'type': 10001, 1206 params: ['sys.color.ohos_id_color_focused_outline'], 1207 'bundleName': '__harDefaultBundleName__', 1208 'moduleName': '__harDefaultModuleName__' 1209 }, 1210 style: BorderStyle.Solid 1211 }); 1212 ViewStackProcessor.visualState('normal'); 1213 Row.border({ 1214 radius: { 1215 'id': -1, 1216 'type': 10002, 1217 params: ['sys.float.ohos_id_corner_radius_clicked'], 1218 'bundleName': '__harDefaultBundleName__', 1219 'moduleName': '__harDefaultModuleName__' 1220 }, 1221 width: 0 1222 }); 1223 ViewStackProcessor.visualState(); 1224 Row.onFocus(() => { 1225 if (!this.item.isEnabled) { 1226 return; 1227 } 1228 this.isOnFocus = true; 1229 }); 1230 Row.onBlur(() => this.isOnFocus = false); 1231 Row.onHover((isOn) => { 1232 if (!this.item.isEnabled) { 1233 return; 1234 } 1235 this.isOnHover = isOn; 1236 }); 1237 Row.onKeyEvent((event) => { 1238 if (!this.item.isEnabled) { 1239 return; 1240 } 1241 if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { 1242 return; 1243 } 1244 if (event.type === KeyType.Down) { 1245 this.isOnClick = true; 1246 } 1247 if (event.type === KeyType.Up) { 1248 this.isOnClick = false; 1249 } 1250 }); 1251 Row.onTouch((event) => { 1252 if (!this.item.isEnabled) { 1253 return; 1254 } 1255 if (event.type === TouchType.Down) { 1256 this.isOnClick = true; 1257 } 1258 if (event.type === TouchType.Up || event.type === TouchType.Cancel) { 1259 this.isOnClick = false; 1260 if (this.fontSize >= this.minFontSize && this.isPopup === false) { 1261 this.dialogController?.close(); 1262 } 1263 } 1264 }); 1265 Row.onClick(() => this.item.isEnabled && this.item.action && this.item.action()); 1266 Gesture.create(GesturePriority.Low); 1267 LongPressGesture.create({ repeat: false, duration: this.longPressTime }); 1268 LongPressGesture.onAction((event) => { 1269 this.fontSize = this.decideFontScale(); 1270 if (event) { 1271 if (this.fontSize >= this.minFontSize && this.isPopup === false) { 1272 this.dialogController?.open(); 1273 } 1274 } 1275 }); 1276 LongPressGesture.pop(); 1277 Gesture.pop(); 1278 }, Row); 1279 this.observeComponentCreation2((elmtId, isInitialRender) => { 1280 Image.create(this.item.value); 1281 Image.draggable(false); 1282 Image.width(ImageMenuItem.imageSize); 1283 Image.height(ImageMenuItem.imageSize); 1284 Image.focusable(this.item.isEnabled); 1285 Image.key(ImageMenuItem.focusablePrefix + this.index); 1286 Image.fillColor({ 1287 'id': -1, 1288 'type': 10001, 1289 params: ['sys.color.icon_primary'], 1290 'bundleName': '__harDefaultBundleName__', 1291 'moduleName': '__harDefaultModuleName__' 1292 }); 1293 }, Image); 1294 Row.pop(); 1295 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 1296 } 1297 1298 rerender() { 1299 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 1300 this.updateDirtyElements(); 1301 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 1302 } 1303} 1304 1305ImageMenuItem.imageSize = 24; 1306ImageMenuItem.imageHotZoneWidth = 48; 1307ImageMenuItem.buttonBorderRadius = 8; 1308ImageMenuItem.focusBorderWidth = 2; 1309ImageMenuItem.disabledImageOpacity = 0.4; 1310ImageMenuItem.focusablePrefix = 'Id-SelectTitleBar-ImageMenuItem-'; 1311 1312class SelectTitleBarDialog extends ViewPU { 1313 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 1314 super(parent, __localStorage, elmtId, extraInfo); 1315 if (typeof paramsLambda === 'function') { 1316 this.paramsGenerator_ = paramsLambda; 1317 } 1318 this.selectTitleDialog = {}; 1319 this.callbackId = undefined; 1320 this.selectTitleBarDialog = ''; 1321 this.mainWindowStage = undefined; 1322 this.controller = undefined; 1323 this.minFontSize = 1.75; 1324 this.maxFontSize = 3.2; 1325 this.screenWidth = 640; 1326 this.verticalScreenLines = 6; 1327 this.horizontalsScreenLines = 1; 1328 this.__mainWindow = this.createStorageLink('mainWindow', undefined, 'mainWindow'); 1329 this.__fontSize = new ObservedPropertySimplePU(1, this, 'fontSize'); 1330 this.__maxLines = new ObservedPropertySimplePU(1, this, 'maxLines'); 1331 this.__windowStandardHeight = this.createStorageProp('windowStandardHeight', 0, 'windowStandardHeight'); 1332 this.cancel = () => { 1333 }; 1334 this.confirm = () => { 1335 }; 1336 this.setInitiallyProvidedValue(params); 1337 this.finalizeConstruction(); 1338 } 1339 1340 setInitiallyProvidedValue(params) { 1341 if (params.selectTitleDialog !== undefined) { 1342 this.selectTitleDialog = params.selectTitleDialog; 1343 } 1344 if (params.callbackId !== undefined) { 1345 this.callbackId = params.callbackId; 1346 } 1347 if (params.selectTitleBarDialog !== undefined) { 1348 this.selectTitleBarDialog = params.selectTitleBarDialog; 1349 } 1350 if (params.mainWindowStage !== undefined) { 1351 this.mainWindowStage = params.mainWindowStage; 1352 } 1353 if (params.controller !== undefined) { 1354 this.controller = params.controller; 1355 } 1356 if (params.minFontSize !== undefined) { 1357 this.minFontSize = params.minFontSize; 1358 } 1359 if (params.maxFontSize !== undefined) { 1360 this.maxFontSize = params.maxFontSize; 1361 } 1362 if (params.screenWidth !== undefined) { 1363 this.screenWidth = params.screenWidth; 1364 } 1365 if (params.verticalScreenLines !== undefined) { 1366 this.verticalScreenLines = params.verticalScreenLines; 1367 } 1368 if (params.horizontalsScreenLines !== undefined) { 1369 this.horizontalsScreenLines = params.horizontalsScreenLines; 1370 } 1371 if (params.fontSize !== undefined) { 1372 this.fontSize = params.fontSize; 1373 } 1374 if (params.maxLines !== undefined) { 1375 this.maxLines = params.maxLines; 1376 } 1377 if (params.cancel !== undefined) { 1378 this.cancel = params.cancel; 1379 } 1380 if (params.confirm !== undefined) { 1381 this.confirm = params.confirm; 1382 } 1383 } 1384 1385 updateStateVars(params) { 1386 } 1387 1388 purgeVariableDependenciesOnElmtId(rmElmtId) { 1389 this.__mainWindow.purgeDependencyOnElmtId(rmElmtId); 1390 this.__fontSize.purgeDependencyOnElmtId(rmElmtId); 1391 this.__maxLines.purgeDependencyOnElmtId(rmElmtId); 1392 this.__windowStandardHeight.purgeDependencyOnElmtId(rmElmtId); 1393 } 1394 1395 aboutToBeDeleted() { 1396 this.__mainWindow.aboutToBeDeleted(); 1397 this.__fontSize.aboutToBeDeleted(); 1398 this.__maxLines.aboutToBeDeleted(); 1399 this.__windowStandardHeight.aboutToBeDeleted(); 1400 SubscriberManager.Get().delete(this.id__()); 1401 this.aboutToBeDeletedInternal(); 1402 } 1403 1404 setController(ctr) { 1405 this.controller = ctr; 1406 } 1407 1408 get mainWindow() { 1409 return this.__mainWindow.get(); 1410 } 1411 1412 set mainWindow(newValue) { 1413 this.__mainWindow.set(newValue); 1414 } 1415 1416 get fontSize() { 1417 return this.__fontSize.get(); 1418 } 1419 1420 set fontSize(newValue) { 1421 this.__fontSize.set(newValue); 1422 } 1423 1424 get maxLines() { 1425 return this.__maxLines.get(); 1426 } 1427 1428 set maxLines(newValue) { 1429 this.__maxLines.set(newValue); 1430 } 1431 1432 get windowStandardHeight() { 1433 return this.__windowStandardHeight.get(); 1434 } 1435 1436 set windowStandardHeight(newValue) { 1437 this.__windowStandardHeight.set(newValue); 1438 } 1439 1440 initialRender() { 1441 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 1442 this.observeComponentCreation2((elmtId, isInitialRender) => { 1443 If.create(); 1444 if (this.selectTitleBarDialog) { 1445 this.ifElseBranchUpdateFunction(0, () => { 1446 this.observeComponentCreation2((elmtId, isInitialRender) => { 1447 Column.create(); 1448 Column.width(this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG); 1449 Column.constraintSize({ 1450 minHeight: this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG 1451 }); 1452 Column.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK); 1453 Column.shadow(ShadowStyle.OUTER_DEFAULT_LG); 1454 Column.borderRadius({ 1455 'id': -1, 1456 'type': 10002, 1457 params: ['sys.float.corner_radius_level10'], 1458 'bundleName': '__harDefaultBundleName__', 1459 'moduleName': '__harDefaultModuleName__' 1460 }); 1461 }, Column); 1462 this.observeComponentCreation2((elmtId, isInitialRender) => { 1463 Image.create(this.selectTitleDialog.value); 1464 Image.width(IMAGE_SIZE); 1465 Image.height(IMAGE_SIZE); 1466 Image.margin({ 1467 top: { 1468 'id': -1, 1469 'type': 10002, 1470 params: ['sys.float.padding_level24'], 1471 'bundleName': '__harDefaultBundleName__', 1472 'moduleName': '__harDefaultModuleName__' 1473 }, 1474 bottom: { 1475 'id': -1, 1476 'type': 10002, 1477 params: ['sys.float.padding_level8'], 1478 'bundleName': '__harDefaultBundleName__', 1479 'moduleName': '__harDefaultModuleName__' 1480 }, 1481 }); 1482 Image.fillColor({ 1483 'id': -1, 1484 'type': 10001, 1485 params: ['sys.color.icon_primary'], 1486 'bundleName': '__harDefaultBundleName__', 1487 'moduleName': '__harDefaultModuleName__' 1488 }); 1489 }, Image); 1490 this.observeComponentCreation2((elmtId, isInitialRender) => { 1491 Column.create(); 1492 Column.width('100%'); 1493 Column.padding({ 1494 left: { 1495 'id': -1, 1496 'type': 10002, 1497 params: ['sys.float.padding_level4'], 1498 'bundleName': '__harDefaultBundleName__', 1499 'moduleName': '__harDefaultModuleName__' 1500 }, 1501 right: { 1502 'id': -1, 1503 'type': 10002, 1504 params: ['sys.float.padding_level4'], 1505 'bundleName': '__harDefaultBundleName__', 1506 'moduleName': '__harDefaultModuleName__' 1507 }, 1508 bottom: { 1509 'id': -1, 1510 'type': 10002, 1511 params: ['sys.float.padding_level12'], 1512 'bundleName': '__harDefaultBundleName__', 1513 'moduleName': '__harDefaultModuleName__' 1514 }, 1515 }); 1516 }, Column); 1517 this.observeComponentCreation2((elmtId, isInitialRender) => { 1518 Text.create(this.selectTitleBarDialog); 1519 Text.fontSize(TEXT_EDITABLE_DIALOG); 1520 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1521 Text.maxLines(this.maxLines); 1522 Text.width('100%'); 1523 Text.textAlign(TextAlign.Center); 1524 Text.fontColor({ 1525 'id': -1, 1526 'type': 10001, 1527 params: ['sys.color.font_primary'], 1528 'bundleName': '__harDefaultBundleName__', 1529 'moduleName': '__harDefaultModuleName__' 1530 }); 1531 }, Text); 1532 Text.pop(); 1533 Column.pop(); 1534 Column.pop(); 1535 }); 1536 } else { 1537 this.ifElseBranchUpdateFunction(1, () => { 1538 this.observeComponentCreation2((elmtId, isInitialRender) => { 1539 Column.create(); 1540 Column.width(this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG); 1541 Column.constraintSize({ 1542 minHeight: this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG 1543 }); 1544 Column.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK); 1545 Column.shadow(ShadowStyle.OUTER_DEFAULT_LG); 1546 Column.borderRadius({ 1547 'id': -1, 1548 'type': 10002, 1549 params: ['sys.float.corner_radius_level10'], 1550 'bundleName': '__harDefaultBundleName__', 1551 'moduleName': '__harDefaultModuleName__' 1552 }); 1553 Column.justifyContent(FlexAlign.Center); 1554 }, Column); 1555 this.observeComponentCreation2((elmtId, isInitialRender) => { 1556 Image.create(this.selectTitleDialog.value); 1557 Image.width(IMAGE_SIZE); 1558 Image.height(IMAGE_SIZE); 1559 Image.fillColor({ 1560 'id': -1, 1561 'type': 10001, 1562 params: ['sys.color.icon_primary'], 1563 'bundleName': '__harDefaultBundleName__', 1564 'moduleName': '__harDefaultModuleName__' 1565 }); 1566 }, Image); 1567 Column.pop(); 1568 }); 1569 } 1570 }, If); 1571 If.pop(); 1572 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 1573 } 1574 1575 async aboutToAppear() { 1576 let context = this.getUIContext().getHostContext(); 1577 this.mainWindowStage = context.windowStage.getMainWindowSync(); 1578 let properties = this.mainWindowStage.getWindowProperties(); 1579 let rect = properties.windowRect; 1580 if (px2vp(rect.height) > this.screenWidth) { 1581 this.maxLines = this.verticalScreenLines; 1582 } else { 1583 this.maxLines = this.horizontalsScreenLines; 1584 } 1585 } 1586 1587 rerender() { 1588 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 1589 this.updateDirtyElements(); 1590 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 1591 } 1592} 1593export default { 1594 SelectTitleBar: SelectTitleBar, 1595}; 1596