From: Alexander Ebert Date: Fri, 6 Nov 2020 22:22:38 +0000 (+0100) Subject: Convert `Ui/Color/Picker` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~579^2~1 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=69ddfb2ab9ffef6ea6b86019ef073480f5e3d95b;p=GitHub%2FWoltLab%2FWCF.git Convert `Ui/Color/Picker` to TypeScript --- diff --git a/global.d.ts b/global.d.ts index 1136bb7837..f4a54aca67 100644 --- a/global.d.ts +++ b/global.d.ts @@ -23,6 +23,7 @@ declare global { WCF: any; bc_wcfDomUtil: typeof DomUtil; bc_wcfSimpleDropdown: typeof UiDropdownSimple; + __wcf_bc_colorPickerInit?: () => void; __wcf_bc_colorUtil: typeof ColorUtil; __wcf_bc_datePicker: typeof DatePicker; } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js index 62eb6c3a95..3863b48bfa 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js @@ -3,17 +3,18 @@ * guarantee the picker to be ready at the time of call. * * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH + * @copyright 2001-2019 WoltLab GmbH * @license GNU Lesser General Public License * @module WoltLabSuite/Core/Ui/Color/Picker */ -define(['Core'], function (Core) { +define(["require", "exports", "tslib", "../../Core"], function (require, exports, tslib_1, Core) { "use strict"; - var _marshal = function (element, options) { - if (typeof window.WCF === 'object' && typeof window.WCF.ColorPicker === 'function') { - _marshal = function (element, options) { - var picker = new window.WCF.ColorPicker(element); - if (typeof options.callbackSubmit === 'function') { + Core = tslib_1.__importStar(Core); + let _marshal = (element, options) => { + if (typeof window.WCF === "object" && typeof window.WCF.ColorPicker === "function") { + _marshal = (element, options) => { + const picker = new window.WCF.ColorPicker(element); + if (typeof options.callbackSubmit === "function") { picker.setCallbackSubmit(options.callbackSubmit); } return picker; @@ -22,8 +23,8 @@ define(['Core'], function (Core) { } else { if (_queue.length === 0) { - window.__wcf_bc_colorPickerInit = function () { - _queue.forEach(function (data) { + window.__wcf_bc_colorPickerInit = () => { + _queue.forEach((data) => { _marshal(data[0], data[1]); }); window.__wcf_bc_colorPickerInit = undefined; @@ -33,38 +34,30 @@ define(['Core'], function (Core) { _queue.push([element, options]); } }; - var _queue = []; - /** - * @constructor - */ - function UiColorPicker(element, options) { this.init(element, options); } - UiColorPicker.prototype = { + let _queue = []; + class UiColorPicker { /** * Initializes a new color picker instance. This is actually just a wrapper that does * not guarantee the picker to be ready at the time of call. - * - * @param {Element} element input element - * @param {Object} options list of initialization options */ - init: function (element, options) { + constructor(element, options) { if (!(element instanceof Element)) { throw new TypeError("Expected a valid DOM element, use `UiColorPicker.fromSelector()` if you want to use a CSS selector."); } - this._options = Core.extend({ - callbackSubmit: null - }, options); - _marshal(element, this._options); + options = Core.extend({ + callbackSubmit: null, + }, options || {}); + _marshal(element, options); } - }; - /** - * Initializes a color picker for all input elements matching the given selector. - * - * @param {string} selector CSS selector - */ - UiColorPicker.fromSelector = function (selector) { - elBySelAll(selector, undefined, function (element) { - new UiColorPicker(element); - }); - }; + /** + * Initializes a color picker for all input elements matching the given selector. + */ + static fromSelector(selector) { + document.querySelectorAll(selector).forEach((element) => { + new UiColorPicker(element); + }); + } + } + Core.enableLegacyInheritance(UiColorPicker); return UiColorPicker; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Color/Picker.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Color/Picker.js deleted file mode 100644 index 6f61f92269..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Color/Picker.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Wrapper class to provide color picker support. Constructing a new object does not - * guarantee the picker to be ready at the time of call. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Color/Picker - */ -define(['Core'], function (Core) { - "use strict"; - - var _marshal = function (element, options) { - if (typeof window.WCF === 'object' && typeof window.WCF.ColorPicker === 'function') { - _marshal = function (element, options) { - var picker = new window.WCF.ColorPicker(element); - - if (typeof options.callbackSubmit === 'function') { - picker.setCallbackSubmit(options.callbackSubmit); - } - - return picker; - }; - - return _marshal(element, options); - } - else { - if (_queue.length === 0) { - window.__wcf_bc_colorPickerInit = function () { - _queue.forEach(function (data) { - _marshal(data[0], data[1]); - }); - - window.__wcf_bc_colorPickerInit = undefined; - _queue = []; - }; - } - - _queue.push([element, options]); - } - }; - var _queue = []; - - /** - * @constructor - */ - function UiColorPicker(element, options) { this.init(element, options); } - UiColorPicker.prototype = { - /** - * Initializes a new color picker instance. This is actually just a wrapper that does - * not guarantee the picker to be ready at the time of call. - * - * @param {Element} element input element - * @param {Object} options list of initialization options - */ - init: function (element, options) { - if (!(element instanceof Element)) { - throw new TypeError("Expected a valid DOM element, use `UiColorPicker.fromSelector()` if you want to use a CSS selector."); - } - - this._options = Core.extend({ - callbackSubmit: null - }, options); - - _marshal(element, this._options); - } - }; - - /** - * Initializes a color picker for all input elements matching the given selector. - * - * @param {string} selector CSS selector - */ - UiColorPicker.fromSelector = function (selector) { - elBySelAll(selector, undefined, function (element) { - new UiColorPicker(element); - }); - }; - - return UiColorPicker; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Color/Picker.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Color/Picker.ts new file mode 100644 index 0000000000..53ebccc063 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Color/Picker.ts @@ -0,0 +1,91 @@ +/** + * Wrapper class to provide color picker support. Constructing a new object does not + * guarantee the picker to be ready at the time of call. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Color/Picker + */ + +import * as Core from "../../Core"; + +let _marshal = (element: HTMLElement, options: ColorPickerOptions) => { + if (typeof window.WCF === "object" && typeof window.WCF.ColorPicker === "function") { + _marshal = (element, options) => { + const picker = new window.WCF.ColorPicker(element); + + if (typeof options.callbackSubmit === "function") { + picker.setCallbackSubmit(options.callbackSubmit); + } + + return picker; + }; + + return _marshal(element, options); + } else { + if (_queue.length === 0) { + window.__wcf_bc_colorPickerInit = () => { + _queue.forEach((data) => { + _marshal(data[0], data[1]); + }); + + window.__wcf_bc_colorPickerInit = undefined; + _queue = []; + }; + } + + _queue.push([element, options]); + } +}; + +type QueueItem = [HTMLElement, ColorPickerOptions]; + +let _queue: QueueItem[] = []; + +interface CallbackSubmitPayload { + r: number; + g: number; + b: number; + a: number; +} + +interface ColorPickerOptions { + callbackSubmit: (data: CallbackSubmitPayload) => void; +} + +class UiColorPicker { + /** + * Initializes a new color picker instance. This is actually just a wrapper that does + * not guarantee the picker to be ready at the time of call. + */ + constructor(element: HTMLElement, options?: Partial) { + if (!(element instanceof Element)) { + throw new TypeError( + "Expected a valid DOM element, use `UiColorPicker.fromSelector()` if you want to use a CSS selector.", + ); + } + + options = Core.extend( + { + callbackSubmit: null, + }, + options || {}, + ); + + _marshal(element, options as ColorPickerOptions); + } + + /** + * Initializes a color picker for all input elements matching the given selector. + */ + static fromSelector(selector: string): void { + document.querySelectorAll(selector).forEach((element: HTMLElement) => { + new UiColorPicker(element); + }); + } +} + +Core.enableLegacyInheritance(UiColorPicker); + +export = UiColorPicker;