Convert `Ui/Color/Picker` to TypeScript

diff --git a/global.d.ts b/global.d.ts
index 1136bb7837b0621ff81b2e653a9153c75a0270dd..f4a54aca6760cf61e0e1c8705f513953ba011c3b 100644 (file)
--- 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 62eb6c3a952a3c81216e7d6bd79c4ba75f13ba87..3863b48bfad9cfdcb50775ecf4e5c42061bbb2e7 100644 (file)
--- 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 <http://opensource.org/licenses/lgpl-license.php>
  * @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 (file)
index 6f61f92..0000000
--- 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 <http://opensource.org/licenses/lgpl-license.php>
- * @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 (file)
index 0000000..53ebccc
--- /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 <http://opensource.org/licenses/lgpl-license.php>
+ * @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<ColorPickerOptions>) {
+    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;