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