From 5109989013b3317da4dde47463d8f66e5171dbb2 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 6 Nov 2020 19:18:23 +0100 Subject: [PATCH] Convert `Ui/DragAndDrop` to TypeScript --- .../js/WoltLabSuite/Core/Ui/DragAndDrop.js | 58 +++++++++---------- .../ts/WoltLabSuite/Core/Ui/DragAndDrop.js | 38 ------------ .../ts/WoltLabSuite/Core/Ui/DragAndDrop.ts | 51 ++++++++++++++++ .../Core/Ui/Redactor/DragAndDrop.ts | 10 +++- 4 files changed, 87 insertions(+), 70 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/DragAndDrop.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/DragAndDrop.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/DragAndDrop.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/DragAndDrop.js index da324138d4..da50df4cd6 100644 --- 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 * @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 index da324138d4..0000000000 --- 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 - * @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 index 0000000000..c9de86f700 --- /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 + * @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 9fc5e8b538..555abc4616 100644 --- 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[]; +} -- 2.20.1