6.0/migration/wsc54/javascript/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11         <link rel="canonical" href="https://docs.woltlab.com/6.0/migration/wsc54/javascript/">
  12
  13
  14         <link rel="prev" href="../php/">
  15
  16
  17         <link rel="next" href="../templates/">
  18
  19       <link rel="icon" href="../../../assets/default.favicon.ico">
  20       <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.9">
  21
  22
  23
  24         <title>TypeScript and JavaScript - WoltLab Suite Documentation</title>
  25
  26
  27
  28       <link rel="stylesheet" href="../../../assets/stylesheets/main.0d440cfe.min.css">
  29
  30
  31         <link rel="stylesheet" href="../../../assets/stylesheets/palette.2505c338.min.css">
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41       <link rel="stylesheet" href="../../../stylesheets/extra.css">
  42
  43     <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
  44
  45
  46
  47
  48
  49
  50   </head>
  51
  52
  53
  54
  55
  56
  57
  58     <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="teal" data-md-color-accent="">
  59
  60
  61
  62     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  63     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  64     <label class="md-overlay" for="__drawer"></label>
  65     <div data-md-component="skip">
  66
  67
  68         <a href="#migrating-from-woltlab-suite-54-typescript-and-javascript" class="md-skip">
  69           Skip to content
  70         </a>
  71
  72     </div>
  73     <div data-md-component="announce">
  74
  75         <aside class="md-banner">
  76           <div class="md-banner__inner md-grid md-typeset">
  77
  78
  79     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  80
  81           </div>
  82
  83         </aside>
  84
  85     </div>
  86
  87       <div data-md-component="outdated" hidden>
  88
  89       </div>
  90
  91
  92
  93
  94 <header class="md-header" data-md-component="header">
  95   <nav class="md-header__inner md-grid" aria-label="Header">
  96     <a href="../../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  97
  98   <img src="../../../assets/logo.png" alt="logo">
  99
 100     </a>
 101     <label class="md-header__button md-icon" for="__drawer">
 102       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
 103     </label>
 104     <div class="md-header__title" data-md-component="header-title">
 105       <div class="md-header__ellipsis">
 106         <div class="md-header__topic">
 107           <span class="md-ellipsis">
 108             WoltLab Suite Documentation
 109           </span>
 110         </div>
 111         <div class="md-header__topic" data-md-component="header-topic">
 112           <span class="md-ellipsis">
 113
 114               TypeScript and JavaScript
 115
 116           </span>
 117         </div>
 118       </div>
 119     </div>
 120
 121
 122
 123       <label class="md-header__button md-icon" for="__search">
 124         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
 125       </label>
 126       <div class="md-search" data-md-component="search" role="dialog">
 127   <label class="md-search__overlay" for="__search"></label>
 128   <div class="md-search__inner" role="search">
 129     <form class="md-search__form" name="search">
 130       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
 131       <label class="md-search__icon md-icon" for="__search">
 132         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
 133         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
 134       </label>
 135       <nav class="md-search__options" aria-label="Search">
 136
 137         <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
 138           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
 139         </button>
 140       </nav>
 141
 142     </form>
 143     <div class="md-search__output">
 144       <div class="md-search__scrollwrap" data-md-scrollfix>
 145         <div class="md-search-result" data-md-component="search-result">
 146           <div class="md-search-result__meta">
 147             Initializing search
 148           </div>
 149           <ol class="md-search-result__list" role="presentation"></ol>
 150         </div>
 151       </div>
 152     </div>
 153   </div>
 154 </div>
 155
 156
 157       <div class="md-header__source">
 158         <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 159   <div class="md-source__icon md-icon">
 160
 161     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 162   </div>
 163   <div class="md-source__repository">
 164     GitHub
 165   </div>
 166 </a>
 167       </div>
 168
 169   </nav>
 170
 171 </header>
 172
 173     <div class="md-container" data-md-component="container">
 174
 175
 176
 177
 178
 179
 180       <main class="md-main" data-md-component="main">
 181         <div class="md-main__inner md-grid">
 182
 183
 184
 185               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 186                 <div class="md-sidebar__scrollwrap">
 187                   <div class="md-sidebar__inner">
 188
 189
 190
 191 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 192   <label class="md-nav__title" for="__drawer">
 193     <a href="../../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 194
 195   <img src="../../../assets/logo.png" alt="logo">
 196
 197     </a>
 198     WoltLab Suite Documentation
 199   </label>
 200
 201     <div class="md-nav__source">
 202       <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 203   <div class="md-source__icon md-icon">
 204
 205     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 206   </div>
 207   <div class="md-source__repository">
 208     GitHub
 209   </div>
 210 </a>
 211     </div>
 212
 213   <ul class="md-nav__list" data-md-scrollfix>
 214
 215
 216
 217
 218
 219
 220
 221
 222     <li class="md-nav__item">
 223       <a href="../../../getting-started/" class="md-nav__link">
 224         Getting Started
 225       </a>
 226     </li>
 227
 228
 229
 230
 231
 232
 233
 234
 235
 236
 237
 238     <li class="md-nav__item md-nav__item--nested">
 239
 240
 241
 242
 243       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
 244
 245
 246
 247         <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
 248           PHP API
 249           <span class="md-nav__icon md-icon"></span>
 250         </label>
 251
 252       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
 253         <label class="md-nav__title" for="__nav_2">
 254           <span class="md-nav__icon md-icon"></span>
 255           PHP API
 256         </label>
 257         <ul class="md-nav__list" data-md-scrollfix>
 258
 259
 260
 261
 262
 263
 264     <li class="md-nav__item">
 265       <a href="../../../php/pages/" class="md-nav__link">
 266         Pages
 267       </a>
 268     </li>
 269
 270
 271
 272
 273
 274
 275
 276
 277
 278     <li class="md-nav__item">
 279       <a href="../../../php/database-objects/" class="md-nav__link">
 280         Database Objects
 281       </a>
 282     </li>
 283
 284
 285
 286
 287
 288
 289
 290
 291
 292     <li class="md-nav__item">
 293       <a href="../../../php/database-access/" class="md-nav__link">
 294         Database Access
 295       </a>
 296     </li>
 297
 298
 299
 300
 301
 302
 303
 304
 305
 306     <li class="md-nav__item">
 307       <a href="../../../php/exceptions/" class="md-nav__link">
 308         Exceptions
 309       </a>
 310     </li>
 311
 312
 313
 314
 315
 316
 317
 318
 319
 320
 321     <li class="md-nav__item md-nav__item--nested">
 322
 323
 324
 325
 326       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5" >
 327
 328
 329
 330         <label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="0">
 331           API
 332           <span class="md-nav__icon md-icon"></span>
 333         </label>
 334
 335       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
 336         <label class="md-nav__title" for="__nav_2_5">
 337           <span class="md-nav__icon md-icon"></span>
 338           API
 339         </label>
 340         <ul class="md-nav__list" data-md-scrollfix>
 341
 342
 343
 344
 345
 346
 347
 348     <li class="md-nav__item md-nav__item--nested">
 349
 350
 351
 352
 353       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5_1" >
 354
 355
 356
 357         <label class="md-nav__link" for="__nav_2_5_1" id="__nav_2_5_1_label" tabindex="0">
 358           Caches
 359           <span class="md-nav__icon md-icon"></span>
 360         </label>
 361
 362       <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_5_1_label" aria-expanded="false">
 363         <label class="md-nav__title" for="__nav_2_5_1">
 364           <span class="md-nav__icon md-icon"></span>
 365           Caches
 366         </label>
 367         <ul class="md-nav__list" data-md-scrollfix>
 368
 369
 370
 371
 372
 373
 374     <li class="md-nav__item">
 375       <a href="../../../php/api/caches/" class="md-nav__link">
 376         Overview
 377       </a>
 378     </li>
 379
 380
 381
 382
 383
 384
 385
 386
 387
 388     <li class="md-nav__item">
 389       <a href="../../../php/api/caches_persistent-caches/" class="md-nav__link">
 390         Persistent Caches
 391       </a>
 392     </li>
 393
 394
 395
 396
 397
 398
 399
 400
 401
 402     <li class="md-nav__item">
 403       <a href="../../../php/api/caches_runtime-caches/" class="md-nav__link">
 404         Runtime Caches
 405       </a>
 406     </li>
 407
 408
 409
 410
 411         </ul>
 412       </nav>
 413     </li>
 414
 415
 416
 417
 418
 419
 420
 421
 422
 423     <li class="md-nav__item">
 424       <a href="../../../php/api/comments/" class="md-nav__link">
 425         Comments
 426       </a>
 427     </li>
 428
 429
 430
 431
 432
 433
 434
 435
 436
 437     <li class="md-nav__item">
 438       <a href="../../../php/api/cronjobs/" class="md-nav__link">
 439         Cronjobs
 440       </a>
 441     </li>
 442
 443
 444
 445
 446
 447
 448
 449
 450
 451     <li class="md-nav__item">
 452       <a href="../../../php/api/events/" class="md-nav__link">
 453         Events
 454       </a>
 455     </li>
 456
 457
 458
 459
 460
 461
 462
 463
 464
 465
 466     <li class="md-nav__item md-nav__item--nested">
 467
 468
 469
 470
 471       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5_5" >
 472
 473
 474
 475         <label class="md-nav__link" for="__nav_2_5_5" id="__nav_2_5_5_label" tabindex="0">
 476           Form Builder
 477           <span class="md-nav__icon md-icon"></span>
 478         </label>
 479
 480       <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_5_5_label" aria-expanded="false">
 481         <label class="md-nav__title" for="__nav_2_5_5">
 482           <span class="md-nav__icon md-icon"></span>
 483           Form Builder
 484         </label>
 485         <ul class="md-nav__list" data-md-scrollfix>
 486
 487
 488
 489
 490
 491
 492     <li class="md-nav__item">
 493       <a href="../../../php/api/form_builder/overview/" class="md-nav__link">
 494         Overview
 495       </a>
 496     </li>
 497
 498
 499
 500
 501
 502
 503
 504
 505
 506     <li class="md-nav__item">
 507       <a href="../../../php/api/form_builder/structure/" class="md-nav__link">
 508         Structure
 509       </a>
 510     </li>
 511
 512
 513
 514
 515
 516
 517
 518
 519
 520     <li class="md-nav__item">
 521       <a href="../../../php/api/form_builder/form_fields/" class="md-nav__link">
 522         Fields
 523       </a>
 524     </li>
 525
 526
 527
 528
 529
 530
 531
 532
 533
 534     <li class="md-nav__item">
 535       <a href="../../../php/api/form_builder/validation_data/" class="md-nav__link">
 536         Validation and Data
 537       </a>
 538     </li>
 539
 540
 541
 542
 543
 544
 545
 546
 547
 548     <li class="md-nav__item">
 549       <a href="../../../php/api/form_builder/dependencies/" class="md-nav__link">
 550         Dependencies
 551       </a>
 552     </li>
 553
 554
 555
 556
 557         </ul>
 558       </nav>
 559     </li>
 560
 561
 562
 563
 564
 565
 566
 567
 568
 569     <li class="md-nav__item">
 570       <a href="../../../php/api/package_installation_plugins/" class="md-nav__link">
 571         Package Installation Plugins
 572       </a>
 573     </li>
 574
 575
 576
 577
 578
 579
 580
 581
 582
 583     <li class="md-nav__item">
 584       <a href="../../../php/api/user_activity_points/" class="md-nav__link">
 585         User Activity Points
 586       </a>
 587     </li>
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597     <li class="md-nav__item">
 598       <a href="../../../php/api/user_notifications/" class="md-nav__link">
 599         User Notifications
 600       </a>
 601     </li>
 602
 603
 604
 605
 606
 607
 608
 609
 610
 611     <li class="md-nav__item">
 612       <a href="../../../php/api/sitemaps/" class="md-nav__link">
 613         Sitemaps
 614       </a>
 615     </li>
 616
 617
 618
 619
 620         </ul>
 621       </nav>
 622     </li>
 623
 624
 625
 626
 627
 628
 629
 630
 631
 632     <li class="md-nav__item">
 633       <a href="../../../php/code-style/" class="md-nav__link">
 634         Code Style
 635       </a>
 636     </li>
 637
 638
 639
 640
 641
 642
 643
 644
 645
 646     <li class="md-nav__item">
 647       <a href="../../../php/apps/" class="md-nav__link">
 648         Apps
 649       </a>
 650     </li>
 651
 652
 653
 654
 655
 656
 657
 658
 659
 660     <li class="md-nav__item">
 661       <a href="../../../php/gdpr/" class="md-nav__link">
 662         GDPR
 663       </a>
 664     </li>
 665
 666
 667
 668
 669         </ul>
 670       </nav>
 671     </li>
 672
 673
 674
 675
 676
 677
 678
 679
 680
 681
 682
 683     <li class="md-nav__item md-nav__item--nested">
 684
 685
 686
 687
 688       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
 689
 690
 691
 692         <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
 693           Languages, Templates & CSS
 694           <span class="md-nav__icon md-icon"></span>
 695         </label>
 696
 697       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
 698         <label class="md-nav__title" for="__nav_3">
 699           <span class="md-nav__icon md-icon"></span>
 700           Languages, Templates & CSS
 701         </label>
 702         <ul class="md-nav__list" data-md-scrollfix>
 703
 704
 705
 706
 707
 708
 709     <li class="md-nav__item">
 710       <a href="../../../view/languages/" class="md-nav__link">
 711         Languages
 712       </a>
 713     </li>
 714
 715
 716
 717
 718
 719
 720
 721
 722
 723     <li class="md-nav__item">
 724       <a href="../../../view/templates/" class="md-nav__link">
 725         Templates
 726       </a>
 727     </li>
 728
 729
 730
 731
 732
 733
 734
 735
 736
 737     <li class="md-nav__item">
 738       <a href="../../../view/template-plugins/" class="md-nav__link">
 739         Template Plugins
 740       </a>
 741     </li>
 742
 743
 744
 745
 746
 747
 748
 749
 750
 751     <li class="md-nav__item">
 752       <a href="../../../view/css/" class="md-nav__link">
 753         CSS
 754       </a>
 755     </li>
 756
 757
 758
 759
 760         </ul>
 761       </nav>
 762     </li>
 763
 764
 765
 766
 767
 768
 769
 770
 771
 772
 773
 774     <li class="md-nav__item md-nav__item--nested">
 775
 776
 777
 778
 779       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
 780
 781
 782
 783         <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
 784           TypeScript and JavaScript API
 785           <span class="md-nav__icon md-icon"></span>
 786         </label>
 787
 788       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
 789         <label class="md-nav__title" for="__nav_4">
 790           <span class="md-nav__icon md-icon"></span>
 791           TypeScript and JavaScript API
 792         </label>
 793         <ul class="md-nav__list" data-md-scrollfix>
 794
 795
 796
 797
 798
 799
 800     <li class="md-nav__item">
 801       <a href="../../../javascript/general-usage/" class="md-nav__link">
 802         General Usage
 803       </a>
 804     </li>
 805
 806
 807
 808
 809
 810
 811
 812
 813
 814     <li class="md-nav__item">
 815       <a href="../../../javascript/typescript/" class="md-nav__link">
 816         TypeScript
 817       </a>
 818     </li>
 819
 820
 821
 822
 823
 824
 825
 826
 827
 828
 829     <li class="md-nav__item md-nav__item--nested">
 830
 831
 832
 833
 834       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3" >
 835
 836
 837
 838         <label class="md-nav__link" for="__nav_4_3" id="__nav_4_3_label" tabindex="0">
 839           Components
 840           <span class="md-nav__icon md-icon"></span>
 841         </label>
 842
 843       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_3_label" aria-expanded="false">
 844         <label class="md-nav__title" for="__nav_4_3">
 845           <span class="md-nav__icon md-icon"></span>
 846           Components
 847         </label>
 848         <ul class="md-nav__list" data-md-scrollfix>
 849
 850
 851
 852
 853
 854
 855     <li class="md-nav__item">
 856       <a href="../../../javascript/components_confirmation/" class="md-nav__link">
 857         Confirmation
 858       </a>
 859     </li>
 860
 861
 862
 863
 864
 865
 866
 867
 868
 869     <li class="md-nav__item">
 870       <a href="../../../javascript/components_dialog/" class="md-nav__link">
 871         Dialog
 872       </a>
 873     </li>
 874
 875
 876
 877
 878
 879
 880
 881
 882
 883     <li class="md-nav__item">
 884       <a href="../../../javascript/components_google_maps/" class="md-nav__link">
 885         Google Maps
 886       </a>
 887     </li>
 888
 889
 890
 891
 892
 893
 894
 895
 896
 897     <li class="md-nav__item">
 898       <a href="../../../javascript/components_pagination/" class="md-nav__link">
 899         Pagination
 900       </a>
 901     </li>
 902
 903
 904
 905
 906         </ul>
 907       </nav>
 908     </li>
 909
 910
 911
 912
 913
 914
 915
 916
 917
 918
 919     <li class="md-nav__item md-nav__item--nested">
 920
 921
 922
 923
 924       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_4" >
 925
 926
 927
 928         <label class="md-nav__link" for="__nav_4_4" id="__nav_4_4_label" tabindex="0">
 929           New API
 930           <span class="md-nav__icon md-icon"></span>
 931         </label>
 932
 933       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_4_label" aria-expanded="false">
 934         <label class="md-nav__title" for="__nav_4_4">
 935           <span class="md-nav__icon md-icon"></span>
 936           New API
 937         </label>
 938         <ul class="md-nav__list" data-md-scrollfix>
 939
 940
 941
 942
 943
 944
 945     <li class="md-nav__item">
 946       <a href="../../../javascript/new-api_writing-a-module/" class="md-nav__link">
 947         Writing a module
 948       </a>
 949     </li>
 950
 951
 952
 953
 954
 955
 956
 957
 958
 959     <li class="md-nav__item">
 960       <a href="../../../javascript/new-api_core/" class="md-nav__link">
 961         Core Functions
 962       </a>
 963     </li>
 964
 965
 966
 967
 968
 969
 970
 971
 972
 973     <li class="md-nav__item">
 974       <a href="../../../javascript/new-api_dom/" class="md-nav__link">
 975         DOM
 976       </a>
 977     </li>
 978
 979
 980
 981
 982
 983
 984
 985
 986
 987     <li class="md-nav__item">
 988       <a href="../../../javascript/new-api_events/" class="md-nav__link">
 989         Event Handling
 990       </a>
 991     </li>
 992
 993
 994
 995
 996
 997
 998
 999
1000
1001     <li class="md-nav__item">
1002       <a href="../../../javascript/new-api_ajax/" class="md-nav__link">
1003         Ajax
1004       </a>
1005     </li>
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015     <li class="md-nav__item">
1016       <a href="../../../javascript/new-api_dialogs/" class="md-nav__link">
1017         Dialogs
1018       </a>
1019     </li>
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029     <li class="md-nav__item">
1030       <a href="../../../javascript/new-api_browser/" class="md-nav__link">
1031         Browser and Screen Sizes
1032       </a>
1033     </li>
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043     <li class="md-nav__item">
1044       <a href="../../../javascript/new-api_ui/" class="md-nav__link">
1045         User Interface
1046       </a>
1047     </li>
1048
1049
1050
1051
1052         </ul>
1053       </nav>
1054     </li>
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064     <li class="md-nav__item">
1065       <a href="../../../javascript/legacy-api/" class="md-nav__link">
1066         Legacy API
1067       </a>
1068     </li>
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078     <li class="md-nav__item">
1079       <a href="../../../javascript/code-snippets/" class="md-nav__link">
1080         Code Snippets
1081       </a>
1082     </li>
1083
1084
1085
1086
1087         </ul>
1088       </nav>
1089     </li>
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101     <li class="md-nav__item md-nav__item--nested">
1102
1103
1104
1105
1106       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
1107
1108
1109
1110         <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
1111           Package Components
1112           <span class="md-nav__icon md-icon"></span>
1113         </label>
1114
1115       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
1116         <label class="md-nav__title" for="__nav_5">
1117           <span class="md-nav__icon md-icon"></span>
1118           Package Components
1119         </label>
1120         <ul class="md-nav__list" data-md-scrollfix>
1121
1122
1123
1124
1125
1126
1127     <li class="md-nav__item">
1128       <a href="../../../package/package-xml/" class="md-nav__link">
1129         package.xml
1130       </a>
1131     </li>
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142     <li class="md-nav__item md-nav__item--nested">
1143
1144
1145
1146
1147       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" >
1148
1149
1150
1151         <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
1152           PIPs
1153           <span class="md-nav__icon md-icon"></span>
1154         </label>
1155
1156       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
1157         <label class="md-nav__title" for="__nav_5_2">
1158           <span class="md-nav__icon md-icon"></span>
1159           PIPs
1160         </label>
1161         <ul class="md-nav__list" data-md-scrollfix>
1162
1163
1164
1165
1166
1167
1168     <li class="md-nav__item">
1169       <a href="../../../package/pip/" class="md-nav__link">
1170         Overview
1171       </a>
1172     </li>
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182     <li class="md-nav__item">
1183       <a href="../../../package/pip/acl-option/" class="md-nav__link">
1184         aclOption
1185       </a>
1186     </li>
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196     <li class="md-nav__item">
1197       <a href="../../../package/pip/acp-menu/" class="md-nav__link">
1198         acpMenu
1199       </a>
1200     </li>
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210     <li class="md-nav__item">
1211       <a href="../../../package/pip/acp-search-provider/" class="md-nav__link">
1212         acpSearchProvider
1213       </a>
1214     </li>
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224     <li class="md-nav__item">
1225       <a href="../../../package/pip/acp-template/" class="md-nav__link">
1226         acpTemplate
1227       </a>
1228     </li>
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238     <li class="md-nav__item">
1239       <a href="../../../package/pip/acp-template-delete/" class="md-nav__link">
1240         acpTemplateDelete
1241       </a>
1242     </li>
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252     <li class="md-nav__item">
1253       <a href="../../../package/pip/bbcode/" class="md-nav__link">
1254         bbcode
1255       </a>
1256     </li>
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266     <li class="md-nav__item">
1267       <a href="../../../package/pip/box/" class="md-nav__link">
1268         box
1269       </a>
1270     </li>
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280     <li class="md-nav__item">
1281       <a href="../../../package/pip/clipboard-action/" class="md-nav__link">
1282         clipboardAction
1283       </a>
1284     </li>
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294     <li class="md-nav__item">
1295       <a href="../../../package/pip/core-object/" class="md-nav__link">
1296         coreObject
1297       </a>
1298     </li>
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308     <li class="md-nav__item">
1309       <a href="../../../package/pip/cronjob/" class="md-nav__link">
1310         cronjob
1311       </a>
1312     </li>
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322     <li class="md-nav__item">
1323       <a href="../../../package/pip/database/" class="md-nav__link">
1324         database
1325       </a>
1326     </li>
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336     <li class="md-nav__item">
1337       <a href="../../../package/pip/event-listener/" class="md-nav__link">
1338         eventListener
1339       </a>
1340     </li>
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350     <li class="md-nav__item">
1351       <a href="../../../package/pip/file/" class="md-nav__link">
1352         file
1353       </a>
1354     </li>
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364     <li class="md-nav__item">
1365       <a href="../../../package/pip/file-delete/" class="md-nav__link">
1366         fileDelete
1367       </a>
1368     </li>
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378     <li class="md-nav__item">
1379       <a href="../../../package/pip/language/" class="md-nav__link">
1380         language
1381       </a>
1382     </li>
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392     <li class="md-nav__item">
1393       <a href="../../../package/pip/media-provider/" class="md-nav__link">
1394         mediaProvider
1395       </a>
1396     </li>
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406     <li class="md-nav__item">
1407       <a href="../../../package/pip/menu/" class="md-nav__link">
1408         menu
1409       </a>
1410     </li>
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420     <li class="md-nav__item">
1421       <a href="../../../package/pip/menu-item/" class="md-nav__link">
1422         menuItem
1423       </a>
1424     </li>
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434     <li class="md-nav__item">
1435       <a href="../../../package/pip/object-type/" class="md-nav__link">
1436         objectType
1437       </a>
1438     </li>
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448     <li class="md-nav__item">
1449       <a href="../../../package/pip/object-type-definition/" class="md-nav__link">
1450         objectTypeDefinition
1451       </a>
1452     </li>
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462     <li class="md-nav__item">
1463       <a href="../../../package/pip/option/" class="md-nav__link">
1464         option
1465       </a>
1466     </li>
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476     <li class="md-nav__item">
1477       <a href="../../../package/pip/page/" class="md-nav__link">
1478         page
1479       </a>
1480     </li>
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490     <li class="md-nav__item">
1491       <a href="../../../package/pip/pip/" class="md-nav__link">
1492         pip
1493       </a>
1494     </li>
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504     <li class="md-nav__item">
1505       <a href="../../../package/pip/script/" class="md-nav__link">
1506         script
1507       </a>
1508     </li>
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518     <li class="md-nav__item">
1519       <a href="../../../package/pip/smiley/" class="md-nav__link">
1520         smiley
1521       </a>
1522     </li>
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532     <li class="md-nav__item">
1533       <a href="../../../package/pip/sql/" class="md-nav__link">
1534         sql
1535       </a>
1536     </li>
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546     <li class="md-nav__item">
1547       <a href="../../../package/pip/style/" class="md-nav__link">
1548         style
1549       </a>
1550     </li>
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560     <li class="md-nav__item">
1561       <a href="../../../package/pip/template/" class="md-nav__link">
1562         template
1563       </a>
1564     </li>
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574     <li class="md-nav__item">
1575       <a href="../../../package/pip/template-delete/" class="md-nav__link">
1576         templateDelete
1577       </a>
1578     </li>
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588     <li class="md-nav__item">
1589       <a href="../../../package/pip/template-listener/" class="md-nav__link">
1590         templateListener
1591       </a>
1592     </li>
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602     <li class="md-nav__item">
1603       <a href="../../../package/pip/user-group-option/" class="md-nav__link">
1604         userGroupOption
1605       </a>
1606     </li>
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616     <li class="md-nav__item">
1617       <a href="../../../package/pip/user-menu/" class="md-nav__link">
1618         userMenu
1619       </a>
1620     </li>
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630     <li class="md-nav__item">
1631       <a href="../../../package/pip/user-notification-event/" class="md-nav__link">
1632         userNotificationEvent
1633       </a>
1634     </li>
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644     <li class="md-nav__item">
1645       <a href="../../../package/pip/user-option/" class="md-nav__link">
1646         userOption
1647       </a>
1648     </li>
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658     <li class="md-nav__item">
1659       <a href="../../../package/pip/user-profile-menu/" class="md-nav__link">
1660         userProfileMenu
1661       </a>
1662     </li>
1663
1664
1665
1666
1667         </ul>
1668       </nav>
1669     </li>
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679     <li class="md-nav__item">
1680       <a href="../../../package/database-php-api/" class="md-nav__link">
1681         Database PHP API
1682       </a>
1683     </li>
1684
1685
1686
1687
1688         </ul>
1689       </nav>
1690     </li>
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
1705
1706
1707
1708
1709       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" checked>
1710
1711
1712
1713         <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
1714           Migration
1715           <span class="md-nav__icon md-icon"></span>
1716         </label>
1717
1718       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="true">
1719         <label class="md-nav__title" for="__nav_6">
1720           <span class="md-nav__icon md-icon"></span>
1721           Migration
1722         </label>
1723         <ul class="md-nav__list" data-md-scrollfix>
1724
1725
1726
1727
1728
1729
1730
1731     <li class="md-nav__item md-nav__item--nested">
1732
1733
1734
1735
1736       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
1737
1738
1739
1740         <label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
1741           From WoltLab Suite 5.5
1742           <span class="md-nav__icon md-icon"></span>
1743         </label>
1744
1745       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
1746         <label class="md-nav__title" for="__nav_6_1">
1747           <span class="md-nav__icon md-icon"></span>
1748           From WoltLab Suite 5.5
1749         </label>
1750         <ul class="md-nav__list" data-md-scrollfix>
1751
1752
1753
1754
1755
1756
1757     <li class="md-nav__item">
1758       <a href="../../wsc55/php/" class="md-nav__link">
1759         PHP API
1760       </a>
1761     </li>
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771     <li class="md-nav__item">
1772       <a href="../../wsc55/javascript/" class="md-nav__link">
1773         TypeScript and JavaScript
1774       </a>
1775     </li>
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785     <li class="md-nav__item">
1786       <a href="../../wsc55/templates/" class="md-nav__link">
1787         Templates
1788       </a>
1789     </li>
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799     <li class="md-nav__item">
1800       <a href="../../wsc55/icons/" class="md-nav__link">
1801         Icons
1802       </a>
1803     </li>
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813     <li class="md-nav__item">
1814       <a href="../../wsc55/dialogs/" class="md-nav__link">
1815         Dialogs
1816       </a>
1817     </li>
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827     <li class="md-nav__item">
1828       <a href="../../wsc55/libraries/" class="md-nav__link">
1829         Third Party Libraries
1830       </a>
1831     </li>
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841     <li class="md-nav__item">
1842       <a href="../../wsc55/deprecations_removals/" class="md-nav__link">
1843         Deprecations and Removals
1844       </a>
1845     </li>
1846
1847
1848
1849
1850         </ul>
1851       </nav>
1852     </li>
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
1863
1864
1865     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
1866
1867
1868
1869
1870       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" checked>
1871
1872
1873
1874         <label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="0">
1875           From WoltLab Suite 5.4
1876           <span class="md-nav__icon md-icon"></span>
1877         </label>
1878
1879       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="true">
1880         <label class="md-nav__title" for="__nav_6_2">
1881           <span class="md-nav__icon md-icon"></span>
1882           From WoltLab Suite 5.4
1883         </label>
1884         <ul class="md-nav__list" data-md-scrollfix>
1885
1886
1887
1888
1889
1890
1891     <li class="md-nav__item">
1892       <a href="../php/" class="md-nav__link">
1893         PHP API
1894       </a>
1895     </li>
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905
1906
1907     <li class="md-nav__item md-nav__item--active">
1908
1909       <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
1910
1911
1912
1913
1914
1915         <label class="md-nav__link md-nav__link--active" for="__toc">
1916           TypeScript and JavaScript
1917           <span class="md-nav__icon md-icon"></span>
1918         </label>
1919
1920       <a href="./" class="md-nav__link md-nav__link--active">
1921         TypeScript and JavaScript
1922       </a>
1923
1924
1925
1926 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1927
1928
1929
1930
1931
1932
1933     <label class="md-nav__title" for="__toc">
1934       <span class="md-nav__icon md-icon"></span>
1935       Table of contents
1936     </label>
1937     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1938
1939         <li class="md-nav__item">
1940   <a href="#ajaxdboaction" class="md-nav__link">
1941     Ajax.dboAction()
1942   </a>
1943
1944 </li>
1945
1946         <li class="md-nav__item">
1947   <a href="#wcfcolorpicker" class="md-nav__link">
1948     WCF.ColorPicker
1949   </a>
1950
1951 </li>
1952
1953         <li class="md-nav__item">
1954   <a href="#codemirror" class="md-nav__link">
1955     CodeMirror
1956   </a>
1957
1958 </li>
1959
1960         <li class="md-nav__item">
1961   <a href="#new-user-menu" class="md-nav__link">
1962     New User Menu
1963   </a>
1964
1965 </li>
1966
1967     </ul>
1968
1969 </nav>
1970
1971     </li>
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981     <li class="md-nav__item">
1982       <a href="../templates/" class="md-nav__link">
1983         Templates
1984       </a>
1985     </li>
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995     <li class="md-nav__item">
1996       <a href="../libraries/" class="md-nav__link">
1997         Third Party Libraries
1998       </a>
1999     </li>
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009     <li class="md-nav__item">
2010       <a href="../deprecations_removals/" class="md-nav__link">
2011         Deprecations and Removals
2012       </a>
2013     </li>
2014
2015
2016
2017
2018         </ul>
2019       </nav>
2020     </li>
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031     <li class="md-nav__item md-nav__item--nested">
2032
2033
2034
2035
2036       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3" >
2037
2038
2039
2040         <label class="md-nav__link" for="__nav_6_3" id="__nav_6_3_label" tabindex="0">
2041           From WoltLab Suite 5.3
2042           <span class="md-nav__icon md-icon"></span>
2043         </label>
2044
2045       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_3_label" aria-expanded="false">
2046         <label class="md-nav__title" for="__nav_6_3">
2047           <span class="md-nav__icon md-icon"></span>
2048           From WoltLab Suite 5.3
2049         </label>
2050         <ul class="md-nav__list" data-md-scrollfix>
2051
2052
2053
2054
2055
2056
2057     <li class="md-nav__item">
2058       <a href="../../wsc53/php/" class="md-nav__link">
2059         PHP API
2060       </a>
2061     </li>
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071     <li class="md-nav__item">
2072       <a href="../../wsc53/session/" class="md-nav__link">
2073         Session Handling and Authentication
2074       </a>
2075     </li>
2076
2077
2078
2079
2080
2081
2082
2083
2084
2085     <li class="md-nav__item">
2086       <a href="../../wsc53/javascript/" class="md-nav__link">
2087         TypeScript and JavaScript
2088       </a>
2089     </li>
2090
2091
2092
2093
2094
2095
2096
2097
2098
2099     <li class="md-nav__item">
2100       <a href="../../wsc53/templates/" class="md-nav__link">
2101         Templates
2102       </a>
2103     </li>
2104
2105
2106
2107
2108
2109
2110
2111
2112
2113     <li class="md-nav__item">
2114       <a href="../../wsc53/libraries/" class="md-nav__link">
2115         Third Party Libraries
2116       </a>
2117     </li>
2118
2119
2120
2121
2122         </ul>
2123       </nav>
2124     </li>
2125
2126
2127
2128
2129
2130
2131
2132
2133
2134
2135     <li class="md-nav__item md-nav__item--nested">
2136
2137
2138
2139
2140       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_4" >
2141
2142
2143
2144         <label class="md-nav__link" for="__nav_6_4" id="__nav_6_4_label" tabindex="0">
2145           From WoltLab Suite 5.2
2146           <span class="md-nav__icon md-icon"></span>
2147         </label>
2148
2149       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_4_label" aria-expanded="false">
2150         <label class="md-nav__title" for="__nav_6_4">
2151           <span class="md-nav__icon md-icon"></span>
2152           From WoltLab Suite 5.2
2153         </label>
2154         <ul class="md-nav__list" data-md-scrollfix>
2155
2156
2157
2158
2159
2160
2161     <li class="md-nav__item">
2162       <a href="../../wsc52/php/" class="md-nav__link">
2163         PHP API
2164       </a>
2165     </li>
2166
2167
2168
2169
2170
2171
2172
2173
2174
2175     <li class="md-nav__item">
2176       <a href="../../wsc52/templates/" class="md-nav__link">
2177         Templates and Languages
2178       </a>
2179     </li>
2180
2181
2182
2183
2184
2185
2186
2187
2188
2189     <li class="md-nav__item">
2190       <a href="../../wsc52/libraries/" class="md-nav__link">
2191         Third Party Libraries
2192       </a>
2193     </li>
2194
2195
2196
2197
2198         </ul>
2199       </nav>
2200     </li>
2201
2202
2203
2204
2205
2206
2207
2208
2209
2210
2211     <li class="md-nav__item md-nav__item--nested">
2212
2213
2214
2215
2216       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_5" >
2217
2218
2219
2220         <label class="md-nav__link" for="__nav_6_5" id="__nav_6_5_label" tabindex="0">
2221           From WoltLab Suite 3.1
2222           <span class="md-nav__icon md-icon"></span>
2223         </label>
2224
2225       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_5_label" aria-expanded="false">
2226         <label class="md-nav__title" for="__nav_6_5">
2227           <span class="md-nav__icon md-icon"></span>
2228           From WoltLab Suite 3.1
2229         </label>
2230         <ul class="md-nav__list" data-md-scrollfix>
2231
2232
2233
2234
2235
2236
2237     <li class="md-nav__item">
2238       <a href="../../wsc31/php/" class="md-nav__link">
2239         PHP API
2240       </a>
2241     </li>
2242
2243
2244
2245
2246         </ul>
2247       </nav>
2248     </li>
2249
2250
2251
2252
2253
2254
2255
2256
2257
2258
2259     <li class="md-nav__item md-nav__item--nested">
2260
2261
2262
2263
2264       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_6" >
2265
2266
2267
2268         <label class="md-nav__link" for="__nav_6_6" id="__nav_6_6_label" tabindex="0">
2269           From WoltLab Suite 3.0
2270           <span class="md-nav__icon md-icon"></span>
2271         </label>
2272
2273       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_6_label" aria-expanded="false">
2274         <label class="md-nav__title" for="__nav_6_6">
2275           <span class="md-nav__icon md-icon"></span>
2276           From WoltLab Suite 3.0
2277         </label>
2278         <ul class="md-nav__list" data-md-scrollfix>
2279
2280
2281
2282
2283
2284
2285     <li class="md-nav__item">
2286       <a href="../../wsc30/php/" class="md-nav__link">
2287         PHP API
2288       </a>
2289     </li>
2290
2291
2292
2293
2294
2295
2296
2297
2298
2299     <li class="md-nav__item">
2300       <a href="../../wsc30/javascript/" class="md-nav__link">
2301         JavaScript API
2302       </a>
2303     </li>
2304
2305
2306
2307
2308
2309
2310
2311
2312
2313     <li class="md-nav__item">
2314       <a href="../../wsc30/templates/" class="md-nav__link">
2315         Templates
2316       </a>
2317     </li>
2318
2319
2320
2321
2322
2323
2324
2325
2326
2327     <li class="md-nav__item">
2328       <a href="../../wsc30/css/" class="md-nav__link">
2329         CSS
2330       </a>
2331     </li>
2332
2333
2334
2335
2336
2337
2338
2339
2340
2341     <li class="md-nav__item">
2342       <a href="../../wsc30/package/" class="md-nav__link">
2343         Package Components
2344       </a>
2345     </li>
2346
2347
2348
2349
2350         </ul>
2351       </nav>
2352     </li>
2353
2354
2355
2356
2357
2358
2359
2360
2361
2362
2363     <li class="md-nav__item md-nav__item--nested">
2364
2365
2366
2367
2368       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_7" >
2369
2370
2371
2372         <label class="md-nav__link" for="__nav_6_7" id="__nav_6_7_label" tabindex="0">
2373           From WCF 2.1
2374           <span class="md-nav__icon md-icon"></span>
2375         </label>
2376
2377       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_7_label" aria-expanded="false">
2378         <label class="md-nav__title" for="__nav_6_7">
2379           <span class="md-nav__icon md-icon"></span>
2380           From WCF 2.1
2381         </label>
2382         <ul class="md-nav__list" data-md-scrollfix>
2383
2384
2385
2386
2387
2388
2389     <li class="md-nav__item">
2390       <a href="../../wcf21/php/" class="md-nav__link">
2391         PHP API
2392       </a>
2393     </li>
2394
2395
2396
2397
2398
2399
2400
2401
2402
2403     <li class="md-nav__item">
2404       <a href="../../wcf21/templates/" class="md-nav__link">
2405         Templates
2406       </a>
2407     </li>
2408
2409
2410
2411
2412
2413
2414
2415
2416
2417     <li class="md-nav__item">
2418       <a href="../../wcf21/css/" class="md-nav__link">
2419         CSS
2420       </a>
2421     </li>
2422
2423
2424
2425
2426
2427
2428
2429
2430
2431     <li class="md-nav__item">
2432       <a href="../../wcf21/package/" class="md-nav__link">
2433         Package Components
2434       </a>
2435     </li>
2436
2437
2438
2439
2440         </ul>
2441       </nav>
2442     </li>
2443
2444
2445
2446
2447         </ul>
2448       </nav>
2449     </li>
2450
2451
2452
2453
2454
2455
2456
2457
2458
2459
2460
2461     <li class="md-nav__item md-nav__item--nested">
2462
2463
2464
2465
2466       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
2467
2468
2469
2470         <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
2471           Tutorials
2472           <span class="md-nav__icon md-icon"></span>
2473         </label>
2474
2475       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
2476         <label class="md-nav__title" for="__nav_7">
2477           <span class="md-nav__icon md-icon"></span>
2478           Tutorials
2479         </label>
2480         <ul class="md-nav__list" data-md-scrollfix>
2481
2482
2483
2484
2485
2486
2487
2488     <li class="md-nav__item md-nav__item--nested">
2489
2490
2491
2492
2493       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_1" >
2494
2495
2496
2497         <label class="md-nav__link" for="__nav_7_1" id="__nav_7_1_label" tabindex="0">
2498           Tutorial Series
2499           <span class="md-nav__icon md-icon"></span>
2500         </label>
2501
2502       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_1_label" aria-expanded="false">
2503         <label class="md-nav__title" for="__nav_7_1">
2504           <span class="md-nav__icon md-icon"></span>
2505           Tutorial Series
2506         </label>
2507         <ul class="md-nav__list" data-md-scrollfix>
2508
2509
2510
2511
2512
2513
2514     <li class="md-nav__item">
2515       <a href="../../../tutorial/series/overview/" class="md-nav__link">
2516         Overview
2517       </a>
2518     </li>
2519
2520
2521
2522
2523
2524
2525
2526
2527
2528     <li class="md-nav__item">
2529       <a href="../../../tutorial/series/part_1/" class="md-nav__link">
2530         Part 1
2531       </a>
2532     </li>
2533
2534
2535
2536
2537
2538
2539
2540
2541
2542     <li class="md-nav__item">
2543       <a href="../../../tutorial/series/part_2/" class="md-nav__link">
2544         Part 2
2545       </a>
2546     </li>
2547
2548
2549
2550
2551
2552
2553
2554
2555
2556     <li class="md-nav__item">
2557       <a href="../../../tutorial/series/part_3/" class="md-nav__link">
2558         Part 3
2559       </a>
2560     </li>
2561
2562
2563
2564
2565
2566
2567
2568
2569
2570     <li class="md-nav__item">
2571       <a href="../../../tutorial/series/part_4/" class="md-nav__link">
2572         Part 4
2573       </a>
2574     </li>
2575
2576
2577
2578
2579
2580
2581
2582
2583
2584     <li class="md-nav__item">
2585       <a href="../../../tutorial/series/part_5/" class="md-nav__link">
2586         Part 5
2587       </a>
2588     </li>
2589
2590
2591
2592
2593
2594
2595
2596
2597
2598     <li class="md-nav__item">
2599       <a href="../../../tutorial/series/part_6/" class="md-nav__link">
2600         Part 6
2601       </a>
2602     </li>
2603
2604
2605
2606
2607         </ul>
2608       </nav>
2609     </li>
2610
2611
2612
2613
2614         </ul>
2615       </nav>
2616     </li>
2617
2618
2619
2620   </ul>
2621 </nav>
2622                   </div>
2623                 </div>
2624               </div>
2625
2626
2627
2628               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2629                 <div class="md-sidebar__scrollwrap">
2630                   <div class="md-sidebar__inner">
2631
2632
2633 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2634
2635
2636
2637
2638
2639
2640     <label class="md-nav__title" for="__toc">
2641       <span class="md-nav__icon md-icon"></span>
2642       Table of contents
2643     </label>
2644     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2645
2646         <li class="md-nav__item">
2647   <a href="#ajaxdboaction" class="md-nav__link">
2648     Ajax.dboAction()
2649   </a>
2650
2651 </li>
2652
2653         <li class="md-nav__item">
2654   <a href="#wcfcolorpicker" class="md-nav__link">
2655     WCF.ColorPicker
2656   </a>
2657
2658 </li>
2659
2660         <li class="md-nav__item">
2661   <a href="#codemirror" class="md-nav__link">
2662     CodeMirror
2663   </a>
2664
2665 </li>
2666
2667         <li class="md-nav__item">
2668   <a href="#new-user-menu" class="md-nav__link">
2669     New User Menu
2670   </a>
2671
2672 </li>
2673
2674     </ul>
2675
2676 </nav>
2677                   </div>
2678                 </div>
2679               </div>
2680
2681
2682
2683             <div class="md-content" data-md-component="content">
2684               <article class="md-content__inner md-typeset">
2685
2686
2687
2688
2689
2690
2691
2692
2693 <h1 id="migrating-from-woltlab-suite-54-typescript-and-javascript">Migrating from WoltLab Suite 5.4 - TypeScript and JavaScript<a class="headerlink" href="#migrating-from-woltlab-suite-54-typescript-and-javascript" title="Permanent link">#</a></h1>
2694 <h2 id="ajaxdboaction"><code>Ajax.dboAction()</code><a class="headerlink" href="#ajaxdboaction" title="Permanent link">#</a></h2>
2695 <p>We have introduced a new <code>Promise</code> based API for the interaction with <code>wcf\data\DatabaseObjectAction</code>.
2696 It provides full IDE autocompletion support and transparent error handling, but is designed to be used with <code>DatabaseObjectAction</code> only.</p>
2697 <p>See <a href="../../../javascript/new-api_ajax/">the documentation for the new API</a> and <a href="https://github.com/WoltLab/WCF/pull/4585">WoltLab/WCF#4585</a> for details.</p>
2698 <h2 id="wcfcolorpicker"><code>WCF.ColorPicker</code><a class="headerlink" href="#wcfcolorpicker" title="Permanent link">#</a></h2>
2699 <p>We have replaced the old jQuery-based color picker <code>WCF.ColorPicker</code> with a more lightweight replacement <code>WoltLabSuite/Core/Ui/Color/Picker</code>, which uses the build-in <code>input[type=color]</code> field.
2700 To support transparency, which <code>input[type=color]</code> does not, we also added a slider to set the alpha value.
2701 <code>WCF.ColorPicker</code> has been adjusted to internally use <code>WoltLabSuite/Core/Ui/Color/Picker</code> and it has been deprecated.</p>
2702 <p>Be aware that the new color picker requires the following new phrases to be available in the TypeScript/JavaScript code:</p>
2703 <ul>
2704 <li><code>wcf.style.colorPicker.alpha</code>,</li>
2705 <li><code>wcf.style.colorPicker.color</code>,</li>
2706 <li><code>wcf.style.colorPicker.error.invalidColor</code>,</li>
2707 <li><code>wcf.style.colorPicker.hexAlpha</code>,</li>
2708 <li><code>wcf.style.colorPicker.new</code>.</li>
2709 </ul>
2710 <p>See <a href="https://github.com/WoltLab/WCF/pull/4353">WoltLab/WCF#4353</a> for details.</p>
2711 <h2 id="codemirror">CodeMirror<a class="headerlink" href="#codemirror" title="Permanent link">#</a></h2>
2712 <p>The bundled version of CodeMirror was updated and should be loaded using the AMD loader going forward.</p>
2713 <p>See the <a href="../libraries/#codemirror">third party libraries migration guide</a> for details.</p>
2714 <h2 id="new-user-menu">New User Menu<a class="headerlink" href="#new-user-menu" title="Permanent link">#</a></h2>
2715 <p>The legacy implementation <code>WCF.User.Panel.Abstract</code> was based on jQuery and has now been retired in favor of a new lightweight implementation that provides a clean interface and improved accessibility.
2716 You are strongly encouraged to migrate your existing implementation to integrate with existing menus.</p>
2717 <p>Please use <code>WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.ts</code> as a template for your own implementation, it contains only strictly the code you will need. It makes use of the new <code>Ajax.dboAction()</code> (see above) for improved readability and flexibility.</p>
2718 <p>You must update your trigger button to include the <code>role</code>, <code>tabindex</code> and ARIA attributes! Please take a look at the links in <code>pageHeaderUser.tpl</code> to see these four attributes in action.</p>
2719 <p>See <a href="https://github.com/WoltLab/WCF/pull/4603">WoltLab/WCF#4603</a> for details.</p>
2720
2721   <hr>
2722 <div class="md-source-file">
2723   <small>
2724
2725       Last update:
2726       2022-05-13
2727
2728   </small>
2729 </div>
2730
2731
2732
2733
2734
2735
2736               </article>
2737             </div>
2738
2739
2740         </div>
2741
2742       </main>
2743
2744         <footer class="md-footer">
2745
2746   <div class="md-footer-meta md-typeset">
2747     <div class="md-footer-meta__inner md-grid">
2748       <div class="md-copyright">
2749
2750     <div class="md-copyright__highlight">
2751       Copyright © 2020 WoltLab GmbH
2752     </div>
2753
2754
2755     Made with
2756     <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2757       Material for MkDocs
2758     </a>
2759
2760 </div>
2761
2762         <div class="md-copyright">
2763         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2764         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2765 </div>
2766
2767     </div>
2768   </div>
2769 </footer>
2770
2771     </div>
2772     <div class="md-dialog" data-md-component="dialog">
2773       <div class="md-dialog__inner md-typeset"></div>
2774     </div>
2775
2776     <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.tracking"], "search": "../../../assets/javascripts/workers/search.db81ec45.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
2777
2778
2779       <script src="../../../assets/javascripts/bundle.a00a7c5e.min.js"></script>
2780
2781
2782   </body>
2783 </html>