5.4/migration/wsc30/javascript/index.html

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