Add `Ui/Empty` module

diff --git a/ts/WoltLabSuite/Core/Ui/Empty.ts b/ts/WoltLabSuite/Core/Ui/Empty.ts
new file mode 100644 (file)
index 0000000..fd2074c
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Ui/Empty.ts
@@ -0,0 +1,40 @@
+/**
+ * Automatically reloads the page if `.jsReloadPageWhenEmpty` elements contain no child elements.
+ *
+ * @author  Matthias Schmidt
+ * @copyright  2001-2021 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Ui/Empty
+ */
+
+import DomChangeListener from "../Dom/Change/Listener";
+
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    const target = mutation.target as HTMLElement;
+
+    if (target.childElementCount === 0) {
+      window.location.reload();
+    } else {
+      // Some elements may contain items, like a head row, that should not be considered when checking
+      // whether the list is empty.
+      const isEmpty = Array.from(target.children).every(
+        (el: HTMLElement) => el.dataset.reloadPageWhenEmpty === "ignore",
+      );
+      if (isEmpty) {
+        window.location.reload();
+      }
+    }
+  });
+});
+
+export function setup(): void {
+  document.querySelectorAll(".jsReloadPageWhenEmpty").forEach((el) => {
+    el.classList.remove("jsReloadPageWhenEmpty");
+    observer.observe(el, {
+      childList: true,
+    });
+  });
+
+  DomChangeListener.add("WoltLabSuite/Core/Ui/Empty", () => setup());
+}

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Empty.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Empty.js
new file mode 100644 (file)
index 0000000..6747b2c
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Empty.js
@@ -0,0 +1,40 @@
+/**
+ * Automatically reloads the page if `.jsReloadPageWhenEmpty` elements contain no child elements.
+ *
+ * @author  Matthias Schmidt
+ * @copyright  2001-2021 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Ui/Empty
+ */
+define(["require", "exports", "tslib", "../Dom/Change/Listener"], function (require, exports, tslib_1, Listener_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.setup = void 0;
+    Listener_1 = tslib_1.__importDefault(Listener_1);
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            const target = mutation.target;
+            if (target.childElementCount === 0) {
+                window.location.reload();
+            }
+            else {
+                // Some elements may contain items, like a head row, that should not be considered when checking
+                // whether the list is empty.
+                const isEmpty = Array.from(target.children).every((el) => el.dataset.reloadPageWhenEmpty === "ignore");
+                if (isEmpty) {
+                    window.location.reload();
+                }
+            }
+        });
+    });
+    function setup() {
+        document.querySelectorAll(".jsReloadPageWhenEmpty").forEach((el) => {
+            el.classList.remove("jsReloadPageWhenEmpty");
+            observer.observe(el, {
+                childList: true,
+            });
+        });
+        Listener_1.default.add("WoltLabSuite/Core/Ui/Empty", () => setup());
+    }
+    exports.setup = setup;
+});