Convert `Controller/User/Notification/Settings` to TypeScript
authorAlexander Ebert <ebert@woltlab.com>
Sat, 2 Jan 2021 11:47:40 +0000 (12:47 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Sat, 2 Jan 2021 11:47:40 +0000 (12:47 +0100)
wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js
wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.js [deleted file]
wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts [new file with mode: 0644]

index 3ae96edb00cb723e9abb14b2fa556e4c5f9d4558..39706ece2a57a359a364f8ea0e59baa8149b3e74 100644 (file)
  * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module      WoltLabSuite/Core/Controller/User/Notification/Settings
  */
-define(['Language', 'Ui/ReusableDropdown'], function (Language, UiReusableDropdown) {
-    'use strict';
-    if (!COMPILER_TARGET_DEFAULT) {
-        return function () { };
+define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dropdown/Reusable"], function (require, exports, tslib_1, Language, UiDropdownReusable) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.init = void 0;
+    Language = tslib_1.__importStar(Language);
+    UiDropdownReusable = tslib_1.__importStar(UiDropdownReusable);
+    let _dropDownMenu;
+    let _objectId = 0;
+    function stateChange(event) {
+        const checkbox = event.currentTarget;
+        const objectId = ~~checkbox.dataset.objectId;
+        const emailSettingsType = document.querySelector(`.notificationSettingsEmailType[data-object-id="${objectId}"]`);
+        if (emailSettingsType !== null) {
+            if (checkbox.checked) {
+                emailSettingsType.classList.remove("disabled");
+            }
+            else {
+                emailSettingsType.classList.add("disabled");
+            }
+        }
     }
-    var _dropDownMenu = null;
-    var _objectId = null;
-    /**
-     * @exports        WoltLabSuite/Core/Controller/User/Notification/Settings
-     */
-    return {
-        /**
-         * Binds event listeners for all notifications supporting emails.
-         */
-        init: function () {
-            elBySelAll('.jsCheckboxNotificationSettingsState', undefined, (function (checkbox) {
-                checkbox.addEventListener('change', this._stateChange.bind(this));
-            }).bind(this));
-            elBySelAll('.notificationSettingsEmailType', undefined, (function (button) {
-                button.addEventListener('click', this._click.bind(this));
-            }).bind(this));
-        },
-        /**
-         * @param {Event} event
-         */
-        _stateChange: function (event) {
-            var objectId = elData(event.currentTarget, 'object-id');
-            var emailSettingsType = elBySel('.notificationSettingsEmailType[data-object-id="' + objectId + '"]');
-            if (emailSettingsType !== null) {
-                emailSettingsType.classList[event.currentTarget.checked ? 'remove' : 'add']('disabled');
+    function click(event) {
+        event.preventDefault();
+        const button = event.currentTarget;
+        _objectId = ~~button.dataset.objectId;
+        createDropDown();
+        setCurrentEmailType(getCurrentEmailTypeInputElement().value);
+        showDropDown(button);
+    }
+    function createDropDown() {
+        if (_dropDownMenu) {
+            return;
+        }
+        _dropDownMenu = document.createElement("ul");
+        _dropDownMenu.className = "dropdownMenu";
+        ["instant", "daily", "divider", "none"].forEach((value) => {
+            const listItem = document.createElement("li");
+            if (value === "divider") {
+                listItem.className = "dropdownDivider";
+            }
+            else {
+                const link = document.createElement("a");
+                link.href = "#";
+                link.textContent = Language.get(`wcf.user.notification.mailNotificationType.${value}`);
+                listItem.appendChild(link);
+                listItem.dataset.value = value;
+                listItem.addEventListener("click", (ev) => setEmailType(ev));
             }
-        },
-        /**
-         * @param      {Event} event           event object
-         */
-        _click: function (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            var button = event.currentTarget;
-            _objectId = ~~elData(button, 'object-id');
-            this._createDropDown();
-            this._setCurrentEmailType(this._getEmailTypeInputElement().value);
-            this._showDropDown(button);
-        },
-        _createDropDown: function () {
-            if (_dropDownMenu !== null) {
-                return;
+            _dropDownMenu.appendChild(listItem);
+        });
+        UiDropdownReusable.init("UiNotificationSettingsEmailType", _dropDownMenu);
+    }
+    function setCurrentEmailType(currentValue) {
+        _dropDownMenu.querySelectorAll("li").forEach((button) => {
+            const value = button.dataset.value;
+            if (value === currentValue) {
+                button.classList.add("active");
             }
-            _dropDownMenu = elCreate('ul');
-            _dropDownMenu.className = 'dropdownMenu';
-            ['instant', 'daily', 'divider', 'none'].forEach((function (value) {
-                var listItem = elCreate('li');
-                if (value === 'divider') {
-                    listItem.className = 'dropdownDivider';
-                }
-                else {
-                    var link = elCreate('a');
-                    link.href = '#';
-                    link.textContent = Language.get('wcf.user.notification.mailNotificationType.' + value);
-                    listItem.appendChild(link);
-                    elData(listItem, 'value', value);
-                    listItem.addEventListener('click', this._setEmailType.bind(this));
-                }
-                _dropDownMenu.appendChild(listItem);
-            }).bind(this));
-            UiReusableDropdown.init('UiNotificationSettingsEmailType', _dropDownMenu);
-        },
-        _setCurrentEmailType: function (currentValue) {
-            elBySelAll('li', _dropDownMenu, function (button) {
-                var value = elData(button, 'value');
-                button.classList[(value === currentValue) ? 'add' : 'remove']('active');
-            });
-        },
-        _showDropDown: function (referenceElement) {
-            UiReusableDropdown.toggleDropdown('UiNotificationSettingsEmailType', referenceElement);
-        },
-        /**
-         * @param      {Event} event           event object
-         */
-        _setEmailType: function (event) {
-            event.preventDefault();
-            var value = elData(event.currentTarget, 'value');
-            this._getEmailTypeInputElement().value = value;
-            var button = elBySel('.notificationSettingsEmailType[data-object-id="' + _objectId + '"]');
-            button.title = Language.get('wcf.user.notification.mailNotificationType.' + value);
-            var icon = elBySel('.jsIconNotificationSettingsEmailType', button);
-            icon.classList.remove('fa-clock-o');
-            icon.classList.remove('fa-flash');
-            icon.classList.remove('fa-times');
-            icon.classList.remove('green');
-            icon.classList.remove('red');
-            switch (value) {
-                case 'daily':
-                    icon.classList.add('fa-clock-o');
-                    icon.classList.add('green');
-                    break;
-                case 'instant':
-                    icon.classList.add('fa-flash');
-                    icon.classList.add('green');
-                    break;
-                case 'none':
-                    icon.classList.add('fa-times');
-                    icon.classList.add('red');
-                    break;
+            else {
+                button.classList.remove("active");
             }
-            _objectId = null;
-        },
-        /**
-         * @return {HTMLInputElement}
-         */
-        _getEmailTypeInputElement: function () {
-            return elById('settings_' + _objectId + '_mailNotificationType');
+        });
+    }
+    function showDropDown(referenceElement) {
+        UiDropdownReusable.toggleDropdown("UiNotificationSettingsEmailType", referenceElement);
+    }
+    function setEmailType(event) {
+        event.preventDefault();
+        const listItem = event.currentTarget;
+        const value = listItem.dataset.value;
+        getCurrentEmailTypeInputElement().value = value;
+        const button = document.querySelector(`.notificationSettingsEmailType[data-object-id="${_objectId}"]`);
+        button.title = Language.get(`wcf.user.notification.mailNotificationType.${value}`);
+        const icon = button.querySelector(".jsIconNotificationSettingsEmailType");
+        icon.classList.remove("fa-clock-o", "fa-flash", "fa-times", "green", "red");
+        switch (value) {
+            case "daily":
+                icon.classList.add("fa-clock-o", "green");
+                break;
+            case "instant":
+                icon.classList.add("fa-flash", "green");
+                break;
+            case "none":
+                icon.classList.add("fa-times", "red");
+                break;
         }
-    };
+        _objectId = 0;
+    }
+    function getCurrentEmailTypeInputElement() {
+        return document.getElementById(`settings_${_objectId}_mailNotificationType`);
+    }
+    /**
+     * Binds event listeners for all notifications supporting emails.
+     */
+    function init() {
+        document.querySelectorAll(".jsCheckboxNotificationSettingsState").forEach((checkbox) => {
+            checkbox.addEventListener("change", (ev) => stateChange(ev));
+        });
+        document.querySelectorAll(".notificationSettingsEmailType").forEach((button) => {
+            button.addEventListener("click", (ev) => click(ev));
+        });
+    }
+    exports.init = init;
 });
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.js
deleted file mode 100644 (file)
index 72c538b..0000000
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Handles email notification type for user notification settings.
- *
- * @author      Alexander Ebert
- * @copyright   2001-2020 WoltLab GmbH
- * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module      WoltLabSuite/Core/Controller/User/Notification/Settings
- */
-define(['Language', 'Ui/ReusableDropdown'], function (Language, UiReusableDropdown) {
-       'use strict';
-       
-       if (!COMPILER_TARGET_DEFAULT) {
-               return function () {};
-       }
-       
-       var _dropDownMenu = null;
-       var _objectId = null;
-       
-       /**
-        * @exports     WoltLabSuite/Core/Controller/User/Notification/Settings
-        */
-       return {
-               /**
-                * Binds event listeners for all notifications supporting emails.
-                */
-               init: function () {
-                       elBySelAll('.jsCheckboxNotificationSettingsState', undefined, (function (checkbox) {
-                               checkbox.addEventListener('change', this._stateChange.bind(this));
-                       }).bind(this));
-                       
-                       elBySelAll('.notificationSettingsEmailType', undefined, (function (button) {
-                               button.addEventListener('click', this._click.bind(this));
-                       }).bind(this));
-               },
-               
-               /**
-                * @param {Event} event
-                */
-               _stateChange: function (event) {
-                       var objectId = elData(event.currentTarget, 'object-id');
-                       var emailSettingsType = elBySel('.notificationSettingsEmailType[data-object-id="' + objectId + '"]');
-                       if (emailSettingsType !== null) {
-                               emailSettingsType.classList[event.currentTarget.checked ? 'remove' : 'add']('disabled');
-                       }
-               },
-               
-               /**
-                * @param       {Event} event           event object
-                */
-               _click: function (event) {
-                       event.preventDefault();
-                       event.stopPropagation();
-                       
-                       var button = event.currentTarget;
-                       _objectId = ~~elData(button, 'object-id');
-                       
-                       this._createDropDown();
-                       
-                       this._setCurrentEmailType(this._getEmailTypeInputElement().value);
-                       
-                       this._showDropDown(button);
-               },
-               
-               _createDropDown: function () {
-                       if (_dropDownMenu !== null) {
-                               return;
-                       }
-                       
-                       _dropDownMenu = elCreate('ul');
-                       _dropDownMenu.className = 'dropdownMenu';
-                       
-                       ['instant', 'daily', 'divider', 'none'].forEach((function (value) {
-                               var listItem = elCreate('li');
-                               if (value === 'divider') {
-                                       listItem.className = 'dropdownDivider';
-                               }
-                               else {
-                                       var link = elCreate('a');
-                                       link.href = '#';
-                                       link.textContent = Language.get('wcf.user.notification.mailNotificationType.' + value);
-                                       listItem.appendChild(link);
-                                       elData(listItem, 'value', value);
-                                       listItem.addEventListener('click', this._setEmailType.bind(this));
-                               }
-                               
-                               _dropDownMenu.appendChild(listItem);
-                       }).bind(this));
-                       
-                       UiReusableDropdown.init('UiNotificationSettingsEmailType', _dropDownMenu);
-               },
-               
-               _setCurrentEmailType: function (currentValue) {
-                       elBySelAll('li', _dropDownMenu, function (button) {
-                               var value = elData(button, 'value');
-                               button.classList[(value === currentValue) ? 'add' : 'remove']('active');
-                       });
-               },
-               
-               _showDropDown: function (referenceElement) {
-                       UiReusableDropdown.toggleDropdown('UiNotificationSettingsEmailType', referenceElement);
-               },
-               
-               /**
-                * @param       {Event} event           event object
-                */
-               _setEmailType: function (event) {
-                       event.preventDefault();
-                       
-                       var value = elData(event.currentTarget, 'value');
-                       
-                       this._getEmailTypeInputElement().value = value;
-                       
-                       var button = elBySel('.notificationSettingsEmailType[data-object-id="' + _objectId + '"]');
-                       button.title = Language.get('wcf.user.notification.mailNotificationType.' + value);
-                       
-                       var icon = elBySel('.jsIconNotificationSettingsEmailType', button);
-                       icon.classList.remove('fa-clock-o');
-                       icon.classList.remove('fa-flash');
-                       icon.classList.remove('fa-times');
-                       icon.classList.remove('green');
-                       icon.classList.remove('red');
-                       
-                       switch (value) {
-                               case 'daily':
-                                       icon.classList.add('fa-clock-o');
-                                       icon.classList.add('green');
-                                       break;
-                               
-                               case 'instant':
-                                       icon.classList.add('fa-flash');
-                                       icon.classList.add('green');
-                                       break;
-                               
-                               case 'none':
-                                       icon.classList.add('fa-times');
-                                       icon.classList.add('red');
-                                       break;
-                       }
-                       
-                       _objectId = null;
-               },
-               
-               /**
-                * @return {HTMLInputElement}
-                */
-               _getEmailTypeInputElement: function () {
-                       return elById('settings_' + _objectId + '_mailNotificationType');
-               }
-       };
-});
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts
new file mode 100644 (file)
index 0000000..adf7d1c
--- /dev/null
@@ -0,0 +1,133 @@
+/**
+ * Handles email notification type for user notification settings.
+ *
+ * @author      Alexander Ebert
+ * @copyright   2001-2020 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module      WoltLabSuite/Core/Controller/User/Notification/Settings
+ */
+
+import * as Language from "../../../Language";
+import * as UiDropdownReusable from "../../../Ui/Dropdown/Reusable";
+
+let _dropDownMenu: HTMLUListElement;
+let _objectId = 0;
+
+function stateChange(event: Event): void {
+  const checkbox = event.currentTarget as HTMLInputElement;
+
+  const objectId = ~~checkbox.dataset.objectId!;
+  const emailSettingsType = document.querySelector(`.notificationSettingsEmailType[data-object-id="${objectId}"]`);
+  if (emailSettingsType !== null) {
+    if (checkbox.checked) {
+      emailSettingsType.classList.remove("disabled");
+    } else {
+      emailSettingsType.classList.add("disabled");
+    }
+  }
+}
+
+function click(event: Event): void {
+  event.preventDefault();
+
+  const button = event.currentTarget as HTMLAnchorElement;
+  _objectId = ~~button.dataset.objectId!;
+
+  createDropDown();
+
+  setCurrentEmailType(getCurrentEmailTypeInputElement().value);
+
+  showDropDown(button);
+}
+
+function createDropDown(): void {
+  if (_dropDownMenu) {
+    return;
+  }
+
+  _dropDownMenu = document.createElement("ul");
+  _dropDownMenu.className = "dropdownMenu";
+
+  ["instant", "daily", "divider", "none"].forEach((value) => {
+    const listItem = document.createElement("li");
+    if (value === "divider") {
+      listItem.className = "dropdownDivider";
+    } else {
+      const link = document.createElement("a");
+      link.href = "#";
+      link.textContent = Language.get(`wcf.user.notification.mailNotificationType.${value}`);
+      listItem.appendChild(link);
+      listItem.dataset.value = value;
+      listItem.addEventListener("click", (ev) => setEmailType(ev));
+    }
+
+    _dropDownMenu.appendChild(listItem);
+  });
+
+  UiDropdownReusable.init("UiNotificationSettingsEmailType", _dropDownMenu);
+}
+
+function setCurrentEmailType(currentValue: string): void {
+  _dropDownMenu.querySelectorAll("li").forEach((button) => {
+    const value = button.dataset.value!;
+    if (value === currentValue) {
+      button.classList.add("active");
+    } else {
+      button.classList.remove("active");
+    }
+  });
+}
+
+function showDropDown(referenceElement: HTMLAnchorElement): void {
+  UiDropdownReusable.toggleDropdown("UiNotificationSettingsEmailType", referenceElement);
+}
+
+function setEmailType(event: Event): void {
+  event.preventDefault();
+
+  const listItem = event.currentTarget as HTMLLIElement;
+  const value = listItem.dataset.value!;
+
+  getCurrentEmailTypeInputElement().value = value;
+
+  const button = document.querySelector(
+    `.notificationSettingsEmailType[data-object-id="${_objectId}"]`,
+  ) as HTMLLIElement;
+  button.title = Language.get(`wcf.user.notification.mailNotificationType.${value}`);
+
+  const icon = button.querySelector(".jsIconNotificationSettingsEmailType") as HTMLSpanElement;
+  icon.classList.remove("fa-clock-o", "fa-flash", "fa-times", "green", "red");
+
+  switch (value) {
+    case "daily":
+      icon.classList.add("fa-clock-o", "green");
+      break;
+
+    case "instant":
+      icon.classList.add("fa-flash", "green");
+      break;
+
+    case "none":
+      icon.classList.add("fa-times", "red");
+      break;
+  }
+
+  _objectId = 0;
+}
+
+function getCurrentEmailTypeInputElement(): HTMLInputElement {
+  return document.getElementById(`settings_${_objectId}_mailNotificationType`) as HTMLInputElement;
+}
+
+/**
+ * Binds event listeners for all notifications supporting emails.
+ */
+export function init(): void {
+  document.querySelectorAll(".jsCheckboxNotificationSettingsState").forEach((checkbox) => {
+    checkbox.addEventListener("change", (ev) => stateChange(ev));
+  });
+
+  document.querySelectorAll(".notificationSettingsEmailType").forEach((button) => {
+    button.addEventListener("click", (ev) => click(ev));
+  });
+}