From: Alexander Ebert Date: Sat, 2 Jan 2021 11:47:40 +0000 (+0100) Subject: Convert `Controller/User/Notification/Settings` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~484^2~15 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=ad7c950bdf929cb492df5ad9bf4aa93ed7df1571;p=GitHub%2FWoltLab%2FWCF.git Convert `Controller/User/Notification/Settings` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js index 3ae96edb00..39706ece2a 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js @@ -6,118 +6,107 @@ * @license GNU Lesser General Public License * @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 index 72c538b753..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.js +++ /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 - * @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 index 0000000000..adf7d1c9a5 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts @@ -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 + * @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)); + }); +}