Deployed 901748f to 5.4 with MkDocs 1.1.2 and mike 0.5.5
[GitHub/WoltLab/woltlab.github.io.git] / latest / javascript / code-snippets / 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>Code Snippets - 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="#code-snippets-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 Code Snippets
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 TypeScript and JavaScript API
619 <span class="md-nav__icon md-icon"></span>
620 </label>
621 <nav class="md-nav" aria-label="TypeScript and 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 TypeScript and 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 <li class="md-nav__item">
645 <a href="../typescript/" class="md-nav__link">
646 TypeScript
647 </a>
648 </li>
649
650
651
652
653
654
655
656
657 <li class="md-nav__item md-nav__item--nested">
658
659
660 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
661
662 <label class="md-nav__link" for="__nav_4_3">
663 New API
664 <span class="md-nav__icon md-icon"></span>
665 </label>
666 <nav class="md-nav" aria-label="New API" data-md-level="2">
667 <label class="md-nav__title" for="__nav_4_3">
668 <span class="md-nav__icon md-icon"></span>
669 New API
670 </label>
671 <ul class="md-nav__list" data-md-scrollfix>
672
673
674
675
676
677 <li class="md-nav__item">
678 <a href="../new-api_writing-a-module/" class="md-nav__link">
679 Writing a module
680 </a>
681 </li>
682
683
684
685
686
687
688
689 <li class="md-nav__item">
690 <a href="../new-api_data-structures/" class="md-nav__link">
691 Data Structures
692 </a>
693 </li>
694
695
696
697
698
699
700
701 <li class="md-nav__item">
702 <a href="../new-api_core/" class="md-nav__link">
703 Core Functions
704 </a>
705 </li>
706
707
708
709
710
711
712
713 <li class="md-nav__item">
714 <a href="../new-api_dom/" class="md-nav__link">
715 DOM
716 </a>
717 </li>
718
719
720
721
722
723
724
725 <li class="md-nav__item">
726 <a href="../new-api_events/" class="md-nav__link">
727 Event Handling
728 </a>
729 </li>
730
731
732
733
734
735
736
737 <li class="md-nav__item">
738 <a href="../new-api_ajax/" class="md-nav__link">
739 Ajax
740 </a>
741 </li>
742
743
744
745
746
747
748
749 <li class="md-nav__item">
750 <a href="../new-api_dialogs/" class="md-nav__link">
751 Dialogs
752 </a>
753 </li>
754
755
756
757
758
759
760
761 <li class="md-nav__item">
762 <a href="../new-api_browser/" class="md-nav__link">
763 Browser and Screen Sizes
764 </a>
765 </li>
766
767
768
769
770
771
772
773 <li class="md-nav__item">
774 <a href="../new-api_ui/" class="md-nav__link">
775 User Interface
776 </a>
777 </li>
778
779
780
781 </ul>
782 </nav>
783 </li>
784
785
786
787
788
789
790
791 <li class="md-nav__item">
792 <a href="../legacy-api/" class="md-nav__link">
793 Legacy API
794 </a>
795 </li>
796
797
798
799
800
801
802
803 <li class="md-nav__item">
804 <a href="../helper-functions/" class="md-nav__link">
805 Helper Functions
806 </a>
807 </li>
808
809
810
811
812
813
814
815
816
817 <li class="md-nav__item md-nav__item--active">
818
819 <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
820
821
822
823
824 <label class="md-nav__link md-nav__link--active" for="__toc">
825 Code Snippets
826 <span class="md-nav__icon md-icon"></span>
827 </label>
828
829 <a href="./" class="md-nav__link md-nav__link--active">
830 Code Snippets
831 </a>
832
833
834 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
835
836
837
838
839
840 <label class="md-nav__title" for="__toc">
841 <span class="md-nav__icon md-icon"></span>
842 Table of contents
843 </label>
844 <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
845
846 <li class="md-nav__item">
847 <a href="#imageviewer" class="md-nav__link">
848 ImageViewer
849 </a>
850
851 </li>
852
853 </ul>
854
855 </nav>
856
857 </li>
858
859
860
861 </ul>
862 </nav>
863 </li>
864
865
866
867
868
869
870
871
872
873
874
875 <li class="md-nav__item md-nav__item--nested">
876
877
878 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
879
880 <label class="md-nav__link" for="__nav_5">
881 Package Components
882 <span class="md-nav__icon md-icon"></span>
883 </label>
884 <nav class="md-nav" aria-label="Package Components" data-md-level="1">
885 <label class="md-nav__title" for="__nav_5">
886 <span class="md-nav__icon md-icon"></span>
887 Package Components
888 </label>
889 <ul class="md-nav__list" data-md-scrollfix>
890
891
892
893
894
895 <li class="md-nav__item">
896 <a href="../../package/package-xml/" class="md-nav__link">
897 package.xml
898 </a>
899 </li>
900
901
902
903
904
905
906
907
908 <li class="md-nav__item md-nav__item--nested">
909
910
911 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
912
913 <label class="md-nav__link" for="__nav_5_2">
914 PIPs
915 <span class="md-nav__icon md-icon"></span>
916 </label>
917 <nav class="md-nav" aria-label="PIPs" data-md-level="2">
918 <label class="md-nav__title" for="__nav_5_2">
919 <span class="md-nav__icon md-icon"></span>
920 PIPs
921 </label>
922 <ul class="md-nav__list" data-md-scrollfix>
923
924
925
926
927
928 <li class="md-nav__item">
929 <a href="../../package/pip/" class="md-nav__link">
930 Overview
931 </a>
932 </li>
933
934
935
936
937
938
939
940 <li class="md-nav__item">
941 <a href="../../package/pip/acl-option/" class="md-nav__link">
942 aclOption
943 </a>
944 </li>
945
946
947
948
949
950
951
952 <li class="md-nav__item">
953 <a href="../../package/pip/acp-menu/" class="md-nav__link">
954 acpMenu
955 </a>
956 </li>
957
958
959
960
961
962
963
964 <li class="md-nav__item">
965 <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
966 acpSearchProvider
967 </a>
968 </li>
969
970
971
972
973
974
975
976 <li class="md-nav__item">
977 <a href="../../package/pip/acp-template/" class="md-nav__link">
978 acpTemplate
979 </a>
980 </li>
981
982
983
984
985
986
987
988 <li class="md-nav__item">
989 <a href="../../package/pip/bbcode/" class="md-nav__link">
990 bbcode
991 </a>
992 </li>
993
994
995
996
997
998
999
1000 <li class="md-nav__item">
1001 <a href="../../package/pip/box/" class="md-nav__link">
1002 box
1003 </a>
1004 </li>
1005
1006
1007
1008
1009
1010
1011
1012 <li class="md-nav__item">
1013 <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1014 clipboardAction
1015 </a>
1016 </li>
1017
1018
1019
1020
1021
1022
1023
1024 <li class="md-nav__item">
1025 <a href="../../package/pip/core-object/" class="md-nav__link">
1026 coreObject
1027 </a>
1028 </li>
1029
1030
1031
1032
1033
1034
1035
1036 <li class="md-nav__item">
1037 <a href="../../package/pip/cronjob/" class="md-nav__link">
1038 cronjob
1039 </a>
1040 </li>
1041
1042
1043
1044
1045
1046
1047
1048 <li class="md-nav__item">
1049 <a href="../../package/pip/event-listener/" class="md-nav__link">
1050 eventListener
1051 </a>
1052 </li>
1053
1054
1055
1056
1057
1058
1059
1060 <li class="md-nav__item">
1061 <a href="../../package/pip/file/" class="md-nav__link">
1062 file
1063 </a>
1064 </li>
1065
1066
1067
1068
1069
1070
1071
1072 <li class="md-nav__item">
1073 <a href="../../package/pip/language/" class="md-nav__link">
1074 language
1075 </a>
1076 </li>
1077
1078
1079
1080
1081
1082
1083
1084 <li class="md-nav__item">
1085 <a href="../../package/pip/media-provider/" class="md-nav__link">
1086 mediaProvider
1087 </a>
1088 </li>
1089
1090
1091
1092
1093
1094
1095
1096 <li class="md-nav__item">
1097 <a href="../../package/pip/menu/" class="md-nav__link">
1098 menu
1099 </a>
1100 </li>
1101
1102
1103
1104
1105
1106
1107
1108 <li class="md-nav__item">
1109 <a href="../../package/pip/menu-item/" class="md-nav__link">
1110 menuItem
1111 </a>
1112 </li>
1113
1114
1115
1116
1117
1118
1119
1120 <li class="md-nav__item">
1121 <a href="../../package/pip/object-type/" class="md-nav__link">
1122 objectType
1123 </a>
1124 </li>
1125
1126
1127
1128
1129
1130
1131
1132 <li class="md-nav__item">
1133 <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1134 objectTypeDefinition
1135 </a>
1136 </li>
1137
1138
1139
1140
1141
1142
1143
1144 <li class="md-nav__item">
1145 <a href="../../package/pip/option/" class="md-nav__link">
1146 option
1147 </a>
1148 </li>
1149
1150
1151
1152
1153
1154
1155
1156 <li class="md-nav__item">
1157 <a href="../../package/pip/page/" class="md-nav__link">
1158 page
1159 </a>
1160 </li>
1161
1162
1163
1164
1165
1166
1167
1168 <li class="md-nav__item">
1169 <a href="../../package/pip/pip/" class="md-nav__link">
1170 pip
1171 </a>
1172 </li>
1173
1174
1175
1176
1177
1178
1179
1180 <li class="md-nav__item">
1181 <a href="../../package/pip/script/" class="md-nav__link">
1182 script
1183 </a>
1184 </li>
1185
1186
1187
1188
1189
1190
1191
1192 <li class="md-nav__item">
1193 <a href="../../package/pip/smiley/" class="md-nav__link">
1194 smiley
1195 </a>
1196 </li>
1197
1198
1199
1200
1201
1202
1203
1204 <li class="md-nav__item">
1205 <a href="../../package/pip/sql/" class="md-nav__link">
1206 sql
1207 </a>
1208 </li>
1209
1210
1211
1212
1213
1214
1215
1216 <li class="md-nav__item">
1217 <a href="../../package/pip/style/" class="md-nav__link">
1218 style
1219 </a>
1220 </li>
1221
1222
1223
1224
1225
1226
1227
1228 <li class="md-nav__item">
1229 <a href="../../package/pip/template/" class="md-nav__link">
1230 template
1231 </a>
1232 </li>
1233
1234
1235
1236
1237
1238
1239
1240 <li class="md-nav__item">
1241 <a href="../../package/pip/template-listener/" class="md-nav__link">
1242 templateListener
1243 </a>
1244 </li>
1245
1246
1247
1248
1249
1250
1251
1252 <li class="md-nav__item">
1253 <a href="../../package/pip/user-group-option/" class="md-nav__link">
1254 userGroupOption
1255 </a>
1256 </li>
1257
1258
1259
1260
1261
1262
1263
1264 <li class="md-nav__item">
1265 <a href="../../package/pip/user-menu/" class="md-nav__link">
1266 userMenu
1267 </a>
1268 </li>
1269
1270
1271
1272
1273
1274
1275
1276 <li class="md-nav__item">
1277 <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1278 userNotificationEvent
1279 </a>
1280 </li>
1281
1282
1283
1284
1285
1286
1287
1288 <li class="md-nav__item">
1289 <a href="../../package/pip/user-option/" class="md-nav__link">
1290 userOption
1291 </a>
1292 </li>
1293
1294
1295
1296
1297
1298
1299
1300 <li class="md-nav__item">
1301 <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1302 userProfileMenu
1303 </a>
1304 </li>
1305
1306
1307
1308 </ul>
1309 </nav>
1310 </li>
1311
1312
1313
1314
1315
1316
1317
1318 <li class="md-nav__item">
1319 <a href="../../package/database-php-api/" class="md-nav__link">
1320 Database PHP API
1321 </a>
1322 </li>
1323
1324
1325
1326 </ul>
1327 </nav>
1328 </li>
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340 <li class="md-nav__item md-nav__item--nested">
1341
1342
1343 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1344
1345 <label class="md-nav__link" for="__nav_6">
1346 Migration
1347 <span class="md-nav__icon md-icon"></span>
1348 </label>
1349 <nav class="md-nav" aria-label="Migration" data-md-level="1">
1350 <label class="md-nav__title" for="__nav_6">
1351 <span class="md-nav__icon md-icon"></span>
1352 Migration
1353 </label>
1354 <ul class="md-nav__list" data-md-scrollfix>
1355
1356
1357
1358
1359
1360
1361 <li class="md-nav__item md-nav__item--nested">
1362
1363
1364 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1365
1366 <label class="md-nav__link" for="__nav_6_1">
1367 Migrating from WSC 5.3
1368 <span class="md-nav__icon md-icon"></span>
1369 </label>
1370 <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1371 <label class="md-nav__title" for="__nav_6_1">
1372 <span class="md-nav__icon md-icon"></span>
1373 Migrating from WSC 5.3
1374 </label>
1375 <ul class="md-nav__list" data-md-scrollfix>
1376
1377
1378
1379
1380
1381 <li class="md-nav__item">
1382 <a href="../../migration/wsc53/php/" class="md-nav__link">
1383 PHP API
1384 </a>
1385 </li>
1386
1387
1388
1389
1390
1391
1392
1393 <li class="md-nav__item">
1394 <a href="../../migration/wsc53/session/" class="md-nav__link">
1395 Session Handling and Authentication
1396 </a>
1397 </li>
1398
1399
1400
1401
1402
1403
1404
1405 <li class="md-nav__item">
1406 <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1407 TypeScript and JavaScript
1408 </a>
1409 </li>
1410
1411
1412
1413
1414
1415
1416
1417 <li class="md-nav__item">
1418 <a href="../../migration/wsc53/templates/" class="md-nav__link">
1419 Templates
1420 </a>
1421 </li>
1422
1423
1424
1425
1426
1427
1428
1429 <li class="md-nav__item">
1430 <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1431 Third Party Libraries
1432 </a>
1433 </li>
1434
1435
1436
1437 </ul>
1438 </nav>
1439 </li>
1440
1441
1442
1443
1444
1445
1446
1447
1448 <li class="md-nav__item md-nav__item--nested">
1449
1450
1451 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1452
1453 <label class="md-nav__link" for="__nav_6_2">
1454 Migrating from WSC 5.2
1455 <span class="md-nav__icon md-icon"></span>
1456 </label>
1457 <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1458 <label class="md-nav__title" for="__nav_6_2">
1459 <span class="md-nav__icon md-icon"></span>
1460 Migrating from WSC 5.2
1461 </label>
1462 <ul class="md-nav__list" data-md-scrollfix>
1463
1464
1465
1466
1467
1468 <li class="md-nav__item">
1469 <a href="../../migration/wsc52/php/" class="md-nav__link">
1470 PHP API
1471 </a>
1472 </li>
1473
1474
1475
1476
1477
1478
1479
1480 <li class="md-nav__item">
1481 <a href="../../migration/wsc52/templates/" class="md-nav__link">
1482 Templates and Languages
1483 </a>
1484 </li>
1485
1486
1487
1488
1489
1490
1491
1492 <li class="md-nav__item">
1493 <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1494 Third Party Libraries
1495 </a>
1496 </li>
1497
1498
1499
1500 </ul>
1501 </nav>
1502 </li>
1503
1504
1505
1506
1507
1508
1509
1510
1511 <li class="md-nav__item md-nav__item--nested">
1512
1513
1514 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1515
1516 <label class="md-nav__link" for="__nav_6_3">
1517 Migrating from WSC 3.1
1518 <span class="md-nav__icon md-icon"></span>
1519 </label>
1520 <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1521 <label class="md-nav__title" for="__nav_6_3">
1522 <span class="md-nav__icon md-icon"></span>
1523 Migrating from WSC 3.1
1524 </label>
1525 <ul class="md-nav__list" data-md-scrollfix>
1526
1527
1528
1529
1530
1531 <li class="md-nav__item">
1532 <a href="../../migration/wsc31/php/" class="md-nav__link">
1533 PHP API
1534 </a>
1535 </li>
1536
1537
1538
1539 </ul>
1540 </nav>
1541 </li>
1542
1543
1544
1545
1546
1547
1548
1549
1550 <li class="md-nav__item md-nav__item--nested">
1551
1552
1553 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1554
1555 <label class="md-nav__link" for="__nav_6_4">
1556 Migrating from WSC 3.0
1557 <span class="md-nav__icon md-icon"></span>
1558 </label>
1559 <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1560 <label class="md-nav__title" for="__nav_6_4">
1561 <span class="md-nav__icon md-icon"></span>
1562 Migrating from WSC 3.0
1563 </label>
1564 <ul class="md-nav__list" data-md-scrollfix>
1565
1566
1567
1568
1569
1570 <li class="md-nav__item">
1571 <a href="../../migration/wsc30/php/" class="md-nav__link">
1572 PHP API
1573 </a>
1574 </li>
1575
1576
1577
1578
1579
1580
1581
1582 <li class="md-nav__item">
1583 <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1584 JavaScript API
1585 </a>
1586 </li>
1587
1588
1589
1590
1591
1592
1593
1594 <li class="md-nav__item">
1595 <a href="../../migration/wsc30/templates/" class="md-nav__link">
1596 Templates
1597 </a>
1598 </li>
1599
1600
1601
1602
1603
1604
1605
1606 <li class="md-nav__item">
1607 <a href="../../migration/wsc30/css/" class="md-nav__link">
1608 CSS
1609 </a>
1610 </li>
1611
1612
1613
1614
1615
1616
1617
1618 <li class="md-nav__item">
1619 <a href="../../migration/wsc30/package/" class="md-nav__link">
1620 Package Components
1621 </a>
1622 </li>
1623
1624
1625
1626 </ul>
1627 </nav>
1628 </li>
1629
1630
1631
1632
1633
1634
1635
1636
1637 <li class="md-nav__item md-nav__item--nested">
1638
1639
1640 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1641
1642 <label class="md-nav__link" for="__nav_6_5">
1643 Migrating from WCF 2.1
1644 <span class="md-nav__icon md-icon"></span>
1645 </label>
1646 <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1647 <label class="md-nav__title" for="__nav_6_5">
1648 <span class="md-nav__icon md-icon"></span>
1649 Migrating from WCF 2.1
1650 </label>
1651 <ul class="md-nav__list" data-md-scrollfix>
1652
1653
1654
1655
1656
1657 <li class="md-nav__item">
1658 <a href="../../migration/wcf21/php/" class="md-nav__link">
1659 PHP API
1660 </a>
1661 </li>
1662
1663
1664
1665
1666
1667
1668
1669 <li class="md-nav__item">
1670 <a href="../../migration/wcf21/templates/" class="md-nav__link">
1671 Templates
1672 </a>
1673 </li>
1674
1675
1676
1677
1678
1679
1680
1681 <li class="md-nav__item">
1682 <a href="../../migration/wcf21/css/" class="md-nav__link">
1683 CSS
1684 </a>
1685 </li>
1686
1687
1688
1689
1690
1691
1692
1693 <li class="md-nav__item">
1694 <a href="../../migration/wcf21/package/" class="md-nav__link">
1695 Package Components
1696 </a>
1697 </li>
1698
1699
1700
1701 </ul>
1702 </nav>
1703 </li>
1704
1705
1706
1707 </ul>
1708 </nav>
1709 </li>
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721 <li class="md-nav__item md-nav__item--nested">
1722
1723
1724 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1725
1726 <label class="md-nav__link" for="__nav_7">
1727 Tutorials
1728 <span class="md-nav__icon md-icon"></span>
1729 </label>
1730 <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1731 <label class="md-nav__title" for="__nav_7">
1732 <span class="md-nav__icon md-icon"></span>
1733 Tutorials
1734 </label>
1735 <ul class="md-nav__list" data-md-scrollfix>
1736
1737
1738
1739
1740
1741
1742 <li class="md-nav__item md-nav__item--nested">
1743
1744
1745 <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1746
1747 <label class="md-nav__link" for="__nav_7_1">
1748 Tutorial Series
1749 <span class="md-nav__icon md-icon"></span>
1750 </label>
1751 <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1752 <label class="md-nav__title" for="__nav_7_1">
1753 <span class="md-nav__icon md-icon"></span>
1754 Tutorial Series
1755 </label>
1756 <ul class="md-nav__list" data-md-scrollfix>
1757
1758
1759
1760
1761
1762 <li class="md-nav__item">
1763 <a href="../../tutorial/series/overview/" class="md-nav__link">
1764 Overview
1765 </a>
1766 </li>
1767
1768
1769
1770
1771
1772
1773
1774 <li class="md-nav__item">
1775 <a href="../../tutorial/series/part_1/" class="md-nav__link">
1776 Part 1
1777 </a>
1778 </li>
1779
1780
1781
1782
1783
1784
1785
1786 <li class="md-nav__item">
1787 <a href="../../tutorial/series/part_2/" class="md-nav__link">
1788 Part 2
1789 </a>
1790 </li>
1791
1792
1793
1794
1795
1796
1797
1798 <li class="md-nav__item">
1799 <a href="../../tutorial/series/part_3/" class="md-nav__link">
1800 Part 3
1801 </a>
1802 </li>
1803
1804
1805
1806 </ul>
1807 </nav>
1808 </li>
1809
1810
1811
1812 </ul>
1813 </nav>
1814 </li>
1815
1816
1817
1818 </ul>
1819 </nav>
1820 </div>
1821 </div>
1822 </div>
1823
1824
1825
1826 <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1827 <div class="md-sidebar__scrollwrap">
1828 <div class="md-sidebar__inner">
1829
1830 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1831
1832
1833
1834
1835
1836 <label class="md-nav__title" for="__toc">
1837 <span class="md-nav__icon md-icon"></span>
1838 Table of contents
1839 </label>
1840 <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1841
1842 <li class="md-nav__item">
1843 <a href="#imageviewer" class="md-nav__link">
1844 ImageViewer
1845 </a>
1846
1847 </li>
1848
1849 </ul>
1850
1851 </nav>
1852 </div>
1853 </div>
1854 </div>
1855
1856
1857 <div class="md-content" data-md-component="content">
1858 <article class="md-content__inner md-typeset">
1859
1860
1861 <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/code-snippets.md" title="Edit this page" class="md-content__button md-icon">
1862 <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>
1863 </a>
1864
1865
1866 <h1 id="code-snippets-javascript-api">Code Snippets - JavaScript API<a class="headerlink" href="#code-snippets-javascript-api" title="Permanent link">#</a></h1>
1867 <p>This is a list of code snippets that do not fit into any of the other articles
1868 and merely describe how to achieve something very specific, rather than explaining
1869 the inner workings of a function.</p>
1870 <h2 id="imageviewer">ImageViewer<a class="headerlink" href="#imageviewer" title="Permanent link">#</a></h2>
1871 <p>The ImageViewer is available on all frontend pages by default, you can easily
1872 add images to the viewer by wrapping the thumbnails with a link with the CSS
1873 class <code>jsImageViewer</code> that points to the full version.</p>
1874 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://example.com/full.jpg&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;jsImageViewer&quot;</span><span class="p">&gt;</span>
1875 <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;http://example.com/thumbnail.jpg&quot;</span><span class="p">&gt;</span>
1876 <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
1877 </code></pre></div>
1878
1879
1880
1881
1882 <hr>
1883 <div class="md-source-date">
1884 <small>
1885
1886 Last update: 2021-01-08
1887
1888 </small>
1889 </div>
1890
1891
1892
1893
1894
1895
1896
1897
1898 </article>
1899 </div>
1900 </div>
1901
1902 </main>
1903
1904
1905 <footer class="md-footer">
1906
1907 <nav class="md-footer__inner md-grid" aria-label="Footer">
1908
1909 <a href="../helper-functions/" class="md-footer__link md-footer__link--prev" rel="prev">
1910 <div class="md-footer__button md-icon">
1911 <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>
1912 </div>
1913 <div class="md-footer__title">
1914 <div class="md-ellipsis">
1915 <span class="md-footer__direction">
1916 Previous
1917 </span>
1918 Helper Functions
1919 </div>
1920 </div>
1921 </a>
1922
1923
1924 <a href="../../package/package-xml/" class="md-footer__link md-footer__link--next" rel="next">
1925 <div class="md-footer__title">
1926 <div class="md-ellipsis">
1927 <span class="md-footer__direction">
1928 Next
1929 </span>
1930 package.xml
1931 </div>
1932 </div>
1933 <div class="md-footer__button md-icon">
1934 <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>
1935 </div>
1936 </a>
1937
1938 </nav>
1939
1940 <div class="md-footer-meta md-typeset">
1941 <div class="md-footer-meta__inner md-grid">
1942 <div class="md-footer-copyright">
1943
1944 <div class="md-footer-copyright__highlight">
1945 Copyright © 2020 WoltLab GmbH
1946 </div>
1947
1948 Made with
1949 <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
1950 Material for MkDocs
1951 </a>
1952
1953 </div>
1954 <div class="md-footer-copyright">
1955 <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
1956 <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
1957 </div>
1958 </div>
1959 </div>
1960 </footer>
1961
1962 </div>
1963 <div class="md-dialog" data-md-component="dialog">
1964 <div class="md-dialog__inner md-typeset"></div>
1965 </div>
1966 <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>
1967
1968
1969 <script src="../../assets/javascripts/bundle.d892486b.min.js"></script>
1970
1971
1972 </body>
1973 </html>