From bafc5681b573727a0f0aa926afba1f7e06aa97ba Mon Sep 17 00:00:00 2001 From: Matthias Schmidt Date: Sat, 12 Dec 2020 16:02:49 +0100 Subject: [PATCH] Convert `Form/Builder/Container/SuffixFormField` to TypeScript --- .../Form/Builder/Container/SuffixFormField.js | 78 +++++++++---------- .../Form/Builder/Container/SuffixFormField.js | 68 ---------------- .../Form/Builder/Container/SuffixFormField.ts | 76 ++++++++++++++++++ 3 files changed, 113 insertions(+), 109 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js index cef2cd8b35..c008b02eda 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js @@ -1,61 +1,57 @@ /** * Handles the dropdowns of form fields with a suffix. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Form/Builder/Container/SuffixFormField - * @since 5.2 + * @author Matthias Schmidt + * @copyright 2001-2020 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Form/Builder/Container/SuffixFormField + * @since 5.2 */ -define(['EventHandler', 'Ui/SimpleDropdown'], function (EventHandler, UiSimpleDropdown) { +define(["require", "exports", "tslib", "../../../Ui/Dropdown/Simple", "../../../Event/Handler", "../../../Core"], function (require, exports, tslib_1, Simple_1, EventHandler, Core) { "use strict"; - /** - * @constructor - */ - function PrefixSuffixFormFieldContainer(formId, suffixFieldId) { - this._formId = formId; - this._suffixField = elById(suffixFieldId); - this._suffixDropdownMenu = UiSimpleDropdown.getDropdownMenu(suffixFieldId + '_dropdown'); - this._suffixDropdownToggle = elByClass('dropdownToggle', UiSimpleDropdown.getDropdown(suffixFieldId + '_dropdown'))[0]; - var listItems = this._suffixDropdownMenu.children; - for (var i = 0, length = listItems.length; i < length; i++) { - listItems[i].addEventListener('click', this._changeSuffixSelection.bind(this)); + Simple_1 = tslib_1.__importDefault(Simple_1); + EventHandler = tslib_1.__importStar(EventHandler); + Core = tslib_1.__importStar(Core); + class SuffixFormField { + constructor(formId, suffixFieldId) { + this._formId = formId; + this._suffixField = document.getElementById(suffixFieldId); + this._suffixDropdownMenu = Simple_1.default.getDropdownMenu(suffixFieldId + "_dropdown"); + this._suffixDropdownToggle = Simple_1.default.getDropdown(suffixFieldId + "_dropdown").getElementsByClassName("dropdownToggle")[0]; + Array.from(this._suffixDropdownMenu.children).forEach((listItem) => { + listItem.addEventListener("click", (ev) => this._changeSuffixSelection(ev)); + }); + EventHandler.add("WoltLabSuite/Core/Form/Builder/Manager", "afterUnregisterForm", (data) => this._destroyDropdown(data)); } - EventHandler.add('WoltLabSuite/Core/Form/Builder/Manager', 'afterUnregisterForm', this._destroyDropdown.bind(this)); - } - ; - PrefixSuffixFormFieldContainer.prototype = { /** * Handles changing the suffix selection. - * - * @param {Event} event */ - _changeSuffixSelection: function (event) { - if (event.currentTarget.classList.contains('disabled')) { + _changeSuffixSelection(event) { + const target = event.currentTarget; + if (target.classList.contains("disabled")) { return; } - var listItems = this._suffixDropdownMenu.children; - for (var i = 0, length = listItems.length; i < length; i++) { - if (listItems[i] === event.currentTarget) { - listItems[i].classList.add('active'); + Array.from(this._suffixDropdownMenu.children).forEach((listItem) => { + if (listItem === target) { + listItem.classList.add("active"); } else { - listItems[i].classList.remove('active'); + listItem.classList.remove("active"); } - } - this._suffixField.value = elData(event.currentTarget, 'value'); - this._suffixDropdownToggle.innerHTML = elData(event.currentTarget, 'label') + ' '; - }, + }); + this._suffixField.value = target.dataset.value; + this._suffixDropdownToggle.innerHTML = + target.dataset.label + ' '; + } /** - * Destorys the suffix dropdown if the parent form is unregistered. - * - * @param {object} data event data + * Destroys the suffix dropdown if the parent form is unregistered. */ - _destroyDropdown: function (data) { + _destroyDropdown(data) { if (data.formId === this._formId) { - UiSimpleDropdown.destroy(this._suffixDropdownMenu.id); + Simple_1.default.destroy(this._suffixDropdownMenu.id); } } - }; - return PrefixSuffixFormFieldContainer; + } + Core.enableLegacyInheritance(SuffixFormField); + return SuffixFormField; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js deleted file mode 100644 index f945113615..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js +++ /dev/null @@ -1,68 +0,0 @@ -/** - * Handles the dropdowns of form fields with a suffix. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Form/Builder/Container/SuffixFormField - * @since 5.2 - */ -define(['EventHandler', 'Ui/SimpleDropdown'], function(EventHandler, UiSimpleDropdown) { - "use strict"; - - /** - * @constructor - */ - function PrefixSuffixFormFieldContainer(formId, suffixFieldId) { - this._formId = formId; - - this._suffixField = elById(suffixFieldId); - this._suffixDropdownMenu = UiSimpleDropdown.getDropdownMenu(suffixFieldId + '_dropdown'); - this._suffixDropdownToggle = elByClass('dropdownToggle', UiSimpleDropdown.getDropdown(suffixFieldId + '_dropdown'))[0]; - - var listItems = this._suffixDropdownMenu.children; - for (var i = 0, length = listItems.length; i < length; i++) { - listItems[i].addEventListener('click', this._changeSuffixSelection.bind(this)); - } - - EventHandler.add('WoltLabSuite/Core/Form/Builder/Manager', 'afterUnregisterForm', this._destroyDropdown.bind(this)); - }; - PrefixSuffixFormFieldContainer.prototype = { - /** - * Handles changing the suffix selection. - * - * @param {Event} event - */ - _changeSuffixSelection: function(event) { - if (event.currentTarget.classList.contains('disabled')) { - return; - } - - var listItems = this._suffixDropdownMenu.children; - for (var i = 0, length = listItems.length; i < length; i++) { - if (listItems[i] === event.currentTarget) { - listItems[i].classList.add('active'); - } - else { - listItems[i].classList.remove('active'); - } - } - - this._suffixField.value = elData(event.currentTarget, 'value'); - this._suffixDropdownToggle.innerHTML = elData(event.currentTarget, 'label') + ' '; - }, - - /** - * Destorys the suffix dropdown if the parent form is unregistered. - * - * @param {object} data event data - */ - _destroyDropdown: function(data) { - if (data.formId === this._formId) { - UiSimpleDropdown.destroy(this._suffixDropdownMenu.id); - } - } - }; - - return PrefixSuffixFormFieldContainer; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts new file mode 100644 index 0000000000..4bb18d9514 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts @@ -0,0 +1,76 @@ +/** + * Handles the dropdowns of form fields with a suffix. + * + * @author Matthias Schmidt + * @copyright 2001-2020 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Form/Builder/Container/SuffixFormField + * @since 5.2 + */ + +import UiSimpleDropdown from "../../../Ui/Dropdown/Simple"; +import * as EventHandler from "../../../Event/Handler"; +import * as Core from "../../../Core"; + +type DestroyDropdownData = { + formId: string; +}; + +class SuffixFormField { + protected readonly _formId: string; + protected readonly _suffixField: HTMLInputElement; + protected readonly _suffixDropdownMenu: HTMLElement; + protected readonly _suffixDropdownToggle: HTMLElement; + + constructor(formId: string, suffixFieldId: string) { + this._formId = formId; + + this._suffixField = document.getElementById(suffixFieldId)! as HTMLInputElement; + this._suffixDropdownMenu = UiSimpleDropdown.getDropdownMenu(suffixFieldId + "_dropdown")!; + this._suffixDropdownToggle = UiSimpleDropdown.getDropdown(suffixFieldId + "_dropdown")!.getElementsByClassName( + "dropdownToggle", + )[0] as HTMLInputElement; + Array.from(this._suffixDropdownMenu.children).forEach((listItem: HTMLLIElement) => { + listItem.addEventListener("click", (ev) => this._changeSuffixSelection(ev)); + }); + + EventHandler.add("WoltLabSuite/Core/Form/Builder/Manager", "afterUnregisterForm", (data) => + this._destroyDropdown(data), + ); + } + + /** + * Handles changing the suffix selection. + */ + protected _changeSuffixSelection(event: MouseEvent): void { + const target = event.currentTarget! as HTMLElement; + if (target.classList.contains("disabled")) { + return; + } + + Array.from(this._suffixDropdownMenu.children).forEach((listItem: HTMLLIElement) => { + if (listItem === target) { + listItem.classList.add("active"); + } else { + listItem.classList.remove("active"); + } + }); + + this._suffixField.value = target.dataset.value!; + this._suffixDropdownToggle.innerHTML = + target.dataset.label! + ' '; + } + + /** + * Destroys the suffix dropdown if the parent form is unregistered. + */ + protected _destroyDropdown(data: DestroyDropdownData): void { + if (data.formId === this._formId) { + UiSimpleDropdown.destroy(this._suffixDropdownMenu.id); + } + } +} + +Core.enableLegacyInheritance(SuffixFormField); + +export = SuffixFormField; -- 2.20.1