Document `Ui/Empty` (#136)

* Document `Ui/Empty`

See WoltLab/WCF#4073

* Improve wording of `Ui/Empty` documentation

Co-authored-by: Tim Düsterhus <duesterhus@woltlab.com>
Co-authored-by: Tim Düsterhus <duesterhus@woltlab.com>

diff --git a/docs/migration/wsc53/javascript.md b/docs/migration/wsc53/javascript.md
index 240aa191e98e59c39783a9ccb1e7cf0c0e84fc2b..4671d3cf4b75271c05e43529652d1e469bb57729 100644 (file)
--- a/docs/migration/wsc53/javascript.md
+++ b/docs/migration/wsc53/javascript.md
@@ -12,3 +12,48 @@ element.addEventListener(WCF_CLICK_EVENT, this._click.bind(this));
 // after
 element.addEventListener('click', (ev) => this._click(ev));
 ```
+
+## `WCF.Table.EmptyTableHandler`
+
+When all objects in a table or list are deleted via their delete button or clipboard actions, an empty table or list can remain.
+Previously, `WCF.Table.EmptyTableHandler` had to be explicitly used in each template for these tables and lists to reload the page.
+As a TypeScript-based replacement for `WCF.Table.EmptyTableHandler` that is only initialized once globally, `WoltLabSuite/Core/Ui/Empty` was added.
+To use this new module, you only have to add the CSS class `jsReloadPageWhenEmpty` to the relevant HTML element.
+Once this HTML element no longer has child elements, the page is reloaded.
+To also cover scenarios in which there are fixed child elements that should not be considered when determining if there are no child elements, the `data-reload-page-when-empty="ignore"` can be set for these elements.
+
+Examples:
+
+```smarty
+<table class="table">
+    <thead>
+        <tr>
+            {* … *}
+        </tr>
+    </thead>
+
+    <tbody class="jsReloadPageWhenEmpty">
+        {foreach from=$objects item=object}
+            <tr>
+                {* … *}
+            </tr>
+        {/foreach}
+    </tbody>
+</table>
+```
+
+```smarty
+<div class="section tabularBox messageGroupList">
+    <ol class="tabularList jsReloadPageWhenEmpty">
+        <li class="tabularListRow tabularListRowHead" data-reload-page-when-empty="ignore">
+            {* … *}
+        </li>
+
+        {foreach from=$objects item=object}
+            <li>
+                {* … *}
+            </li>
+        {/foreach}
+    </ol>
+</div>
+```