5.4/javascript/new-api_ui/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="canonical" href="https://docs.woltlab.com/5.4/javascript/new-api_ui/">
  13
  14       <link rel="icon" href="../../assets/default.favicon.ico">
  15       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
  16
  17
  18
  19         <title>User Interface - WoltLab Suite Documentation</title>
  20
  21
  22
  23       <link rel="stylesheet" href="../../assets/stylesheets/main.6f955dcd.min.css">
  24
  25
  26         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  27
  28
  29
  30           <meta name="theme-color" content="#009485">
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40       <link rel="stylesheet" href="../../stylesheets/extra.css">
  41
  42
  43
  44
  45
  46   </head>
  47
  48
  49
  50
  51
  52
  53
  54     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  55
  56
  57     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  58
  59     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  60     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  61     <label class="md-overlay" for="__drawer"></label>
  62     <div data-md-component="skip">
  63
  64
  65         <a href="#user-interface-javascript-api" class="md-skip">
  66           Skip to content
  67         </a>
  68
  69     </div>
  70     <div data-md-component="announce">
  71
  72         <aside class="md-announce">
  73           <div class="md-announce__inner md-grid md-typeset">
  74
  75     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  76
  77           </div>
  78         </aside>
  79
  80     </div>
  81
  82       <header class="md-header" data-md-component="header">
  83   <nav class="md-header__inner md-grid" aria-label="Header">
  84     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  85
  86   <img src="../../assets/logo.png" alt="logo">
  87
  88     </a>
  89     <label class="md-header__button md-icon" for="__drawer">
  90       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  91     </label>
  92     <div class="md-header__title" data-md-component="header-title">
  93       <div class="md-header__ellipsis">
  94         <div class="md-header__topic">
  95           <span class="md-ellipsis">
  96             WoltLab Suite Documentation
  97           </span>
  98         </div>
  99         <div class="md-header__topic" data-md-component="header-topic">
 100           <span class="md-ellipsis">
 101
 102               User Interface
 103
 104           </span>
 105         </div>
 106       </div>
 107     </div>
 108
 109
 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.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 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.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 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 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 175   <label class="md-nav__title" for="__drawer">
 176     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 177
 178   <img src="../../assets/logo.png" alt="logo">
 179
 180     </a>
 181     WoltLab Suite Documentation
 182   </label>
 183
 184     <div class="md-nav__source">
 185
 186 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 187   <div class="md-source__icon md-icon">
 188
 189     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 190   </div>
 191   <div class="md-source__repository">
 192     GitHub
 193   </div>
 194 </a>
 195     </div>
 196
 197   <ul class="md-nav__list" data-md-scrollfix>
 198
 199
 200
 201
 202
 203
 204
 205
 206     <li class="md-nav__item">
 207       <a href="../../getting-started/" class="md-nav__link">
 208         Getting Started
 209       </a>
 210     </li>
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222     <li class="md-nav__item md-nav__item--nested">
 223
 224
 225         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 226
 227       <label class="md-nav__link" for="__nav_2">
 228         PHP API
 229         <span class="md-nav__icon md-icon"></span>
 230       </label>
 231       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 232         <label class="md-nav__title" for="__nav_2">
 233           <span class="md-nav__icon md-icon"></span>
 234           PHP API
 235         </label>
 236         <ul class="md-nav__list" data-md-scrollfix>
 237
 238
 239
 240
 241
 242     <li class="md-nav__item">
 243       <a href="../../php/pages/" class="md-nav__link">
 244         Pages
 245       </a>
 246     </li>
 247
 248
 249
 250
 251
 252
 253
 254     <li class="md-nav__item">
 255       <a href="../../php/database-objects/" class="md-nav__link">
 256         Database Objects
 257       </a>
 258     </li>
 259
 260
 261
 262
 263
 264
 265
 266     <li class="md-nav__item">
 267       <a href="../../php/database-access/" class="md-nav__link">
 268         Database Access
 269       </a>
 270     </li>
 271
 272
 273
 274
 275
 276
 277
 278     <li class="md-nav__item">
 279       <a href="../../php/exceptions/" class="md-nav__link">
 280         Exceptions
 281       </a>
 282     </li>
 283
 284
 285
 286
 287
 288
 289
 290
 291     <li class="md-nav__item md-nav__item--nested">
 292
 293
 294         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 295
 296       <label class="md-nav__link" for="__nav_2_5">
 297         API
 298         <span class="md-nav__icon md-icon"></span>
 299       </label>
 300       <nav class="md-nav" aria-label="API" data-md-level="2">
 301         <label class="md-nav__title" for="__nav_2_5">
 302           <span class="md-nav__icon md-icon"></span>
 303           API
 304         </label>
 305         <ul class="md-nav__list" data-md-scrollfix>
 306
 307
 308
 309
 310
 311
 312     <li class="md-nav__item md-nav__item--nested">
 313
 314
 315         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 316
 317       <label class="md-nav__link" for="__nav_2_5_1">
 318         Caches
 319         <span class="md-nav__icon md-icon"></span>
 320       </label>
 321       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 322         <label class="md-nav__title" for="__nav_2_5_1">
 323           <span class="md-nav__icon md-icon"></span>
 324           Caches
 325         </label>
 326         <ul class="md-nav__list" data-md-scrollfix>
 327
 328
 329
 330
 331
 332     <li class="md-nav__item">
 333       <a href="../../php/api/caches/" class="md-nav__link">
 334         Overview
 335       </a>
 336     </li>
 337
 338
 339
 340
 341
 342
 343
 344     <li class="md-nav__item">
 345       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 346         Persistent Caches
 347       </a>
 348     </li>
 349
 350
 351
 352
 353
 354
 355
 356     <li class="md-nav__item">
 357       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 358         Runtime Caches
 359       </a>
 360     </li>
 361
 362
 363
 364         </ul>
 365       </nav>
 366     </li>
 367
 368
 369
 370
 371
 372
 373
 374     <li class="md-nav__item">
 375       <a href="../../php/api/comments/" class="md-nav__link">
 376         Comments
 377       </a>
 378     </li>
 379
 380
 381
 382
 383
 384
 385
 386     <li class="md-nav__item">
 387       <a href="../../php/api/cronjobs/" class="md-nav__link">
 388         Cronjobs
 389       </a>
 390     </li>
 391
 392
 393
 394
 395
 396
 397
 398     <li class="md-nav__item">
 399       <a href="../../php/api/events/" class="md-nav__link">
 400         Events
 401       </a>
 402     </li>
 403
 404
 405
 406
 407
 408
 409
 410
 411     <li class="md-nav__item md-nav__item--nested">
 412
 413
 414         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 415
 416       <label class="md-nav__link" for="__nav_2_5_5">
 417         Form Builder
 418         <span class="md-nav__icon md-icon"></span>
 419       </label>
 420       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 421         <label class="md-nav__title" for="__nav_2_5_5">
 422           <span class="md-nav__icon md-icon"></span>
 423           Form Builder
 424         </label>
 425         <ul class="md-nav__list" data-md-scrollfix>
 426
 427
 428
 429
 430
 431     <li class="md-nav__item">
 432       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 433         Overview
 434       </a>
 435     </li>
 436
 437
 438
 439
 440
 441
 442
 443     <li class="md-nav__item">
 444       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 445         Structure
 446       </a>
 447     </li>
 448
 449
 450
 451
 452
 453
 454
 455     <li class="md-nav__item">
 456       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 457         Fields
 458       </a>
 459     </li>
 460
 461
 462
 463
 464
 465
 466
 467     <li class="md-nav__item">
 468       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 469         Validation and Data
 470       </a>
 471     </li>
 472
 473
 474
 475
 476
 477
 478
 479     <li class="md-nav__item">
 480       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 481         Dependencies
 482       </a>
 483     </li>
 484
 485
 486
 487         </ul>
 488       </nav>
 489     </li>
 490
 491
 492
 493
 494
 495
 496
 497     <li class="md-nav__item">
 498       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 499         Package Installation Plugins
 500       </a>
 501     </li>
 502
 503
 504
 505
 506
 507
 508
 509     <li class="md-nav__item">
 510       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 511         User Activity Points
 512       </a>
 513     </li>
 514
 515
 516
 517
 518
 519
 520
 521     <li class="md-nav__item">
 522       <a href="../../php/api/user_notifications/" class="md-nav__link">
 523         User Notifications
 524       </a>
 525     </li>
 526
 527
 528
 529
 530
 531
 532
 533     <li class="md-nav__item">
 534       <a href="../../php/api/sitemaps/" class="md-nav__link">
 535         Sitemaps
 536       </a>
 537     </li>
 538
 539
 540
 541         </ul>
 542       </nav>
 543     </li>
 544
 545
 546
 547
 548
 549
 550
 551     <li class="md-nav__item">
 552       <a href="../../php/code-style/" class="md-nav__link">
 553         Code Style
 554       </a>
 555     </li>
 556
 557
 558
 559
 560
 561
 562
 563     <li class="md-nav__item">
 564       <a href="../../php/apps/" class="md-nav__link">
 565         Apps
 566       </a>
 567     </li>
 568
 569
 570
 571
 572
 573
 574
 575     <li class="md-nav__item">
 576       <a href="../../php/gdpr/" class="md-nav__link">
 577         GDPR
 578       </a>
 579     </li>
 580
 581
 582
 583         </ul>
 584       </nav>
 585     </li>
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597     <li class="md-nav__item md-nav__item--nested">
 598
 599
 600         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 601
 602       <label class="md-nav__link" for="__nav_3">
 603         Languages, Templates & CSS
 604         <span class="md-nav__icon md-icon"></span>
 605       </label>
 606       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 607         <label class="md-nav__title" for="__nav_3">
 608           <span class="md-nav__icon md-icon"></span>
 609           Languages, Templates & CSS
 610         </label>
 611         <ul class="md-nav__list" data-md-scrollfix>
 612
 613
 614
 615
 616
 617     <li class="md-nav__item">
 618       <a href="../../view/languages/" class="md-nav__link">
 619         Languages
 620       </a>
 621     </li>
 622
 623
 624
 625
 626
 627
 628
 629     <li class="md-nav__item">
 630       <a href="../../view/templates/" class="md-nav__link">
 631         Templates
 632       </a>
 633     </li>
 634
 635
 636
 637
 638
 639
 640
 641     <li class="md-nav__item">
 642       <a href="../../view/template-plugins/" class="md-nav__link">
 643         Template Plugins
 644       </a>
 645     </li>
 646
 647
 648
 649
 650
 651
 652
 653     <li class="md-nav__item">
 654       <a href="../../view/css/" class="md-nav__link">
 655         CSS
 656       </a>
 657     </li>
 658
 659
 660
 661         </ul>
 662       </nav>
 663     </li>
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675
 676
 677     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 678
 679
 680         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 681
 682       <label class="md-nav__link" for="__nav_4">
 683         TypeScript and JavaScript API
 684         <span class="md-nav__icon md-icon"></span>
 685       </label>
 686       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 687         <label class="md-nav__title" for="__nav_4">
 688           <span class="md-nav__icon md-icon"></span>
 689           TypeScript and JavaScript API
 690         </label>
 691         <ul class="md-nav__list" data-md-scrollfix>
 692
 693
 694
 695
 696
 697     <li class="md-nav__item">
 698       <a href="../general-usage/" class="md-nav__link">
 699         General Usage
 700       </a>
 701     </li>
 702
 703
 704
 705
 706
 707
 708
 709     <li class="md-nav__item">
 710       <a href="../typescript/" class="md-nav__link">
 711         TypeScript
 712       </a>
 713     </li>
 714
 715
 716
 717
 718
 719
 720
 721
 722
 723
 724     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 725
 726
 727         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" checked>
 728
 729       <label class="md-nav__link" for="__nav_4_3">
 730         New API
 731         <span class="md-nav__icon md-icon"></span>
 732       </label>
 733       <nav class="md-nav" aria-label="New API" data-md-level="2">
 734         <label class="md-nav__title" for="__nav_4_3">
 735           <span class="md-nav__icon md-icon"></span>
 736           New API
 737         </label>
 738         <ul class="md-nav__list" data-md-scrollfix>
 739
 740
 741
 742
 743
 744     <li class="md-nav__item">
 745       <a href="../new-api_writing-a-module/" class="md-nav__link">
 746         Writing a module
 747       </a>
 748     </li>
 749
 750
 751
 752
 753
 754
 755
 756     <li class="md-nav__item">
 757       <a href="../new-api_data-structures/" class="md-nav__link">
 758         Data Structures
 759       </a>
 760     </li>
 761
 762
 763
 764
 765
 766
 767
 768     <li class="md-nav__item">
 769       <a href="../new-api_core/" class="md-nav__link">
 770         Core Functions
 771       </a>
 772     </li>
 773
 774
 775
 776
 777
 778
 779
 780     <li class="md-nav__item">
 781       <a href="../new-api_dom/" class="md-nav__link">
 782         DOM
 783       </a>
 784     </li>
 785
 786
 787
 788
 789
 790
 791
 792     <li class="md-nav__item">
 793       <a href="../new-api_events/" class="md-nav__link">
 794         Event Handling
 795       </a>
 796     </li>
 797
 798
 799
 800
 801
 802
 803
 804     <li class="md-nav__item">
 805       <a href="../new-api_ajax/" class="md-nav__link">
 806         Ajax
 807       </a>
 808     </li>
 809
 810
 811
 812
 813
 814
 815
 816     <li class="md-nav__item">
 817       <a href="../new-api_dialogs/" class="md-nav__link">
 818         Dialogs
 819       </a>
 820     </li>
 821
 822
 823
 824
 825
 826
 827
 828     <li class="md-nav__item">
 829       <a href="../new-api_browser/" class="md-nav__link">
 830         Browser and Screen Sizes
 831       </a>
 832     </li>
 833
 834
 835
 836
 837
 838
 839
 840
 841
 842     <li class="md-nav__item md-nav__item--active">
 843
 844       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 845
 846
 847
 848
 849
 850         <label class="md-nav__link md-nav__link--active" for="__toc">
 851           User Interface
 852           <span class="md-nav__icon md-icon"></span>
 853         </label>
 854
 855       <a href="./" class="md-nav__link md-nav__link--active">
 856         User Interface
 857       </a>
 858
 859
 860 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 861
 862
 863
 864
 865
 866
 867     <label class="md-nav__title" for="__toc">
 868       <span class="md-nav__icon md-icon"></span>
 869       Table of contents
 870     </label>
 871     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 872
 873         <li class="md-nav__item">
 874   <a href="#uialignment" class="md-nav__link">
 875     Ui/Alignment
 876   </a>
 877
 878     <nav class="md-nav" aria-label="Ui/Alignment">
 879       <ul class="md-nav__list">
 880
 881           <li class="md-nav__item">
 882   <a href="#setelement-element-referenceelement-element-options-object" class="md-nav__link">
 883     set(element: Element, referenceElement: Element, options: Object)
 884   </a>
 885
 886     <nav class="md-nav" aria-label="set(element: Element, referenceElement: Element, options: Object)">
 887       <ul class="md-nav__list">
 888
 889           <li class="md-nav__item">
 890   <a href="#verticaloffset-number" class="md-nav__link">
 891     verticalOffset: number
 892   </a>
 893
 894 </li>
 895
 896           <li class="md-nav__item">
 897   <a href="#pointer-boolean" class="md-nav__link">
 898     pointer: boolean
 899   </a>
 900
 901 </li>
 902
 903           <li class="md-nav__item">
 904   <a href="#pointeroffset-number" class="md-nav__link">
 905     pointerOffset: number
 906   </a>
 907
 908 </li>
 909
 910           <li class="md-nav__item">
 911   <a href="#pointerclassnames-string" class="md-nav__link">
 912     pointerClassNames: string[]
 913   </a>
 914
 915 </li>
 916
 917           <li class="md-nav__item">
 918   <a href="#refdimensionselement-element" class="md-nav__link">
 919     refDimensionsElement: Element
 920   </a>
 921
 922 </li>
 923
 924           <li class="md-nav__item">
 925   <a href="#horizontal-string" class="md-nav__link">
 926     horizontal: string
 927   </a>
 928
 929 </li>
 930
 931           <li class="md-nav__item">
 932   <a href="#vertical-string" class="md-nav__link">
 933     vertical: string
 934   </a>
 935
 936 </li>
 937
 938           <li class="md-nav__item">
 939   <a href="#allowflip-string" class="md-nav__link">
 940     allowFlip: string
 941   </a>
 942
 943 </li>
 944
 945       </ul>
 946     </nav>
 947
 948 </li>
 949
 950       </ul>
 951     </nav>
 952
 953 </li>
 954
 955         <li class="md-nav__item">
 956   <a href="#uicloseoverlay" class="md-nav__link">
 957     Ui/CloseOverlay
 958   </a>
 959
 960     <nav class="md-nav" aria-label="Ui/CloseOverlay">
 961       <ul class="md-nav__list">
 962
 963           <li class="md-nav__item">
 964   <a href="#addidentifier-string-callback-void" class="md-nav__link">
 965     add(identifier: string, callback: () =&gt; void)
 966   </a>
 967
 968 </li>
 969
 970       </ul>
 971     </nav>
 972
 973 </li>
 974
 975         <li class="md-nav__item">
 976   <a href="#uiconfirmation" class="md-nav__link">
 977     Ui/Confirmation
 978   </a>
 979
 980     <nav class="md-nav" aria-label="Ui/Confirmation">
 981       <ul class="md-nav__list">
 982
 983           <li class="md-nav__item">
 984   <a href="#showoptions-object" class="md-nav__link">
 985     show(options: Object)
 986   </a>
 987
 988     <nav class="md-nav" aria-label="show(options: Object)">
 989       <ul class="md-nav__list">
 990
 991           <li class="md-nav__item">
 992   <a href="#cancel-parameters-object-void" class="md-nav__link">
 993     cancel: (parameters: Object) =&gt; void
 994   </a>
 995
 996 </li>
 997
 998           <li class="md-nav__item">
 999   <a href="#confirm-parameters-object-void" class="md-nav__link">
1000     confirm: (parameters: Object) =&gt; void
1001   </a>
1002
1003 </li>
1004
1005           <li class="md-nav__item">
1006   <a href="#message-string" class="md-nav__link">
1007     message: string
1008   </a>
1009
1010 </li>
1011
1012           <li class="md-nav__item">
1013   <a href="#messageishtml" class="md-nav__link">
1014     messageIsHtml
1015   </a>
1016
1017 </li>
1018
1019           <li class="md-nav__item">
1020   <a href="#parameters-object" class="md-nav__link">
1021     parameters: Object
1022   </a>
1023
1024 </li>
1025
1026           <li class="md-nav__item">
1027   <a href="#template-string" class="md-nav__link">
1028     template: string
1029   </a>
1030
1031 </li>
1032
1033       </ul>
1034     </nav>
1035
1036 </li>
1037
1038       </ul>
1039     </nav>
1040
1041 </li>
1042
1043         <li class="md-nav__item">
1044   <a href="#uinotification" class="md-nav__link">
1045     Ui/Notification
1046   </a>
1047
1048     <nav class="md-nav" aria-label="Ui/Notification">
1049       <ul class="md-nav__list">
1050
1051           <li class="md-nav__item">
1052   <a href="#showmessage-string-callback-void-cssclassname-string" class="md-nav__link">
1053     show(message: string, callback?: () =&gt; void, cssClassName?: string)
1054   </a>
1055
1056 </li>
1057
1058       </ul>
1059     </nav>
1060
1061 </li>
1062
1063     </ul>
1064
1065 </nav>
1066
1067     </li>
1068
1069
1070
1071         </ul>
1072       </nav>
1073     </li>
1074
1075
1076
1077
1078
1079
1080
1081     <li class="md-nav__item">
1082       <a href="../legacy-api/" class="md-nav__link">
1083         Legacy API
1084       </a>
1085     </li>
1086
1087
1088
1089
1090
1091
1092
1093     <li class="md-nav__item">
1094       <a href="../helper-functions/" class="md-nav__link">
1095         Helper Functions
1096       </a>
1097     </li>
1098
1099
1100
1101
1102
1103
1104
1105     <li class="md-nav__item">
1106       <a href="../code-snippets/" class="md-nav__link">
1107         Code Snippets
1108       </a>
1109     </li>
1110
1111
1112
1113         </ul>
1114       </nav>
1115     </li>
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127     <li class="md-nav__item md-nav__item--nested">
1128
1129
1130         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1131
1132       <label class="md-nav__link" for="__nav_5">
1133         Package Components
1134         <span class="md-nav__icon md-icon"></span>
1135       </label>
1136       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1137         <label class="md-nav__title" for="__nav_5">
1138           <span class="md-nav__icon md-icon"></span>
1139           Package Components
1140         </label>
1141         <ul class="md-nav__list" data-md-scrollfix>
1142
1143
1144
1145
1146
1147     <li class="md-nav__item">
1148       <a href="../../package/package-xml/" class="md-nav__link">
1149         package.xml
1150       </a>
1151     </li>
1152
1153
1154
1155
1156
1157
1158
1159
1160     <li class="md-nav__item md-nav__item--nested">
1161
1162
1163         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1164
1165       <label class="md-nav__link" for="__nav_5_2">
1166         PIPs
1167         <span class="md-nav__icon md-icon"></span>
1168       </label>
1169       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1170         <label class="md-nav__title" for="__nav_5_2">
1171           <span class="md-nav__icon md-icon"></span>
1172           PIPs
1173         </label>
1174         <ul class="md-nav__list" data-md-scrollfix>
1175
1176
1177
1178
1179
1180     <li class="md-nav__item">
1181       <a href="../../package/pip/" class="md-nav__link">
1182         Overview
1183       </a>
1184     </li>
1185
1186
1187
1188
1189
1190
1191
1192     <li class="md-nav__item">
1193       <a href="../../package/pip/acl-option/" class="md-nav__link">
1194         aclOption
1195       </a>
1196     </li>
1197
1198
1199
1200
1201
1202
1203
1204     <li class="md-nav__item">
1205       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1206         acpMenu
1207       </a>
1208     </li>
1209
1210
1211
1212
1213
1214
1215
1216     <li class="md-nav__item">
1217       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1218         acpSearchProvider
1219       </a>
1220     </li>
1221
1222
1223
1224
1225
1226
1227
1228     <li class="md-nav__item">
1229       <a href="../../package/pip/acp-template/" class="md-nav__link">
1230         acpTemplate
1231       </a>
1232     </li>
1233
1234
1235
1236
1237
1238
1239
1240     <li class="md-nav__item">
1241       <a href="../../package/pip/bbcode/" class="md-nav__link">
1242         bbcode
1243       </a>
1244     </li>
1245
1246
1247
1248
1249
1250
1251
1252     <li class="md-nav__item">
1253       <a href="../../package/pip/box/" class="md-nav__link">
1254         box
1255       </a>
1256     </li>
1257
1258
1259
1260
1261
1262
1263
1264     <li class="md-nav__item">
1265       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1266         clipboardAction
1267       </a>
1268     </li>
1269
1270
1271
1272
1273
1274
1275
1276     <li class="md-nav__item">
1277       <a href="../../package/pip/core-object/" class="md-nav__link">
1278         coreObject
1279       </a>
1280     </li>
1281
1282
1283
1284
1285
1286
1287
1288     <li class="md-nav__item">
1289       <a href="../../package/pip/cronjob/" class="md-nav__link">
1290         cronjob
1291       </a>
1292     </li>
1293
1294
1295
1296
1297
1298
1299
1300     <li class="md-nav__item">
1301       <a href="../../package/pip/database/" class="md-nav__link">
1302         database
1303       </a>
1304     </li>
1305
1306
1307
1308
1309
1310
1311
1312     <li class="md-nav__item">
1313       <a href="../../package/pip/event-listener/" class="md-nav__link">
1314         eventListener
1315       </a>
1316     </li>
1317
1318
1319
1320
1321
1322
1323
1324     <li class="md-nav__item">
1325       <a href="../../package/pip/file/" class="md-nav__link">
1326         file
1327       </a>
1328     </li>
1329
1330
1331
1332
1333
1334
1335
1336     <li class="md-nav__item">
1337       <a href="../../package/pip/language/" class="md-nav__link">
1338         language
1339       </a>
1340     </li>
1341
1342
1343
1344
1345
1346
1347
1348     <li class="md-nav__item">
1349       <a href="../../package/pip/media-provider/" class="md-nav__link">
1350         mediaProvider
1351       </a>
1352     </li>
1353
1354
1355
1356
1357
1358
1359
1360     <li class="md-nav__item">
1361       <a href="../../package/pip/menu/" class="md-nav__link">
1362         menu
1363       </a>
1364     </li>
1365
1366
1367
1368
1369
1370
1371
1372     <li class="md-nav__item">
1373       <a href="../../package/pip/menu-item/" class="md-nav__link">
1374         menuItem
1375       </a>
1376     </li>
1377
1378
1379
1380
1381
1382
1383
1384     <li class="md-nav__item">
1385       <a href="../../package/pip/object-type/" class="md-nav__link">
1386         objectType
1387       </a>
1388     </li>
1389
1390
1391
1392
1393
1394
1395
1396     <li class="md-nav__item">
1397       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1398         objectTypeDefinition
1399       </a>
1400     </li>
1401
1402
1403
1404
1405
1406
1407
1408     <li class="md-nav__item">
1409       <a href="../../package/pip/option/" class="md-nav__link">
1410         option
1411       </a>
1412     </li>
1413
1414
1415
1416
1417
1418
1419
1420     <li class="md-nav__item">
1421       <a href="../../package/pip/page/" class="md-nav__link">
1422         page
1423       </a>
1424     </li>
1425
1426
1427
1428
1429
1430
1431
1432     <li class="md-nav__item">
1433       <a href="../../package/pip/pip/" class="md-nav__link">
1434         pip
1435       </a>
1436     </li>
1437
1438
1439
1440
1441
1442
1443
1444     <li class="md-nav__item">
1445       <a href="../../package/pip/script/" class="md-nav__link">
1446         script
1447       </a>
1448     </li>
1449
1450
1451
1452
1453
1454
1455
1456     <li class="md-nav__item">
1457       <a href="../../package/pip/smiley/" class="md-nav__link">
1458         smiley
1459       </a>
1460     </li>
1461
1462
1463
1464
1465
1466
1467
1468     <li class="md-nav__item">
1469       <a href="../../package/pip/sql/" class="md-nav__link">
1470         sql
1471       </a>
1472     </li>
1473
1474
1475
1476
1477
1478
1479
1480     <li class="md-nav__item">
1481       <a href="../../package/pip/style/" class="md-nav__link">
1482         style
1483       </a>
1484     </li>
1485
1486
1487
1488
1489
1490
1491
1492     <li class="md-nav__item">
1493       <a href="../../package/pip/template/" class="md-nav__link">
1494         template
1495       </a>
1496     </li>
1497
1498
1499
1500
1501
1502
1503
1504     <li class="md-nav__item">
1505       <a href="../../package/pip/template-listener/" class="md-nav__link">
1506         templateListener
1507       </a>
1508     </li>
1509
1510
1511
1512
1513
1514
1515
1516     <li class="md-nav__item">
1517       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1518         userGroupOption
1519       </a>
1520     </li>
1521
1522
1523
1524
1525
1526
1527
1528     <li class="md-nav__item">
1529       <a href="../../package/pip/user-menu/" class="md-nav__link">
1530         userMenu
1531       </a>
1532     </li>
1533
1534
1535
1536
1537
1538
1539
1540     <li class="md-nav__item">
1541       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1542         userNotificationEvent
1543       </a>
1544     </li>
1545
1546
1547
1548
1549
1550
1551
1552     <li class="md-nav__item">
1553       <a href="../../package/pip/user-option/" class="md-nav__link">
1554         userOption
1555       </a>
1556     </li>
1557
1558
1559
1560
1561
1562
1563
1564     <li class="md-nav__item">
1565       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1566         userProfileMenu
1567       </a>
1568     </li>
1569
1570
1571
1572         </ul>
1573       </nav>
1574     </li>
1575
1576
1577
1578
1579
1580
1581
1582     <li class="md-nav__item">
1583       <a href="../../package/database-php-api/" class="md-nav__link">
1584         Database PHP API
1585       </a>
1586     </li>
1587
1588
1589
1590         </ul>
1591       </nav>
1592     </li>
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604     <li class="md-nav__item md-nav__item--nested">
1605
1606
1607         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1608
1609       <label class="md-nav__link" for="__nav_6">
1610         Migration
1611         <span class="md-nav__icon md-icon"></span>
1612       </label>
1613       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1614         <label class="md-nav__title" for="__nav_6">
1615           <span class="md-nav__icon md-icon"></span>
1616           Migration
1617         </label>
1618         <ul class="md-nav__list" data-md-scrollfix>
1619
1620
1621
1622
1623
1624
1625     <li class="md-nav__item md-nav__item--nested">
1626
1627
1628         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1629
1630       <label class="md-nav__link" for="__nav_6_1">
1631         Migrating from WSC 5.3
1632         <span class="md-nav__icon md-icon"></span>
1633       </label>
1634       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1635         <label class="md-nav__title" for="__nav_6_1">
1636           <span class="md-nav__icon md-icon"></span>
1637           Migrating from WSC 5.3
1638         </label>
1639         <ul class="md-nav__list" data-md-scrollfix>
1640
1641
1642
1643
1644
1645     <li class="md-nav__item">
1646       <a href="../../migration/wsc53/php/" class="md-nav__link">
1647         PHP API
1648       </a>
1649     </li>
1650
1651
1652
1653
1654
1655
1656
1657     <li class="md-nav__item">
1658       <a href="../../migration/wsc53/session/" class="md-nav__link">
1659         Session Handling and Authentication
1660       </a>
1661     </li>
1662
1663
1664
1665
1666
1667
1668
1669     <li class="md-nav__item">
1670       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1671         TypeScript and JavaScript
1672       </a>
1673     </li>
1674
1675
1676
1677
1678
1679
1680
1681     <li class="md-nav__item">
1682       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1683         Templates
1684       </a>
1685     </li>
1686
1687
1688
1689
1690
1691
1692
1693     <li class="md-nav__item">
1694       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1695         Third Party Libraries
1696       </a>
1697     </li>
1698
1699
1700
1701         </ul>
1702       </nav>
1703     </li>
1704
1705
1706
1707
1708
1709
1710
1711
1712     <li class="md-nav__item md-nav__item--nested">
1713
1714
1715         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1716
1717       <label class="md-nav__link" for="__nav_6_2">
1718         Migrating from WSC 5.2
1719         <span class="md-nav__icon md-icon"></span>
1720       </label>
1721       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1722         <label class="md-nav__title" for="__nav_6_2">
1723           <span class="md-nav__icon md-icon"></span>
1724           Migrating from WSC 5.2
1725         </label>
1726         <ul class="md-nav__list" data-md-scrollfix>
1727
1728
1729
1730
1731
1732     <li class="md-nav__item">
1733       <a href="../../migration/wsc52/php/" class="md-nav__link">
1734         PHP API
1735       </a>
1736     </li>
1737
1738
1739
1740
1741
1742
1743
1744     <li class="md-nav__item">
1745       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1746         Templates and Languages
1747       </a>
1748     </li>
1749
1750
1751
1752
1753
1754
1755
1756     <li class="md-nav__item">
1757       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1758         Third Party Libraries
1759       </a>
1760     </li>
1761
1762
1763
1764         </ul>
1765       </nav>
1766     </li>
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_6_3" type="checkbox" id="__nav_6_3" >
1779
1780       <label class="md-nav__link" for="__nav_6_3">
1781         Migrating from WSC 3.1
1782         <span class="md-nav__icon md-icon"></span>
1783       </label>
1784       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1785         <label class="md-nav__title" for="__nav_6_3">
1786           <span class="md-nav__icon md-icon"></span>
1787           Migrating from WSC 3.1
1788         </label>
1789         <ul class="md-nav__list" data-md-scrollfix>
1790
1791
1792
1793
1794
1795     <li class="md-nav__item">
1796       <a href="../../migration/wsc31/php/" class="md-nav__link">
1797         PHP API
1798       </a>
1799     </li>
1800
1801
1802
1803         </ul>
1804       </nav>
1805     </li>
1806
1807
1808
1809
1810
1811
1812
1813
1814     <li class="md-nav__item md-nav__item--nested">
1815
1816
1817         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1818
1819       <label class="md-nav__link" for="__nav_6_4">
1820         Migrating from WSC 3.0
1821         <span class="md-nav__icon md-icon"></span>
1822       </label>
1823       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1824         <label class="md-nav__title" for="__nav_6_4">
1825           <span class="md-nav__icon md-icon"></span>
1826           Migrating from WSC 3.0
1827         </label>
1828         <ul class="md-nav__list" data-md-scrollfix>
1829
1830
1831
1832
1833
1834     <li class="md-nav__item">
1835       <a href="../../migration/wsc30/php/" class="md-nav__link">
1836         PHP API
1837       </a>
1838     </li>
1839
1840
1841
1842
1843
1844
1845
1846     <li class="md-nav__item">
1847       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1848         JavaScript API
1849       </a>
1850     </li>
1851
1852
1853
1854
1855
1856
1857
1858     <li class="md-nav__item">
1859       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1860         Templates
1861       </a>
1862     </li>
1863
1864
1865
1866
1867
1868
1869
1870     <li class="md-nav__item">
1871       <a href="../../migration/wsc30/css/" class="md-nav__link">
1872         CSS
1873       </a>
1874     </li>
1875
1876
1877
1878
1879
1880
1881
1882     <li class="md-nav__item">
1883       <a href="../../migration/wsc30/package/" class="md-nav__link">
1884         Package Components
1885       </a>
1886     </li>
1887
1888
1889
1890         </ul>
1891       </nav>
1892     </li>
1893
1894
1895
1896
1897
1898
1899
1900
1901     <li class="md-nav__item md-nav__item--nested">
1902
1903
1904         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1905
1906       <label class="md-nav__link" for="__nav_6_5">
1907         Migrating from WCF 2.1
1908         <span class="md-nav__icon md-icon"></span>
1909       </label>
1910       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1911         <label class="md-nav__title" for="__nav_6_5">
1912           <span class="md-nav__icon md-icon"></span>
1913           Migrating from WCF 2.1
1914         </label>
1915         <ul class="md-nav__list" data-md-scrollfix>
1916
1917
1918
1919
1920
1921     <li class="md-nav__item">
1922       <a href="../../migration/wcf21/php/" class="md-nav__link">
1923         PHP API
1924       </a>
1925     </li>
1926
1927
1928
1929
1930
1931
1932
1933     <li class="md-nav__item">
1934       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1935         Templates
1936       </a>
1937     </li>
1938
1939
1940
1941
1942
1943
1944
1945     <li class="md-nav__item">
1946       <a href="../../migration/wcf21/css/" class="md-nav__link">
1947         CSS
1948       </a>
1949     </li>
1950
1951
1952
1953
1954
1955
1956
1957     <li class="md-nav__item">
1958       <a href="../../migration/wcf21/package/" class="md-nav__link">
1959         Package Components
1960       </a>
1961     </li>
1962
1963
1964
1965         </ul>
1966       </nav>
1967     </li>
1968
1969
1970
1971         </ul>
1972       </nav>
1973     </li>
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985     <li class="md-nav__item md-nav__item--nested">
1986
1987
1988         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1989
1990       <label class="md-nav__link" for="__nav_7">
1991         Tutorials
1992         <span class="md-nav__icon md-icon"></span>
1993       </label>
1994       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1995         <label class="md-nav__title" for="__nav_7">
1996           <span class="md-nav__icon md-icon"></span>
1997           Tutorials
1998         </label>
1999         <ul class="md-nav__list" data-md-scrollfix>
2000
2001
2002
2003
2004
2005
2006     <li class="md-nav__item md-nav__item--nested">
2007
2008
2009         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
2010
2011       <label class="md-nav__link" for="__nav_7_1">
2012         Tutorial Series
2013         <span class="md-nav__icon md-icon"></span>
2014       </label>
2015       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
2016         <label class="md-nav__title" for="__nav_7_1">
2017           <span class="md-nav__icon md-icon"></span>
2018           Tutorial Series
2019         </label>
2020         <ul class="md-nav__list" data-md-scrollfix>
2021
2022
2023
2024
2025
2026     <li class="md-nav__item">
2027       <a href="../../tutorial/series/overview/" class="md-nav__link">
2028         Overview
2029       </a>
2030     </li>
2031
2032
2033
2034
2035
2036
2037
2038     <li class="md-nav__item">
2039       <a href="../../tutorial/series/part_1/" class="md-nav__link">
2040         Part 1
2041       </a>
2042     </li>
2043
2044
2045
2046
2047
2048
2049
2050     <li class="md-nav__item">
2051       <a href="../../tutorial/series/part_2/" class="md-nav__link">
2052         Part 2
2053       </a>
2054     </li>
2055
2056
2057
2058
2059
2060
2061
2062     <li class="md-nav__item">
2063       <a href="../../tutorial/series/part_3/" class="md-nav__link">
2064         Part 3
2065       </a>
2066     </li>
2067
2068
2069
2070
2071
2072
2073
2074     <li class="md-nav__item">
2075       <a href="../../tutorial/series/part_4/" class="md-nav__link">
2076         Part 4
2077       </a>
2078     </li>
2079
2080
2081
2082
2083
2084
2085
2086     <li class="md-nav__item">
2087       <a href="../../tutorial/series/part_5/" class="md-nav__link">
2088         Part 5
2089       </a>
2090     </li>
2091
2092
2093
2094         </ul>
2095       </nav>
2096     </li>
2097
2098
2099
2100         </ul>
2101       </nav>
2102     </li>
2103
2104
2105
2106   </ul>
2107 </nav>
2108                   </div>
2109                 </div>
2110               </div>
2111
2112
2113
2114               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2115                 <div class="md-sidebar__scrollwrap">
2116                   <div class="md-sidebar__inner">
2117
2118 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2119
2120
2121
2122
2123
2124
2125     <label class="md-nav__title" for="__toc">
2126       <span class="md-nav__icon md-icon"></span>
2127       Table of contents
2128     </label>
2129     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2130
2131         <li class="md-nav__item">
2132   <a href="#uialignment" class="md-nav__link">
2133     Ui/Alignment
2134   </a>
2135
2136     <nav class="md-nav" aria-label="Ui/Alignment">
2137       <ul class="md-nav__list">
2138
2139           <li class="md-nav__item">
2140   <a href="#setelement-element-referenceelement-element-options-object" class="md-nav__link">
2141     set(element: Element, referenceElement: Element, options: Object)
2142   </a>
2143
2144     <nav class="md-nav" aria-label="set(element: Element, referenceElement: Element, options: Object)">
2145       <ul class="md-nav__list">
2146
2147           <li class="md-nav__item">
2148   <a href="#verticaloffset-number" class="md-nav__link">
2149     verticalOffset: number
2150   </a>
2151
2152 </li>
2153
2154           <li class="md-nav__item">
2155   <a href="#pointer-boolean" class="md-nav__link">
2156     pointer: boolean
2157   </a>
2158
2159 </li>
2160
2161           <li class="md-nav__item">
2162   <a href="#pointeroffset-number" class="md-nav__link">
2163     pointerOffset: number
2164   </a>
2165
2166 </li>
2167
2168           <li class="md-nav__item">
2169   <a href="#pointerclassnames-string" class="md-nav__link">
2170     pointerClassNames: string[]
2171   </a>
2172
2173 </li>
2174
2175           <li class="md-nav__item">
2176   <a href="#refdimensionselement-element" class="md-nav__link">
2177     refDimensionsElement: Element
2178   </a>
2179
2180 </li>
2181
2182           <li class="md-nav__item">
2183   <a href="#horizontal-string" class="md-nav__link">
2184     horizontal: string
2185   </a>
2186
2187 </li>
2188
2189           <li class="md-nav__item">
2190   <a href="#vertical-string" class="md-nav__link">
2191     vertical: string
2192   </a>
2193
2194 </li>
2195
2196           <li class="md-nav__item">
2197   <a href="#allowflip-string" class="md-nav__link">
2198     allowFlip: string
2199   </a>
2200
2201 </li>
2202
2203       </ul>
2204     </nav>
2205
2206 </li>
2207
2208       </ul>
2209     </nav>
2210
2211 </li>
2212
2213         <li class="md-nav__item">
2214   <a href="#uicloseoverlay" class="md-nav__link">
2215     Ui/CloseOverlay
2216   </a>
2217
2218     <nav class="md-nav" aria-label="Ui/CloseOverlay">
2219       <ul class="md-nav__list">
2220
2221           <li class="md-nav__item">
2222   <a href="#addidentifier-string-callback-void" class="md-nav__link">
2223     add(identifier: string, callback: () =&gt; void)
2224   </a>
2225
2226 </li>
2227
2228       </ul>
2229     </nav>
2230
2231 </li>
2232
2233         <li class="md-nav__item">
2234   <a href="#uiconfirmation" class="md-nav__link">
2235     Ui/Confirmation
2236   </a>
2237
2238     <nav class="md-nav" aria-label="Ui/Confirmation">
2239       <ul class="md-nav__list">
2240
2241           <li class="md-nav__item">
2242   <a href="#showoptions-object" class="md-nav__link">
2243     show(options: Object)
2244   </a>
2245
2246     <nav class="md-nav" aria-label="show(options: Object)">
2247       <ul class="md-nav__list">
2248
2249           <li class="md-nav__item">
2250   <a href="#cancel-parameters-object-void" class="md-nav__link">
2251     cancel: (parameters: Object) =&gt; void
2252   </a>
2253
2254 </li>
2255
2256           <li class="md-nav__item">
2257   <a href="#confirm-parameters-object-void" class="md-nav__link">
2258     confirm: (parameters: Object) =&gt; void
2259   </a>
2260
2261 </li>
2262
2263           <li class="md-nav__item">
2264   <a href="#message-string" class="md-nav__link">
2265     message: string
2266   </a>
2267
2268 </li>
2269
2270           <li class="md-nav__item">
2271   <a href="#messageishtml" class="md-nav__link">
2272     messageIsHtml
2273   </a>
2274
2275 </li>
2276
2277           <li class="md-nav__item">
2278   <a href="#parameters-object" class="md-nav__link">
2279     parameters: Object
2280   </a>
2281
2282 </li>
2283
2284           <li class="md-nav__item">
2285   <a href="#template-string" class="md-nav__link">
2286     template: string
2287   </a>
2288
2289 </li>
2290
2291       </ul>
2292     </nav>
2293
2294 </li>
2295
2296       </ul>
2297     </nav>
2298
2299 </li>
2300
2301         <li class="md-nav__item">
2302   <a href="#uinotification" class="md-nav__link">
2303     Ui/Notification
2304   </a>
2305
2306     <nav class="md-nav" aria-label="Ui/Notification">
2307       <ul class="md-nav__list">
2308
2309           <li class="md-nav__item">
2310   <a href="#showmessage-string-callback-void-cssclassname-string" class="md-nav__link">
2311     show(message: string, callback?: () =&gt; void, cssClassName?: string)
2312   </a>
2313
2314 </li>
2315
2316       </ul>
2317     </nav>
2318
2319 </li>
2320
2321     </ul>
2322
2323 </nav>
2324                   </div>
2325                 </div>
2326               </div>
2327
2328
2329           <div class="md-content" data-md-component="content">
2330             <article class="md-content__inner md-typeset">
2331
2332
2333                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/new-api_ui.md" title="Edit this page" class="md-content__button md-icon">
2334                     <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>
2335                   </a>
2336
2337
2338                 <h1 id="user-interface-javascript-api">User Interface - JavaScript API<a class="headerlink" href="#user-interface-javascript-api" title="Permanent link">#</a></h1>
2339 <h2 id="uialignment"><code>Ui/Alignment</code><a class="headerlink" href="#uialignment" title="Permanent link">#</a></h2>
2340 <p>Calculates the alignment of one element relative to another element, with support
2341 for boundary constraints, alignment restrictions and additional pointer elements.</p>
2342 <h3 id="setelement-element-referenceelement-element-options-object"><code>set(element: Element, referenceElement: Element, options: Object)</code><a class="headerlink" href="#setelement-element-referenceelement-element-options-object" title="Permanent link">#</a></h3>
2343 <p>Calculates and sets the alignment of the element <code>element</code>.</p>
2344 <h4 id="verticaloffset-number"><code>verticalOffset: number</code><a class="headerlink" href="#verticaloffset-number" title="Permanent link">#</a></h4>
2345 <p><em>Defaults to <code>0</code>.</em></p>
2346 <p>Creates a gap between the element and the reference element, in pixels.</p>
2347 <h4 id="pointer-boolean"><code>pointer: boolean</code><a class="headerlink" href="#pointer-boolean" title="Permanent link">#</a></h4>
2348 <p><em>Defaults to <code>false</code>.</em></p>
2349 <p>Sets the position of the pointer element, requires an existing child of the
2350 element with the CSS class <code>.elementPointer</code>.</p>
2351 <h4 id="pointeroffset-number"><code>pointerOffset: number</code><a class="headerlink" href="#pointeroffset-number" title="Permanent link">#</a></h4>
2352 <p><em>Defaults to <code>4</code>.</em></p>
2353 <p>The margin from the left/right edge of the element and is used to avoid the
2354 arrow from being placed right at the edge.</p>
2355 <p>Does not apply when aligning the element to the reference elemnent's center.</p>
2356 <h4 id="pointerclassnames-string"><code>pointerClassNames: string[]</code><a class="headerlink" href="#pointerclassnames-string" title="Permanent link">#</a></h4>
2357 <p><em>Defaults to <code>[]</code>.</em></p>
2358 <p>If your element uses CSS-only pointers, such as using the <code>::before</code> or <code>::after</code>
2359 pseudo selectors, you can specifiy two separate CSS class names that control the
2360 alignment:</p>
2361 <ul>
2362 <li><code>pointerClassNames[0]</code> is applied to the element when the pointer is displayed
2363    at the bottom.</li>
2364 <li><code>pointerClassNames[1]</code> is used to align the pointer to the right side of the
2365   element.</li>
2366 </ul>
2367 <h4 id="refdimensionselement-element"><code>refDimensionsElement: Element</code><a class="headerlink" href="#refdimensionselement-element" title="Permanent link">#</a></h4>
2368 <p><em>Defaults to <code>null</code>.</em></p>
2369 <p>An alternative element that will be used to determine the position and dimensions
2370 of the reference element. This can be useful if you reference element is contained
2371 in a wrapper element with alternating dimensions.</p>
2372 <h4 id="horizontal-string"><code>horizontal: string</code><a class="headerlink" href="#horizontal-string" title="Permanent link">#</a></h4>
2373 <div class="admonition info">
2374 <p class="admonition-title">This value is automatically flipped for RTL (right-to-left) languages, <code>left</code> is changed into <code>right</code> and vice versa.</p>
2375 </div>
2376 <p><em>Defaults to <code>"left"</code>.</em></p>
2377 <p>Sets the prefered alignment, accepts either <code>left</code> or <code>right</code>. The value <code>left</code>
2378 instructs the module to align the element with the left boundary of the reference
2379 element.</p>
2380 <p>The <code>horizontal</code> alignment is used as the default and a flip only occurs, if there
2381 is not enough space in the desired direction. If the element exceeds the boundaries
2382 in both directions, the value of <code>horizontal</code> is used.</p>
2383 <h4 id="vertical-string"><code>vertical: string</code><a class="headerlink" href="#vertical-string" title="Permanent link">#</a></h4>
2384 <p><em>Defaults to <code>"bottom"</code>.</em></p>
2385 <p>Sets the prefered alignment, accepts either <code>bottom</code> or <code>top</code>. The value <code>bottom</code>
2386 instructs the module to align the element below the reference element.</p>
2387 <p>The <code>vertical</code> alignment is used as the default and a flip only occurs, if there
2388 is not enough space in the desired direction. If the element exceeds the boundaries
2389 in both directions, the value of <code>vertical</code> is used.</p>
2390 <h4 id="allowflip-string"><code>allowFlip: string</code><a class="headerlink" href="#allowflip-string" title="Permanent link">#</a></h4>
2391 <div class="admonition info">
2392 <p class="admonition-title">The value for <code>horizontal</code> is automatically flipped for RTL (right-to-left) languages, <code>left</code> is changed into <code>right</code> and vice versa. This setting only controls the behavior when violating space constraints, therefore the aforementioned transformation is always applied.</p>
2393 </div>
2394 <p><em>Defaults to <code>"both"</code>.</em></p>
2395 <p>Restricts the automatic alignment flipping if the element exceeds the window
2396 boundaries in the instructed direction.</p>
2397 <ul>
2398 <li><code>both</code> - No restrictions.</li>
2399 <li><code>horizontal</code> - Element can be aligned with the left <em>or</em> the right boundary of
2400   the reference element, but the vertical position is fixed.</li>
2401 <li><code>vertical</code> - Element can be aligned below <em>or</em> above the reference element,
2402   but the vertical position is fixed.</li>
2403 <li><code>none</code> - No flipping can occur, the element will be aligned regardless of
2404   any space constraints.</li>
2405 </ul>
2406 <h2 id="uicloseoverlay"><code>Ui/CloseOverlay</code><a class="headerlink" href="#uicloseoverlay" title="Permanent link">#</a></h2>
2407 <p>Register elements that should be closed when the user clicks anywhere else, such
2408 as drop-down menus or tooltips.</p>
2409 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2410 <span class="normal">2</span>
2411 <span class="normal">3</span>
2412 <span class="normal">4</span>
2413 <span class="normal">5</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="nx">require</span><span class="p">([</span><span class="s2">&quot;Ui/CloseOverlay&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">UiCloseOverlay</span><span class="p">)</span> <span class="p">{</span>
2414   <span class="nx">UiCloseOverlay</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s2">&quot;App/Foo&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2415     <span class="c1">// invoked, close something</span>
2416   <span class="p">});</span>
2417 <span class="p">});</span>
2418 </code></pre></div>
2419 </td></tr></table>
2420 <h3 id="addidentifier-string-callback-void"><code>add(identifier: string, callback: () =&gt; void)</code><a class="headerlink" href="#addidentifier-string-callback-void" title="Permanent link">#</a></h3>
2421 <p>Adds a callback that will be invoked when the user clicks anywhere else.</p>
2422 <h2 id="uiconfirmation"><code>Ui/Confirmation</code><a class="headerlink" href="#uiconfirmation" title="Permanent link">#</a></h2>
2423 <p>Prompt the user to make a decision before carrying out an action, such as a safety
2424 warning before permanently deleting content.</p>
2425 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2426 <span class="normal">2</span>
2427 <span class="normal">3</span>
2428 <span class="normal">4</span>
2429 <span class="normal">5</span>
2430 <span class="normal">6</span>
2431 <span class="normal">7</span>
2432 <span class="normal">8</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="nx">require</span><span class="p">([</span><span class="s2">&quot;Ui/Confirmation&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">UiConfirmation</span><span class="p">)</span> <span class="p">{</span>
2433   <span class="nx">UiConfirmation</span><span class="p">.</span><span class="nx">show</span><span class="p">({</span>
2434     <span class="nx">confirm</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2435       <span class="c1">// the user has confirmed the dialog</span>
2436     <span class="p">},</span>
2437     <span class="nx">message</span><span class="o">:</span> <span class="s2">&quot;Do you really want to continue?&quot;</span>
2438   <span class="p">});</span>
2439 <span class="p">});</span>
2440 </code></pre></div>
2441 </td></tr></table>
2442 <h3 id="showoptions-object"><code>show(options: Object)</code><a class="headerlink" href="#showoptions-object" title="Permanent link">#</a></h3>
2443 <p>Displays a dialog overlay with actions buttons to confirm or reject the dialog.</p>
2444 <h4 id="cancel-parameters-object-void"><code>cancel: (parameters: Object) =&gt; void</code><a class="headerlink" href="#cancel-parameters-object-void" title="Permanent link">#</a></h4>
2445 <p><em>Defaults to <code>null</code>.</em></p>
2446 <p>Callback that is invoked when the dialog was rejected.</p>
2447 <h4 id="confirm-parameters-object-void"><code>confirm: (parameters: Object) =&gt; void</code><a class="headerlink" href="#confirm-parameters-object-void" title="Permanent link">#</a></h4>
2448 <p><em>Defaults to <code>null</code>.</em></p>
2449 <p>Callback that is invoked when the user has confirmed the dialog.</p>
2450 <h4 id="message-string"><code>message: string</code><a class="headerlink" href="#message-string" title="Permanent link">#</a></h4>
2451 <p><em>Defaults to '""'.</em></p>
2452 <p>Text that is displayed in the content area of the dialog, optionally this can
2453 be HTML, but this requires <code>messageIsHtml</code> to be enabled.</p>
2454 <h4 id="messageishtml"><code>messageIsHtml</code><a class="headerlink" href="#messageishtml" title="Permanent link">#</a></h4>
2455 <p><em>Defaults to <code>false</code>.</em></p>
2456 <p>The <code>message</code> option is interpreted as text-only, setting this option to <code>true</code>
2457 will cause the <code>message</code> to be evaluated as HTML.</p>
2458 <h4 id="parameters-object"><code>parameters: Object</code><a class="headerlink" href="#parameters-object" title="Permanent link">#</a></h4>
2459 <p>Optional list of parameter options that will be passed to the <code>cancel()</code> and
2460 <code>confirm()</code> callbacks.</p>
2461 <h4 id="template-string"><code>template: string</code><a class="headerlink" href="#template-string" title="Permanent link">#</a></h4>
2462 <p>An optional HTML template that will be inserted into the dialog content area,
2463 but after the <code>message</code> section.</p>
2464 <h2 id="uinotification"><code>Ui/Notification</code><a class="headerlink" href="#uinotification" title="Permanent link">#</a></h2>
2465 <p>Displays a simple notification at the very top of the window, such as a success
2466 message for Ajax based actions.</p>
2467 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2468 <span class="normal">2</span>
2469 <span class="normal">3</span>
2470 <span class="normal">4</span>
2471 <span class="normal">5</span>
2472 <span class="normal">6</span>
2473 <span class="normal">7</span>
2474 <span class="normal">8</span>
2475 <span class="normal">9</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="nx">require</span><span class="p">([</span><span class="s2">&quot;Ui/Notification&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">UiNotification</span><span class="p">)</span> <span class="p">{</span>
2476   <span class="nx">UiNotification</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span>
2477     <span class="s2">&quot;Your changes have been saved.&quot;</span><span class="p">,</span>
2478     <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2479       <span class="c1">// this callback will be invoked after 2 seconds</span>
2480     <span class="p">},</span>
2481     <span class="s2">&quot;success&quot;</span>
2482   <span class="p">);</span>
2483 <span class="p">});</span>
2484 </code></pre></div>
2485 </td></tr></table>
2486 <h3 id="showmessage-string-callback-void-cssclassname-string"><code>show(message: string, callback?: () =&gt; void, cssClassName?: string)</code><a class="headerlink" href="#showmessage-string-callback-void-cssclassname-string" title="Permanent link">#</a></h3>
2487 <p>Shows the notification and executes the callback after 2 seconds.</p>
2488
2489
2490
2491
2492 <hr>
2493 <div class="md-source-date">
2494   <small>
2495
2496       Last update: 2021-01-08
2497
2498   </small>
2499 </div>
2500
2501
2502
2503
2504
2505
2506
2507
2508             </article>
2509           </div>
2510         </div>
2511
2512       </main>
2513
2514
2515 <footer class="md-footer">
2516
2517     <nav class="md-footer__inner md-grid" aria-label="Footer">
2518
2519         <a href="../new-api_browser/" class="md-footer__link md-footer__link--prev" rel="prev">
2520           <div class="md-footer__button md-icon">
2521             <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>
2522           </div>
2523           <div class="md-footer__title">
2524             <div class="md-ellipsis">
2525               <span class="md-footer__direction">
2526                 Previous
2527               </span>
2528               Browser and Screen Sizes
2529             </div>
2530           </div>
2531         </a>
2532
2533
2534         <a href="../legacy-api/" class="md-footer__link md-footer__link--next" rel="next">
2535           <div class="md-footer__title">
2536             <div class="md-ellipsis">
2537               <span class="md-footer__direction">
2538                 Next
2539               </span>
2540               Legacy API
2541             </div>
2542           </div>
2543           <div class="md-footer__button md-icon">
2544             <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>
2545           </div>
2546         </a>
2547
2548     </nav>
2549
2550   <div class="md-footer-meta md-typeset">
2551     <div class="md-footer-meta__inner md-grid">
2552       <div class="md-footer-copyright">
2553
2554           <div class="md-footer-copyright__highlight">
2555             Copyright © 2020 WoltLab GmbH
2556           </div>
2557
2558         Made with
2559         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2560           Material for MkDocs
2561         </a>
2562
2563       </div>
2564       <div class="md-footer-copyright">
2565         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2566         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2567 </div>
2568     </div>
2569   </div>
2570 </footer>
2571
2572     </div>
2573     <div class="md-dialog" data-md-component="dialog">
2574       <div class="md-dialog__inner md-typeset"></div>
2575     </div>
2576     <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.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2577
2578
2579       <script src="../../assets/javascripts/bundle.4ea5477f.min.js"></script>
2580
2581
2582   </body>
2583 </html>