From e9ab75d3b083184395466681d57c25044d826cde Mon Sep 17 00:00:00 2001 From: Matthias Schmidt Date: Sat, 12 Dec 2020 16:03:08 +0100 Subject: [PATCH] Convert `Form/Builder/Field/Dependency/Abstract` to TypeScript --- .../Form/Builder/Field/Dependency/Abstract.js | 91 +++++++-------- .../Form/Builder/Field/Dependency/Abstract.js | 107 ------------------ .../Form/Builder/Field/Dependency/Abstract.ts | 105 +++++++++++++++++ 3 files changed, 145 insertions(+), 158 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.js index c8b71fddce..a510097ffc 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.js @@ -1,78 +1,64 @@ /** * Abstract implementation of a form field dependency. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract - * @since 5.2 + * @author Matthias Schmidt + * @copyright 2001-2020 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract + * @since 5.2 */ -define(['./Manager'], function (DependencyManager) { +define(["require", "exports", "tslib", "./Manager", "../../../../Core"], function (require, exports, tslib_1, Manager_1, Core) { "use strict"; - /** - * @constructor - */ - function Abstract(dependentElementId, fieldId) { - this.init(dependentElementId, fieldId); - } - ; - Abstract.prototype = { + Manager_1 = tslib_1.__importDefault(Manager_1); + Core = tslib_1.__importStar(Core); + class FormBuilderFormFieldDependency { + constructor(dependentElementId, fieldId) { + this.init(dependentElementId, fieldId); + } /** - * Checks if the dependency is met. - * - * @abstract + * Returns `true` if the dependency is met. */ - checkDependency: function () { + checkDependency() { throw new Error("Missing implementation of WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.checkDependency!"); - }, + } /** * Return the node whose availability depends on the value of a field. - * - * @return {HtmlElement} dependent node */ - getDependentNode: function () { + getDependentNode() { return this._dependentElement; - }, + } /** * Returns the field the availability of the element dependents on. - * - * @return {HtmlElement} field controlling element availability */ - getField: function () { + getField() { return this._field; - }, + } /** - * Returns all fields requiring `change` event listeners for this - * dependency to be properly resolved. - * - * @return {HtmlElement[]} fields to register event listeners on + * Returns all fields requiring event listeners for this dependency to be properly resolved. */ - getFields: function () { + getFields() { return this._fields; - }, + } /** * Initializes the new dependency object. - * - * @param {string} dependentElementId id of the (container of the) dependent element - * @param {string} fieldId id of the field controlling element availability - * - * @throws {Error} if either depenent element id or field id are invalid */ - init: function (dependentElementId, fieldId) { - this._dependentElement = elById(dependentElementId); + init(dependentElementId, fieldId) { + this._dependentElement = document.getElementById(dependentElementId); if (this._dependentElement === null) { throw new Error("Unknown dependent element with container id '" + dependentElementId + "Container'."); } - this._field = elById(fieldId); + this._field = document.getElementById(fieldId); if (this._field === null) { this._fields = []; - elBySelAll('input[type=radio][name=' + fieldId + ']', undefined, function (field) { + document.querySelectorAll("input[type=radio][name=" + fieldId + "]").forEach((field) => { this._fields.push(field); - }.bind(this)); + }); if (!this._fields.length) { - elBySelAll('input[type=checkbox][name="' + fieldId + '[]"]', undefined, function (field) { + document + .querySelectorAll('input[type=checkbox][name="' + fieldId + '[]"]') + .forEach((field) => { this._fields.push(field); - }.bind(this)); + }); if (!this._fields.length) { throw new Error("Unknown field with id '" + fieldId + "'."); } @@ -80,17 +66,20 @@ define(['./Manager'], function (DependencyManager) { } else { this._fields = [this._field]; - // handle special case of boolean form fields that have to form fields - if (this._field.tagName === 'INPUT' && this._field.type === 'radio' && elData(this._field, 'no-input-id') !== '') { - this._noField = elById(elData(this._field, 'no-input-id')); + // Handle special case of boolean form fields that have two form fields. + if (this._field.tagName === "INPUT" && + this._field.type === "radio" && + this._field.dataset.noInputId !== "") { + this._noField = document.getElementById(this._field.dataset.noInputId); if (this._noField === null) { throw new Error("Cannot find 'no' input field for input field '" + fieldId + "'"); } this._fields.push(this._noField); } } - DependencyManager.addDependency(this); + Manager_1.default.addDependency(this); } - }; - return Abstract; + } + Core.enableLegacyInheritance(FormBuilderFormFieldDependency); + return FormBuilderFormFieldDependency; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.js deleted file mode 100644 index 62bb5e363e..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.js +++ /dev/null @@ -1,107 +0,0 @@ -/** - * Abstract implementation of a form field dependency. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract - * @since 5.2 - */ -define(['./Manager'], function(DependencyManager) { - "use strict"; - - /** - * @constructor - */ - function Abstract(dependentElementId, fieldId) { - this.init(dependentElementId, fieldId); - }; - Abstract.prototype = { - /** - * Checks if the dependency is met. - * - * @abstract - */ - checkDependency: function() { - throw new Error("Missing implementation of WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.checkDependency!"); - }, - - /** - * Return the node whose availability depends on the value of a field. - * - * @return {HtmlElement} dependent node - */ - getDependentNode: function() { - return this._dependentElement; - }, - - /** - * Returns the field the availability of the element dependents on. - * - * @return {HtmlElement} field controlling element availability - */ - getField: function() { - return this._field; - }, - - /** - * Returns all fields requiring `change` event listeners for this - * dependency to be properly resolved. - * - * @return {HtmlElement[]} fields to register event listeners on - */ - getFields: function() { - return this._fields; - }, - - /** - * Initializes the new dependency object. - * - * @param {string} dependentElementId id of the (container of the) dependent element - * @param {string} fieldId id of the field controlling element availability - * - * @throws {Error} if either depenent element id or field id are invalid - */ - init: function(dependentElementId, fieldId) { - this._dependentElement = elById(dependentElementId); - if (this._dependentElement === null) { - throw new Error("Unknown dependent element with container id '" + dependentElementId + "Container'."); - } - - this._field = elById(fieldId); - if (this._field === null) { - this._fields = []; - elBySelAll('input[type=radio][name=' + fieldId + ']', undefined, function(field) { - this._fields.push(field); - }.bind(this)); - - if (!this._fields.length) { - elBySelAll('input[type=checkbox][name="' + fieldId + '[]"]', undefined, function(field) { - this._fields.push(field); - }.bind(this)); - - if (!this._fields.length) { - throw new Error("Unknown field with id '" + fieldId + "'."); - } - } - } - else { - this._fields = [this._field]; - - // handle special case of boolean form fields that have to form fields - if (this._field.tagName === 'INPUT' && this._field.type === 'radio' && elData(this._field, 'no-input-id') !== '') { - this._noField = elById(elData(this._field, 'no-input-id')); - if (this._noField === null) { - throw new Error("Cannot find 'no' input field for input field '" + fieldId + "'"); - } - - this._fields.push(this._noField); - } - } - - DependencyManager.addDependency(this); - } - }; - - return Abstract; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.ts new file mode 100644 index 0000000000..b6d6b708c2 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.ts @@ -0,0 +1,105 @@ +/** + * Abstract implementation of a form field dependency. + * + * @author Matthias Schmidt + * @copyright 2001-2020 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract + * @since 5.2 + */ + +import Manager from "./Manager"; +import * as Core from "../../../../Core"; + +abstract class FormBuilderFormFieldDependency { + protected _dependentElement: HTMLElement; + protected _field: HTMLElement; + protected _fields: HTMLElement[]; + protected _noField?: HTMLInputElement; + + constructor(dependentElementId: string, fieldId: string) { + this.init(dependentElementId, fieldId); + } + + /** + * Returns `true` if the dependency is met. + */ + public checkDependency(): boolean { + throw new Error( + "Missing implementation of WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract.checkDependency!", + ); + } + + /** + * Return the node whose availability depends on the value of a field. + */ + public getDependentNode(): HTMLElement { + return this._dependentElement; + } + + /** + * Returns the field the availability of the element dependents on. + */ + public getField(): HTMLElement { + return this._field; + } + + /** + * Returns all fields requiring event listeners for this dependency to be properly resolved. + */ + public getFields(): HTMLElement[] { + return this._fields; + } + + /** + * Initializes the new dependency object. + */ + protected init(dependentElementId: string, fieldId: string): void { + this._dependentElement = document.getElementById(dependentElementId)!; + if (this._dependentElement === null) { + throw new Error("Unknown dependent element with container id '" + dependentElementId + "Container'."); + } + + this._field = document.getElementById(fieldId)!; + if (this._field === null) { + this._fields = []; + document.querySelectorAll("input[type=radio][name=" + fieldId + "]").forEach((field: HTMLInputElement) => { + this._fields.push(field); + }); + + if (!this._fields.length) { + document + .querySelectorAll('input[type=checkbox][name="' + fieldId + '[]"]') + .forEach((field: HTMLInputElement) => { + this._fields.push(field); + }); + + if (!this._fields.length) { + throw new Error("Unknown field with id '" + fieldId + "'."); + } + } + } else { + this._fields = [this._field]; + + // Handle special case of boolean form fields that have two form fields. + if ( + this._field.tagName === "INPUT" && + (this._field as HTMLInputElement).type === "radio" && + this._field.dataset.noInputId !== "" + ) { + this._noField = document.getElementById(this._field.dataset.noInputId!)! as HTMLInputElement; + if (this._noField === null) { + throw new Error("Cannot find 'no' input field for input field '" + fieldId + "'"); + } + + this._fields.push(this._noField); + } + } + + Manager.addDependency(this); + } +} + +Core.enableLegacyInheritance(FormBuilderFormFieldDependency); + +export = FormBuilderFormFieldDependency; -- 2.20.1