From: Matthias Schmidt Date: Sat, 12 Dec 2020 14:35:37 +0000 (+0100) Subject: Convert `Form/Builder/Field/Controller/Label` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~526^2~21 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=28cf7e1f0bc537d6446fcde0994a38b7dfa62959;p=GitHub%2FWoltLab%2FWCF.git Convert `Form/Builder/Field/Controller/Label` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js index cc74932479..351d735294 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js @@ -1,129 +1,103 @@ /** * Handles the JavaScript part of the label form field. * - * @author Alexander Ebert, Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Form/Builder/Field/Controller/Label - * @since 5.2 + * @author Alexander Ebert, Matthias Schmidt + * @copyright 2001-2020 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Form/Builder/Field/Controller/Label + * @since 5.2 */ -define(['Core', 'Dom/Util', 'Language', 'Ui/SimpleDropdown'], function (Core, DomUtil, Language, UiSimpleDropdown) { +define(["require", "exports", "tslib", "../../../../Core", "../../../../Dom/Util", "../../../../Language", "../../../../Ui/Dropdown/Simple"], function (require, exports, tslib_1, Core, DomUtil, Language, Simple_1) { "use strict"; - /** - * @constructor - */ - function FormBuilderFieldLabel(fielId, labelId, options) { - this.init(fielId, labelId, options); - } - ; - FormBuilderFieldLabel.prototype = { - /** - * Initializes the label form field. - * - * @param {string} fieldId id of the relevant form builder field - * @param {integer} labelId id of the currently selected label - * @param {object} options additional label options - */ - init: function (fieldId, labelId, options) { - this._formFieldContainer = elById(fieldId + 'Container'); - this._labelChooser = elByClass('labelChooser', this._formFieldContainer)[0]; + Core = tslib_1.__importStar(Core); + DomUtil = tslib_1.__importStar(DomUtil); + Language = tslib_1.__importStar(Language); + Simple_1 = tslib_1.__importDefault(Simple_1); + class Label { + constructor(fieldId, labelId, options) { + this._formFieldContainer = document.getElementById(fieldId + "Container"); + this._labelChooser = this._formFieldContainer.getElementsByClassName("labelChooser")[0]; this._options = Core.extend({ forceSelection: false, - showWithoutSelection: false + showWithoutSelection: false, }, options); - this._input = elCreate('input'); - this._input.type = 'hidden'; + this._input = document.createElement("input"); + this._input.type = "hidden"; this._input.id = fieldId; this._input.name = fieldId; - this._input.value = ~~labelId; + this._input.value = labelId; this._formFieldContainer.appendChild(this._input); - var labelChooserId = DomUtil.identify(this._labelChooser); + const labelChooserId = DomUtil.identify(this._labelChooser); // init dropdown - var dropdownMenu = UiSimpleDropdown.getDropdownMenu(labelChooserId); + let dropdownMenu = Simple_1.default.getDropdownMenu(labelChooserId); if (dropdownMenu === null) { - UiSimpleDropdown.init(elByClass('dropdownToggle', this._labelChooser)[0]); - dropdownMenu = UiSimpleDropdown.getDropdownMenu(labelChooserId); + Simple_1.default.init(this._labelChooser.getElementsByClassName("dropdownToggle")[0]); + dropdownMenu = Simple_1.default.getDropdownMenu(labelChooserId); } - var additionalOptionList = null; + let additionalOptionList = null; if (this._options.showWithoutSelection || !this._options.forceSelection) { - additionalOptionList = elCreate('ul'); + additionalOptionList = document.createElement("ul"); dropdownMenu.appendChild(additionalOptionList); - var dropdownDivider = elCreate('li'); - dropdownDivider.className = 'dropdownDivider'; + const dropdownDivider = document.createElement("li"); + dropdownDivider.classList.add("dropdownDivider"); additionalOptionList.appendChild(dropdownDivider); } if (this._options.showWithoutSelection) { - var listItem = elCreate('li'); - elData(listItem, 'label-id', -1); + const listItem = document.createElement("li"); + listItem.dataset.labelId = "-1"; this._blockScroll(listItem); additionalOptionList.appendChild(listItem); - var span = elCreate('span'); + const span = document.createElement("span"); listItem.appendChild(span); - var label = elCreate('span'); - label.className = 'badge label'; - label.innerHTML = Language.get('wcf.label.withoutSelection'); + const label = document.createElement("span"); + label.classList.add("badge", "label"); + label.innerHTML = Language.get("wcf.label.withoutSelection"); span.appendChild(label); } if (!this._options.forceSelection) { - var listItem = elCreate('li'); - elData(listItem, 'label-id', 0); + const listItem = document.createElement("li"); + listItem.dataset.labelId = "0"; this._blockScroll(listItem); additionalOptionList.appendChild(listItem); - var span = elCreate('span'); + const span = document.createElement("span"); listItem.appendChild(span); - var label = elCreate('span'); - label.className = 'badge label'; - label.innerHTML = Language.get('wcf.label.none'); + const label = document.createElement("span"); + label.classList.add("badge", "label"); + label.innerHTML = Language.get("wcf.label.none"); span.appendChild(label); } - elBySelAll('li:not(.dropdownDivider)', dropdownMenu, function (listItem) { - listItem.addEventListener('click', this._click.bind(this)); + dropdownMenu.querySelectorAll("li:not(.dropdownDivider)").forEach((listItem) => { + listItem.addEventListener("click", (ev) => this._click(ev)); if (labelId) { - if (~~elData(listItem, 'label-id') === labelId) { + if (listItem.dataset.labelId === labelId) { this._selectLabel(listItem); } } - }.bind(this)); - }, - /** - * Blocks page scrolling for the given element. - * - * @param {HTMLElement} element - */ - _blockScroll: function (element) { - element.addEventListener('wheel', function (event) { - event.preventDefault(); - }, { - passive: false }); - }, - /** - * Select a label after clicking on it. - * - * @param {Event} event click event in label selection dropdown - */ - _click: function (event) { + } + _blockScroll(element) { + element.addEventListener("wheel", (ev) => ev.preventDefault(), { + passive: false, + }); + } + _click(event) { event.preventDefault(); - this._selectLabel(event.currentTarget, false); - }, - /** - * Selects the given label. - * - * @param {HTMLElement} label - */ - _selectLabel: function (label) { + this._selectLabel(event.currentTarget); + } + _selectLabel(label) { // save label - var labelId = elData(label, 'label-id'); + let labelId = label.dataset.labelId; if (!labelId) { - labelId = 0; + labelId = "0"; } // replace button with currently selected label - var displayLabel = elBySel('span > span', label); - var button = elBySel('.dropdownToggle > span', this._labelChooser); + const displayLabel = label.querySelector("span > span"); + const button = this._labelChooser.querySelector(".dropdownToggle > span"); button.className = displayLabel.className; button.textContent = displayLabel.textContent; this._input.value = labelId; } - }; - return FormBuilderFieldLabel; + } + Core.enableLegacyInheritance(Label); + return Label; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js deleted file mode 100644 index e0150da902..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js +++ /dev/null @@ -1,153 +0,0 @@ -/** - * Handles the JavaScript part of the label form field. - * - * @author Alexander Ebert, Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Form/Builder/Field/Controller/Label - * @since 5.2 - */ -define(['Core', 'Dom/Util', 'Language', 'Ui/SimpleDropdown'], function(Core, DomUtil, Language, UiSimpleDropdown) { - "use strict"; - - /** - * @constructor - */ - function FormBuilderFieldLabel(fielId, labelId, options) { - this.init(fielId, labelId, options); - }; - FormBuilderFieldLabel.prototype = { - /** - * Initializes the label form field. - * - * @param {string} fieldId id of the relevant form builder field - * @param {integer} labelId id of the currently selected label - * @param {object} options additional label options - */ - init: function(fieldId, labelId, options) { - this._formFieldContainer = elById(fieldId + 'Container'); - this._labelChooser = elByClass('labelChooser', this._formFieldContainer)[0]; - this._options = Core.extend({ - forceSelection: false, - showWithoutSelection: false - }, options); - - this._input = elCreate('input'); - this._input.type = 'hidden'; - this._input.id = fieldId; - this._input.name = fieldId; - this._input.value = ~~labelId; - this._formFieldContainer.appendChild(this._input); - - var labelChooserId = DomUtil.identify(this._labelChooser); - - // init dropdown - var dropdownMenu = UiSimpleDropdown.getDropdownMenu(labelChooserId); - if (dropdownMenu === null) { - UiSimpleDropdown.init(elByClass('dropdownToggle', this._labelChooser)[0]); - dropdownMenu = UiSimpleDropdown.getDropdownMenu(labelChooserId); - } - - var additionalOptionList = null; - if (this._options.showWithoutSelection || !this._options.forceSelection) { - additionalOptionList = elCreate('ul'); - dropdownMenu.appendChild(additionalOptionList); - - var dropdownDivider = elCreate('li'); - dropdownDivider.className = 'dropdownDivider'; - additionalOptionList.appendChild(dropdownDivider); - } - - if (this._options.showWithoutSelection) { - var listItem = elCreate('li'); - elData(listItem, 'label-id', -1); - this._blockScroll(listItem); - additionalOptionList.appendChild(listItem); - - var span = elCreate('span'); - listItem.appendChild(span); - - var label = elCreate('span'); - label.className = 'badge label'; - label.innerHTML = Language.get('wcf.label.withoutSelection'); - span.appendChild(label); - } - - if (!this._options.forceSelection) { - var listItem = elCreate('li'); - elData(listItem, 'label-id', 0); - this._blockScroll(listItem); - additionalOptionList.appendChild(listItem); - - var span = elCreate('span'); - listItem.appendChild(span); - - var label = elCreate('span'); - label.className = 'badge label'; - label.innerHTML = Language.get('wcf.label.none'); - span.appendChild(label); - } - - elBySelAll('li:not(.dropdownDivider)', dropdownMenu, function(listItem) { - listItem.addEventListener('click', this._click.bind(this)); - - if (labelId) { - if (~~elData(listItem, 'label-id') === labelId) { - this._selectLabel(listItem); - } - } - }.bind(this)); - }, - - /** - * Blocks page scrolling for the given element. - * - * @param {HTMLElement} element - */ - _blockScroll: function(element) { - element.addEventListener( - 'wheel', - function(event) { - event.preventDefault(); - }, - { - passive: false - } - ); - }, - - /** - * Select a label after clicking on it. - * - * @param {Event} event click event in label selection dropdown - */ - _click: function(event) { - event.preventDefault(); - - this._selectLabel(event.currentTarget, false); - }, - - /** - * Selects the given label. - * - * @param {HTMLElement} label - */ - _selectLabel: function(label) { - // save label - var labelId = elData(label, 'label-id'); - if (!labelId) { - labelId = 0; - } - - // replace button with currently selected label - var displayLabel = elBySel('span > span', label); - var button = elBySel('.dropdownToggle > span', this._labelChooser); - button.className = displayLabel.className; - button.textContent = displayLabel.textContent; - - this._input.value = labelId; - } - }; - - return FormBuilderFieldLabel; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.ts new file mode 100644 index 0000000000..01ce705e3e --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.ts @@ -0,0 +1,132 @@ +/** + * Handles the JavaScript part of the label form field. + * + * @author Alexander Ebert, Matthias Schmidt + * @copyright 2001-2020 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Form/Builder/Field/Controller/Label + * @since 5.2 + */ + +import * as Core from "../../../../Core"; +import * as DomUtil from "../../../../Dom/Util"; +import * as Language from "../../../../Language"; +import UiDropdownSimple from "../../../../Ui/Dropdown/Simple"; +import { LabelFormFieldOptions } from "../../Data"; + +class Label { + protected readonly _formFieldContainer: HTMLElement; + protected readonly _input: HTMLInputElement; + protected readonly _labelChooser: HTMLElement; + protected readonly _options: LabelFormFieldOptions; + + constructor(fieldId: string, labelId: string, options: LabelFormFieldOptions) { + this._formFieldContainer = document.getElementById(fieldId + "Container")!; + this._labelChooser = this._formFieldContainer.getElementsByClassName("labelChooser")[0] as HTMLElement; + this._options = Core.extend( + { + forceSelection: false, + showWithoutSelection: false, + }, + options, + ) as LabelFormFieldOptions; + + this._input = document.createElement("input"); + this._input.type = "hidden"; + this._input.id = fieldId; + this._input.name = fieldId; + this._input.value = labelId; + this._formFieldContainer.appendChild(this._input); + + const labelChooserId = DomUtil.identify(this._labelChooser); + + // init dropdown + let dropdownMenu = UiDropdownSimple.getDropdownMenu(labelChooserId)!; + if (dropdownMenu === null) { + UiDropdownSimple.init(this._labelChooser.getElementsByClassName("dropdownToggle")[0] as HTMLElement); + dropdownMenu = UiDropdownSimple.getDropdownMenu(labelChooserId)!; + } + + let additionalOptionList: HTMLUListElement | null = null; + if (this._options.showWithoutSelection || !this._options.forceSelection) { + additionalOptionList = document.createElement("ul"); + dropdownMenu.appendChild(additionalOptionList); + + const dropdownDivider = document.createElement("li"); + dropdownDivider.classList.add("dropdownDivider"); + additionalOptionList.appendChild(dropdownDivider); + } + + if (this._options.showWithoutSelection) { + const listItem = document.createElement("li"); + listItem.dataset.labelId = "-1"; + this._blockScroll(listItem); + additionalOptionList!.appendChild(listItem); + + const span = document.createElement("span"); + listItem.appendChild(span); + + const label = document.createElement("span"); + label.classList.add("badge", "label"); + label.innerHTML = Language.get("wcf.label.withoutSelection"); + span.appendChild(label); + } + + if (!this._options.forceSelection) { + const listItem = document.createElement("li"); + listItem.dataset.labelId = "0"; + this._blockScroll(listItem); + additionalOptionList!.appendChild(listItem); + + const span = document.createElement("span"); + listItem.appendChild(span); + + const label = document.createElement("span"); + label.classList.add("badge", "label"); + label.innerHTML = Language.get("wcf.label.none"); + span.appendChild(label); + } + + dropdownMenu.querySelectorAll("li:not(.dropdownDivider)").forEach((listItem: HTMLElement) => { + listItem.addEventListener("click", (ev) => this._click(ev)); + + if (labelId) { + if (listItem.dataset.labelId === labelId) { + this._selectLabel(listItem); + } + } + }); + } + + _blockScroll(element: HTMLElement): void { + element.addEventListener("wheel", (ev) => ev.preventDefault(), { + passive: false, + }); + } + + _click(event: Event): void { + event.preventDefault(); + + this._selectLabel(event.currentTarget as HTMLElement); + } + + _selectLabel(label: HTMLElement): void { + // save label + let labelId = label.dataset.labelId; + if (!labelId) { + labelId = "0"; + } + + // replace button with currently selected label + const displayLabel = label.querySelector("span > span")!; + const button = this._labelChooser.querySelector(".dropdownToggle > span")!; + button.className = displayLabel.className; + button.textContent = displayLabel.textContent; + + this._input.value = labelId; + } +} + +Core.enableLegacyInheritance(Label); + +export = Label;