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