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 }); 19} 20 21const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; 22const hilog = requireNapi('hilog'); 23const SymbolGlyphModifier = requireNapi('arkui.modifier').SymbolGlyphModifier; 24 25const PUBLIC_BACK = { 26 'id': -1, 27 'type': 40000, 28 params: ['sys.symbol.arrow_left'], 29 'bundleName': '__harDefaultBundleName__', 30 'moduleName': '__harDefaultModuleName__', 31}; 32const PUBLIC_MORE = { 33 'id': -1, 34 'type': 40000, 35 params: ['sys.symbol.dot_grid_2x2'], 36 'bundleName': '__harDefaultBundleName__', 37 'moduleName': '__harDefaultModuleName__', 38}; 39const RESOURCE_TYPE_SYMBOL = 40000; 40const TEXT_EDITABLE_DIALOG = '18.3fp'; 41const IMAGE_SIZE = '64vp'; 42const MAX_DIALOG = '256vp'; 43const MIN_DIALOG = '216vp'; 44 45class ButtonGestureModifier { 46 constructor(controller) { 47 this.fontSize = 1; 48 this.controller = null; 49 this.controller = controller; 50 } 51 52 applyGesture(event) { 53 if (this.fontSize >= ButtonGestureModifier.minFontSize) { 54 event.addGesture(new LongPressGestureHandler({ 55 repeat: false, 56 duration: ButtonGestureModifier.longPressTime 57 }) 58 .onAction(() => { 59 if (event) { 60 this.controller?.open(); 61 } 62 }) 63 .onActionEnd(() => { 64 this.controller?.close(); 65 })); 66 } else { 67 event.clearGestures(); 68 } 69 } 70} 71 72ButtonGestureModifier.longPressTime = 500; 73ButtonGestureModifier.minFontSize = 1.75; 74 75export class SelectTitleBar extends ViewPU { 76 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 77 super(parent, __localStorage, elmtId, extraInfo); 78 if (typeof paramsLambda === 'function') { 79 this.paramsGenerator_ = paramsLambda; 80 } 81 this.__selected = new SynchedPropertySimpleOneWayPU(params.selected, this, 'selected'); 82 this.options = []; 83 this.menuItems = []; 84 this.subtitle = ''; 85 this.badgeValue = 0; 86 this.hidesBackButton = false; 87 this.messageDesc = ''; 88 this.onSelected = () => { 89 }; 90 this.__selectMaxWidth = new ObservedPropertySimplePU(0, this, 'selectMaxWidth'); 91 this.__fontSize = new ObservedPropertySimplePU(1, this, 'fontSize'); 92 this.setInitiallyProvidedValue(params); 93 this.finalizeConstruction(); 94 } 95 96 setInitiallyProvidedValue(params) { 97 if (params.selected === undefined) { 98 this.__selected.set(0); 99 } 100 if (params.options !== undefined) { 101 this.options = params.options; 102 } 103 if (params.menuItems !== undefined) { 104 this.menuItems = params.menuItems; 105 } 106 if (params.subtitle !== undefined) { 107 this.subtitle = params.subtitle; 108 } 109 if (params.badgeValue !== undefined) { 110 this.badgeValue = params.badgeValue; 111 } 112 if (params.hidesBackButton !== undefined) { 113 this.hidesBackButton = params.hidesBackButton; 114 } 115 if (params.messageDesc !== undefined) { 116 this.messageDesc = params.messageDesc; 117 } 118 if (params.onSelected !== undefined) { 119 this.onSelected = params.onSelected; 120 } 121 if (params.selectMaxWidth !== undefined) { 122 this.selectMaxWidth = params.selectMaxWidth; 123 } 124 if (params.fontSize !== undefined) { 125 this.fontSize = params.fontSize; 126 } 127 } 128 129 updateStateVars(params) { 130 this.__selected.reset(params.selected); 131 } 132 133 purgeVariableDependenciesOnElmtId(rmElmtId) { 134 this.__selected.purgeDependencyOnElmtId(rmElmtId); 135 this.__selectMaxWidth.purgeDependencyOnElmtId(rmElmtId); 136 this.__fontSize.purgeDependencyOnElmtId(rmElmtId); 137 } 138 139 aboutToBeDeleted() { 140 this.__selected.aboutToBeDeleted(); 141 this.__selectMaxWidth.aboutToBeDeleted(); 142 this.__fontSize.aboutToBeDeleted(); 143 SubscriberManager.Get().delete(this.id__()); 144 this.aboutToBeDeletedInternal(); 145 } 146 147 get selected() { 148 return this.__selected.get(); 149 } 150 151 set selected(newValue) { 152 this.__selected.set(newValue); 153 } 154 155 get selectMaxWidth() { 156 return this.__selectMaxWidth.get(); 157 } 158 159 set selectMaxWidth(newValue) { 160 this.__selectMaxWidth.set(newValue); 161 } 162 163 get fontSize() { 164 return this.__fontSize.get(); 165 } 166 167 set fontSize(newValue) { 168 this.__fontSize.set(newValue); 169 } 170 171 getStringByNameSync(contextName) { 172 let uiContext = ''; 173 try { 174 uiContext = getContext()?.resourceManager?.getStringByNameSync(contextName); 175 } catch (exception) { 176 let code = exception?.code; 177 let message = exception?.message; 178 hilog.error(0x3900, 'Ace', `Faild to getStringByNameSync,cause, code: ${code}, message: ${message}`); 179 } 180 return uiContext; 181 } 182 183 initialRender() { 184 this.observeComponentCreation2((elmtId, isInitialRender) => { 185 Flex.create({ 186 justifyContent: FlexAlign.SpaceBetween, 187 alignItems: ItemAlign.Stretch 188 }); 189 Flex.width('100%'); 190 Flex.height(SelectTitleBar.totalHeight); 191 Flex.backgroundColor({ 192 'id': -1, 193 'type': 10001, 194 params: ['sys.color.ohos_id_color_background'], 195 'bundleName': '__harDefaultBundleName__', 196 'moduleName': '__harDefaultModuleName__', 197 }); 198 Flex.onAreaChange((_oldValue, newValue) => { 199 let newWidth = Number(newValue.width); 200 if (!this.hidesBackButton) { 201 newWidth -= ImageMenuItem.imageHotZoneWidth; 202 newWidth += SelectTitleBar.leftPadding; 203 newWidth -= SelectTitleBar.leftPaddingWithBack; 204 } 205 if (this.menuItems !== undefined) { 206 let menusLength = this.menuItems.length; 207 if (menusLength >= CollapsibleMenuSection.maxCountOfVisibleItems) { 208 newWidth -= ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems; 209 } else if (menusLength > 0) { 210 newWidth -= ImageMenuItem.imageHotZoneWidth * menusLength; 211 } 212 } 213 if (this.badgeValue) { 214 this.selectMaxWidth = newWidth - SelectTitleBar.badgeSize - SelectTitleBar.leftPadding - 215 SelectTitleBar.rightPadding - SelectTitleBar.badgePadding; 216 } else { 217 this.selectMaxWidth = newWidth - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding; 218 } 219 }); 220 }, Flex); 221 this.observeComponentCreation2((elmtId, isInitialRender) => { 222 Row.create(); 223 Row.margin({ 224 left: this.hidesBackButton ? { 225 'id': -1, 226 'type': 10002, 227 params: ['sys.float.ohos_id_max_padding_start'], 228 'bundleName': '__harDefaultBundleName__', 229 'moduleName': '__harDefaultModuleName__', 230 } : { 231 'id': -1, 232 'type': 10002, 233 params: ['sys.float.ohos_id_default_padding_start'], 234 'bundleName': '__harDefaultBundleName__', 235 'moduleName': '__harDefaultModuleName__', 236 } 237 }); 238 }, Row); 239 this.observeComponentCreation2((elmtId, isInitialRender) => { 240 If.create(); 241 if (!this.hidesBackButton) { 242 this.ifElseBranchUpdateFunction(0, () => { 243 { 244 this.observeComponentCreation2((elmtId, isInitialRender) => { 245 if (isInitialRender) { 246 let componentCall = new ImageMenuItem(this, { 247 item: { 248 value: '', 249 symbolStyle: new SymbolGlyphModifier(PUBLIC_BACK), 250 isEnabled: true, 251 label: this.getStringByNameSync('icon_back'), 252 action: () => this.getUIContext()?.getRouter()?.back() 253 }, index: -1 254 }, undefined, elmtId, () => { 255 }, { page: 'library/src/main/ets/components/MainPage.ets', line: 117, col: 11 }); 256 ViewPU.create(componentCall); 257 let paramsLambda = () => { 258 return { 259 item: { 260 value: '', 261 symbolStyle: new SymbolGlyphModifier(PUBLIC_BACK), 262 isEnabled: true, 263 label: this.getStringByNameSync('icon_back'), 264 action: () => this.getUIContext()?.getRouter()?.back() 265 }, 266 index: -1 267 }; 268 }; 269 componentCall.paramsGenerator_ = paramsLambda; 270 } else { 271 this.updateStateVarsOfChildByElmtId(elmtId, {}); 272 } 273 }, { name: 'ImageMenuItem' }); 274 } 275 }); 276 } else { 277 this.ifElseBranchUpdateFunction(1, () => { 278 }); 279 } 280 }, If); 281 If.pop(); 282 this.observeComponentCreation2((elmtId, isInitialRender) => { 283 Column.create(); 284 Column.justifyContent(FlexAlign.Start); 285 Column.alignItems(HorizontalAlign.Start); 286 Column.constraintSize({ maxWidth: this.selectMaxWidth }); 287 }, Column); 288 this.observeComponentCreation2((elmtId, isInitialRender) => { 289 If.create(); 290 if (this.badgeValue) { 291 this.ifElseBranchUpdateFunction(0, () => { 292 this.observeComponentCreation2((elmtId, isInitialRender) => { 293 Badge.create({ 294 count: this.badgeValue, 295 position: BadgePosition.Right, 296 style: { 297 badgeColor: { 298 'id': -1, 299 'type': 10001, 300 params: ['sys.color.ohos_id_color_emphasize'], 301 'bundleName': '__harDefaultBundleName__', 302 'moduleName': '__harDefaultModuleName__', 303 }, 304 borderColor: { 305 'id': -1, 306 'type': 10001, 307 params: ['sys.color.ohos_id_color_emphasize'], 308 'bundleName': '__harDefaultBundleName__', 309 'moduleName': '__harDefaultModuleName__', 310 }, 311 borderWidth: 0 312 } 313 }); 314 Badge.accessibilityGroup(true); 315 Badge.accessibilityLevel('no'); 316 }, Badge); 317 this.observeComponentCreation2((elmtId, isInitialRender) => { 318 Row.create(); 319 Row.justifyContent(FlexAlign.Start); 320 Row.margin({ 321 right: { 322 'id': -1, 323 'type': 10002, 324 params: ['sys.float.ohos_id_elements_margin_horizontal_l'], 325 'bundleName': '__harDefaultBundleName__', 326 'moduleName': '__harDefaultModuleName__', 327 } 328 }); 329 }, Row); 330 this.observeComponentCreation2((elmtId, isInitialRender) => { 331 Select.create(this.options); 332 Select.selected(this.selected); 333 Select.value(this.selected >= 0 && this.selected < this.options.length ? 334 this.options[this.selected].value : ''); 335 Select.font({ 336 size: this.hidesBackButton && !this.subtitle 337 ? { 338 'id': -1, 339 'type': 10002, 340 params: ['sys.float.ohos_id_text_size_headline7'], 341 'bundleName': '__harDefaultBundleName__', 342 'moduleName': '__harDefaultModuleName__', 343 } : { 344 'id': -1, 345 'type': 10002, 346 params: ['sys.float.ohos_id_text_size_headline8'], 347 'bundleName': '__harDefaultBundleName__', 348 'moduleName': '__harDefaultModuleName__', 349 } 350 }); 351 Select.fontColor({ 352 'id': -1, 353 'type': 10001, 354 params: ['sys.color.ohos_id_color_titlebar_text'], 355 'bundleName': '__harDefaultBundleName__', 356 'moduleName': '__harDefaultModuleName__', 357 }); 358 Select.backgroundColor(Color.Transparent); 359 Select.onSelect(this.onSelected); 360 Select.constraintSize({ maxWidth: this.selectMaxWidth }); 361 Select.offset({ x: -4 }); 362 Select.accessibilityLevel('yes'); 363 Select.accessibilityDescription(this.messageDesc.replace('%d', this.badgeValue.toString())); 364 }, Select); 365 Select.pop(); 366 Row.pop(); 367 Badge.pop(); 368 }); 369 } else { 370 this.ifElseBranchUpdateFunction(1, () => { 371 this.observeComponentCreation2((elmtId, isInitialRender) => { 372 Row.create(); 373 Row.justifyContent(FlexAlign.Start); 374 }, Row); 375 this.observeComponentCreation2((elmtId, isInitialRender) => { 376 Select.create(this.options); 377 Select.selected(this.selected); 378 Select.value(this.selected >= 0 && this.selected < this.options.length ? 379 this.options[this.selected].value : ''); 380 Select.font({ 381 size: this.hidesBackButton && !this.subtitle 382 ? { 383 'id': -1, 384 'type': 10002, 385 params: ['sys.float.ohos_id_text_size_headline7'], 386 'bundleName': '__harDefaultBundleName__', 387 'moduleName': '__harDefaultModuleName__', 388 } : { 389 'id': -1, 390 'type': 10002, 391 params: ['sys.float.ohos_id_text_size_headline8'], 392 'bundleName': '__harDefaultBundleName__', 393 'moduleName': '__harDefaultModuleName__', 394 } 395 }); 396 Select.fontColor({ 397 'id': -1, 398 'type': 10001, 399 params: ['sys.color.ohos_id_color_titlebar_text'], 400 'bundleName': '__harDefaultBundleName__', 401 'moduleName': '__harDefaultModuleName__', 402 }); 403 Select.backgroundColor(Color.Transparent); 404 Select.onSelect(this.onSelected); 405 Select.constraintSize({ maxWidth: this.selectMaxWidth }); 406 Select.offset({ x: -4 }); 407 }, Select); 408 Select.pop(); 409 Row.pop(); 410 }); 411 } 412 }, If); 413 If.pop(); 414 this.observeComponentCreation2((elmtId, isInitialRender) => { 415 If.create(); 416 if (this.subtitle !== undefined) { 417 this.ifElseBranchUpdateFunction(0, () => { 418 this.observeComponentCreation2((elmtId, isInitialRender) => { 419 Row.create(); 420 Row.justifyContent(FlexAlign.Start); 421 Row.margin({ left: SelectTitleBar.subtitleLeftPadding }); 422 }, Row); 423 this.observeComponentCreation2((elmtId, isInitialRender) => { 424 Text.create(this.subtitle); 425 Text.fontSize({ 426 'id': -1, 427 'type': 10002, 428 params: ['sys.float.ohos_id_text_size_over_line'], 429 'bundleName': '__harDefaultBundleName__', 430 'moduleName': '__harDefaultModuleName__', 431 }); 432 Text.fontColor({ 433 'id': -1, 434 'type': 10001, 435 params: ['sys.color.ohos_id_color_titlebar_subtitle_text'], 436 'bundleName': '__harDefaultBundleName__', 437 'moduleName': '__harDefaultModuleName__', 438 }); 439 Text.maxLines(1); 440 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 441 Text.constraintSize({ maxWidth: this.selectMaxWidth }); 442 Text.offset({ y: -4 }); 443 }, Text); 444 Text.pop(); 445 Row.pop(); 446 }); 447 } else { 448 this.ifElseBranchUpdateFunction(1, () => { 449 }); 450 } 451 }, If); 452 If.pop(); 453 Column.pop(); 454 Row.pop(); 455 this.observeComponentCreation2((elmtId, isInitialRender) => { 456 If.create(); 457 if (this.menuItems !== undefined && this.menuItems.length > 0) { 458 this.ifElseBranchUpdateFunction(0, () => { 459 { 460 this.observeComponentCreation2((elmtId, isInitialRender) => { 461 if (isInitialRender) { 462 let componentCall = new CollapsibleMenuSection(this, 463 { menuItems: this.menuItems, index: 1 + SelectTitleBar.instanceCount++ }, undefined, 464 elmtId, () => { 465 }, { page: 'library/src/main/ets/components/MainPage.ets', line: 197, col: 9 }); 466 ViewPU.create(componentCall); 467 let paramsLambda = () => { 468 return { 469 menuItems: this.menuItems, 470 index: 1 + SelectTitleBar.instanceCount++ 471 }; 472 }; 473 componentCall.paramsGenerator_ = paramsLambda; 474 } else { 475 this.updateStateVarsOfChildByElmtId(elmtId, {}); 476 } 477 }, { name: 'CollapsibleMenuSection' }); 478 } 479 }); 480 } else { 481 this.ifElseBranchUpdateFunction(1, () => { 482 }); 483 } 484 }, If); 485 If.pop(); 486 Flex.pop(); 487 } 488 489 aboutToAppear() { 490 try { 491 let resourceManager = getContext().resourceManager; 492 this.messageDesc = 493 resourceManager?.getPluralStringByNameSync('selecttitlebar_accessibility_message_desc_new', 494 this.badgeValue); 495 } catch (exception) { 496 let code = exception?.code; 497 let message = exception?.message; 498 hilog.error(0x3900, 'Ace', `Faild to getPluralStringByNameSync,cause, code: ${code}, message: ${message}`); 499 } 500 } 501 502 rerender() { 503 this.updateDirtyElements(); 504 } 505} 506SelectTitleBar.badgeSize = 16; 507SelectTitleBar.totalHeight = 56; 508SelectTitleBar.leftPadding = 24; 509SelectTitleBar.leftPaddingWithBack = 12; 510SelectTitleBar.rightPadding = 24; 511SelectTitleBar.badgePadding = 16; 512SelectTitleBar.subtitleLeftPadding = 4; 513SelectTitleBar.instanceCount = 0; 514 515class CollapsibleMenuSection extends ViewPU { 516 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 517 super(parent, __localStorage, elmtId, extraInfo); 518 if (typeof paramsLambda === 'function') { 519 this.paramsGenerator_ = paramsLambda; 520 } 521 this.menuItems = []; 522 this.item = { 523 symbolStyle: new SymbolGlyphModifier(PUBLIC_MORE), 524 label: { 525 'id': -1, 526 'type': 10003, 527 params: ['sys.string.ohos_toolbar_more'], 528 'bundleName': '__harDefaultBundleName__', 529 'moduleName': '__harDefaultModuleName__', 530 }, 531 }; 532 this.index = 0; 533 this.minFontSize = 1.75; 534 this.isFollowingSystemFontScale = false; 535 this.maxFontScale = 1; 536 this.systemFontScale = 1; 537 this.firstFocusableIndex = -1; 538 this.__isPopupShown = new ObservedPropertySimplePU(false, this, 'isPopupShown'); 539 this.__isMoreIconOnFocus = new ObservedPropertySimplePU(false, this, 'isMoreIconOnFocus'); 540 this.__isMoreIconOnHover = new ObservedPropertySimplePU(false, this, 'isMoreIconOnHover'); 541 this.__isMoreIconOnClick = new ObservedPropertySimplePU(false, this, 'isMoreIconOnClick'); 542 this.__fontSize = new SynchedPropertySimpleOneWayPU(params.fontSize, this, 'fontSize'); 543 this.dialogController = new CustomDialogController({ 544 builder: () => { 545 let jsDialog = new SelectTitleBarDialog(this, { 546 cancel: () => { 547 }, 548 confirm: () => { 549 }, 550 selectTitleDialog: this.item, 551 selectTitleBarDialog: this.item.label ? this.item.label : '', 552 fontSize: this.fontSize, 553 }, undefined, -1, () => { 554 }, { page: 'library/src/main/ets/components/MainPage.ets', line: 266, col: 14 }); 555 jsDialog.setController(this.dialogController); 556 ViewPU.create(jsDialog); 557 let paramsLambda = () => { 558 return { 559 cancel: () => { 560 }, 561 confirm: () => { 562 }, 563 selectTitleDialog: this.item, 564 selectTitleBarDialog: this.item.label ? this.item.label : '', 565 fontSize: this.fontSize 566 }; 567 }; 568 jsDialog.paramsGenerator_ = paramsLambda; 569 }, 570 maskColor: Color.Transparent, 571 isModal: true, 572 customStyle: true 573 }, this); 574 this.__buttonGestureModifier = 575 new ObservedPropertyObjectPU(new ButtonGestureModifier(this.dialogController), this, 576 'buttonGestureModifier'); 577 this.setInitiallyProvidedValue(params); 578 this.declareWatch('fontSize', this.onFontSizeUpdated); 579 this.finalizeConstruction(); 580 } 581 582 setInitiallyProvidedValue(params) { 583 if (params.menuItems !== undefined) { 584 this.menuItems = params.menuItems; 585 } 586 if (params.item !== undefined) { 587 this.item = params.item; 588 } 589 if (params.index !== undefined) { 590 this.index = params.index; 591 } 592 if (params.minFontSize !== undefined) { 593 this.minFontSize = params.minFontSize; 594 } 595 if (params.isFollowingSystemFontScale !== undefined) { 596 this.isFollowingSystemFontScale = params.isFollowingSystemFontScale; 597 } 598 if (params.maxFontScale !== undefined) { 599 this.maxFontScale = params.maxFontScale; 600 } 601 if (params.systemFontScale !== undefined) { 602 this.systemFontScale = params.systemFontScale; 603 } 604 if (params.firstFocusableIndex !== undefined) { 605 this.firstFocusableIndex = params.firstFocusableIndex; 606 } 607 if (params.isPopupShown !== undefined) { 608 this.isPopupShown = params.isPopupShown; 609 } 610 if (params.isMoreIconOnFocus !== undefined) { 611 this.isMoreIconOnFocus = params.isMoreIconOnFocus; 612 } 613 if (params.isMoreIconOnHover !== undefined) { 614 this.isMoreIconOnHover = params.isMoreIconOnHover; 615 } 616 if (params.isMoreIconOnClick !== undefined) { 617 this.isMoreIconOnClick = params.isMoreIconOnClick; 618 } 619 if (params.fontSize === undefined) { 620 this.__fontSize.set(1); 621 } 622 if (params.dialogController !== undefined) { 623 this.dialogController = params.dialogController; 624 } 625 if (params.buttonGestureModifier !== undefined) { 626 this.buttonGestureModifier = params.buttonGestureModifier; 627 } 628 } 629 630 updateStateVars(params) { 631 this.__fontSize.reset(params.fontSize); 632 } 633 634 purgeVariableDependenciesOnElmtId(rmElmtId) { 635 this.__isPopupShown.purgeDependencyOnElmtId(rmElmtId); 636 this.__isMoreIconOnFocus.purgeDependencyOnElmtId(rmElmtId); 637 this.__isMoreIconOnHover.purgeDependencyOnElmtId(rmElmtId); 638 this.__isMoreIconOnClick.purgeDependencyOnElmtId(rmElmtId); 639 this.__fontSize.purgeDependencyOnElmtId(rmElmtId); 640 this.__buttonGestureModifier.purgeDependencyOnElmtId(rmElmtId); 641 } 642 643 aboutToBeDeleted() { 644 this.__isPopupShown.aboutToBeDeleted(); 645 this.__isMoreIconOnFocus.aboutToBeDeleted(); 646 this.__isMoreIconOnHover.aboutToBeDeleted(); 647 this.__isMoreIconOnClick.aboutToBeDeleted(); 648 this.__fontSize.aboutToBeDeleted(); 649 this.__buttonGestureModifier.aboutToBeDeleted(); 650 SubscriberManager.Get().delete(this.id__()); 651 this.aboutToBeDeletedInternal(); 652 } 653 654 get isPopupShown() { 655 return this.__isPopupShown.get(); 656 } 657 658 set isPopupShown(newValue) { 659 this.__isPopupShown.set(newValue); 660 } 661 662 get isMoreIconOnFocus() { 663 return this.__isMoreIconOnFocus.get(); 664 } 665 666 set isMoreIconOnFocus(newValue) { 667 this.__isMoreIconOnFocus.set(newValue); 668 } 669 670 get isMoreIconOnHover() { 671 return this.__isMoreIconOnHover.get(); 672 } 673 674 set isMoreIconOnHover(newValue) { 675 this.__isMoreIconOnHover.set(newValue); 676 } 677 678 get isMoreIconOnClick() { 679 return this.__isMoreIconOnClick.get(); 680 } 681 682 set isMoreIconOnClick(newValue) { 683 this.__isMoreIconOnClick.set(newValue); 684 } 685 686 get fontSize() { 687 return this.__fontSize.get(); 688 } 689 690 set fontSize(newValue) { 691 this.__fontSize.set(newValue); 692 } 693 694 get buttonGestureModifier() { 695 return this.__buttonGestureModifier.get(); 696 } 697 698 set buttonGestureModifier(newValue) { 699 this.__buttonGestureModifier.set(newValue); 700 } 701 702 getMoreIconFgColor() { 703 return this.isMoreIconOnClick 704 ? { 705 'id': -1, 706 'type': 10001, 707 params: ['sys.color.ohos_id_color_titlebar_icon_pressed'], 708 'bundleName': '__harDefaultBundleName__', 709 'moduleName': '__harDefaultModuleName__', 710 } : { 711 'id': -1, 712 'type': 10001, 713 params: ['sys.color.ohos_id_color_titlebar_icon'], 714 'bundleName': '__harDefaultBundleName__', 715 'moduleName': '__harDefaultModuleName__', 716 }; 717 } 718 719 getMoreIconBgColor() { 720 if (this.isMoreIconOnClick) { 721 return { 722 'id': -1, 723 'type': 10001, 724 params: ['sys.color.ohos_id_color_click_effect'], 725 'bundleName': '__harDefaultBundleName__', 726 'moduleName': '__harDefaultModuleName__', 727 }; 728 } else if (this.isMoreIconOnHover) { 729 return { 730 'id': -1, 731 'type': 10001, 732 params: ['sys.color.ohos_id_color_hover'], 733 'bundleName': '__harDefaultBundleName__', 734 'moduleName': '__harDefaultModuleName__', 735 }; 736 } else { 737 return Color.Transparent; 738 } 739 } 740 741 aboutToAppear() { 742 try { 743 let uiContent = this.getUIContext(); 744 this.isFollowingSystemFontScale = uiContent.isFollowingSystemFontScale(); 745 this.maxFontScale = uiContent.getMaxFontScale(); 746 } catch (exception) { 747 let code = exception?.code; 748 let message = exception?.message; 749 hilog.error(0x3900, 'Ace', `Faild to decideFontScale,cause, code: ${code}, message: ${message}`); 750 } 751 this.menuItems.forEach((item, index) => { 752 if (item.isEnabled && this.firstFocusableIndex === -1 && 753 index > CollapsibleMenuSection.maxCountOfVisibleItems - 2) { 754 this.firstFocusableIndex = this.index * 1000 + index + 1; 755 } 756 }); 757 this.fontSize = this.decideFontScale(); 758 } 759 760 decideFontScale() { 761 let uiContent = this.getUIContext(); 762 this.systemFontScale = uiContent.getHostContext()?.config?.fontSizeScale ?? 1; 763 if (!this.isFollowingSystemFontScale) { 764 return 1; 765 } 766 return Math.min(this.systemFontScale, this.maxFontScale); 767 } 768 769 onFontSizeUpdated() { 770 this.buttonGestureModifier.fontSize = this.fontSize; 771 } 772 773 initialRender() { 774 this.observeComponentCreation2((elmtId, isInitialRender) => { 775 Column.create(); 776 Column.height('100%'); 777 Column.margin({ 778 right: { 779 'id': -1, 780 'type': 10002, 781 params: ['sys.float.ohos_id_default_padding_end'], 782 'bundleName': '__harDefaultBundleName__', 783 'moduleName': '__harDefaultModuleName__', 784 } 785 }); 786 Column.justifyContent(FlexAlign.Center); 787 }, Column); 788 this.observeComponentCreation2((elmtId, isInitialRender) => { 789 Row.create(); 790 }, Row); 791 this.observeComponentCreation2((elmtId, isInitialRender) => { 792 If.create(); 793 if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) { 794 this.ifElseBranchUpdateFunction(0, () => { 795 this.observeComponentCreation2((elmtId, isInitialRender) => { 796 ForEach.create(); 797 const forEachItemGenFunction = (_item, index) => { 798 const item = _item; 799 { 800 this.observeComponentCreation2((elmtId, isInitialRender) => { 801 if (isInitialRender) { 802 let componentCall = new ImageMenuItem(this, 803 { item: item, index: this.index * 1000 + index + 1 }, undefined, elmtId, 804 () => { 805 }, { 806 page: 'library/src/main/ets/components/MainPage.ets', 807 line: 336, 808 col: 13 809 }); 810 ViewPU.create(componentCall); 811 let paramsLambda = () => { 812 return { 813 item: item, 814 index: this.index * 1000 + index + 1 815 }; 816 }; 817 componentCall.paramsGenerator_ = paramsLambda; 818 } else { 819 this.updateStateVarsOfChildByElmtId(elmtId, {}); 820 } 821 }, { name: 'ImageMenuItem' }); 822 } 823 }; 824 this.forEachUpdateFunction(elmtId, this.menuItems, forEachItemGenFunction, undefined, true, 825 false); 826 }, ForEach); 827 ForEach.pop(); 828 }); 829 } else { 830 this.ifElseBranchUpdateFunction(1, () => { 831 this.observeComponentCreation2((elmtId, isInitialRender) => { 832 ForEach.create(); 833 const forEachItemGenFunction = (_item, index) => { 834 const item = _item; 835 { 836 this.observeComponentCreation2((elmtId, isInitialRender) => { 837 if (isInitialRender) { 838 let componentCall = new ImageMenuItem(this, 839 { item: item, index: this.index * 1000 + index + 1 }, undefined, elmtId, 840 () => { 841 }, { 842 page: 'library/src/main/ets/components/MainPage.ets', 843 line: 341, 844 col: 15 845 }); 846 ViewPU.create(componentCall); 847 let paramsLambda = () => { 848 return { 849 item: item, 850 index: this.index * 1000 + index + 1 851 }; 852 }; 853 componentCall.paramsGenerator_ = paramsLambda; 854 } else { 855 this.updateStateVarsOfChildByElmtId(elmtId, {}); 856 } 857 }, { name: 'ImageMenuItem' }); 858 } 859 }; 860 this.forEachUpdateFunction(elmtId, 861 this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), 862 forEachItemGenFunction, undefined, true, false); 863 }, ForEach); 864 ForEach.pop(); 865 this.observeComponentCreation2((elmtId, isInitialRender) => { 866 Button.createWithChild({ type: ButtonType.Normal, stateEffect: true }); 867 Button.accessibilityText({ 868 'id': -1, 869 'type': 10003, 870 params: ['sys.string.ohos_toolbar_more'], 871 'bundleName': '__harDefaultBundleName__', 872 'moduleName': '__harDefaultModuleName__', 873 }); 874 Button.width(ImageMenuItem.imageHotZoneWidth); 875 Button.height(ImageMenuItem.imageHotZoneWidth); 876 Button.borderRadius(ImageMenuItem.buttonBorderRadius); 877 Button.foregroundColor(this.getMoreIconFgColor()); 878 Button.backgroundColor(this.getMoreIconBgColor()); 879 ViewStackProcessor.visualState('focused'); 880 Button.border({ 881 radius: { 882 'id': -1, 883 'type': 10002, 884 params: ['sys.float.ohos_id_corner_radius_clicked'], 885 'bundleName': '__harDefaultBundleName__', 886 'moduleName': '__harDefaultModuleName__', 887 }, 888 width: ImageMenuItem.focusBorderWidth, 889 color: { 890 'id': -1, 891 'type': 10001, 892 params: ['sys.color.ohos_id_color_focused_outline'], 893 'bundleName': '__harDefaultBundleName__', 894 'moduleName': '__harDefaultModuleName__', 895 }, 896 style: BorderStyle.Solid 897 }); 898 ViewStackProcessor.visualState('normal'); 899 Button.border({ 900 radius: { 901 'id': -1, 902 'type': 10002, 903 params: ['sys.float.ohos_id_corner_radius_clicked'], 904 'bundleName': '__harDefaultBundleName__', 905 'moduleName': '__harDefaultModuleName__', 906 }, 907 width: 0 908 }); 909 ViewStackProcessor.visualState(); 910 Button.onFocus(() => this.isMoreIconOnFocus = true); 911 Button.onBlur(() => this.isMoreIconOnFocus = false); 912 Button.onHover((isOn) => this.isMoreIconOnHover = isOn); 913 Button.onKeyEvent((event) => { 914 if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { 915 return; 916 } 917 if (event.type === KeyType.Down) { 918 this.isMoreIconOnClick = true; 919 } 920 if (event.type === KeyType.Up) { 921 this.isMoreIconOnClick = false; 922 } 923 }); 924 Button.onTouch((event) => { 925 if (event.type === TouchType.Down) { 926 this.isMoreIconOnClick = true; 927 } 928 if (event.type === TouchType.Up || event.type === TouchType.Cancel) { 929 this.isMoreIconOnClick = false; 930 if (this.fontSize >= this.minFontSize) { 931 this.dialogController?.close(); 932 } 933 } 934 }); 935 Button.onClick(() => this.isPopupShown = true); 936 Button.gestureModifier(ObservedObject.GetRawObject(this.buttonGestureModifier)); 937 Button.bindPopup(this.isPopupShown, { 938 builder: { builder: this.popupBuilder.bind(this) }, 939 placement: Placement.Bottom, 940 popupColor: Color.White, 941 enableArrow: false, 942 onStateChange: (e) => { 943 this.isPopupShown = e.isVisible; 944 if (!e.isVisible) { 945 this.isMoreIconOnClick = false; 946 } 947 } 948 }); 949 }, Button); 950 this.observeComponentCreation2((elmtId, isInitialRender) => { 951 SymbolGlyph.create(PUBLIC_MORE); 952 SymbolGlyph.fontSize(ImageMenuItem.imageSize); 953 SymbolGlyph.draggable(false); 954 SymbolGlyph.fontColor([{ 955 'id': -1, 956 'type': 10001, 957 params: ['sys.color.icon_primary'], 958 'bundleName': '__harDefaultBundleName__', 959 'moduleName': '__harDefaultModuleName__', 960 }]); 961 SymbolGlyph.focusable(true); 962 }, SymbolGlyph); 963 Button.pop(); 964 }); 965 } 966 }, If); 967 If.pop(); 968 Row.pop(); 969 Column.pop(); 970 } 971 972 onPlaceChildren(selfLayoutInfo, children, constraint) { 973 children.forEach((child) => { 974 child.layout({ x: 0, y: 0 }); 975 }); 976 this.fontSize = this.decideFontScale(); 977 } 978 979 popupBuilder(parent = null) { 980 this.observeComponentCreation2((elmtId, isInitialRender) => { 981 Column.create(); 982 Column.width(ImageMenuItem.imageHotZoneWidth + 983 CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum); 984 Column.margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding }); 985 Column.onAppear(() => { 986 focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex); 987 }); 988 }, Column); 989 this.observeComponentCreation2((elmtId, isInitialRender) => { 990 ForEach.create(); 991 const forEachItemGenFunction = (_item, index) => { 992 const item = _item; 993 { 994 this.observeComponentCreation2((elmtId, isInitialRender) => { 995 if (isInitialRender) { 996 let componentCall = new ImageMenuItem(this, { 997 item: item, index: this.index * 1000 + 998 CollapsibleMenuSection.maxCountOfVisibleItems + index, isPopup: false 999 }, undefined, elmtId, () => { 1000 }, { page: 'library/src/main/ets/components/MainPage.ets', line: 432, col: 11 }); 1001 ViewPU.create(componentCall); 1002 let paramsLambda = () => { 1003 return { 1004 item: item, 1005 index: this.index * 1000 + 1006 CollapsibleMenuSection.maxCountOfVisibleItems + index, 1007 isPopup: false 1008 }; 1009 }; 1010 componentCall.paramsGenerator_ = paramsLambda; 1011 } else { 1012 this.updateStateVarsOfChildByElmtId(elmtId, {}); 1013 } 1014 }, { name: 'ImageMenuItem' }); 1015 } 1016 }; 1017 this.forEachUpdateFunction(elmtId, 1018 this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), 1019 forEachItemGenFunction, undefined, true, false); 1020 }, ForEach); 1021 ForEach.pop(); 1022 Column.pop(); 1023 } 1024 1025 rerender() { 1026 this.updateDirtyElements(); 1027 } 1028} 1029 1030CollapsibleMenuSection.maxCountOfVisibleItems = 3; 1031CollapsibleMenuSection.focusPadding = 4; 1032CollapsibleMenuSection.marginsNum = 2; 1033 1034class ImageMenuItem extends ViewPU { 1035 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 1036 super(parent, __localStorage, elmtId, extraInfo); 1037 if (typeof paramsLambda === 'function') { 1038 this.paramsGenerator_ = paramsLambda; 1039 } 1040 this.item = {}; 1041 this.index = 0; 1042 this.minFontSize = 1.75; 1043 this.isFollowingSystemFontScale = false; 1044 this.maxFontScale = 1; 1045 this.systemFontScale = 1; 1046 this.isPopup = true; 1047 this.__isOnFocus = new ObservedPropertySimplePU(false, this, 'isOnFocus'); 1048 this.__isOnHover = new ObservedPropertySimplePU(false, this, 'isOnHover'); 1049 this.__isOnClick = new ObservedPropertySimplePU(false, this, 'isOnClick'); 1050 this.__fontSize = new SynchedPropertySimpleOneWayPU(params.fontSize, this, 'fontSize'); 1051 this.dialogController = new CustomDialogController({ 1052 builder: () => { 1053 let jsDialog = new SelectTitleBarDialog(this, { 1054 cancel: () => { 1055 }, 1056 confirm: () => { 1057 }, 1058 selectTitleDialog: this.item, 1059 selectTitleBarDialog: this.item.label ? this.item.label : this.textDialog(), 1060 fontSize: this.fontSize, 1061 }, undefined, -1, () => { 1062 }, { page: 'library/src/main/ets/components/MainPage.ets', line: 466, col: 14 }); 1063 jsDialog.setController(this.dialogController); 1064 ViewPU.create(jsDialog); 1065 let paramsLambda = () => { 1066 return { 1067 cancel: () => { 1068 }, 1069 confirm: () => { 1070 }, 1071 selectTitleDialog: this.item, 1072 selectTitleBarDialog: this.item.label ? this.item.label : this.textDialog(), 1073 fontSize: this.fontSize 1074 }; 1075 }; 1076 jsDialog.paramsGenerator_ = paramsLambda; 1077 }, 1078 maskColor: Color.Transparent, 1079 isModal: true, 1080 customStyle: true 1081 }, this); 1082 this.__buttonGestureModifier = 1083 new ObservedPropertyObjectPU(new ButtonGestureModifier(this.dialogController), this, 1084 'buttonGestureModifier'); 1085 this.setInitiallyProvidedValue(params); 1086 this.declareWatch('fontSize', this.onFontSizeUpdated); 1087 this.finalizeConstruction(); 1088 } 1089 1090 setInitiallyProvidedValue(params) { 1091 if (params.item !== undefined) { 1092 this.item = params.item; 1093 } 1094 if (params.index !== undefined) { 1095 this.index = params.index; 1096 } 1097 if (params.minFontSize !== undefined) { 1098 this.minFontSize = params.minFontSize; 1099 } 1100 if (params.isFollowingSystemFontScale !== undefined) { 1101 this.isFollowingSystemFontScale = params.isFollowingSystemFontScale; 1102 } 1103 if (params.maxFontScale !== undefined) { 1104 this.maxFontScale = params.maxFontScale; 1105 } 1106 if (params.systemFontScale !== undefined) { 1107 this.systemFontScale = params.systemFontScale; 1108 } 1109 if (params.isPopup !== undefined) { 1110 this.isPopup = params.isPopup; 1111 } 1112 if (params.isOnFocus !== undefined) { 1113 this.isOnFocus = params.isOnFocus; 1114 } 1115 if (params.isOnHover !== undefined) { 1116 this.isOnHover = params.isOnHover; 1117 } 1118 if (params.isOnClick !== undefined) { 1119 this.isOnClick = params.isOnClick; 1120 } 1121 if (params.fontSize === undefined) { 1122 this.__fontSize.set(1); 1123 } 1124 if (params.dialogController !== undefined) { 1125 this.dialogController = params.dialogController; 1126 } 1127 if (params.buttonGestureModifier !== undefined) { 1128 this.buttonGestureModifier = params.buttonGestureModifier; 1129 } 1130 } 1131 1132 updateStateVars(params) { 1133 this.__fontSize.reset(params.fontSize); 1134 } 1135 1136 purgeVariableDependenciesOnElmtId(rmElmtId) { 1137 this.__isOnFocus.purgeDependencyOnElmtId(rmElmtId); 1138 this.__isOnHover.purgeDependencyOnElmtId(rmElmtId); 1139 this.__isOnClick.purgeDependencyOnElmtId(rmElmtId); 1140 this.__fontSize.purgeDependencyOnElmtId(rmElmtId); 1141 this.__buttonGestureModifier.purgeDependencyOnElmtId(rmElmtId); 1142 } 1143 1144 aboutToBeDeleted() { 1145 this.__isOnFocus.aboutToBeDeleted(); 1146 this.__isOnHover.aboutToBeDeleted(); 1147 this.__isOnClick.aboutToBeDeleted(); 1148 this.__fontSize.aboutToBeDeleted(); 1149 this.__buttonGestureModifier.aboutToBeDeleted(); 1150 SubscriberManager.Get().delete(this.id__()); 1151 this.aboutToBeDeletedInternal(); 1152 } 1153 1154 get isOnFocus() { 1155 return this.__isOnFocus.get(); 1156 } 1157 1158 set isOnFocus(newValue) { 1159 this.__isOnFocus.set(newValue); 1160 } 1161 1162 get isOnHover() { 1163 return this.__isOnHover.get(); 1164 } 1165 1166 set isOnHover(newValue) { 1167 this.__isOnHover.set(newValue); 1168 } 1169 1170 get isOnClick() { 1171 return this.__isOnClick.get(); 1172 } 1173 1174 set isOnClick(newValue) { 1175 this.__isOnClick.set(newValue); 1176 } 1177 1178 get fontSize() { 1179 return this.__fontSize.get(); 1180 } 1181 1182 set fontSize(newValue) { 1183 this.__fontSize.set(newValue); 1184 } 1185 1186 get buttonGestureModifier() { 1187 return this.__buttonGestureModifier.get(); 1188 } 1189 1190 set buttonGestureModifier(newValue) { 1191 this.__buttonGestureModifier.set(newValue); 1192 } 1193 1194 textDialog() { 1195 if (this.item.value === PUBLIC_MORE) { 1196 return { 1197 'id': -1, 1198 'type': 10003, 1199 params: ['sys.string.ohos_toolbar_more'], 1200 'bundleName': '__harDefaultBundleName__', 1201 'moduleName': '__harDefaultModuleName__', 1202 }; 1203 } else if (this.item.value === PUBLIC_BACK) { 1204 return { 1205 'id': -1, 1206 'type': 10003, 1207 params: ['sys.string.icon_back'], 1208 'bundleName': '__harDefaultBundleName__', 1209 'moduleName': '__harDefaultModuleName__', 1210 }; 1211 } else { 1212 return this.item.label ? this.item.label : ''; 1213 } 1214 } 1215 1216 getFgColor() { 1217 return this.isOnClick 1218 ? { 1219 'id': -1, 1220 'type': 10001, 1221 params: ['sys.color.ohos_id_color_titlebar_icon_pressed'], 1222 'bundleName': '__harDefaultBundleName__', 1223 'moduleName': '__harDefaultModuleName__', 1224 } : { 1225 'id': -1, 1226 'type': 10001, 1227 params: ['sys.color.ohos_id_color_titlebar_icon'], 1228 'bundleName': '__harDefaultBundleName__', 1229 'moduleName': '__harDefaultModuleName__', 1230 }; 1231 } 1232 1233 getBgColor() { 1234 if (this.isOnClick) { 1235 return { 1236 'id': -1, 1237 'type': 10001, 1238 params: ['sys.color.ohos_id_color_click_effect'], 1239 'bundleName': '__harDefaultBundleName__', 1240 'moduleName': '__harDefaultModuleName__', 1241 }; 1242 } else if (this.isOnHover) { 1243 return { 1244 'id': -1, 1245 'type': 10001, 1246 params: ['sys.color.ohos_id_color_hover'], 1247 'bundleName': '__harDefaultBundleName__', 1248 'moduleName': '__harDefaultModuleName__', 1249 }; 1250 } else { 1251 return Color.Transparent; 1252 } 1253 } 1254 1255 aboutToAppear() { 1256 try { 1257 let uiContent = this.getUIContext(); 1258 this.isFollowingSystemFontScale = uiContent.isFollowingSystemFontScale(); 1259 this.maxFontScale = uiContent.getMaxFontScale(); 1260 } catch (exception) { 1261 let code = exception.code; 1262 let message = exception.message; 1263 hilog.error(0x3900, 'Ace', `Faild to isFollowingSystemFontScale,cause, code: ${code}, message: ${message}`); 1264 } 1265 this.fontSize = this.decideFontScale(); 1266 } 1267 1268 decideFontScale() { 1269 let uiContent = this.getUIContext(); 1270 this.systemFontScale = uiContent.getHostContext()?.config?.fontSizeScale ?? 1; 1271 if (!this.isFollowingSystemFontScale) { 1272 return 1; 1273 } 1274 return Math.min(this.systemFontScale, this.maxFontScale); 1275 } 1276 1277 toStringFormat(resource) { 1278 if (typeof resource === 'string') { 1279 return resource; 1280 } else if (typeof resource === 'undefined') { 1281 return ''; 1282 } else { 1283 let resourceString = ''; 1284 try { 1285 resourceString = getContext()?.resourceManager?.getStringSync(resource); 1286 } catch (err) { 1287 let code = err?.code; 1288 let message = err?.message; 1289 hilog.error(0x3900, 'Ace', `Faild to SelectTitleBar toStringFormat,code: ${code},message:${message}`); 1290 } 1291 return resourceString; 1292 } 1293 } 1294 1295 getAccessibilityReadText() { 1296 if (this.item.value === PUBLIC_BACK) { 1297 try { 1298 return getContext()?.resourceManager?.getStringByNameSync('icon_back'); 1299 } catch (err) { 1300 let code = err?.code; 1301 let message = err?.message; 1302 hilog.error(0x3900, 'Ace', `Faild to SelectTitleBar toStringFormat,code: ${code},message:${message}`); 1303 } 1304 } else if (this.item.value === PUBLIC_MORE) { 1305 try { 1306 return getContext()?.resourceManager?.getStringByNameSync('ohos_toolbar_more'); 1307 } catch (err) { 1308 let code = err?.code; 1309 let message = err?.message; 1310 hilog.error(0x3900, 'Ace', `Faild to SelectTitleBar toStringFormat,code: ${code},message:${message}`); 1311 } 1312 } else if (this.item.accessibilityText) { 1313 return this.item.accessibilityText; 1314 } else if (this.item.label) { 1315 return this.item.label; 1316 } 1317 return ' '; 1318 } 1319 1320 onPlaceChildren(selfLayoutInfo, children, constraint) { 1321 children.forEach((child) => { 1322 child.layout({ x: 0, y: 0 }); 1323 }); 1324 this.fontSize = this.decideFontScale(); 1325 } 1326 1327 onFontSizeUpdated() { 1328 this.buttonGestureModifier.fontSize = this.fontSize; 1329 } 1330 1331 initialRender() { 1332 this.observeComponentCreation2((elmtId, isInitialRender) => { 1333 If.create(); 1334 if (this.isPopup) { 1335 this.ifElseBranchUpdateFunction(0, () => { 1336 this.observeComponentCreation2((elmtId, isInitialRender) => { 1337 Button.createWithChild({ type: ButtonType.Normal, stateEffect: this.item.isEnabled }); 1338 Button.accessibilityText(this.getAccessibilityReadText()); 1339 Button.accessibilityLevel(this.item?.accessibilityLevel ?? 'auto'); 1340 Button.accessibilityDescription(this.item?.accessibilityDescription); 1341 Button.width(ImageMenuItem.imageHotZoneWidth); 1342 Button.height(ImageMenuItem.imageHotZoneWidth); 1343 Button.borderRadius(ImageMenuItem.buttonBorderRadius); 1344 Button.foregroundColor(this.getFgColor()); 1345 Button.backgroundColor(this.getBgColor()); 1346 Button.enabled(this.item.isEnabled ? this.item.isEnabled : false); 1347 ViewStackProcessor.visualState('focused'); 1348 Button.border({ 1349 radius: { 1350 'id': -1, 1351 'type': 10002, 1352 params: ['sys.float.ohos_id_corner_radius_clicked'], 1353 'bundleName': '__harDefaultBundleName__', 1354 'moduleName': '__harDefaultModuleName__', 1355 }, 1356 width: ImageMenuItem.focusBorderWidth, 1357 color: { 1358 'id': -1, 1359 'type': 10001, 1360 params: ['sys.color.ohos_id_color_focused_outline'], 1361 'bundleName': '__harDefaultBundleName__', 1362 'moduleName': '__harDefaultModuleName__', 1363 }, 1364 style: BorderStyle.Solid 1365 }); 1366 ViewStackProcessor.visualState('normal'); 1367 Button.border({ 1368 radius: { 1369 'id': -1, 1370 'type': 10002, 1371 params: ['sys.float.ohos_id_corner_radius_clicked'], 1372 'bundleName': '__harDefaultBundleName__', 1373 'moduleName': '__harDefaultModuleName__', 1374 }, 1375 width: 0 1376 }); 1377 ViewStackProcessor.visualState(); 1378 Button.onFocus(() => { 1379 if (!this.item.isEnabled) { 1380 return; 1381 } 1382 this.isOnFocus = true; 1383 }); 1384 Button.onBlur(() => this.isOnFocus = false); 1385 Button.onHover((isOn) => { 1386 if (!this.item.isEnabled) { 1387 return; 1388 } 1389 this.isOnHover = isOn; 1390 }); 1391 Button.onKeyEvent((event) => { 1392 if (!this.item.isEnabled) { 1393 return; 1394 } 1395 if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { 1396 return; 1397 } 1398 if (event.type === KeyType.Down) { 1399 this.isOnClick = true; 1400 } 1401 if (event.type === KeyType.Up) { 1402 this.isOnClick = false; 1403 } 1404 }); 1405 Button.onTouch((event) => { 1406 if (!this.item.isEnabled) { 1407 return; 1408 } 1409 if (event.type === TouchType.Down) { 1410 this.isOnClick = true; 1411 } 1412 if (event.type === TouchType.Up || event.type === TouchType.Cancel) { 1413 this.isOnClick = false; 1414 if (this.fontSize >= this.minFontSize) { 1415 this.dialogController?.close(); 1416 } 1417 } 1418 }); 1419 Button.onClick(() => this.item.isEnabled && this.item.action && this.item.action()); 1420 Button.gestureModifier(ObservedObject.GetRawObject(this.buttonGestureModifier)); 1421 }, Button); 1422 this.observeComponentCreation2((elmtId, isInitialRender) => { 1423 If.create(); 1424 if (this.item.symbolStyle) { 1425 this.ifElseBranchUpdateFunction(0, () => { 1426 this.observeComponentCreation2((elmtId, isInitialRender) => { 1427 SymbolGlyph.create(); 1428 SymbolGlyph.fontColor([{ 1429 'id': -1, 1430 'type': 10001, 1431 params: ['sys.color.font_primary'], 1432 'bundleName': '__harDefaultBundleName__', 1433 'moduleName': '__harDefaultModuleName__', 1434 }]); 1435 SymbolGlyph.attributeModifier.bind(this)(this.item.symbolStyle); 1436 SymbolGlyph.fontSize(ImageMenuItem.imageSize); 1437 SymbolGlyph.draggable(false); 1438 SymbolGlyph.focusable(this.item?.isEnabled); 1439 SymbolGlyph.key(ImageMenuItem.focusablePrefix + this.index); 1440 SymbolGlyph.symbolEffect(new SymbolEffect(), false); 1441 }, SymbolGlyph); 1442 }); 1443 } else { 1444 this.ifElseBranchUpdateFunction(1, () => { 1445 this.observeComponentCreation2((elmtId, isInitialRender) => { 1446 If.create(); 1447 if (Util.isSymbolResource(this.item.value)) { 1448 this.ifElseBranchUpdateFunction(0, () => { 1449 this.observeComponentCreation2((elmtId, isInitialRender) => { 1450 SymbolGlyph.create(this.item.value); 1451 SymbolGlyph.fontColor([{ 1452 'id': -1, 1453 'type': 10001, 1454 params: ['sys.color.font_primary'], 1455 'bundleName': '__harDefaultBundleName__', 1456 'moduleName': '__harDefaultModuleName__', 1457 }]); 1458 SymbolGlyph.fontSize(ImageMenuItem.imageSize); 1459 SymbolGlyph.draggable(false); 1460 SymbolGlyph.focusable(this.item?.isEnabled); 1461 SymbolGlyph.key(ImageMenuItem.focusablePrefix + this.index); 1462 }, SymbolGlyph); 1463 }); 1464 } else { 1465 this.ifElseBranchUpdateFunction(1, () => { 1466 this.observeComponentCreation2((elmtId, isInitialRender) => { 1467 Image.create(this.item.value); 1468 Image.draggable(false); 1469 Image.width(ImageMenuItem.imageSize); 1470 Image.height(ImageMenuItem.imageSize); 1471 Image.focusable(this.item.isEnabled); 1472 Image.key(ImageMenuItem.focusablePrefix + this.index); 1473 Image.fillColor({ 1474 'id': -1, 1475 'type': 10001, 1476 params: ['sys.color.icon_primary'], 1477 'bundleName': '__harDefaultBundleName__', 1478 'moduleName': '__harDefaultModuleName__', 1479 }); 1480 }, Image); 1481 }); 1482 } 1483 }, If); 1484 If.pop(); 1485 }); 1486 } 1487 }, If); 1488 If.pop(); 1489 Button.pop(); 1490 }); 1491 } else { 1492 this.ifElseBranchUpdateFunction(1, () => { 1493 this.observeComponentCreation2((elmtId, isInitialRender) => { 1494 Button.createWithChild({ type: ButtonType.Normal, stateEffect: this.item.isEnabled }); 1495 Button.accessibilityText(this.getAccessibilityReadText()); 1496 Button.accessibilityLevel(this.item?.accessibilityLevel ?? 'auto'); 1497 Button.accessibilityDescription(this.item?.accessibilityDescription); 1498 Button.width(ImageMenuItem.imageHotZoneWidth); 1499 Button.height(ImageMenuItem.imageHotZoneWidth); 1500 Button.borderRadius(ImageMenuItem.buttonBorderRadius); 1501 Button.foregroundColor(this.getFgColor()); 1502 Button.backgroundColor(this.getBgColor()); 1503 Button.enabled(this.item.isEnabled ? this.item.isEnabled : false); 1504 ViewStackProcessor.visualState('focused'); 1505 Button.border({ 1506 radius: { 1507 'id': -1, 1508 'type': 10002, 1509 params: ['sys.float.ohos_id_corner_radius_clicked'], 1510 'bundleName': '__harDefaultBundleName__', 1511 'moduleName': '__harDefaultModuleName__', 1512 }, 1513 width: ImageMenuItem.focusBorderWidth, 1514 color: { 1515 'id': -1, 1516 'type': 10001, 1517 params: ['sys.color.ohos_id_color_focused_outline'], 1518 'bundleName': '__harDefaultBundleName__', 1519 'moduleName': '__harDefaultModuleName__', 1520 }, 1521 style: BorderStyle.Solid 1522 }); 1523 ViewStackProcessor.visualState('normal'); 1524 Button.border({ 1525 radius: { 1526 'id': -1, 1527 'type': 10002, 1528 params: ['sys.float.ohos_id_corner_radius_clicked'], 1529 'bundleName': '__harDefaultBundleName__', 1530 'moduleName': '__harDefaultModuleName__', 1531 }, 1532 width: 0 1533 }); 1534 ViewStackProcessor.visualState(); 1535 Button.onFocus(() => { 1536 if (!this.item.isEnabled) { 1537 return; 1538 } 1539 this.isOnFocus = true; 1540 }); 1541 Button.onBlur(() => this.isOnFocus = false); 1542 Button.onHover((isOn) => { 1543 if (!this.item.isEnabled) { 1544 return; 1545 } 1546 this.isOnHover = isOn; 1547 }); 1548 Button.onKeyEvent((event) => { 1549 if (!this.item.isEnabled) { 1550 return; 1551 } 1552 if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { 1553 return; 1554 } 1555 if (event.type === KeyType.Down) { 1556 this.isOnClick = true; 1557 } 1558 if (event.type === KeyType.Up) { 1559 this.isOnClick = false; 1560 } 1561 }); 1562 Button.onTouch((event) => { 1563 if (!this.item.isEnabled) { 1564 return; 1565 } 1566 if (event.type === TouchType.Down) { 1567 this.isOnClick = true; 1568 } 1569 if (event.type === TouchType.Up || event.type === TouchType.Cancel) { 1570 this.isOnClick = false; 1571 if (this.fontSize >= this.minFontSize) { 1572 this.dialogController?.close(); 1573 } 1574 } 1575 }); 1576 Button.onClick(() => this.item.isEnabled && this.item.action && this.item.action()); 1577 }, Button); 1578 this.observeComponentCreation2((elmtId, isInitialRender) => { 1579 If.create(); 1580 if (this.item.symbolStyle) { 1581 this.ifElseBranchUpdateFunction(0, () => { 1582 this.observeComponentCreation2((elmtId, isInitialRender) => { 1583 SymbolGlyph.create(); 1584 SymbolGlyph.fontColor([{ 1585 'id': -1, 1586 'type': 10001, 1587 params: ['sys.color.font_primary'], 1588 'bundleName': '__harDefaultBundleName__', 1589 'moduleName': '__harDefaultModuleName__', 1590 }]); 1591 SymbolGlyph.attributeModifier.bind(this)(this.item.symbolStyle); 1592 SymbolGlyph.fontSize(ImageMenuItem.imageSize); 1593 SymbolGlyph.draggable(false); 1594 SymbolGlyph.focusable(this.item?.isEnabled); 1595 SymbolGlyph.key(ImageMenuItem.focusablePrefix + this.index); 1596 SymbolGlyph.symbolEffect(new SymbolEffect(), false); 1597 }, SymbolGlyph); 1598 }); 1599 } else { 1600 this.ifElseBranchUpdateFunction(1, () => { 1601 this.observeComponentCreation2((elmtId, isInitialRender) => { 1602 If.create(); 1603 if (Util.isSymbolResource(this.item.value)) { 1604 this.ifElseBranchUpdateFunction(0, () => { 1605 this.observeComponentCreation2((elmtId, isInitialRender) => { 1606 SymbolGlyph.create(this.item.value); 1607 SymbolGlyph.fontColor([{ 1608 'id': -1, 1609 'type': 10001, 1610 params: ['sys.color.font_primary'], 1611 'bundleName': '__harDefaultBundleName__', 1612 'moduleName': '__harDefaultModuleName__', 1613 }]); 1614 SymbolGlyph.fontSize(ImageMenuItem.imageSize); 1615 SymbolGlyph.draggable(false); 1616 SymbolGlyph.focusable(this.item?.isEnabled); 1617 SymbolGlyph.key(ImageMenuItem.focusablePrefix + this.index); 1618 }, SymbolGlyph); 1619 }); 1620 } else { 1621 this.ifElseBranchUpdateFunction(1, () => { 1622 this.observeComponentCreation2((elmtId, isInitialRender) => { 1623 Image.create(this.item.value); 1624 Image.draggable(false); 1625 Image.width(ImageMenuItem.imageSize); 1626 Image.height(ImageMenuItem.imageSize); 1627 Image.focusable(this.item.isEnabled); 1628 Image.key(ImageMenuItem.focusablePrefix + this.index); 1629 Image.fillColor({ 1630 'id': -1, 1631 'type': 10001, 1632 params: ['sys.color.icon_primary'], 1633 'bundleName': '__harDefaultBundleName__', 1634 'moduleName': '__harDefaultModuleName__', 1635 }); 1636 }, Image); 1637 }); 1638 } 1639 }, If); 1640 If.pop(); 1641 }); 1642 } 1643 }, If); 1644 If.pop(); 1645 Button.pop(); 1646 }); 1647 } 1648 }, If); 1649 If.pop(); 1650 } 1651 1652 rerender() { 1653 this.updateDirtyElements(); 1654 } 1655} 1656 1657ImageMenuItem.imageSize = '24vp'; 1658ImageMenuItem.imageHotZoneWidth = 48; 1659ImageMenuItem.buttonBorderRadius = 8; 1660ImageMenuItem.focusBorderWidth = 2; 1661ImageMenuItem.focusablePrefix = 'Id-SelectTitleBar-ImageMenuItem-'; 1662 1663class SelectTitleBarDialog extends ViewPU { 1664 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 1665 super(parent, __localStorage, elmtId, extraInfo); 1666 if (typeof paramsLambda === 'function') { 1667 this.paramsGenerator_ = paramsLambda; 1668 } 1669 this.selectTitleDialog = {}; 1670 this.callbackId = undefined; 1671 this.selectTitleBarDialog = ''; 1672 this.mainWindowStage = undefined; 1673 this.controller = undefined; 1674 this.minFontSize = 1.75; 1675 this.maxFontSize = 3.2; 1676 this.screenWidth = 640; 1677 this.verticalScreenLines = 6; 1678 this.horizontalsScreenLines = 1; 1679 this.__mainWindow = this.createStorageLink('mainWindow', undefined, 'mainWindow'); 1680 this.__fontSize = new ObservedPropertySimplePU(1, this, 'fontSize'); 1681 this.__maxLines = new ObservedPropertySimplePU(1, this, 'maxLines'); 1682 this.__windowStandardHeight = this.createStorageProp('windowStandardHeight', 0, 'windowStandardHeight'); 1683 this.cancel = () => { 1684 }; 1685 this.confirm = () => { 1686 }; 1687 this.setInitiallyProvidedValue(params); 1688 this.finalizeConstruction(); 1689 } 1690 1691 setInitiallyProvidedValue(params) { 1692 if (params.selectTitleDialog !== undefined) { 1693 this.selectTitleDialog = params.selectTitleDialog; 1694 } 1695 if (params.callbackId !== undefined) { 1696 this.callbackId = params.callbackId; 1697 } 1698 if (params.selectTitleBarDialog !== undefined) { 1699 this.selectTitleBarDialog = params.selectTitleBarDialog; 1700 } 1701 if (params.mainWindowStage !== undefined) { 1702 this.mainWindowStage = params.mainWindowStage; 1703 } 1704 if (params.controller !== undefined) { 1705 this.controller = params.controller; 1706 } 1707 if (params.minFontSize !== undefined) { 1708 this.minFontSize = params.minFontSize; 1709 } 1710 if (params.maxFontSize !== undefined) { 1711 this.maxFontSize = params.maxFontSize; 1712 } 1713 if (params.screenWidth !== undefined) { 1714 this.screenWidth = params.screenWidth; 1715 } 1716 if (params.verticalScreenLines !== undefined) { 1717 this.verticalScreenLines = params.verticalScreenLines; 1718 } 1719 if (params.horizontalsScreenLines !== undefined) { 1720 this.horizontalsScreenLines = params.horizontalsScreenLines; 1721 } 1722 if (params.fontSize !== undefined) { 1723 this.fontSize = params.fontSize; 1724 } 1725 if (params.maxLines !== undefined) { 1726 this.maxLines = params.maxLines; 1727 } 1728 if (params.cancel !== undefined) { 1729 this.cancel = params.cancel; 1730 } 1731 if (params.confirm !== undefined) { 1732 this.confirm = params.confirm; 1733 } 1734 } 1735 1736 updateStateVars(params) { 1737 } 1738 1739 purgeVariableDependenciesOnElmtId(rmElmtId) { 1740 this.__mainWindow.purgeDependencyOnElmtId(rmElmtId); 1741 this.__fontSize.purgeDependencyOnElmtId(rmElmtId); 1742 this.__maxLines.purgeDependencyOnElmtId(rmElmtId); 1743 this.__windowStandardHeight.purgeDependencyOnElmtId(rmElmtId); 1744 } 1745 1746 aboutToBeDeleted() { 1747 this.__mainWindow.aboutToBeDeleted(); 1748 this.__fontSize.aboutToBeDeleted(); 1749 this.__maxLines.aboutToBeDeleted(); 1750 this.__windowStandardHeight.aboutToBeDeleted(); 1751 SubscriberManager.Get().delete(this.id__()); 1752 this.aboutToBeDeletedInternal(); 1753 } 1754 1755 setController(ctr) { 1756 this.controller = ctr; 1757 } 1758 1759 get mainWindow() { 1760 return this.__mainWindow.get(); 1761 } 1762 1763 set mainWindow(newValue) { 1764 this.__mainWindow.set(newValue); 1765 } 1766 1767 get fontSize() { 1768 return this.__fontSize.get(); 1769 } 1770 1771 set fontSize(newValue) { 1772 this.__fontSize.set(newValue); 1773 } 1774 1775 get maxLines() { 1776 return this.__maxLines.get(); 1777 } 1778 1779 set maxLines(newValue) { 1780 this.__maxLines.set(newValue); 1781 } 1782 1783 get windowStandardHeight() { 1784 return this.__windowStandardHeight.get(); 1785 } 1786 1787 set windowStandardHeight(newValue) { 1788 this.__windowStandardHeight.set(newValue); 1789 } 1790 1791 initialRender() { 1792 this.observeComponentCreation2((elmtId, isInitialRender) => { 1793 If.create(); 1794 if (this.selectTitleBarDialog) { 1795 this.ifElseBranchUpdateFunction(0, () => { 1796 this.observeComponentCreation2((elmtId, isInitialRender) => { 1797 Column.create(); 1798 Column.width(this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG); 1799 Column.constraintSize({ 1800 minHeight: this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG 1801 }); 1802 Column.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK, undefined, 1803 { disableSystemAdaptation: true }); 1804 Column.shadow(ShadowStyle.OUTER_DEFAULT_LG); 1805 Column.borderRadius({ 1806 'id': -1, 1807 'type': 10002, 1808 params: ['sys.float.corner_radius_level10'], 1809 'bundleName': '__harDefaultBundleName__', 1810 'moduleName': '__harDefaultModuleName__', 1811 }); 1812 }, Column); 1813 this.observeComponentCreation2((elmtId, isInitialRender) => { 1814 If.create(); 1815 if (this.selectTitleDialog.symbolStyle) { 1816 this.ifElseBranchUpdateFunction(0, () => { 1817 this.observeComponentCreation2((elmtId, isInitialRender) => { 1818 SymbolGlyph.create(); 1819 SymbolGlyph.fontColor([{ 1820 'id': -1, 1821 'type': 10001, 1822 params: ['sys.color.font_primary'], 1823 'bundleName': '__harDefaultBundleName__', 1824 'moduleName': '__harDefaultModuleName__', 1825 }]); 1826 SymbolGlyph.attributeModifier.bind(this)(this.selectTitleDialog.symbolStyle); 1827 SymbolGlyph.fontSize(IMAGE_SIZE); 1828 SymbolGlyph.draggable(false); 1829 SymbolGlyph.focusable(this.selectTitleDialog.isEnabled); 1830 SymbolGlyph.margin({ 1831 top: { 1832 'id': -1, 1833 'type': 10002, 1834 params: ['sys.float.padding_level24'], 1835 'bundleName': '__harDefaultBundleName__', 1836 'moduleName': '__harDefaultModuleName__', 1837 }, 1838 bottom: { 1839 'id': -1, 1840 'type': 10002, 1841 params: ['sys.float.padding_level8'], 1842 'bundleName': '__harDefaultBundleName__', 1843 'moduleName': '__harDefaultModuleName__', 1844 }, 1845 }); 1846 SymbolGlyph.symbolEffect(new SymbolEffect(), false); 1847 }, SymbolGlyph); 1848 }); 1849 } else if (this.selectTitleDialog.value) { 1850 this.ifElseBranchUpdateFunction(1, () => { 1851 this.observeComponentCreation2((elmtId, isInitialRender) => { 1852 If.create(); 1853 if (Util.isSymbolResource(this.selectTitleDialog.value)) { 1854 this.ifElseBranchUpdateFunction(0, () => { 1855 this.observeComponentCreation2((elmtId, isInitialRender) => { 1856 SymbolGlyph.create(this.selectTitleDialog.value); 1857 SymbolGlyph.fontColor([{ 1858 'id': -1, 1859 'type': 10001, 1860 params: ['sys.color.font_primary'], 1861 'bundleName': '__harDefaultBundleName__', 1862 'moduleName': '__harDefaultModuleName__', 1863 }]); 1864 SymbolGlyph.fontSize(IMAGE_SIZE); 1865 SymbolGlyph.draggable(false); 1866 SymbolGlyph.focusable(this.selectTitleDialog.isEnabled); 1867 SymbolGlyph.margin({ 1868 top: { 1869 'id': -1, 1870 'type': 10002, 1871 params: ['sys.float.padding_level24'], 1872 'bundleName': '__harDefaultBundleName__', 1873 'moduleName': '__harDefaultModuleName__', 1874 }, 1875 bottom: { 1876 'id': -1, 1877 'type': 10002, 1878 params: ['sys.float.padding_level8'], 1879 'bundleName': '__harDefaultBundleName__', 1880 'moduleName': '__harDefaultModuleName__', 1881 }, 1882 }); 1883 }, SymbolGlyph); 1884 }); 1885 } else { 1886 this.ifElseBranchUpdateFunction(1, () => { 1887 this.observeComponentCreation2((elmtId, isInitialRender) => { 1888 Image.create(this.selectTitleDialog.value); 1889 Image.width(IMAGE_SIZE); 1890 Image.height(IMAGE_SIZE); 1891 Image.margin({ 1892 top: { 1893 'id': -1, 1894 'type': 10002, 1895 params: ['sys.float.padding_level24'], 1896 'bundleName': '__harDefaultBundleName__', 1897 'moduleName': '__harDefaultModuleName__', 1898 }, 1899 bottom: { 1900 'id': -1, 1901 'type': 10002, 1902 params: ['sys.float.padding_level8'], 1903 'bundleName': '__harDefaultBundleName__', 1904 'moduleName': '__harDefaultModuleName__', 1905 }, 1906 }); 1907 Image.fillColor({ 1908 'id': -1, 1909 'type': 10001, 1910 params: ['sys.color.icon_primary'], 1911 'bundleName': '__harDefaultBundleName__', 1912 'moduleName': '__harDefaultModuleName__', 1913 }); 1914 }, Image); 1915 }); 1916 } 1917 }, If); 1918 If.pop(); 1919 }); 1920 } else { 1921 this.ifElseBranchUpdateFunction(2, () => { 1922 }); 1923 } 1924 }, If); 1925 If.pop(); 1926 this.observeComponentCreation2((elmtId, isInitialRender) => { 1927 Column.create(); 1928 Column.width('100%'); 1929 Column.padding({ 1930 left: { 1931 'id': -1, 1932 'type': 10002, 1933 params: ['sys.float.padding_level4'], 1934 'bundleName': '__harDefaultBundleName__', 1935 'moduleName': '__harDefaultModuleName__', 1936 }, 1937 right: { 1938 'id': -1, 1939 'type': 10002, 1940 params: ['sys.float.padding_level4'], 1941 'bundleName': '__harDefaultBundleName__', 1942 'moduleName': '__harDefaultModuleName__', 1943 }, 1944 bottom: { 1945 'id': -1, 1946 'type': 10002, 1947 params: ['sys.float.padding_level12'], 1948 'bundleName': '__harDefaultBundleName__', 1949 'moduleName': '__harDefaultModuleName__', 1950 }, 1951 }); 1952 }, Column); 1953 this.observeComponentCreation2((elmtId, isInitialRender) => { 1954 Text.create(this.selectTitleBarDialog); 1955 Text.fontSize(TEXT_EDITABLE_DIALOG); 1956 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1957 Text.maxLines(this.maxLines); 1958 Text.width('100%'); 1959 Text.textAlign(TextAlign.Center); 1960 Text.fontColor({ 1961 'id': -1, 1962 'type': 10001, 1963 params: ['sys.color.font_primary'], 1964 'bundleName': '__harDefaultBundleName__', 1965 'moduleName': '__harDefaultModuleName__', 1966 }); 1967 }, Text); 1968 Text.pop(); 1969 Column.pop(); 1970 Column.pop(); 1971 }); 1972 } else { 1973 this.ifElseBranchUpdateFunction(1, () => { 1974 this.observeComponentCreation2((elmtId, isInitialRender) => { 1975 Column.create(); 1976 Column.width(this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG); 1977 Column.constraintSize({ 1978 minHeight: this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG 1979 }); 1980 Column.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK, undefined, 1981 { disableSystemAdaptation: true }); 1982 Column.shadow(ShadowStyle.OUTER_DEFAULT_LG); 1983 Column.borderRadius({ 1984 'id': -1, 1985 'type': 10002, 1986 params: ['sys.float.corner_radius_level10'], 1987 'bundleName': '__harDefaultBundleName__', 1988 'moduleName': '__harDefaultModuleName__', 1989 }); 1990 Column.justifyContent(FlexAlign.Center); 1991 }, Column); 1992 this.observeComponentCreation2((elmtId, isInitialRender) => { 1993 If.create(); 1994 if (this.selectTitleDialog.symbolStyle) { 1995 this.ifElseBranchUpdateFunction(0, () => { 1996 this.observeComponentCreation2((elmtId, isInitialRender) => { 1997 SymbolGlyph.create(); 1998 SymbolGlyph.fontColor([{ 1999 'id': -1, 2000 'type': 10001, 2001 params: ['sys.color.font_primary'], 2002 'bundleName': '__harDefaultBundleName__', 2003 'moduleName': '__harDefaultModuleName__', 2004 }]); 2005 SymbolGlyph.attributeModifier.bind(this)(this.selectTitleDialog.symbolStyle); 2006 SymbolGlyph.fontSize(IMAGE_SIZE); 2007 SymbolGlyph.draggable(false); 2008 SymbolGlyph.focusable(this.selectTitleDialog.isEnabled); 2009 SymbolGlyph.symbolEffect(new SymbolEffect(), false); 2010 }, SymbolGlyph); 2011 }); 2012 } else if (this.selectTitleDialog.value) { 2013 this.ifElseBranchUpdateFunction(1, () => { 2014 this.observeComponentCreation2((elmtId, isInitialRender) => { 2015 If.create(); 2016 if (Util.isSymbolResource(this.selectTitleDialog.value)) { 2017 this.ifElseBranchUpdateFunction(0, () => { 2018 this.observeComponentCreation2((elmtId, isInitialRender) => { 2019 SymbolGlyph.create(this.selectTitleDialog.value); 2020 SymbolGlyph.fontColor([{ 2021 'id': -1, 2022 'type': 10001, 2023 params: ['sys.color.font_primary'], 2024 'bundleName': '__harDefaultBundleName__', 2025 'moduleName': '__harDefaultModuleName__', 2026 }]); 2027 SymbolGlyph.fontSize(IMAGE_SIZE); 2028 SymbolGlyph.draggable(false); 2029 SymbolGlyph.focusable(this.selectTitleDialog.isEnabled); 2030 }, SymbolGlyph); 2031 }); 2032 } else { 2033 this.ifElseBranchUpdateFunction(1, () => { 2034 this.observeComponentCreation2((elmtId, isInitialRender) => { 2035 Image.create(this.selectTitleDialog.value); 2036 Image.width(IMAGE_SIZE); 2037 Image.height(IMAGE_SIZE); 2038 Image.fillColor({ 2039 'id': -1, 2040 'type': 10001, 2041 params: ['sys.color.icon_primary'], 2042 'bundleName': '__harDefaultBundleName__', 2043 'moduleName': '__harDefaultModuleName__', 2044 }); 2045 }, Image); 2046 }); 2047 } 2048 }, If); 2049 If.pop(); 2050 }); 2051 } else { 2052 this.ifElseBranchUpdateFunction(2, () => { 2053 }); 2054 } 2055 }, If); 2056 If.pop(); 2057 Column.pop(); 2058 }); 2059 } 2060 }, If); 2061 If.pop(); 2062 } 2063 2064 async aboutToAppear() { 2065 try { 2066 let context = this.getUIContext().getHostContext(); 2067 this.mainWindowStage = context.windowStage.getMainWindowSync(); 2068 let properties = this.mainWindowStage.getWindowProperties(); 2069 let rect = properties.windowRect; 2070 if (px2vp(rect.height) > this.screenWidth) { 2071 this.maxLines = this.verticalScreenLines; 2072 } else { 2073 this.maxLines = this.horizontalsScreenLines; 2074 } 2075 } catch (err) { 2076 let code = err?.code; 2077 let message = err?.message; 2078 hilog.error(0x3900, 'Ace', `Faild to SelectTitleBar getMainWindowSync,code: ${code},message:${message}`); 2079 } 2080 } 2081 2082 rerender() { 2083 this.updateDirtyElements(); 2084 } 2085} 2086 2087class Util { 2088 static isSymbolResource(resourceStr) { 2089 if (!Util.isResourceType(resourceStr)) { 2090 return false; 2091 } 2092 let resource = resourceStr; 2093 return resource.type == RESOURCE_TYPE_SYMBOL; 2094 } 2095 2096 static isResourceType(resource) { 2097 if (!resource) { 2098 return false; 2099 } 2100 if (typeof resource === 'string' || typeof resource === 'undefined') { 2101 return false; 2102 } 2103 return true; 2104 } 2105} 2106 2107export default { 2108 SelectTitleBar: SelectTitleBar, 2109}; 2110//# sourceMappingURL=MainPage.js.map