Convert `Ui/User/Activity/Recent` to TypeScript

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Activity/Recent.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Activity/Recent.js
index 2bae3812d3666651c753db9055ddaa3ee407d735..5587abfe400441c8b48976efd70cf576d66d6648 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Activity/Recent.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Activity/Recent.js
@@ -1,71 +1,77 @@
-define(['Ajax', 'Language', 'Dom/Util'], function (Ajax, Language, DomUtil) {
+define(["require", "exports", "tslib", "../../../Ajax", "../../../Core", "../../../Language", "../../../Dom/Util"], function (require, exports, tslib_1, Ajax, Core, Language, Util_1) {
     "use strict";
-    function UiUserActivityRecent(containerId) { this.init(containerId); }
-    UiUserActivityRecent.prototype = {
-        init: function (containerId) {
-            this._containerId = containerId;
-            var container = elById(this._containerId);
-            this._list = elBySel('.recentActivityList', container);
-            var showMoreItem = elCreate('li');
-            showMoreItem.className = 'showMore';
-            if (this._list.childElementCount) {
-                showMoreItem.innerHTML = '<button class="small">' + Language.get('wcf.user.recentActivity.more') + '</button>';
-                showMoreItem.children[0].addEventListener(WCF_CLICK_EVENT, this._showMore.bind(this));
+    Ajax = tslib_1.__importStar(Ajax);
+    Core = tslib_1.__importStar(Core);
+    Language = tslib_1.__importStar(Language);
+    Util_1 = tslib_1.__importDefault(Util_1);
+    class UiUserActivityRecent {
+        constructor(containerId) {
+            this.containerId = containerId;
+            const container = document.getElementById(this.containerId);
+            this.list = container.querySelector(".recentActivityList");
+            const showMoreItem = document.createElement("li");
+            showMoreItem.className = "showMore";
+            if (this.list.childElementCount) {
+                showMoreItem.innerHTML = '<button class="small">' + Language.get("wcf.user.recentActivity.more") + "</button>";
+                const button = showMoreItem.children[0];
+                button.addEventListener("click", (ev) => this.showMore(ev));
             }
             else {
-                showMoreItem.innerHTML = '<small>' + Language.get('wcf.user.recentActivity.noMoreEntries') + '</small>';
+                showMoreItem.innerHTML = "<small>" + Language.get("wcf.user.recentActivity.noMoreEntries") + "</small>";
             }
-            this._list.appendChild(showMoreItem);
-            this._showMoreItem = showMoreItem;
-            elBySelAll('.jsRecentActivitySwitchContext .button', container, (function (button) {
-                button.addEventListener(WCF_CLICK_EVENT, (function (event) {
+            this.list.appendChild(showMoreItem);
+            this.showMoreItem = showMoreItem;
+            container.querySelectorAll(".jsRecentActivitySwitchContext .button").forEach((button) => {
+                button.addEventListener("click", (event) => {
                     event.preventDefault();
-                    if (!button.classList.contains('active')) {
-                        this._switchContext();
+                    if (!button.classList.contains("active")) {
+                        this.switchContext();
                     }
-                }).bind(this));
-            }).bind(this));
-        },
-        _showMore: function (event) {
+                });
+            });
+        }
+        showMore(event) {
             event.preventDefault();
-            this._showMoreItem.children[0].disabled = true;
+            const button = this.showMoreItem.children[0];
+            button.disabled = true;
             Ajax.api(this, {
-                actionName: 'load',
+                actionName: "load",
                 parameters: {
-                    boxID: ~~elData(this._list, 'box-id'),
-                    filteredByFollowedUsers: elDataBool(this._list, 'filtered-by-followed-users'),
-                    lastEventId: elData(this._list, 'last-event-id'),
-                    lastEventTime: elData(this._list, 'last-event-time'),
-                    userID: ~~elData(this._list, 'user-id')
-                }
+                    boxID: ~~this.list.dataset.boxId,
+                    filteredByFollowedUsers: Core.stringToBool(this.list.dataset.filteredByFollowedUsers || ""),
+                    lastEventId: this.list.dataset.lastEventId,
+                    lastEventTime: this.list.dataset.lastEventTime,
+                    userID: ~~this.list.dataset.userId,
+                },
             });
-        },
-        _switchContext: function () {
+        }
+        switchContext() {
             Ajax.api(this, {
-                actionName: 'switchContext'
-            }, (function () {
-                window.location.hash = '#' + this._containerId;
+                actionName: "switchContext",
+            }, () => {
+                window.location.hash = `#${this.containerId}`;
                 window.location.reload();
-            }).bind(this));
-        },
-        _ajaxSuccess: function (data) {
+            });
+        }
+        _ajaxSuccess(data) {
             if (data.returnValues.template) {
-                DomUtil.insertHtml(data.returnValues.template, this._showMoreItem, 'before');
-                elData(this._list, 'last-event-time', data.returnValues.lastEventTime);
-                elData(this._list, 'last-event-id', data.returnValues.lastEventID);
-                this._showMoreItem.children[0].disabled = false;
+                Util_1.default.insertHtml(data.returnValues.template, this.showMoreItem, "before");
+                this.list.dataset.lastEventTime = data.returnValues.lastEventTime.toString();
+                this.list.dataset.lastEventId = data.returnValues.lastEventID.toString();
+                const button = this.showMoreItem.children[0];
+                button.disabled = false;
             }
             else {
-                this._showMoreItem.innerHTML = '<small>' + Language.get('wcf.user.recentActivity.noMoreEntries') + '</small>';
+                this.showMoreItem.innerHTML = "<small>" + Language.get("wcf.user.recentActivity.noMoreEntries") + "</small>";
             }
-        },
-        _ajaxSetup: function () {
+        }
+        _ajaxSetup() {
             return {
                 data: {
-                    className: 'wcf\\data\\user\\activity\\event\\UserActivityEventAction'
-                }
+                    className: "wcf\\data\\user\\activity\\event\\UserActivityEventAction",
+                },
             };
         }
-    };
+    }
     return UiUserActivityRecent;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Activity/Recent.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Activity/Recent.js
deleted file mode 100644 (file)
index 6a2684c..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Activity/Recent.js
+++ /dev/null
@@ -1,89 +0,0 @@
-define(['Ajax', 'Language', 'Dom/Util'], function(Ajax, Language, DomUtil) {
-       "use strict";
-       
-       function UiUserActivityRecent(containerId) { this.init(containerId); }
-       UiUserActivityRecent.prototype = {
-               init: function (containerId) {
-                       this._containerId = containerId;
-                       var container = elById(this._containerId);
-                       this._list = elBySel('.recentActivityList', container);
-                       
-                       var showMoreItem = elCreate('li');
-                       showMoreItem.className = 'showMore';
-                       if (this._list.childElementCount) {
-                               showMoreItem.innerHTML = '<button class="small">' + Language.get('wcf.user.recentActivity.more') + '</button>';
-                               showMoreItem.children[0].addEventListener(WCF_CLICK_EVENT, this._showMore.bind(this));
-                       }
-                       else {
-                               showMoreItem.innerHTML = '<small>' + Language.get('wcf.user.recentActivity.noMoreEntries') + '</small>';
-                       }
-                       
-                       this._list.appendChild(showMoreItem);
-                       this._showMoreItem = showMoreItem;
-                       
-                       elBySelAll('.jsRecentActivitySwitchContext .button', container, (function (button) {
-                               button.addEventListener(WCF_CLICK_EVENT, (function (event) {
-                                       event.preventDefault();
-                                       
-                                       if (!button.classList.contains('active')) {
-                                               this._switchContext();
-                                       }
-                               }).bind(this));
-                       }).bind(this));
-               },
-               
-               _showMore: function (event) {
-                       event.preventDefault();
-                       
-                       this._showMoreItem.children[0].disabled = true;
-                       
-                       Ajax.api(this, {
-                               actionName: 'load',
-                               parameters: {
-                                       boxID: ~~elData(this._list, 'box-id'),
-                                       filteredByFollowedUsers: elDataBool(this._list, 'filtered-by-followed-users'),
-                                       lastEventId: elData(this._list, 'last-event-id'),
-                                       lastEventTime: elData(this._list, 'last-event-time'),
-                                       userID: ~~elData(this._list, 'user-id')
-                               }
-                       });
-               },
-               
-               _switchContext: function() {
-                       Ajax.api(
-                               this,
-                               {
-                                       actionName: 'switchContext'
-                               },
-                               (function () {
-                                       window.location.hash = '#' + this._containerId;
-                                       window.location.reload();
-                               }).bind(this)
-                       );
-               },
-               
-               _ajaxSuccess: function(data) {
-                       if (data.returnValues.template) {
-                               DomUtil.insertHtml(data.returnValues.template, this._showMoreItem, 'before');
-                               
-                               elData(this._list, 'last-event-time', data.returnValues.lastEventTime);
-                               elData(this._list, 'last-event-id', data.returnValues.lastEventID);
-                               
-                               this._showMoreItem.children[0].disabled = false;
-                       }
-                       else {
-                               this._showMoreItem.innerHTML = '<small>' + Language.get('wcf.user.recentActivity.noMoreEntries') + '</small>';
-                       }
-               },
-               
-               _ajaxSetup: function () {
-                       return {
-                               data: {
-                                       className: 'wcf\\data\\user\\activity\\event\\UserActivityEventAction'
-                               }
-                       };
-               }
-       };
-       
-       return UiUserActivityRecent;
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Activity/Recent.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Activity/Recent.ts
new file mode 100644 (file)
index 0000000..690691d
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Activity/Recent.ts
@@ -0,0 +1,104 @@
+import * as Ajax from "../../../Ajax";
+import { AjaxCallbackObject, RequestOptions } from "../../../Ajax/Data";
+import * as Core from "../../../Core";
+import * as Language from "../../../Language";
+import DomUtil from "../../../Dom/Util";
+
+interface AjaxResponse {
+  returnValues: {
+    lastEventID: number;
+    lastEventTime: number;
+    template?: string;
+  };
+}
+
+class UiUserActivityRecent implements AjaxCallbackObject {
+  private readonly containerId: string;
+  private readonly list: HTMLUListElement;
+  private readonly showMoreItem: HTMLLIElement;
+
+  constructor(containerId: string) {
+    this.containerId = containerId;
+    const container = document.getElementById(this.containerId)!;
+    this.list = container.querySelector(".recentActivityList") as HTMLUListElement;
+
+    const showMoreItem = document.createElement("li");
+    showMoreItem.className = "showMore";
+    if (this.list.childElementCount) {
+      showMoreItem.innerHTML = '<button class="small">' + Language.get("wcf.user.recentActivity.more") + "</button>";
+
+      const button = showMoreItem.children[0] as HTMLButtonElement;
+      button.addEventListener("click", (ev) => this.showMore(ev));
+    } else {
+      showMoreItem.innerHTML = "<small>" + Language.get("wcf.user.recentActivity.noMoreEntries") + "</small>";
+    }
+
+    this.list.appendChild(showMoreItem);
+    this.showMoreItem = showMoreItem;
+
+    container.querySelectorAll(".jsRecentActivitySwitchContext .button").forEach((button) => {
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+
+        if (!button.classList.contains("active")) {
+          this.switchContext();
+        }
+      });
+    });
+  }
+
+  private showMore(event: MouseEvent): void {
+    event.preventDefault();
+
+    const button = this.showMoreItem.children[0] as HTMLButtonElement;
+    button.disabled = true;
+
+    Ajax.api(this, {
+      actionName: "load",
+      parameters: {
+        boxID: ~~this.list.dataset.boxId!,
+        filteredByFollowedUsers: Core.stringToBool(this.list.dataset.filteredByFollowedUsers || ""),
+        lastEventId: this.list.dataset.lastEventId!,
+        lastEventTime: this.list.dataset.lastEventTime!,
+        userID: ~~this.list.dataset.userId!,
+      },
+    });
+  }
+
+  private switchContext(): void {
+    Ajax.api(
+      this,
+      {
+        actionName: "switchContext",
+      },
+      () => {
+        window.location.hash = `#${this.containerId}`;
+        window.location.reload();
+      }
+    );
+  }
+
+  _ajaxSuccess(data: AjaxResponse): void {
+    if (data.returnValues.template) {
+      DomUtil.insertHtml(data.returnValues.template, this.showMoreItem, "before");
+
+      this.list.dataset.lastEventTime = data.returnValues.lastEventTime.toString();
+      this.list.dataset.lastEventId = data.returnValues.lastEventID.toString();
+
+      const button = this.showMoreItem.children[0] as HTMLButtonElement;
+      button.disabled = false;
+    } else {
+      this.showMoreItem.innerHTML = "<small>" + Language.get("wcf.user.recentActivity.noMoreEntries") + "</small>";
+    }
+  }
+
+  _ajaxSetup(): RequestOptions {
+    return {
+      data: {
+        className: "wcf\\data\\user\\activity\\event\\UserActivityEventAction",
+      },
+    };
+  }
+}
+
+export = UiUserActivityRecent;