1/* 2 * Copyright (c) 2023-2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16export class splitlayout extends ViewPU { 17 constructor(e, t, o, r = -1) { 18 super(e, o, r); 19 this.container = void 0; 20 this.__sizeValue = new ObservedPropertySimplePU("", this, "sizeValue"); 21 this.__areaWidth = new ObservedPropertySimplePU(0, this, "areaWidth"); 22 this.__imageBackgroundColor = new ObservedPropertySimplePU("#FFFFFF", this, "imageBackgroundColor"); 23 this.__mainImage = new SynchedPropertyObjectOneWayPU(t.mainImage, this, "mainImage"); 24 this.__primaryText = new SynchedPropertySimpleOneWayPU(t.primaryText, this, "primaryText"); 25 this.secondaryText = "私人订制新歌精选站，为你推荐专属优质新歌;为你推荐专属优质新歌"; 26 this.tertiaryText = "每日更新"; 27 this.setInitiallyProvidedValue(t) 28 } 29 30 setInitiallyProvidedValue(e) { 31 void 0 !== e.container && (this.container = e.container); 32 void 0 !== e.sizeValue && (this.sizeValue = e.sizeValue); 33 void 0 !== e.areaWidth && (this.areaWidth = e.areaWidth); 34 void 0 !== e.imageBackgroundColor && (this.imageBackgroundColor = e.imageBackgroundColor); 35 void 0 !== e.mainImage ? this.__mainImage.set(e.mainImage) : this.__mainImage.set({ 36 id: -1, 37 type: 2e4, 38 params: ["app.media.music"], 39 bundleName: "", 40 moduleName: "" 41 }); 42 void 0 !== e.primaryText ? this.__primaryText.set(e.primaryText) : this.__primaryText.set("新歌推荐"); 43 void 0 !== e.secondaryText && (this.secondaryText = e.secondaryText); 44 void 0 !== e.tertiaryText && (this.tertiaryText = e.tertiaryText) 45 } 46 47 updateStateVars(e) { 48 this.__mainImage.reset(e.mainImage); 49 this.__primaryText.reset(e.primaryText) 50 } 51 52 purgeVariableDependenciesOnElmtId(e) { 53 this.__sizeValue.purgeDependencyOnElmtId(e); 54 this.__areaWidth.purgeDependencyOnElmtId(e); 55 this.__imageBackgroundColor.purgeDependencyOnElmtId(e); 56 this.__mainImage.purgeDependencyOnElmtId(e); 57 this.__primaryText.purgeDependencyOnElmtId(e) 58 } 59 60 aboutToBeDeleted() { 61 this.__sizeValue.aboutToBeDeleted(); 62 this.__areaWidth.aboutToBeDeleted(); 63 this.__imageBackgroundColor.aboutToBeDeleted(); 64 this.__mainImage.aboutToBeDeleted(); 65 this.__primaryText.aboutToBeDeleted(); 66 SubscriberManager.Get().delete(this.id__()); 67 this.aboutToBeDeletedInternal() 68 } 69 70 get sizeValue() { 71 return this.__sizeValue.get() 72 } 73 74 set sizeValue(e) { 75 this.__sizeValue.set(e) 76 } 77 78 get areaWidth() { 79 return this.__areaWidth.get() 80 } 81 82 set areaWidth(e) { 83 this.__areaWidth.set(e) 84 } 85 86 get imageBackgroundColor() { 87 return this.__imageBackgroundColor.get() 88 } 89 90 set imageBackgroundColor(e) { 91 this.__imageBackgroundColor.set(e) 92 } 93 94 get mainImage() { 95 return this.__mainImage.get() 96 } 97 98 set mainImage(e) { 99 this.__mainImage.set(e) 100 } 101 102 get primaryText() { 103 return this.__primaryText.get() 104 } 105 106 set primaryText(e) { 107 this.__primaryText.set(e) 108 } 109 110 initialRender() { 111 this.observeComponentCreation(((e, t) => { 112 ViewStackProcessor.StartGetAccessRecordingFor(e); 113 Column.create(); 114 Column.onAreaChange(((e, t) => { 115 console.info(`Ace: on area change, oldValue is ${JSON.stringify(e)} value is ${JSON.stringify(t)}`); 116 this.sizeValue = JSON.stringify(t); 117 this.areaWidth = parseInt(t.width.toString(), 0); 118 console.info("pingAce: on area change, oldValue is" + this.areaWidth); 119 console.info("pingAce: on area change, oldValue is" + parseInt(t.height.toString(), 0)) 120 })); 121 t || Column.pop(); 122 ViewStackProcessor.StopGetAccessRecording() 123 })); 124 this.observeComponentCreation(((e, t) => { 125 ViewStackProcessor.StartGetAccessRecordingFor(e); 126 If.create(); 127 this.areaWidth < 600 ? this.ifElseBranchUpdateFunction(0, (() => { 128 this.observeComponentCreation(((e, t) => { 129 ViewStackProcessor.StartGetAccessRecordingFor(e); 130 GridRow.create({ 131 columns: 4, 132 breakpoints: { reference: BreakpointsReference.WindowSize }, 133 direction: GridRowDirection.Row 134 }); 135 t || GridRow.pop(); 136 ViewStackProcessor.StopGetAccessRecording() 137 })); 138 this.observeComponentCreation(((e, t) => { 139 ViewStackProcessor.StartGetAccessRecordingFor(e); 140 GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }); 141 t || GridCol.pop(); 142 ViewStackProcessor.StopGetAccessRecording() 143 })); 144 this.observeComponentCreation(((e, t) => { 145 ViewStackProcessor.StartGetAccessRecordingFor(e); 146 Column.create(); 147 t || Column.pop(); 148 ViewStackProcessor.StopGetAccessRecording() 149 })); 150 this.observeComponentCreation(((e, t) => { 151 ViewStackProcessor.StartGetAccessRecordingFor(e); 152 Stack.create({ alignContent: Alignment.Bottom }); 153 Stack.height("34%"); 154 Stack.width("100%"); 155 t || Stack.pop(); 156 ViewStackProcessor.StopGetAccessRecording() 157 })); 158 this.observeComponentCreation(((e, t) => { 159 ViewStackProcessor.StartGetAccessRecordingFor(e); 160 Image.create(this.mainImage); 161 t || Image.pop(); 162 ViewStackProcessor.StopGetAccessRecording() 163 })); 164 this.observeComponentCreation(((e, t) => { 165 ViewStackProcessor.StartGetAccessRecordingFor(e); 166 Column.create(); 167 Column.alignItems(HorizontalAlign.Center); 168 Column.margin({ 169 left: { 170 id: -1, 171 type: 10002, 172 params: ["sys.float.ohos_id_max_padding_start"], 173 bundleName: "", 174 moduleName: "" 175 }, 176 right: { 177 id: -1, 178 type: 10002, 179 params: ["sys.float.ohos_id_max_padding_end"], 180 bundleName: "", 181 moduleName: "" 182 } 183 }); 184 t || Column.pop(); 185 ViewStackProcessor.StopGetAccessRecording() 186 })); 187 this.observeComponentCreation(((e, t) => { 188 ViewStackProcessor.StartGetAccessRecordingFor(e); 189 Text.create(this.primaryText); 190 Text.textAlign(TextAlign.Center); 191 Text.fontSize({ 192 id: -1, 193 type: 10002, 194 params: ["sys.float.ohos_id_text_size_headline7"], 195 bundleName: "", 196 moduleName: "" 197 }); 198 Text.fontColor({ 199 id: -1, 200 type: 10001, 201 params: ["sys.color.ohos_id_color_text_primary"], 202 bundleName: "", 203 moduleName: "" 204 }); 205 t || Text.pop(); 206 ViewStackProcessor.StopGetAccessRecording() 207 })); 208 Text.pop(); 209 this.observeComponentCreation(((e, t) => { 210 ViewStackProcessor.StartGetAccessRecordingFor(e); 211 Text.create(this.secondaryText); 212 Text.textAlign(TextAlign.Center); 213 Text.fontSize({ 214 id: -1, 215 type: 10002, 216 params: ["sys.float.ohos_id_text_size_body2"], 217 bundleName: "", 218 moduleName: "" 219 }); 220 Text.fontColor({ 221 id: -1, 222 type: 10001, 223 params: ["sys.color.ohos_id_color_text_primary"], 224 bundleName: "", 225 moduleName: "" 226 }); 227 Text.margin({ top: 4, bottom: 8 }); 228 t || Text.pop(); 229 ViewStackProcessor.StopGetAccessRecording() 230 })); 231 Text.pop(); 232 this.observeComponentCreation(((e, t) => { 233 ViewStackProcessor.StartGetAccessRecordingFor(e); 234 Text.create(this.tertiaryText); 235 Text.textAlign(TextAlign.Center); 236 Text.fontSize({ 237 id: -1, 238 type: 10002, 239 params: ["sys.float.ohos_id_text_size_caption"], 240 bundleName: "", 241 moduleName: "" 242 }); 243 Text.fontColor({ 244 id: -1, 245 type: 10001, 246 params: ["sys.color.ohos_id_color_text_secondary"], 247 bundleName: "", 248 moduleName: "" 249 }); 250 Text.margin({ bottom: 24 }); 251 t || Text.pop(); 252 ViewStackProcessor.StopGetAccessRecording() 253 })); 254 Text.pop(); 255 Column.pop(); 256 Stack.pop(); 257 this.observeComponentCreation(((e, t) => { 258 ViewStackProcessor.StartGetAccessRecordingFor(e); 259 Column.create(); 260 Column.height("66%"); 261 Column.width("100%"); 262 t || Column.pop(); 263 ViewStackProcessor.StopGetAccessRecording() 264 })); 265 this.container.bind(this)(); 266 Column.pop(); 267 Column.pop(); 268 GridCol.pop(); 269 GridRow.pop() 270 })) : 600 < this.areaWidth && this.areaWidth < 840 ? this.ifElseBranchUpdateFunction(1, (() => { 271 this.observeComponentCreation(((e, t) => { 272 ViewStackProcessor.StartGetAccessRecordingFor(e); 273 GridRow.create({ 274 columns: 8, 275 breakpoints: { reference: BreakpointsReference.WindowSize }, 276 direction: GridRowDirection.Row 277 }); 278 t || GridRow.pop(); 279 ViewStackProcessor.StopGetAccessRecording() 280 })); 281 this.observeComponentCreation(((e, t) => { 282 ViewStackProcessor.StartGetAccessRecordingFor(e); 283 GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }); 284 t || GridCol.pop(); 285 ViewStackProcessor.StopGetAccessRecording() 286 })); 287 this.observeComponentCreation(((e, t) => { 288 ViewStackProcessor.StartGetAccessRecordingFor(e); 289 Column.create(); 290 t || Column.pop(); 291 ViewStackProcessor.StopGetAccessRecording() 292 })); 293 this.observeComponentCreation(((e, t) => { 294 ViewStackProcessor.StartGetAccessRecordingFor(e); 295 Row.create(); 296 Row.backgroundColor(this.imageBackgroundColor); 297 Row.height("34%"); 298 t || Row.pop(); 299 ViewStackProcessor.StopGetAccessRecording() 300 })); 301 this.observeComponentCreation(((e, t) => { 302 ViewStackProcessor.StartGetAccessRecordingFor(e); 303 Image.create(this.mainImage); 304 Image.margin({ left: 96, right: 36 }); 305 Image.height("60%"); 306 Image.width("20%"); 307 t || Image.pop(); 308 ViewStackProcessor.StopGetAccessRecording() 309 })); 310 this.observeComponentCreation(((e, t) => { 311 ViewStackProcessor.StartGetAccessRecordingFor(e); 312 Column.create(); 313 Column.alignItems(HorizontalAlign.Start); 314 Column.margin({ right: 96 }); 315 t || Column.pop(); 316 ViewStackProcessor.StopGetAccessRecording() 317 })); 318 this.observeComponentCreation(((e, t) => { 319 ViewStackProcessor.StartGetAccessRecordingFor(e); 320 Text.create(this.primaryText); 321 Text.fontSize({ 322 id: -1, 323 type: 10002, 324 params: ["sys.float.ohos_id_text_size_headline7"], 325 bundleName: "", 326 moduleName: "" 327 }); 328 Text.fontColor({ 329 id: -1, 330 type: 10001, 331 params: ["sys.color.ohos_id_color_text_primary"], 332 bundleName: "", 333 moduleName: "" 334 }); 335 t || Text.pop(); 336 ViewStackProcessor.StopGetAccessRecording() 337 })); 338 Text.pop(); 339 this.observeComponentCreation(((e, t) => { 340 ViewStackProcessor.StartGetAccessRecordingFor(e); 341 Text.create(this.secondaryText); 342 Text.fontSize({ 343 id: -1, 344 type: 10002, 345 params: ["sys.float.ohos_id_text_size_body2"], 346 bundleName: "", 347 moduleName: "" 348 }); 349 Text.fontColor({ 350 id: -1, 351 type: 10001, 352 params: ["sys.color.ohos_id_color_text_primary"], 353 bundleName: "", 354 moduleName: "" 355 }); 356 Text.margin({ top: 4, bottom: 8 }); 357 t || Text.pop(); 358 ViewStackProcessor.StopGetAccessRecording() 359 })); 360 Text.pop(); 361 this.observeComponentCreation(((e, t) => { 362 ViewStackProcessor.StartGetAccessRecordingFor(e); 363 Text.create(this.tertiaryText); 364 Text.fontSize({ 365 id: -1, 366 type: 10002, 367 params: ["sys.float.ohos_id_text_size_caption"], 368 bundleName: "", 369 moduleName: "" 370 }); 371 Text.fontColor({ 372 id: -1, 373 type: 10001, 374 params: ["sys.color.ohos_id_color_text_secondary"], 375 bundleName: "", 376 moduleName: "" 377 }); 378 t || Text.pop(); 379 ViewStackProcessor.StopGetAccessRecording() 380 })); 381 Text.pop(); 382 Column.pop(); 383 Row.pop(); 384 this.observeComponentCreation(((e, t) => { 385 ViewStackProcessor.StartGetAccessRecordingFor(e); 386 Column.create(); 387 Column.height("66%"); 388 t || Column.pop(); 389 ViewStackProcessor.StopGetAccessRecording() 390 })); 391 this.container.bind(this)(); 392 Column.pop(); 393 Column.pop(); 394 GridCol.pop(); 395 GridRow.pop() 396 })) : this.areaWidth > 840 && this.ifElseBranchUpdateFunction(2, (() => { 397 this.observeComponentCreation(((e, t) => { 398 ViewStackProcessor.StartGetAccessRecordingFor(e); 399 GridRow.create({ 400 columns: 12, 401 breakpoints: { reference: BreakpointsReference.WindowSize }, 402 direction: GridRowDirection.Row 403 }); 404 t || GridRow.pop(); 405 ViewStackProcessor.StopGetAccessRecording() 406 })); 407 this.observeComponentCreation(((e, t) => { 408 ViewStackProcessor.StartGetAccessRecordingFor(e); 409 GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }); 410 GridCol.height("100%"); 411 t || GridCol.pop(); 412 ViewStackProcessor.StopGetAccessRecording() 413 })); 414 this.observeComponentCreation(((e, t) => { 415 ViewStackProcessor.StartGetAccessRecordingFor(e); 416 Column.create(); 417 Column.height("100%"); 418 Column.backgroundColor(this.imageBackgroundColor); 419 Column.justifyContent(FlexAlign.Center); 420 Column.alignItems(HorizontalAlign.Center); 421 t || Column.pop(); 422 ViewStackProcessor.StopGetAccessRecording() 423 })); 424 this.observeComponentCreation(((e, t) => { 425 ViewStackProcessor.StartGetAccessRecordingFor(e); 426 Image.create(this.mainImage); 427 Image.height("17%"); 428 Image.width("34%"); 429 Image.margin({ bottom: 36 }); 430 t || Image.pop(); 431 ViewStackProcessor.StopGetAccessRecording() 432 })); 433 this.observeComponentCreation(((e, t) => { 434 ViewStackProcessor.StartGetAccessRecordingFor(e); 435 Text.create(this.primaryText); 436 Text.textAlign(TextAlign.Center); 437 Text.fontSize({ 438 id: -1, 439 type: 10002, 440 params: ["sys.float.ohos_id_text_size_headline7"], 441 bundleName: "", 442 moduleName: "" 443 }); 444 Text.fontColor({ 445 id: -1, 446 type: 10001, 447 params: ["sys.color.ohos_id_color_text_primary"], 448 bundleName: "", 449 moduleName: "" 450 }); 451 Text.margin({ left: 48, right: 48 }); 452 t || Text.pop(); 453 ViewStackProcessor.StopGetAccessRecording() 454 })); 455 Text.pop(); 456 this.observeComponentCreation(((e, t) => { 457 ViewStackProcessor.StartGetAccessRecordingFor(e); 458 Text.create(this.secondaryText); 459 Text.textAlign(TextAlign.Center); 460 Text.fontSize({ 461 id: -1, 462 type: 10002, 463 params: ["sys.float.ohos_id_text_size_body1"], 464 bundleName: "", 465 moduleName: "" 466 }); 467 Text.fontColor({ 468 id: -1, 469 type: 10001, 470 params: ["sys.color.ohos_id_color_text_primary"], 471 bundleName: "", 472 moduleName: "" 473 }); 474 Text.margin({ top: 4, bottom: 8, left: 48, right: 48 }); 475 t || Text.pop(); 476 ViewStackProcessor.StopGetAccessRecording() 477 })); 478 Text.pop(); 479 this.observeComponentCreation(((e, t) => { 480 ViewStackProcessor.StartGetAccessRecordingFor(e); 481 Text.create(this.tertiaryText); 482 Text.textAlign(TextAlign.Center); 483 Text.fontSize({ 484 id: -1, 485 type: 10002, 486 params: ["sys.float.ohos_id_text_size_body2"], 487 bundleName: "", 488 moduleName: "" 489 }); 490 Text.fontColor({ 491 id: -1, 492 type: 10001, 493 params: ["sys.color.ohos_id_color_text_secondary"], 494 bundleName: "", 495 moduleName: "" 496 }); 497 Text.margin({ bottom: 24, left: 48, right: 48 }); 498 t || Text.pop(); 499 ViewStackProcessor.StopGetAccessRecording() 500 })); 501 Text.pop(); 502 Column.pop(); 503 GridCol.pop(); 504 this.observeComponentCreation(((e, t) => { 505 ViewStackProcessor.StartGetAccessRecordingFor(e); 506 GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }); 507 t || GridCol.pop(); 508 ViewStackProcessor.StopGetAccessRecording() 509 })); 510 this.container.bind(this)(); 511 GridCol.pop(); 512 GridRow.pop() 513 })); 514 t || If.pop(); 515 ViewStackProcessor.StopGetAccessRecording() 516 })); 517 If.pop(); 518 Column.pop() 519 } 520 521 rerender() { 522 this.updateDirtyElements() 523 } 524}