latest/javascript/new-api_writing-a-module/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
  12       <link rel="shortcut icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.0.5">
  14
  15
  16
  17         <title>Writing a module - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.77f3fd56.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.7fa14f5b.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55
  56     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  57     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  58     <label class="md-overlay" for="__drawer"></label>
  59     <div data-md-component="skip">
  60
  61
  62         <a href="#writing-a-module-javascript-api" class="md-skip">
  63           Skip to content
  64         </a>
  65
  66     </div>
  67     <div data-md-component="announce">
  68
  69         <aside class="md-announce">
  70           <div class="md-announce__inner md-grid md-typeset">
  71
  72     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  73
  74           </div>
  75         </aside>
  76
  77     </div>
  78
  79
  80
  81 <header class="md-header" data-md-component="header">
  82   <nav class="md-header__inner md-grid" aria-label="Header">
  83     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation">
  84
  85   <img src="../../assets/logo.png" alt="logo">
  86
  87     </a>
  88     <label class="md-header__button md-icon" for="__drawer">
  89       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  90     </label>
  91     <div class="md-header__title" data-md-component="header-title">
  92       <div class="md-header__ellipsis">
  93         <div class="md-header__topic">
  94           <span class="md-ellipsis">
  95             WoltLab Suite Documentation
  96           </span>
  97         </div>
  98         <div class="md-header__topic" data-md-component="header-topic">
  99           <span class="md-ellipsis">
 100
 101               Writing a module
 102
 103           </span>
 104         </div>
 105       </div>
 106     </div>
 107     <div class="md-header__options">
 108
 109     </div>
 110
 111       <label class="md-header__button md-icon" for="__search">
 112         <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>
 113       </label>
 114
 115 <div class="md-search" data-md-component="search" role="dialog">
 116   <label class="md-search__overlay" for="__search"></label>
 117   <div class="md-search__inner" role="search">
 118     <form class="md-search__form" name="search">
 119       <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" data-md-state="active" required>
 120       <label class="md-search__icon md-icon" for="__search">
 121         <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>
 122         <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>
 123       </label>
 124       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 125         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.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>
 126       </button>
 127     </form>
 128     <div class="md-search__output">
 129       <div class="md-search__scrollwrap" data-md-scrollfix>
 130         <div class="md-search-result" data-md-component="search-result">
 131           <div class="md-search-result__meta">
 132             Initializing search
 133           </div>
 134           <ol class="md-search-result__list"></ol>
 135         </div>
 136       </div>
 137     </div>
 138   </div>
 139 </div>
 140
 141
 142       <div class="md-header__source">
 143
 144 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 145   <div class="md-source__icon md-icon">
 146
 147     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 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>
 148   </div>
 149   <div class="md-source__repository">
 150     GitHub
 151   </div>
 152 </a>
 153       </div>
 154
 155   </nav>
 156 </header>
 157
 158     <div class="md-container" data-md-component="container">
 159
 160
 161
 162
 163       <main class="md-main" data-md-component="main">
 164         <div class="md-main__inner md-grid">
 165
 166
 167
 168               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 169                 <div class="md-sidebar__scrollwrap">
 170                   <div class="md-sidebar__inner">
 171
 172
 173
 174
 175
 176 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 177   <label class="md-nav__title" for="__drawer">
 178     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation">
 179
 180   <img src="../../assets/logo.png" alt="logo">
 181
 182     </a>
 183     WoltLab Suite Documentation
 184   </label>
 185
 186     <div class="md-nav__source">
 187
 188 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 189   <div class="md-source__icon md-icon">
 190
 191     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 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>
 192   </div>
 193   <div class="md-source__repository">
 194     GitHub
 195   </div>
 196 </a>
 197     </div>
 198
 199   <ul class="md-nav__list" data-md-scrollfix>
 200
 201
 202
 203
 204
 205
 206
 207
 208     <li class="md-nav__item">
 209       <a href="../../getting-started/" class="md-nav__link">
 210         Getting Started
 211       </a>
 212     </li>
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222
 223
 224     <li class="md-nav__item md-nav__item--nested">
 225
 226
 227         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 228
 229       <label class="md-nav__link" for="__nav_2">
 230         PHP API
 231         <span class="md-nav__icon md-icon"></span>
 232       </label>
 233       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 234         <label class="md-nav__title" for="__nav_2">
 235           <span class="md-nav__icon md-icon"></span>
 236           PHP API
 237         </label>
 238         <ul class="md-nav__list" data-md-scrollfix>
 239
 240
 241
 242
 243
 244     <li class="md-nav__item">
 245       <a href="../../php/pages/" class="md-nav__link">
 246         Pages
 247       </a>
 248     </li>
 249
 250
 251
 252
 253
 254
 255
 256     <li class="md-nav__item">
 257       <a href="../../php/database-objects/" class="md-nav__link">
 258         Database Objects
 259       </a>
 260     </li>
 261
 262
 263
 264
 265
 266
 267
 268     <li class="md-nav__item">
 269       <a href="../../php/database-access/" class="md-nav__link">
 270         Database Access
 271       </a>
 272     </li>
 273
 274
 275
 276
 277
 278
 279
 280     <li class="md-nav__item">
 281       <a href="../../php/exceptions/" class="md-nav__link">
 282         Exceptions
 283       </a>
 284     </li>
 285
 286
 287
 288
 289
 290
 291
 292
 293     <li class="md-nav__item md-nav__item--nested">
 294
 295
 296         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 297
 298       <label class="md-nav__link" for="__nav_2_5">
 299         API
 300         <span class="md-nav__icon md-icon"></span>
 301       </label>
 302       <nav class="md-nav" aria-label="API" data-md-level="2">
 303         <label class="md-nav__title" for="__nav_2_5">
 304           <span class="md-nav__icon md-icon"></span>
 305           API
 306         </label>
 307         <ul class="md-nav__list" data-md-scrollfix>
 308
 309
 310
 311
 312
 313     <li class="md-nav__item">
 314       <a href="../../php/api/caches/" class="md-nav__link">
 315         Caches
 316       </a>
 317     </li>
 318
 319
 320
 321
 322
 323
 324
 325     <li class="md-nav__item">
 326       <a href="../../php/api/comments/" class="md-nav__link">
 327         Comments
 328       </a>
 329     </li>
 330
 331
 332
 333
 334
 335
 336
 337     <li class="md-nav__item">
 338       <a href="../../php/api/cronjobs/" class="md-nav__link">
 339         Cronjobs
 340       </a>
 341     </li>
 342
 343
 344
 345
 346
 347
 348
 349     <li class="md-nav__item">
 350       <a href="../../php/api/events/" class="md-nav__link">
 351         Events
 352       </a>
 353     </li>
 354
 355
 356
 357
 358
 359
 360
 361
 362     <li class="md-nav__item md-nav__item--nested">
 363
 364
 365         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 366
 367       <label class="md-nav__link" for="__nav_2_5_5">
 368         Form Builder
 369         <span class="md-nav__icon md-icon"></span>
 370       </label>
 371       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 372         <label class="md-nav__title" for="__nav_2_5_5">
 373           <span class="md-nav__icon md-icon"></span>
 374           Form Builder
 375         </label>
 376         <ul class="md-nav__list" data-md-scrollfix>
 377
 378
 379
 380
 381
 382     <li class="md-nav__item">
 383       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 384         Overview
 385       </a>
 386     </li>
 387
 388
 389
 390
 391
 392
 393
 394     <li class="md-nav__item">
 395       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 396         Structure
 397       </a>
 398     </li>
 399
 400
 401
 402
 403
 404
 405
 406     <li class="md-nav__item">
 407       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 408         Fields
 409       </a>
 410     </li>
 411
 412
 413
 414
 415
 416
 417
 418     <li class="md-nav__item">
 419       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 420         Validation and Data
 421       </a>
 422     </li>
 423
 424
 425
 426
 427
 428
 429
 430     <li class="md-nav__item">
 431       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 432         Dependencies
 433       </a>
 434     </li>
 435
 436
 437
 438         </ul>
 439       </nav>
 440     </li>
 441
 442
 443
 444
 445
 446
 447
 448     <li class="md-nav__item">
 449       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 450         Package Installation Plugins
 451       </a>
 452     </li>
 453
 454
 455
 456
 457
 458
 459
 460     <li class="md-nav__item">
 461       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 462         User Activity Points
 463       </a>
 464     </li>
 465
 466
 467
 468
 469
 470
 471
 472     <li class="md-nav__item">
 473       <a href="../../php/api/user_notifications/" class="md-nav__link">
 474         User Notifications
 475       </a>
 476     </li>
 477
 478
 479
 480
 481
 482
 483
 484     <li class="md-nav__item">
 485       <a href="../../php/api/sitemaps/" class="md-nav__link">
 486         Sitemaps
 487       </a>
 488     </li>
 489
 490
 491
 492         </ul>
 493       </nav>
 494     </li>
 495
 496
 497
 498
 499
 500
 501
 502     <li class="md-nav__item">
 503       <a href="../../php/code-style/" class="md-nav__link">
 504         Code Style
 505       </a>
 506     </li>
 507
 508
 509
 510
 511
 512
 513
 514     <li class="md-nav__item">
 515       <a href="../../php/apps/" class="md-nav__link">
 516         Apps
 517       </a>
 518     </li>
 519
 520
 521
 522
 523
 524
 525
 526     <li class="md-nav__item">
 527       <a href="../../php/gdpr/" class="md-nav__link">
 528         GDPR
 529       </a>
 530     </li>
 531
 532
 533
 534         </ul>
 535       </nav>
 536     </li>
 537
 538
 539
 540
 541
 542
 543
 544
 545
 546
 547
 548     <li class="md-nav__item md-nav__item--nested">
 549
 550
 551         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 552
 553       <label class="md-nav__link" for="__nav_3">
 554         Languages, Templates & CSS
 555         <span class="md-nav__icon md-icon"></span>
 556       </label>
 557       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 558         <label class="md-nav__title" for="__nav_3">
 559           <span class="md-nav__icon md-icon"></span>
 560           Languages, Templates & CSS
 561         </label>
 562         <ul class="md-nav__list" data-md-scrollfix>
 563
 564
 565
 566
 567
 568     <li class="md-nav__item">
 569       <a href="../../view/languages/" class="md-nav__link">
 570         Languages
 571       </a>
 572     </li>
 573
 574
 575
 576
 577
 578
 579
 580     <li class="md-nav__item">
 581       <a href="../../view/templates/" class="md-nav__link">
 582         Templates
 583       </a>
 584     </li>
 585
 586
 587
 588
 589
 590
 591
 592     <li class="md-nav__item">
 593       <a href="../../view/css/" class="md-nav__link">
 594         CSS
 595       </a>
 596     </li>
 597
 598
 599
 600         </ul>
 601       </nav>
 602     </li>
 603
 604
 605
 606
 607
 608
 609
 610
 611
 612
 613
 614
 615
 616     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 617
 618
 619         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 620
 621       <label class="md-nav__link" for="__nav_4">
 622         JavaScript API
 623         <span class="md-nav__icon md-icon"></span>
 624       </label>
 625       <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
 626         <label class="md-nav__title" for="__nav_4">
 627           <span class="md-nav__icon md-icon"></span>
 628           JavaScript API
 629         </label>
 630         <ul class="md-nav__list" data-md-scrollfix>
 631
 632
 633
 634
 635
 636     <li class="md-nav__item">
 637       <a href="../general-usage/" class="md-nav__link">
 638         General Usage
 639       </a>
 640     </li>
 641
 642
 643
 644
 645
 646
 647
 648
 649
 650
 651     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 652
 653
 654         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" checked>
 655
 656       <label class="md-nav__link" for="__nav_4_2">
 657         New API
 658         <span class="md-nav__icon md-icon"></span>
 659       </label>
 660       <nav class="md-nav" aria-label="New API" data-md-level="2">
 661         <label class="md-nav__title" for="__nav_4_2">
 662           <span class="md-nav__icon md-icon"></span>
 663           New API
 664         </label>
 665         <ul class="md-nav__list" data-md-scrollfix>
 666
 667
 668
 669
 670
 671
 672
 673     <li class="md-nav__item md-nav__item--active">
 674
 675       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 676
 677
 678
 679
 680         <label class="md-nav__link md-nav__link--active" for="__toc">
 681           Writing a module
 682           <span class="md-nav__icon md-icon"></span>
 683         </label>
 684
 685       <a href="./" class="md-nav__link md-nav__link--active">
 686         Writing a module
 687       </a>
 688
 689
 690 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 691
 692
 693
 694
 695
 696     <label class="md-nav__title" for="__toc">
 697       <span class="md-nav__icon md-icon"></span>
 698       Table of contents
 699     </label>
 700     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 701
 702         <li class="md-nav__item">
 703   <a href="#introduction" class="md-nav__link">
 704     Introduction
 705   </a>
 706
 707 </li>
 708
 709         <li class="md-nav__item">
 710   <a href="#defining-a-module" class="md-nav__link">
 711     Defining a Module
 712   </a>
 713
 714 </li>
 715
 716         <li class="md-nav__item">
 717   <a href="#loading-a-module" class="md-nav__link">
 718     Loading a Module
 719   </a>
 720
 721     <nav class="md-nav" aria-label="Loading a Module">
 722       <ul class="md-nav__list">
 723
 724           <li class="md-nav__item">
 725   <a href="#module-aliases" class="md-nav__link">
 726     Module Aliases
 727   </a>
 728
 729 </li>
 730
 731       </ul>
 732     </nav>
 733
 734 </li>
 735
 736     </ul>
 737
 738 </nav>
 739
 740     </li>
 741
 742
 743
 744
 745
 746
 747
 748     <li class="md-nav__item">
 749       <a href="../new-api_data-structures/" class="md-nav__link">
 750         Data Structures
 751       </a>
 752     </li>
 753
 754
 755
 756
 757
 758
 759
 760     <li class="md-nav__item">
 761       <a href="../new-api_core/" class="md-nav__link">
 762         Core Functions
 763       </a>
 764     </li>
 765
 766
 767
 768
 769
 770
 771
 772     <li class="md-nav__item">
 773       <a href="../new-api_dom/" class="md-nav__link">
 774         DOM
 775       </a>
 776     </li>
 777
 778
 779
 780
 781
 782
 783
 784     <li class="md-nav__item">
 785       <a href="../new-api_events/" class="md-nav__link">
 786         Event Handling
 787       </a>
 788     </li>
 789
 790
 791
 792
 793
 794
 795
 796     <li class="md-nav__item">
 797       <a href="../new-api_ajax/" class="md-nav__link">
 798         Ajax
 799       </a>
 800     </li>
 801
 802
 803
 804
 805
 806
 807
 808     <li class="md-nav__item">
 809       <a href="../new-api_dialogs/" class="md-nav__link">
 810         Dialogs
 811       </a>
 812     </li>
 813
 814
 815
 816
 817
 818
 819
 820     <li class="md-nav__item">
 821       <a href="../new-api_browser/" class="md-nav__link">
 822         Browser and Screen Sizes
 823       </a>
 824     </li>
 825
 826
 827
 828
 829
 830
 831
 832     <li class="md-nav__item">
 833       <a href="../new-api_ui/" class="md-nav__link">
 834         User Interface
 835       </a>
 836     </li>
 837
 838
 839
 840         </ul>
 841       </nav>
 842     </li>
 843
 844
 845
 846
 847
 848
 849
 850     <li class="md-nav__item">
 851       <a href="../legacy-api/" class="md-nav__link">
 852         Legacy API
 853       </a>
 854     </li>
 855
 856
 857
 858
 859
 860
 861
 862     <li class="md-nav__item">
 863       <a href="../helper-functions/" class="md-nav__link">
 864         Helper Functions
 865       </a>
 866     </li>
 867
 868
 869
 870
 871
 872
 873
 874     <li class="md-nav__item">
 875       <a href="../code-snippets/" class="md-nav__link">
 876         Code Snippets
 877       </a>
 878     </li>
 879
 880
 881
 882         </ul>
 883       </nav>
 884     </li>
 885
 886
 887
 888
 889
 890
 891
 892
 893
 894
 895
 896     <li class="md-nav__item md-nav__item--nested">
 897
 898
 899         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 900
 901       <label class="md-nav__link" for="__nav_5">
 902         Package Components
 903         <span class="md-nav__icon md-icon"></span>
 904       </label>
 905       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
 906         <label class="md-nav__title" for="__nav_5">
 907           <span class="md-nav__icon md-icon"></span>
 908           Package Components
 909         </label>
 910         <ul class="md-nav__list" data-md-scrollfix>
 911
 912
 913
 914
 915
 916     <li class="md-nav__item">
 917       <a href="../../package/package-xml/" class="md-nav__link">
 918         package.xml
 919       </a>
 920     </li>
 921
 922
 923
 924
 925
 926
 927
 928
 929     <li class="md-nav__item md-nav__item--nested">
 930
 931
 932         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
 933
 934       <label class="md-nav__link" for="__nav_5_2">
 935         PIPs
 936         <span class="md-nav__icon md-icon"></span>
 937       </label>
 938       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
 939         <label class="md-nav__title" for="__nav_5_2">
 940           <span class="md-nav__icon md-icon"></span>
 941           PIPs
 942         </label>
 943         <ul class="md-nav__list" data-md-scrollfix>
 944
 945
 946
 947
 948
 949     <li class="md-nav__item">
 950       <a href="../../package/pip/" class="md-nav__link">
 951         Overview
 952       </a>
 953     </li>
 954
 955
 956
 957
 958
 959
 960
 961     <li class="md-nav__item">
 962       <a href="../../package/pip/acl-option/" class="md-nav__link">
 963         aclOption
 964       </a>
 965     </li>
 966
 967
 968
 969
 970
 971
 972
 973     <li class="md-nav__item">
 974       <a href="../../package/pip/acp-menu/" class="md-nav__link">
 975         acpMenu
 976       </a>
 977     </li>
 978
 979
 980
 981
 982
 983
 984
 985     <li class="md-nav__item">
 986       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
 987         acpSearchProvider
 988       </a>
 989     </li>
 990
 991
 992
 993
 994
 995
 996
 997     <li class="md-nav__item">
 998       <a href="../../package/pip/acp-template/" class="md-nav__link">
 999         acpTemplate
1000       </a>
1001     </li>
1002
1003
1004
1005
1006
1007
1008
1009     <li class="md-nav__item">
1010       <a href="../../package/pip/bbcode/" class="md-nav__link">
1011         bbcode
1012       </a>
1013     </li>
1014
1015
1016
1017
1018
1019
1020
1021     <li class="md-nav__item">
1022       <a href="../../package/pip/box/" class="md-nav__link">
1023         box
1024       </a>
1025     </li>
1026
1027
1028
1029
1030
1031
1032
1033     <li class="md-nav__item">
1034       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1035         clipboardAction
1036       </a>
1037     </li>
1038
1039
1040
1041
1042
1043
1044
1045     <li class="md-nav__item">
1046       <a href="../../package/pip/core-object/" class="md-nav__link">
1047         coreObject
1048       </a>
1049     </li>
1050
1051
1052
1053
1054
1055
1056
1057     <li class="md-nav__item">
1058       <a href="../../package/pip/cronjob/" class="md-nav__link">
1059         cronjob
1060       </a>
1061     </li>
1062
1063
1064
1065
1066
1067
1068
1069     <li class="md-nav__item">
1070       <a href="../../package/pip/event-listener/" class="md-nav__link">
1071         eventListener
1072       </a>
1073     </li>
1074
1075
1076
1077
1078
1079
1080
1081     <li class="md-nav__item">
1082       <a href="../../package/pip/file/" class="md-nav__link">
1083         file
1084       </a>
1085     </li>
1086
1087
1088
1089
1090
1091
1092
1093     <li class="md-nav__item">
1094       <a href="../../package/pip/language/" class="md-nav__link">
1095         language
1096       </a>
1097     </li>
1098
1099
1100
1101
1102
1103
1104
1105     <li class="md-nav__item">
1106       <a href="../../package/pip/media-provider/" class="md-nav__link">
1107         mediaProvider
1108       </a>
1109     </li>
1110
1111
1112
1113
1114
1115
1116
1117     <li class="md-nav__item">
1118       <a href="../../package/pip/menu/" class="md-nav__link">
1119         menu
1120       </a>
1121     </li>
1122
1123
1124
1125
1126
1127
1128
1129     <li class="md-nav__item">
1130       <a href="../../package/pip/menu-item/" class="md-nav__link">
1131         menuItem
1132       </a>
1133     </li>
1134
1135
1136
1137
1138
1139
1140
1141     <li class="md-nav__item">
1142       <a href="../../package/pip/object-type/" class="md-nav__link">
1143         objectType
1144       </a>
1145     </li>
1146
1147
1148
1149
1150
1151
1152
1153     <li class="md-nav__item">
1154       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1155         objectTypeDefinition
1156       </a>
1157     </li>
1158
1159
1160
1161
1162
1163
1164
1165     <li class="md-nav__item">
1166       <a href="../../package/pip/option/" class="md-nav__link">
1167         option
1168       </a>
1169     </li>
1170
1171
1172
1173
1174
1175
1176
1177     <li class="md-nav__item">
1178       <a href="../../package/pip/page/" class="md-nav__link">
1179         page
1180       </a>
1181     </li>
1182
1183
1184
1185
1186
1187
1188
1189     <li class="md-nav__item">
1190       <a href="../../package/pip/pip/" class="md-nav__link">
1191         pip
1192       </a>
1193     </li>
1194
1195
1196
1197
1198
1199
1200
1201     <li class="md-nav__item">
1202       <a href="../../package/pip/script/" class="md-nav__link">
1203         script
1204       </a>
1205     </li>
1206
1207
1208
1209
1210
1211
1212
1213     <li class="md-nav__item">
1214       <a href="../../package/pip/smiley/" class="md-nav__link">
1215         smiley
1216       </a>
1217     </li>
1218
1219
1220
1221
1222
1223
1224
1225     <li class="md-nav__item">
1226       <a href="../../package/pip/sql/" class="md-nav__link">
1227         sql
1228       </a>
1229     </li>
1230
1231
1232
1233
1234
1235
1236
1237     <li class="md-nav__item">
1238       <a href="../../package/pip/style/" class="md-nav__link">
1239         style
1240       </a>
1241     </li>
1242
1243
1244
1245
1246
1247
1248
1249     <li class="md-nav__item">
1250       <a href="../../package/pip/template/" class="md-nav__link">
1251         template
1252       </a>
1253     </li>
1254
1255
1256
1257
1258
1259
1260
1261     <li class="md-nav__item">
1262       <a href="../../package/pip/template-listener/" class="md-nav__link">
1263         templateListener
1264       </a>
1265     </li>
1266
1267
1268
1269
1270
1271
1272
1273     <li class="md-nav__item">
1274       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1275         userGroupOption
1276       </a>
1277     </li>
1278
1279
1280
1281
1282
1283
1284
1285     <li class="md-nav__item">
1286       <a href="../../package/pip/user-menu/" class="md-nav__link">
1287         userMenu
1288       </a>
1289     </li>
1290
1291
1292
1293
1294
1295
1296
1297     <li class="md-nav__item">
1298       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1299         userNotificationEvent
1300       </a>
1301     </li>
1302
1303
1304
1305
1306
1307
1308
1309     <li class="md-nav__item">
1310       <a href="../../package/pip/user-option/" class="md-nav__link">
1311         userOption
1312       </a>
1313     </li>
1314
1315
1316
1317
1318
1319
1320
1321     <li class="md-nav__item">
1322       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1323         userProfileMenu
1324       </a>
1325     </li>
1326
1327
1328
1329         </ul>
1330       </nav>
1331     </li>
1332
1333
1334
1335
1336
1337
1338
1339     <li class="md-nav__item">
1340       <a href="../../package/database-php-api/" class="md-nav__link">
1341         Database PHP API
1342       </a>
1343     </li>
1344
1345
1346
1347         </ul>
1348       </nav>
1349     </li>
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361     <li class="md-nav__item md-nav__item--nested">
1362
1363
1364         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1365
1366       <label class="md-nav__link" for="__nav_6">
1367         Migration
1368         <span class="md-nav__icon md-icon"></span>
1369       </label>
1370       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1371         <label class="md-nav__title" for="__nav_6">
1372           <span class="md-nav__icon md-icon"></span>
1373           Migration
1374         </label>
1375         <ul class="md-nav__list" data-md-scrollfix>
1376
1377
1378
1379
1380
1381
1382     <li class="md-nav__item md-nav__item--nested">
1383
1384
1385         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1386
1387       <label class="md-nav__link" for="__nav_6_1">
1388         Migrating from WSC 5.3
1389         <span class="md-nav__icon md-icon"></span>
1390       </label>
1391       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1392         <label class="md-nav__title" for="__nav_6_1">
1393           <span class="md-nav__icon md-icon"></span>
1394           Migrating from WSC 5.3
1395         </label>
1396         <ul class="md-nav__list" data-md-scrollfix>
1397
1398
1399
1400
1401
1402     <li class="md-nav__item">
1403       <a href="../../migration/wsc53/php/" class="md-nav__link">
1404         PHP API
1405       </a>
1406     </li>
1407
1408
1409
1410
1411
1412
1413
1414     <li class="md-nav__item">
1415       <a href="../../migration/wsc53/session/" class="md-nav__link">
1416         Session Handling and Authentication
1417       </a>
1418     </li>
1419
1420
1421
1422
1423
1424
1425
1426     <li class="md-nav__item">
1427       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1428         JavaScript
1429       </a>
1430     </li>
1431
1432
1433
1434
1435
1436
1437
1438     <li class="md-nav__item">
1439       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1440         Templates
1441       </a>
1442     </li>
1443
1444
1445
1446
1447
1448
1449
1450     <li class="md-nav__item">
1451       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1452         Third Party Libraries
1453       </a>
1454     </li>
1455
1456
1457
1458         </ul>
1459       </nav>
1460     </li>
1461
1462
1463
1464
1465
1466
1467
1468
1469     <li class="md-nav__item md-nav__item--nested">
1470
1471
1472         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1473
1474       <label class="md-nav__link" for="__nav_6_2">
1475         Migrating from WSC 5.2
1476         <span class="md-nav__icon md-icon"></span>
1477       </label>
1478       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1479         <label class="md-nav__title" for="__nav_6_2">
1480           <span class="md-nav__icon md-icon"></span>
1481           Migrating from WSC 5.2
1482         </label>
1483         <ul class="md-nav__list" data-md-scrollfix>
1484
1485
1486
1487
1488
1489     <li class="md-nav__item">
1490       <a href="../../migration/wsc52/php/" class="md-nav__link">
1491         PHP API
1492       </a>
1493     </li>
1494
1495
1496
1497
1498
1499
1500
1501     <li class="md-nav__item">
1502       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1503         Templates and Languages
1504       </a>
1505     </li>
1506
1507
1508
1509
1510
1511
1512
1513     <li class="md-nav__item">
1514       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1515         Third Party Libraries
1516       </a>
1517     </li>
1518
1519
1520
1521         </ul>
1522       </nav>
1523     </li>
1524
1525
1526
1527
1528
1529
1530
1531
1532     <li class="md-nav__item md-nav__item--nested">
1533
1534
1535         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1536
1537       <label class="md-nav__link" for="__nav_6_3">
1538         Migrating from WSC 3.1
1539         <span class="md-nav__icon md-icon"></span>
1540       </label>
1541       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1542         <label class="md-nav__title" for="__nav_6_3">
1543           <span class="md-nav__icon md-icon"></span>
1544           Migrating from WSC 3.1
1545         </label>
1546         <ul class="md-nav__list" data-md-scrollfix>
1547
1548
1549
1550
1551
1552     <li class="md-nav__item">
1553       <a href="../../migration/wsc31/php/" class="md-nav__link">
1554         PHP API
1555       </a>
1556     </li>
1557
1558
1559
1560         </ul>
1561       </nav>
1562     </li>
1563
1564
1565
1566
1567
1568
1569
1570
1571     <li class="md-nav__item md-nav__item--nested">
1572
1573
1574         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1575
1576       <label class="md-nav__link" for="__nav_6_4">
1577         Migrating from WSC 3.0
1578         <span class="md-nav__icon md-icon"></span>
1579       </label>
1580       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1581         <label class="md-nav__title" for="__nav_6_4">
1582           <span class="md-nav__icon md-icon"></span>
1583           Migrating from WSC 3.0
1584         </label>
1585         <ul class="md-nav__list" data-md-scrollfix>
1586
1587
1588
1589
1590
1591     <li class="md-nav__item">
1592       <a href="../../migration/wsc30/php/" class="md-nav__link">
1593         PHP API
1594       </a>
1595     </li>
1596
1597
1598
1599
1600
1601
1602
1603     <li class="md-nav__item">
1604       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1605         JavaScript API
1606       </a>
1607     </li>
1608
1609
1610
1611
1612
1613
1614
1615     <li class="md-nav__item">
1616       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1617         Templates
1618       </a>
1619     </li>
1620
1621
1622
1623
1624
1625
1626
1627     <li class="md-nav__item">
1628       <a href="../../migration/wsc30/css/" class="md-nav__link">
1629         CSS
1630       </a>
1631     </li>
1632
1633
1634
1635
1636
1637
1638
1639     <li class="md-nav__item">
1640       <a href="../../migration/wsc30/package/" class="md-nav__link">
1641         Package Components
1642       </a>
1643     </li>
1644
1645
1646
1647         </ul>
1648       </nav>
1649     </li>
1650
1651
1652
1653
1654
1655
1656
1657
1658     <li class="md-nav__item md-nav__item--nested">
1659
1660
1661         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1662
1663       <label class="md-nav__link" for="__nav_6_5">
1664         Migrating from WCF 2.1
1665         <span class="md-nav__icon md-icon"></span>
1666       </label>
1667       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1668         <label class="md-nav__title" for="__nav_6_5">
1669           <span class="md-nav__icon md-icon"></span>
1670           Migrating from WCF 2.1
1671         </label>
1672         <ul class="md-nav__list" data-md-scrollfix>
1673
1674
1675
1676
1677
1678     <li class="md-nav__item">
1679       <a href="../../migration/wcf21/php/" class="md-nav__link">
1680         PHP API
1681       </a>
1682     </li>
1683
1684
1685
1686
1687
1688
1689
1690     <li class="md-nav__item">
1691       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1692         Templates
1693       </a>
1694     </li>
1695
1696
1697
1698
1699
1700
1701
1702     <li class="md-nav__item">
1703       <a href="../../migration/wcf21/css/" class="md-nav__link">
1704         CSS
1705       </a>
1706     </li>
1707
1708
1709
1710
1711
1712
1713
1714     <li class="md-nav__item">
1715       <a href="../../migration/wcf21/package/" class="md-nav__link">
1716         Package Components
1717       </a>
1718     </li>
1719
1720
1721
1722         </ul>
1723       </nav>
1724     </li>
1725
1726
1727
1728         </ul>
1729       </nav>
1730     </li>
1731
1732
1733
1734
1735
1736
1737
1738
1739
1740
1741
1742     <li class="md-nav__item md-nav__item--nested">
1743
1744
1745         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1746
1747       <label class="md-nav__link" for="__nav_7">
1748         Tutorials
1749         <span class="md-nav__icon md-icon"></span>
1750       </label>
1751       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1752         <label class="md-nav__title" for="__nav_7">
1753           <span class="md-nav__icon md-icon"></span>
1754           Tutorials
1755         </label>
1756         <ul class="md-nav__list" data-md-scrollfix>
1757
1758
1759
1760
1761
1762
1763     <li class="md-nav__item md-nav__item--nested">
1764
1765
1766         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1767
1768       <label class="md-nav__link" for="__nav_7_1">
1769         Tutorial Series
1770         <span class="md-nav__icon md-icon"></span>
1771       </label>
1772       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1773         <label class="md-nav__title" for="__nav_7_1">
1774           <span class="md-nav__icon md-icon"></span>
1775           Tutorial Series
1776         </label>
1777         <ul class="md-nav__list" data-md-scrollfix>
1778
1779
1780
1781
1782
1783     <li class="md-nav__item">
1784       <a href="../../tutorial/series/overview/" class="md-nav__link">
1785         Overview
1786       </a>
1787     </li>
1788
1789
1790
1791
1792
1793
1794
1795     <li class="md-nav__item">
1796       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1797         Part 1
1798       </a>
1799     </li>
1800
1801
1802
1803
1804
1805
1806
1807     <li class="md-nav__item">
1808       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1809         Part 2
1810       </a>
1811     </li>
1812
1813
1814
1815
1816
1817
1818
1819     <li class="md-nav__item">
1820       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1821         Part 3
1822       </a>
1823     </li>
1824
1825
1826
1827         </ul>
1828       </nav>
1829     </li>
1830
1831
1832
1833         </ul>
1834       </nav>
1835     </li>
1836
1837
1838
1839   </ul>
1840 </nav>
1841                   </div>
1842                 </div>
1843               </div>
1844
1845
1846
1847               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1848                 <div class="md-sidebar__scrollwrap">
1849                   <div class="md-sidebar__inner">
1850
1851 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1852
1853
1854
1855
1856
1857     <label class="md-nav__title" for="__toc">
1858       <span class="md-nav__icon md-icon"></span>
1859       Table of contents
1860     </label>
1861     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1862
1863         <li class="md-nav__item">
1864   <a href="#introduction" class="md-nav__link">
1865     Introduction
1866   </a>
1867
1868 </li>
1869
1870         <li class="md-nav__item">
1871   <a href="#defining-a-module" class="md-nav__link">
1872     Defining a Module
1873   </a>
1874
1875 </li>
1876
1877         <li class="md-nav__item">
1878   <a href="#loading-a-module" class="md-nav__link">
1879     Loading a Module
1880   </a>
1881
1882     <nav class="md-nav" aria-label="Loading a Module">
1883       <ul class="md-nav__list">
1884
1885           <li class="md-nav__item">
1886   <a href="#module-aliases" class="md-nav__link">
1887     Module Aliases
1888   </a>
1889
1890 </li>
1891
1892       </ul>
1893     </nav>
1894
1895 </li>
1896
1897     </ul>
1898
1899 </nav>
1900                   </div>
1901                 </div>
1902               </div>
1903
1904
1905           <div class="md-content" data-md-component="content">
1906             <article class="md-content__inner md-typeset">
1907
1908
1909                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/master/docs/javascript/new-api_writing-a-module.md" title="Edit this page" class="md-content__button md-icon">
1910                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
1911                   </a>
1912
1913
1914                 <h1 id="writing-a-module-javascript-api">Writing a Module - JavaScript API<a class="headerlink" href="#writing-a-module-javascript-api" title="Permanent link">#</a></h1>
1915 <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">#</a></h2>
1916 <p>The new JavaScript-API was introduced with WoltLab Suite 3.0 and was a major
1917 change in all regards. The previously used API heavily relied on larger JavaScript
1918 files that contained a lot of different components with hidden dependencies
1919 and suffered from extensive jQuery usage for historic reasons.</p>
1920 <p>Eventually a new API was designed that solves the issues with the legacy API
1921 by following a few basic principles:
1922  1. Vanilla ES5-JavaScript.<br />
1923     It allows us to achieve the best performance across all platforms, there is
1924     simply no reason to use jQuery today and the performance penalty on mobile
1925     devices is a real issue.
1926  2. Strict usage of modules.<br />
1927     Each component is placed in an own file and all dependencies are explicitly
1928     declared and injected at the top.Eventually we settled with AMD-style modules
1929     using require.js which offers both lazy loading and "ahead of time"-compilatio
1930     with <code>r.js</code>.
1931  3. No jQuery-based components on page init.<br />
1932     Nothing is more annoying than loading a page and then wait for JavaScript to
1933     modify the page before it becomes usable, forcing the user to sit and wait.
1934     Heavily optimized vanilla JavaScript components offered the speed we wanted.
1935  4. Limited backwards-compatibility.<br />
1936     The new API should make it easy to update existing components by providing
1937     similar interfaces, while still allowing legacy code to run side-by-side for
1938     best compatibility and to avoid rewritting everything from the start.</p>
1939 <h2 id="defining-a-module">Defining a Module<a class="headerlink" href="#defining-a-module" title="Permanent link">#</a></h2>
1940 <p>The default location for modules is <code>js/</code> in the Core's app dir,
1941 but every app and plugin can register their own lookup path by providing the path
1942 using a <a href="../../package/pip/template-listener/">template-listener</a> on <code>requirePaths@headIncludeJavaScript</code>.</p>
1943 <p>For this example we'll assume the file is placed at <code>js/WoltLabSuite/Core/Ui/Foo.js</code>,
1944 the module name is therefore <code>WoltLabSuite/Core/Ui/Foo</code>, it is automatically
1945 derived from the file path and name.</p>
1946 <p>For further instructions on how to define and require modules head over to the <a href="http://requirejs.org/docs/api.html">RequireJS API</a>.</p>
1947 <div class="highlight"><pre><span></span><code><span class="nx">define</span><span class="p">([</span><span class="s2">&quot;Ajax&quot;</span><span class="p">,</span> <span class="s2">&quot;WoltLabSuite/Core/Ui/Bar&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">Ajax</span><span class="p">,</span> <span class="nx">UiBar</span><span class="p">)</span> <span class="p">{</span>
1948   <span class="s2">&quot;use strict&quot;</span><span class="p">;</span>
1949
1950   <span class="kd">function</span> <span class="nx">Foo</span><span class="p">()</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span> <span class="p">}</span>
1951   <span class="nx">Foo</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
1952     <span class="nx">init</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
1953       <span class="nx">elBySel</span><span class="p">(</span><span class="s2">&quot;.myButton&quot;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">WCF_CLICK_EVENT</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_click</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
1954     <span class="p">},</span>
1955
1956     <span class="nx">_click</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
1957       <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
1958
1959       <span class="k">if</span> <span class="p">(</span><span class="nx">UiBar</span><span class="p">.</span><span class="nx">isSnafucated</span><span class="p">())</span> <span class="p">{</span>
1960         <span class="nx">Ajax</span><span class="p">.</span><span class="nx">api</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
1961       <span class="p">}</span>
1962     <span class="p">},</span>
1963
1964     <span class="nx">_ajaxSuccess</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
1965       <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Received response&quot;</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
1966     <span class="p">},</span>
1967
1968     <span class="nx">_ajaxSetup</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
1969       <span class="k">return</span> <span class="p">{</span>
1970         <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
1971           <span class="nx">actionName</span><span class="o">:</span> <span class="s2">&quot;makeSnafucated&quot;</span><span class="p">,</span>
1972           <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;wcf\\data\\foo\\FooAction&quot;</span>
1973         <span class="p">}</span>
1974       <span class="p">};</span>
1975     <span class="p">}</span>
1976   <span class="p">}</span>
1977
1978   <span class="k">return</span> <span class="nx">Foo</span><span class="p">;</span>
1979 <span class="p">});</span>
1980 </code></pre></div>
1981 <h2 id="loading-a-module">Loading a Module<a class="headerlink" href="#loading-a-module" title="Permanent link">#</a></h2>
1982 <p>Modules can then be loaded through their derived name:</p>
1983 <div class="highlight"><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>
1984   <span class="nx">require</span><span class="p">([</span><span class="s2">&quot;WoltLabSuite/Core/Ui/Foo&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">UiFoo</span><span class="p">)</span> <span class="p">{</span>
1985     <span class="k">new</span> <span class="nx">UiFoo</span><span class="p">();</span>
1986   <span class="p">});</span>
1987 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
1988 </code></pre></div>
1989 <h3 id="module-aliases">Module Aliases<a class="headerlink" href="#module-aliases" title="Permanent link">#</a></h3>
1990 <p>Some common modules have short-hand aliases that can be used to include them
1991 without writing out their full name. You can still use their original path, but
1992 it is strongly recommended to use the aliases for consistency.</p>
1993 <table>
1994 <thead>
1995 <tr>
1996 <th>Alias</th>
1997 <th>Full Path</th>
1998 </tr>
1999 </thead>
2000 <tbody>
2001 <tr>
2002 <td><a href="../new-api_ajax/">Ajax</a></td>
2003 <td>WoltLabSuite/Core/Ajax</td>
2004 </tr>
2005 <tr>
2006 <td>AjaxJsonp</td>
2007 <td>WoltLabSuite/Core/Ajax/Jsonp</td>
2008 </tr>
2009 <tr>
2010 <td>AjaxRequest</td>
2011 <td>WoltLabSuite/Core/Ajax/Request</td>
2012 </tr>
2013 <tr>
2014 <td>CallbackList</td>
2015 <td>WoltLabSuite/Core/CallbackList</td>
2016 </tr>
2017 <tr>
2018 <td>ColorUtil</td>
2019 <td>WoltLabSuite/Core/ColorUtil</td>
2020 </tr>
2021 <tr>
2022 <td><a href="../new-api_core/">Core</a></td>
2023 <td>WoltLabSuite/Core/Core</td>
2024 </tr>
2025 <tr>
2026 <td>DateUtil</td>
2027 <td>WoltLabSuite/Core/Date/Util</td>
2028 </tr>
2029 <tr>
2030 <td>Devtools</td>
2031 <td>WoltLabSuite/Core/Devtools</td>
2032 </tr>
2033 <tr>
2034 <td><a href="../new-api_data-structures/">Dictionary</a></td>
2035 <td>WoltLabSuite/Core/Dictionary</td>
2036 </tr>
2037 <tr>
2038 <td><a href="../new-api_dom/">Dom/ChangeListener</a></td>
2039 <td>WoltLabSuite/Core/Dom/Change/Listener</td>
2040 </tr>
2041 <tr>
2042 <td>Dom/Traverse</td>
2043 <td>WoltLabSuite/Core/Dom/Traverse</td>
2044 </tr>
2045 <tr>
2046 <td><a href="../new-api_dom/">Dom/Util</a></td>
2047 <td>WoltLabSuite/Core/Dom/Util</td>
2048 </tr>
2049 <tr>
2050 <td><a href="../new-api_browser/">Environment</a></td>
2051 <td>WoltLabSuite/Core/Environment</td>
2052 </tr>
2053 <tr>
2054 <td><a href="../new-api_events/">EventHandler</a></td>
2055 <td>WoltLabSuite/Core/Event/Handler</td>
2056 </tr>
2057 <tr>
2058 <td><a href="../new-api_events/">EventKey</a></td>
2059 <td>WoltLabSuite/Core/Event/Key</td>
2060 </tr>
2061 <tr>
2062 <td><a href="../new-api_core/">Language</a></td>
2063 <td>WoltLabSuite/Core/Language</td>
2064 </tr>
2065 <tr>
2066 <td><a href="../new-api_data-structures/">List</a></td>
2067 <td>WoltLabSuite/Core/List</td>
2068 </tr>
2069 <tr>
2070 <td><a href="../new-api_data-structures/">ObjectMap</a></td>
2071 <td>WoltLabSuite/Core/ObjectMap</td>
2072 </tr>
2073 <tr>
2074 <td>Permission</td>
2075 <td>WoltLabSuite/Core/Permission</td>
2076 </tr>
2077 <tr>
2078 <td><a href="../new-api_core/">StringUtil</a></td>
2079 <td>WoltLabSuite/Core/StringUtil</td>
2080 </tr>
2081 <tr>
2082 <td><a href="../new-api_ui/">Ui/Alignment</a></td>
2083 <td>WoltLabSuite/Core/Ui/Alignment</td>
2084 </tr>
2085 <tr>
2086 <td><a href="../new-api_ui/">Ui/CloseOverlay</a></td>
2087 <td>WoltLabSuite/Core/Ui/CloseOverlay</td>
2088 </tr>
2089 <tr>
2090 <td><a href="../new-api_ui/">Ui/Confirmation</a></td>
2091 <td>WoltLabSuite/Core/Ui/Confirmation</td>
2092 </tr>
2093 <tr>
2094 <td><a href="../new-api_dialogs/">Ui/Dialog</a></td>
2095 <td>WoltLabSuite/Core/Ui/Dialog</td>
2096 </tr>
2097 <tr>
2098 <td><a href="../new-api_ui/">Ui/Notification</a></td>
2099 <td>WoltLabSuite/Core/Ui/Notification</td>
2100 </tr>
2101 <tr>
2102 <td>Ui/ReusableDropdown</td>
2103 <td>WoltLabSuite/Core/Ui/Dropdown/Reusable</td>
2104 </tr>
2105 <tr>
2106 <td><a href="../new-api_browser/">Ui/Screen</a></td>
2107 <td>WoltLabSuite/Core/Ui/Screen</td>
2108 </tr>
2109 <tr>
2110 <td>Ui/Scroll</td>
2111 <td>WoltLabSuite/Core/Ui/Scroll</td>
2112 </tr>
2113 <tr>
2114 <td>Ui/SimpleDropdown</td>
2115 <td>WoltLabSuite/Core/Ui/Dropdown/Simple</td>
2116 </tr>
2117 <tr>
2118 <td>Ui/TabMenu</td>
2119 <td>WoltLabSuite/Core/Ui/TabMenu</td>
2120 </tr>
2121 <tr>
2122 <td>Upload</td>
2123 <td>WoltLabSuite/Core/Upload</td>
2124 </tr>
2125 <tr>
2126 <td>User</td>
2127 <td>WoltLabSuite/Core/User</td>
2128 </tr>
2129 </tbody>
2130 </table>
2131
2132
2133
2134
2135
2136
2137
2138             </article>
2139           </div>
2140         </div>
2141       </main>
2142
2143
2144 <footer class="md-footer">
2145
2146     <nav class="md-footer__inner md-grid" aria-label="Footer">
2147
2148         <a href="../general-usage/" class="md-footer__link md-footer__link--prev" rel="prev">
2149           <div class="md-footer__button md-icon">
2150             <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>
2151           </div>
2152           <div class="md-footer__title">
2153             <div class="md-ellipsis">
2154               <span class="md-footer__direction">
2155                 Previous
2156               </span>
2157               General Usage
2158             </div>
2159           </div>
2160         </a>
2161
2162
2163         <a href="../new-api_data-structures/" class="md-footer__link md-footer__link--next" rel="next">
2164           <div class="md-footer__title">
2165             <div class="md-ellipsis">
2166               <span class="md-footer__direction">
2167                 Next
2168               </span>
2169               Data Structures
2170             </div>
2171           </div>
2172           <div class="md-footer__button md-icon">
2173             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2174           </div>
2175         </a>
2176
2177     </nav>
2178
2179   <div class="md-footer-meta md-typeset">
2180     <div class="md-footer-meta__inner md-grid">
2181       <div class="md-footer-copyright">
2182
2183           <div class="md-footer-copyright__highlight">
2184             Copyright © 2020 WoltLab GmbH
2185           </div>
2186
2187         Made with
2188         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2189           Material for MkDocs
2190         </a>
2191
2192       </div>
2193       <div class="md-footer-copyright">
2194         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2195         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2196 </div>
2197     </div>
2198   </div>
2199 </footer>
2200
2201     </div>
2202     <div class="md-dialog" data-md-component="dialog">
2203       <div class="md-dialog__inner md-typeset"></div>
2204     </div>
2205     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fb4a9340.min.js", "version": {"provider": "mike"}}</script>
2206
2207
2208       <script src="../../assets/javascripts/bundle.5cf3e710.min.js"></script>
2209
2210
2211   </body>
2212 </html>