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