- <link rel="shortcut icon" href="../../../assets/default.favicon.ico">
- <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.0.5">
+ <link rel="icon" href="../../../assets/default.favicon.ico">
+ <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
- <title>JavaScript - WoltLab Suite Documentation</title>
+ <title>TypeScript and JavaScript - WoltLab Suite Documentation</title>
- <link rel="stylesheet" href="../../../assets/stylesheets/main.77f3fd56.min.css">
+ <link rel="stylesheet" href="../../../assets/stylesheets/main.6f955dcd.min.css">
- <link rel="stylesheet" href="../../../assets/stylesheets/palette.7fa14f5b.min.css">
+ <link rel="stylesheet" href="../../../assets/stylesheets/palette.ef6f36e2.min.css">
<body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
-
+ <script>function __prefix(e){return new URL("../../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
+
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
- <a href="#migrating-from-wsc-53-javascript" class="md-skip">
+ <a href="#migrating-from-wsc-53-typescript-and-javascript" class="md-skip">
Skip to content
</a>
</div>
-
-
-<header class="md-header" data-md-component="header">
+ <header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
- <a href="../../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation">
+ <a href="../../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
<img src="../../../assets/logo.png" alt="logo">
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
- JavaScript
+ TypeScript and JavaScript
</span>
</div>
</div>
</div>
- <div class="md-header__options">
-
- </div>
+
+
<label class="md-header__button md-icon" for="__search">
<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>
<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>
</label>
<button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+ <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>
</button>
</form>
<div class="md-search__output">
<a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 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>
+ <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>
</div>
<div class="md-source__repository">
GitHub
-
-
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
- <a href="../../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation">
+ <a href="../../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
<img src="../../../assets/logo.png" alt="logo">
<a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 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>
+ <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>
</div>
<div class="md-source__repository">
GitHub
+
+ <li class="md-nav__item md-nav__item--nested">
+
+
+ <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
+
+ <label class="md-nav__link" for="__nav_2_5_1">
+ Caches
+ <span class="md-nav__icon md-icon"></span>
+ </label>
+ <nav class="md-nav" aria-label="Caches" data-md-level="3">
+ <label class="md-nav__title" for="__nav_2_5_1">
+ <span class="md-nav__icon md-icon"></span>
+ Caches
+ </label>
+ <ul class="md-nav__list" data-md-scrollfix>
+
+
+
+
+
<li class="md-nav__item">
<a href="../../../php/api/caches/" class="md-nav__link">
- Caches
+ Overview
</a>
</li>
+ <li class="md-nav__item">
+ <a href="../../../php/api/caches_persistent-caches/" class="md-nav__link">
+ Persistent Caches
+ </a>
+ </li>
+
+
+
+
+
+
+
+ <li class="md-nav__item">
+ <a href="../../../php/api/caches_runtime-caches/" class="md-nav__link">
+ Runtime Caches
+ </a>
+ </li>
+
+
+
+ </ul>
+ </nav>
+ </li>
+
+
+
+
+
+
+
<li class="md-nav__item">
<a href="../../../php/api/comments/" class="md-nav__link">
Comments
+ <li class="md-nav__item">
+ <a href="../../../view/template-plugins/" class="md-nav__link">
+ Template Plugins
+ </a>
+ </li>
+
+
+
+
+
+
+
<li class="md-nav__item">
<a href="../../../view/css/" class="md-nav__link">
CSS
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4">
- JavaScript API
+ TypeScript and JavaScript API
<span class="md-nav__icon md-icon"></span>
</label>
- <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
+ <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
- JavaScript API
+ TypeScript and JavaScript API
</label>
<ul class="md-nav__list" data-md-scrollfix>
+ <li class="md-nav__item">
+ <a href="../../../javascript/typescript/" class="md-nav__link">
+ TypeScript
+ </a>
+ </li>
+
+
+
+
+
+
+
<li class="md-nav__item md-nav__item--nested">
- <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" >
+ <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
- <label class="md-nav__link" for="__nav_4_2">
+ <label class="md-nav__link" for="__nav_4_3">
New API
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="New API" data-md-level="2">
- <label class="md-nav__title" for="__nav_4_2">
+ <label class="md-nav__title" for="__nav_4_3">
<span class="md-nav__icon md-icon"></span>
New API
</label>
+ <li class="md-nav__item">
+ <a href="../../../package/pip/database/" class="md-nav__link">
+ database
+ </a>
+ </li>
+
+
+
+
+
+
+
<li class="md-nav__item">
<a href="../../../package/pip/event-listener/" class="md-nav__link">
eventListener
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
+
<label class="md-nav__link md-nav__link--active" for="__toc">
- JavaScript
+ TypeScript and JavaScript
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
- JavaScript
+ TypeScript and JavaScript
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
+
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
+ <li class="md-nav__item">
+ <a href="#typescript" class="md-nav__link">
+ TypeScript
+ </a>
+
+</li>
+
<li class="md-nav__item">
<a href="#wcf_click_event" class="md-nav__link">
WCF_CLICK_EVENT
+
+
+
+
+ <li class="md-nav__item">
+ <a href="../../../tutorial/series/part_4/" class="md-nav__link">
+ Part 4
+ </a>
+ </li>
+
+
+
+
+
+
+
+ <li class="md-nav__item">
+ <a href="../../../tutorial/series/part_5/" class="md-nav__link">
+ Part 5
+ </a>
+ </li>
+
+
+
</ul>
</nav>
</li>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
+
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
+ <li class="md-nav__item">
+ <a href="#typescript" class="md-nav__link">
+ TypeScript
+ </a>
+
+</li>
+
<li class="md-nav__item">
<a href="#wcf_click_event" class="md-nav__link">
WCF_CLICK_EVENT
</a>
- <h1 id="migrating-from-wsc-53-javascript">Migrating from WSC 5.3 - JavaScript<a class="headerlink" href="#migrating-from-wsc-53-javascript" title="Permanent link">#</a></h1>
+ <h1 id="migrating-from-wsc-53-typescript-and-javascript">Migrating from WSC 5.3 - TypeScript and JavaScript<a class="headerlink" href="#migrating-from-wsc-53-typescript-and-javascript" title="Permanent link">#</a></h1>
+<h2 id="typescript">TypeScript<a class="headerlink" href="#typescript" title="Permanent link">#</a></h2>
+<p>WoltLab Suite 5.4 introduces TypeScript support.
+Learn about consuming WoltLab Suite’s types in <a href="../../../javascript/typescript/">the TypeScript section</a> of the JavaScript API documentation.</p>
+<p>The JavaScript API documentation will be updated to properly take into account the changes that came with the new TypeScript support in the future.
+Existing AMD based modules have been migrated to TypeScript, but will expose the existing and known API.</p>
+<p>It is recommended that you migrate your custom packages to make use of TypeScript.
+It will make consuming newly written modules that properly leverage TypeScript’s features much more pleasant and will also ease using existing modules due to proper autocompletion and type checking.</p>
<h2 id="wcf_click_event"><code>WCF_CLICK_EVENT</code><a class="headerlink" href="#wcf_click_event" title="Permanent link">#</a></h2>
<p>For event listeners on click events, <code>WCF_CLICK_EVENT</code> is deprecated and should no longer be used.
Instead, use <code>click</code> directly:</p>
These elements can be generated with the <code>{objectAction}</code> template plugin for the <code>delete</code> and <code>toggle</code> action.</li>
</ol>
<p>Example:</p>
-<div class="highlight"><pre><span></span><code><table class="table jsObjectActionContainer" {*
- *}data-object-action-class-name="wcf\data\foo\FooAction">
- <thead>
- <tr>
- {* … *}
- </tr>
- </thead>
-
- <tbody>
- {foreach from=$objects item=foo}
- <tr class="jsObjectActionObject" data-object-id="{@$foo->getObjectID()}">
- <td class="columnIcon">
- {objectAction action="toggle" isDisabled=$foo->isDisabled}
- {objectAction action="delete" objectTitle=$foo->getTitle()}
- {* … *}
- </td>
- {* … *}
- </tr>
- {/foreach}
- </tbody>
-</table>
+<div class="highlight"><pre><span></span><code><span class="x"><table class="table jsObjectActionContainer" </span><span class="cp">{</span><span class="c">*</span>
+<span class="c"> *</span><span class="cp">}</span><span class="x">data-object-action-class-name="wcf\data\foo\FooAction"></span>
+<span class="x"> <thead></span>
+<span class="x"> <tr></span>
+<span class="x"> </span><span class="cp">{</span><span class="c">* … *</span><span class="cp">}</span><span class="x"></span>
+<span class="x"> </tr></span>
+<span class="x"> </thead></span>
+
+<span class="x"> <tbody></span>
+<span class="x"> </span><span class="cp">{</span><span class="nf">foreach</span> <span class="na">from</span><span class="o">=</span><span class="nv">$objects</span> <span class="na">item</span><span class="o">=</span><span class="na">foo</span><span class="cp">}</span><span class="x"></span>
+<span class="x"> <tr class="jsObjectActionObject" data-object-id="</span><span class="cp">{</span><span class="o">@</span><span class="nv">$foo</span><span class="o">-></span><span class="na">getObjectID</span><span class="o">()</span><span class="cp">}</span><span class="x">"></span>
+<span class="x"> <td class="columnIcon"></span>
+<span class="x"> </span><span class="cp">{</span><span class="nf">objectAction</span> <span class="na">action</span><span class="o">=</span><span class="s2">"toggle"</span> <span class="na">isDisabled</span><span class="o">=</span><span class="nv">$foo</span><span class="o">-></span><span class="na">isDisabled</span><span class="cp">}</span><span class="x"></span>
+<span class="x"> </span><span class="cp">{</span><span class="nf">objectAction</span> <span class="na">action</span><span class="o">=</span><span class="s2">"delete"</span> <span class="na">objectTitle</span><span class="o">=</span><span class="nv">$foo</span><span class="o">-></span><span class="na">getTitle</span><span class="o">()</span><span class="cp">}</span><span class="x"></span>
+<span class="x"> </span><span class="cp">{</span><span class="c">* … *</span><span class="cp">}</span><span class="x"></span>
+<span class="x"> </td></span>
+<span class="x"> </span><span class="cp">{</span><span class="c">* … *</span><span class="cp">}</span><span class="x"></span>
+<span class="x"> </tr></span>
+<span class="x"> </span><span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
+<span class="x"> </tbody></span>
+<span class="x"></table></span>
</code></pre></div>
<p>Please refer to the documentation in <a href="https://github.com/WoltLab/WCF/blob/master/wcfsetup/install/files/lib/system/template/plugin/ObjectActionFunctionTemplatePlugin.class.php"><code>ObjectActionFunctionTemplatePlugin</code></a> for details and examples on how to use this template plugin.</p>
<p>The relevant TypeScript module registering the event listeners on the object action buttons is <a href="https://github.com/WoltLab/WCF/blob/master/ts/WoltLabSuite/Core/Ui/Object/Action.ts"><code>Ui/Object/Action</code></a>.
<div class="md-source-date">
<small>
- Last update: 2021-03-24
+ Last update: 2021-04-13
</small>
</div>
</article>
</div>
</div>
+
</main>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
- <script id="__config" type="application/json">{"base": "../../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../../assets/javascripts/workers/search.fb4a9340.min.js", "version": {"provider": "mike"}}</script>
+ <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>
- <script src="../../../assets/javascripts/bundle.5cf3e710.min.js"></script>
+ <script src="../../../assets/javascripts/bundle.4ea5477f.min.js"></script>
</body>
projects / GitHub / WoltLab / woltlab.github.io.git / blobdiff