From: Matthias Schmidt Date: Tue, 5 Jan 2021 17:42:21 +0000 (+0100) Subject: Convert `Media/Clipboard` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~461^2~11 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=83e6dc3648c0ef642415670ed2ab255d9f59f9e0;p=GitHub%2FWoltLab%2FWCF.git Convert `Media/Clipboard` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Clipboard.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Clipboard.js index 12499d4fcf..9466aa188c 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Clipboard.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Clipboard.js @@ -1,138 +1,107 @@ /** * Initializes modules required for media clipboard. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Media/Clipboard + * @author Matthias Schmidt + * @copyright 2001-2021 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Media/Clipboard */ -define([ - 'Ajax', - 'Dom/ChangeListener', - 'EventHandler', - 'Language', - 'Ui/Dialog', - 'Ui/Notification', - 'WoltLabSuite/Core/Controller/Clipboard', - 'WoltLabSuite/Core/Media/Editor', - 'WoltLabSuite/Core/Media/List/Upload' -], function (Ajax, DomChangeListener, EventHandler, Language, UiDialog, UiNotification, Clipboard, MediaEditor, MediaListUpload) { +define(["require", "exports", "tslib", "../Controller/Clipboard", "../Ui/Notification", "../Ui/Dialog", "../Event/Handler", "../Language", "../Ajax"], function (require, exports, tslib_1, Clipboard, UiNotification, UiDialog, EventHandler, Language, Ajax) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - init: function () { }, - _ajaxSetup: function () { }, - _ajaxSuccess: function () { }, - _clipboardAction: function () { }, - _dialogSetup: function () { }, - _edit: function () { }, - _setCategory: function () { } - }; - return Fake; - } - var _clipboardObjectIds = []; - var _mediaManager; - /** - * @exports WoltLabSuite/Core/Media/Clipboard - */ - return { - init: function (pageClassName, hasMarkedItems, mediaManager) { - Clipboard.setup({ - hasMarkedItems: hasMarkedItems, - pageClassName: pageClassName - }); - _mediaManager = mediaManager; - EventHandler.add('com.woltlab.wcf.clipboard', 'com.woltlab.wcf.media', this._clipboardAction.bind(this)); - }, - /** - * Returns the data used to setup the AJAX request object. - * - * @return {object} setup data - */ - _ajaxSetup: function () { + Object.defineProperty(exports, "__esModule", { value: true }); + exports.init = void 0; + Clipboard = tslib_1.__importStar(Clipboard); + UiNotification = tslib_1.__importStar(UiNotification); + UiDialog = tslib_1.__importStar(UiDialog); + EventHandler = tslib_1.__importStar(EventHandler); + Language = tslib_1.__importStar(Language); + Ajax = tslib_1.__importStar(Ajax); + let _mediaManager; + class MediaClipboard { + _ajaxSetup() { return { data: { - className: 'wcf\\data\\media\\MediaAction' - } + className: "wcf\\data\\media\\MediaAction", + }, }; - }, - /** - * Handles successful AJAX request. - * - * @param {object} data response data - */ - _ajaxSuccess: function (data) { + } + _ajaxSuccess(data) { switch (data.actionName) { - case 'getSetCategoryDialog': + case "getSetCategoryDialog": UiDialog.open(this, data.returnValues.template); break; - case 'setCategory': + case "setCategory": UiDialog.close(this); UiNotification.show(); Clipboard.reload(); break; } - }, - /** - * Returns the data used to setup the dialog. - * - * @return {object} setup data - */ - _dialogSetup: function () { + } + _dialogSetup() { return { - id: 'mediaSetCategoryDialog', + id: "mediaSetCategoryDialog", options: { - onSetup: function (content) { - elBySel('button', content).addEventListener('click', function (event) { + onSetup: (content) => { + content.querySelector("button").addEventListener("click", (event) => { event.preventDefault(); - this._setCategory(~~elBySel('select[name="categoryID"]', content).value); - event.currentTarget.disabled = true; - }.bind(this)); - }.bind(this), - title: Language.get('wcf.media.setCategory') + const category = content.querySelector('select[name="categoryID"]'); + setCategory(~~category.value); + const target = event.currentTarget; + target.disabled = true; + }); + }, + title: Language.get("wcf.media.setCategory"), }, - source: null + source: null, }; - }, - /** - * Handles successful clipboard actions. - * - * @param {object} actionData - */ - _clipboardAction: function (actionData) { - var mediaIds = actionData.data.parameters.objectIDs; - switch (actionData.data.actionName) { - case 'com.woltlab.wcf.media.delete': - // only consider events if the action has been executed - if (actionData.responseData !== null) { - _mediaManager.clipboardDeleteMedia(mediaIds); - } - break; - case 'com.woltlab.wcf.media.insert': - _mediaManager.clipboardInsertMedia(mediaIds); - break; - case 'com.woltlab.wcf.media.setCategory': - _clipboardObjectIds = mediaIds; - Ajax.api(this, { - actionName: 'getSetCategoryDialog' - }); - break; - } - }, - /** - * Sets the category of the marked media files. - * - * @param {int} categoryID selected category id - */ - _setCategory: function (categoryID) { - Ajax.api(this, { - actionName: 'setCategory', - objectIDs: _clipboardObjectIds, - parameters: { - categoryID: categoryID + } + } + const ajax = new MediaClipboard(); + let clipboardObjectIds = []; + /** + * Handles successful clipboard actions. + */ + function clipboardAction(actionData) { + const mediaIds = actionData.data.parameters.objectIDs; + switch (actionData.data.actionName) { + case "com.woltlab.wcf.media.delete": + // only consider events if the action has been executed + if (actionData.responseData !== null) { + _mediaManager.clipboardDeleteMedia(mediaIds); } - }); + break; + case "com.woltlab.wcf.media.insert": { + const mediaManagerEditor = _mediaManager; + mediaManagerEditor.clipboardInsertMedia(mediaIds); + break; + } + case "com.woltlab.wcf.media.setCategory": + clipboardObjectIds = mediaIds; + Ajax.api(ajax, { + actionName: "getSetCategoryDialog", + }); + break; } - }; + } + /** + * Sets the category of the marked media files. + */ + function setCategory(categoryID) { + Ajax.api(ajax, { + actionName: "setCategory", + objectIDs: clipboardObjectIds, + parameters: { + categoryID: categoryID, + }, + }); + } + function init(pageClassName, hasMarkedItems, mediaManager) { + Clipboard.setup({ + hasMarkedItems: hasMarkedItems, + pageClassName: pageClassName, + }); + _mediaManager = mediaManager; + EventHandler.add("com.woltlab.wcf.clipboard", "com.woltlab.wcf.media", (data) => clipboardAction(data)); + } + exports.init = init; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.js deleted file mode 100644 index f21ec484e9..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.js +++ /dev/null @@ -1,173 +0,0 @@ -/** - * Initializes modules required for media clipboard. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Media/Clipboard - */ -define([ - 'Ajax', - 'Dom/ChangeListener', - 'EventHandler', - 'Language', - 'Ui/Dialog', - 'Ui/Notification', - 'WoltLabSuite/Core/Controller/Clipboard', - 'WoltLabSuite/Core/Media/Editor', - 'WoltLabSuite/Core/Media/List/Upload' - ], - function( - Ajax, - DomChangeListener, - EventHandler, - Language, - UiDialog, - UiNotification, - Clipboard, - MediaEditor, - MediaListUpload - ) { - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - init: function() {}, - _ajaxSetup: function() {}, - _ajaxSuccess: function() {}, - _clipboardAction: function() {}, - _dialogSetup: function() {}, - _edit: function() {}, - _setCategory: function() {} - }; - return Fake; - } - - var _clipboardObjectIds = []; - var _mediaManager; - - /** - * @exports WoltLabSuite/Core/Media/Clipboard - */ - return { - init: function(pageClassName, hasMarkedItems, mediaManager) { - Clipboard.setup({ - hasMarkedItems: hasMarkedItems, - pageClassName: pageClassName - }); - - _mediaManager = mediaManager; - - EventHandler.add('com.woltlab.wcf.clipboard', 'com.woltlab.wcf.media', this._clipboardAction.bind(this)); - }, - - /** - * Returns the data used to setup the AJAX request object. - * - * @return {object} setup data - */ - _ajaxSetup: function() { - return { - data: { - className: 'wcf\\data\\media\\MediaAction' - } - } - }, - - /** - * Handles successful AJAX request. - * - * @param {object} data response data - */ - _ajaxSuccess: function(data) { - switch (data.actionName) { - case 'getSetCategoryDialog': - UiDialog.open(this, data.returnValues.template); - - break; - - case 'setCategory': - UiDialog.close(this); - - UiNotification.show(); - - Clipboard.reload(); - - break; - } - }, - - /** - * Returns the data used to setup the dialog. - * - * @return {object} setup data - */ - _dialogSetup: function() { - return { - id: 'mediaSetCategoryDialog', - options: { - onSetup: function(content) { - elBySel('button', content).addEventListener('click', function(event) { - event.preventDefault(); - - this._setCategory(~~elBySel('select[name="categoryID"]', content).value); - - event.currentTarget.disabled = true; - }.bind(this)); - }.bind(this), - title: Language.get('wcf.media.setCategory') - }, - source: null - } - }, - - /** - * Handles successful clipboard actions. - * - * @param {object} actionData - */ - _clipboardAction: function(actionData) { - var mediaIds = actionData.data.parameters.objectIDs; - - switch (actionData.data.actionName) { - case 'com.woltlab.wcf.media.delete': - // only consider events if the action has been executed - if (actionData.responseData !== null) { - _mediaManager.clipboardDeleteMedia(mediaIds); - } - - break; - - case 'com.woltlab.wcf.media.insert': - _mediaManager.clipboardInsertMedia(mediaIds); - - break; - - case 'com.woltlab.wcf.media.setCategory': - _clipboardObjectIds = mediaIds; - - Ajax.api(this, { - actionName: 'getSetCategoryDialog' - }); - - break; - } - }, - - /** - * Sets the category of the marked media files. - * - * @param {int} categoryID selected category id - */ - _setCategory: function(categoryID) { - Ajax.api(this, { - actionName: 'setCategory', - objectIDs: _clipboardObjectIds, - parameters: { - categoryID: categoryID - } - }); - } - } -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.ts new file mode 100644 index 0000000000..a6c281d761 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.ts @@ -0,0 +1,141 @@ +/** + * Initializes modules required for media clipboard. + * + * @author Matthias Schmidt + * @copyright 2001-2021 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Media/Clipboard + */ + +import MediaManager from "./Manager/Base"; +import MediaManagerEditor from "./Manager/Editor"; +import * as Clipboard from "../Controller/Clipboard"; +import * as UiNotification from "../Ui/Notification"; +import * as UiDialog from "../Ui/Dialog"; +import * as EventHandler from "../Event/Handler"; +import * as Language from "../Language"; +import * as Ajax from "../Ajax"; +import { AjaxCallbackObject, AjaxCallbackSetup } from "../Ajax/Data"; +import { DialogCallbackObject, DialogCallbackSetup } from "../Ui/Dialog/Data"; + +let _mediaManager: MediaManager; + +class MediaClipboard implements AjaxCallbackObject, DialogCallbackObject { + public _ajaxSetup(): ReturnType { + return { + data: { + className: "wcf\\data\\media\\MediaAction", + }, + }; + } + + public _ajaxSuccess(data): void { + switch (data.actionName) { + case "getSetCategoryDialog": + UiDialog.open(this, data.returnValues.template); + + break; + + case "setCategory": + UiDialog.close(this); + + UiNotification.show(); + + Clipboard.reload(); + + break; + } + } + + public _dialogSetup(): ReturnType { + return { + id: "mediaSetCategoryDialog", + options: { + onSetup: (content) => { + content.querySelector("button")!.addEventListener("click", (event) => { + event.preventDefault(); + + const category = content.querySelector('select[name="categoryID"]') as HTMLSelectElement; + setCategory(~~category.value); + + const target = event.currentTarget as HTMLButtonElement; + target.disabled = true; + }); + }, + title: Language.get("wcf.media.setCategory"), + }, + source: null, + }; + } +} + +const ajax = new MediaClipboard(); + +let clipboardObjectIds: number[] = []; + +type ClipboardActionData = { + data: { + actionName: string; + parameters: { + objectIDs: number[]; + }; + }; + responseData: null; +}; + +/** + * Handles successful clipboard actions. + */ +function clipboardAction(actionData: ClipboardActionData): void { + const mediaIds = actionData.data.parameters.objectIDs; + + switch (actionData.data.actionName) { + case "com.woltlab.wcf.media.delete": + // only consider events if the action has been executed + if (actionData.responseData !== null) { + _mediaManager.clipboardDeleteMedia(mediaIds); + } + + break; + + case "com.woltlab.wcf.media.insert": { + const mediaManagerEditor = _mediaManager as MediaManagerEditor; + mediaManagerEditor.clipboardInsertMedia(mediaIds); + + break; + } + + case "com.woltlab.wcf.media.setCategory": + clipboardObjectIds = mediaIds; + + Ajax.api(ajax, { + actionName: "getSetCategoryDialog", + }); + + break; + } +} + +/** + * Sets the category of the marked media files. + */ +function setCategory(categoryID: number) { + Ajax.api(ajax, { + actionName: "setCategory", + objectIDs: clipboardObjectIds, + parameters: { + categoryID: categoryID, + }, + }); +} + +export function init(pageClassName: string, hasMarkedItems: boolean, mediaManager: MediaManager): void { + Clipboard.setup({ + hasMarkedItems: hasMarkedItems, + pageClassName: pageClassName, + }); + + _mediaManager = mediaManager; + + EventHandler.add("com.woltlab.wcf.clipboard", "com.woltlab.wcf.media", (data) => clipboardAction(data)); +}