Convert `Ui/DragAndDrop` to TypeScript

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/DragAndDrop.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/DragAndDrop.js
index da324138d4f167abea399b83237dc62b133beede..da50df4cd6b8b5afb65f7ff45858c0a4ca5164a9 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/DragAndDrop.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/DragAndDrop.js
@@ -2,37 +2,35 @@
  * Generic interface for drag and Drop file uploads.
  *
  * @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/DragAndDrop
  */
-define(['Core', 'EventHandler', 'WoltLabSuite/Core/Ui/Redactor/DragAndDrop'], function (Core, EventHandler, UiRedactorDragAndDrop) {
-    /**
-     * @exports     WoltLabSuite/Core/Ui/DragAndDrop
-     */
-    return {
-        /**
-         * @param       {Object}        options
-         */
-        register: function (options) {
-            var uuid = Core.getUuid();
-            options = Core.extend({
-                element: '',
-                elementId: '',
-                onDrop: function (data) {
-                    /* data: { file: File } */
-                },
-                onGlobalDrop: function (data) {
-                    /* data: { cancelDrop: boolean, event: DragEvent } */
-                }
-            });
-            EventHandler.add('com.woltlab.wcf.redactor2', 'dragAndDrop_' + options.elementId, options.onDrop);
-            EventHandler.add('com.woltlab.wcf.redactor2', 'dragAndDrop_globalDrop_' + options.elementId, options.onGlobalDrop);
-            UiRedactorDragAndDrop.init({
-                uuid: uuid,
-                $editor: [options.element],
-                $element: [{ id: options.elementId }]
-            });
-        }
-    };
+define(["require", "exports", "tslib", "../Core", "../Event/Handler", "./Redactor/DragAndDrop"], function (require, exports, tslib_1, Core, EventHandler, DragAndDrop_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.register = void 0;
+    Core = tslib_1.__importStar(Core);
+    EventHandler = tslib_1.__importStar(EventHandler);
+    function register(options) {
+        const uuid = Core.getUuid();
+        options = Core.extend({
+            element: null,
+            elementId: "",
+            onDrop: function (_data) {
+                /* data: { file: File } */
+            },
+            onGlobalDrop: function (_data) {
+                /* data: { cancelDrop: boolean, event: DragEvent } */
+            },
+        });
+        EventHandler.add("com.woltlab.wcf.redactor2", `dragAndDrop_${options.elementId}`, options.onDrop);
+        EventHandler.add("com.woltlab.wcf.redactor2", `dragAndDrop_globalDrop_${options.elementId}`, options.onGlobalDrop);
+        DragAndDrop_1.init({
+            uuid: uuid,
+            $editor: [options.element],
+            $element: [{ id: options.elementId }],
+        });
+    }
+    exports.register = register;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/DragAndDrop.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/DragAndDrop.js
deleted file mode 100644 (file)
index da32413..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/DragAndDrop.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Generic interface for drag and Drop file uploads.
- *
- * @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/DragAndDrop
- */
-define(['Core', 'EventHandler', 'WoltLabSuite/Core/Ui/Redactor/DragAndDrop'], function (Core, EventHandler, UiRedactorDragAndDrop) {
-    /**
-     * @exports     WoltLabSuite/Core/Ui/DragAndDrop
-     */
-    return {
-        /**
-         * @param       {Object}        options
-         */
-        register: function (options) {
-            var uuid = Core.getUuid();
-            options = Core.extend({
-                element: '',
-                elementId: '',
-                onDrop: function (data) {
-                    /* data: { file: File } */
-                },
-                onGlobalDrop: function (data) {
-                    /* data: { cancelDrop: boolean, event: DragEvent } */
-                }
-            });
-            EventHandler.add('com.woltlab.wcf.redactor2', 'dragAndDrop_' + options.elementId, options.onDrop);
-            EventHandler.add('com.woltlab.wcf.redactor2', 'dragAndDrop_globalDrop_' + options.elementId, options.onGlobalDrop);
-            UiRedactorDragAndDrop.init({
-                uuid: uuid,
-                $editor: [options.element],
-                $element: [{ id: options.elementId }]
-            });
-        }
-    };
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/DragAndDrop.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/DragAndDrop.ts
new file mode 100644 (file)
index 0000000..c9de86f
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/DragAndDrop.ts
@@ -0,0 +1,51 @@
+/**
+ * Generic interface for drag and Drop file uploads.
+ *
+ * @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/DragAndDrop
+ */
+
+import * as Core from "../Core";
+import * as EventHandler from "../Event/Handler";
+import { init, RedactorEditorLike } from "./Redactor/DragAndDrop";
+
+interface OnDropPayload {
+  file: File;
+}
+
+interface OnGlobalDropPayload {
+  cancelDrop: boolean;
+  event: DragEvent;
+}
+
+interface DragAndDropOptions {
+  element: HTMLElement;
+  elementId: string;
+  onDrop: (data: OnDropPayload) => void;
+  onGlobalDrop: (data: OnGlobalDropPayload) => void;
+}
+
+export function register(options: DragAndDropOptions): void {
+  const uuid = Core.getUuid();
+  options = Core.extend({
+    element: null,
+    elementId: "",
+    onDrop: function (_data: OnDropPayload) {
+      /* data: { file: File } */
+    },
+    onGlobalDrop: function (_data: OnGlobalDropPayload) {
+      /* data: { cancelDrop: boolean, event: DragEvent } */
+    },
+  }) as DragAndDropOptions;
+
+  EventHandler.add("com.woltlab.wcf.redactor2", `dragAndDrop_${options.elementId}`, options.onDrop);
+  EventHandler.add("com.woltlab.wcf.redactor2", `dragAndDrop_globalDrop_${options.elementId}`, options.onGlobalDrop);
+
+  init({
+    uuid: uuid,
+    $editor: [options.element],
+    $element: [{ id: options.elementId }],
+  } as RedactorEditorLike);
+}

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/DragAndDrop.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/DragAndDrop.ts
index 9fc5e8b5388de7298361dc579ed60f589d65a3e5..555abc4616ae703d4cffa6a658927e13403795c2 100644 (file)
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/DragAndDrop.ts
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/DragAndDrop.ts
@@ -14,7 +14,7 @@ import { RedactorEditor } from "./Editor";
 type Uuid = string;
 
 interface EditorData {
-  editor: RedactorEditor;
+  editor: RedactorEditor | RedactorEditorLike;
   element: HTMLElement | null;
 }
 
@@ -186,7 +186,7 @@ function setup() {
 /**
  * Initializes drag and drop support for provided editor instance.
  */
-export function init(editor: RedactorEditor): void {
+export function init(editor: RedactorEditor | RedactorEditorLike): void {
   if (!_didInit) {
     setup();
   }
@@ -196,3 +196,9 @@ export function init(editor: RedactorEditor): void {
     element: null,
   });
 }
+
+export interface RedactorEditorLike {
+  uuid: string;
+  $editor: HTMLElement[];
+  $element: HTMLElement[];
+}