From: Matthias Schmidt Date: Tue, 5 Jan 2021 17:43:41 +0000 (+0100) Subject: Convert `Controller/Media/List` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~461^2~5 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c095abcd168601975366685c683bd31daa888fc8;p=GitHub%2FWoltLab%2FWCF.git Convert `Controller/Media/List` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Media/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Media/List.js index 6c49c2c1ca..ce8f99d493 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Media/List.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Media/List.js @@ -1,135 +1,108 @@ /** * Initializes modules required for media list view. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Controller/Media/List + * @author Matthias Schmidt + * @copyright 2001-2021 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Controller/Media/List */ -define([ - 'Dom/ChangeListener', - 'EventHandler', - 'WoltLabSuite/Core/Controller/Clipboard', - 'WoltLabSuite/Core/Media/Clipboard', - 'WoltLabSuite/Core/Media/Editor', - 'WoltLabSuite/Core/Media/List/Upload' -], function (DomChangeListener, EventHandler, Clipboard, MediaClipboard, MediaEditor, MediaListUpload) { +define(["require", "exports", "tslib", "../../Media/List/Upload", "../../Media/Clipboard", "../../Event/Handler", "../../Media/Editor", "../../Dom/Change/Listener", "../../Controller/Clipboard"], function (require, exports, tslib_1, Upload_1, MediaClipboard, EventHandler, Editor_1, DomChangeListener, Clipboard) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - init: function () { }, - _addButtonEventListeners: function () { }, - _deleteCallback: function () { }, - _deleteMedia: function (mediaIds) { }, - _edit: function () { } - }; - return Fake; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.init = void 0; + Upload_1 = tslib_1.__importDefault(Upload_1); + MediaClipboard = tslib_1.__importStar(MediaClipboard); + EventHandler = tslib_1.__importStar(EventHandler); + Editor_1 = tslib_1.__importDefault(Editor_1); + DomChangeListener = tslib_1.__importStar(DomChangeListener); + Clipboard = tslib_1.__importStar(Clipboard); + const _mediaEditor = new Editor_1.default({ + _editorSuccess: function (media, oldCategoryId) { + if (media.categoryID != oldCategoryId) { + window.setTimeout(function () { + window.location.reload(); + }, 500); + } + }, + }); + const _tableBody = document.getElementById("mediaListTableBody"); + let _upload; + function init(options) { + options = options || {}; + _upload = new Upload_1.default("uploadButton", "mediaListTableBody", { + categoryId: options.categoryId, + multiple: true, + elementTagSize: 48, + }); + MediaClipboard.init("wcf\\acp\\page\\MediaListPage", options.hasMarkedItems || false, { + clipboardDeleteMedia: (mediaIds) => clipboardDeleteMedia(mediaIds), + }); + EventHandler.add("com.woltlab.wcf.media.upload", "removedErroneousUploadRow", () => deleteCallback()); + // eslint-disable-next-line + //@ts-ignore + var deleteAction = new WCF.Action.Delete("wcf\\data\\media\\MediaAction", ".jsMediaRow"); + deleteAction.setCallback(deleteCallback); + addButtonEventListeners(); + DomChangeListener.add("WoltLabSuite/Core/Controller/Media/List", () => addButtonEventListeners()); + EventHandler.add("com.woltlab.wcf.media.upload", "success", (data) => openEditorAfterUpload(data)); } - var _mediaEditor; - var _tableBody = elById('mediaListTableBody'); - var _clipboardObjectIds = []; - var _upload; + exports.init = init; /** - * @exports WoltLabSuite/Core/Controller/Media/List + * Adds the `click` event listeners to the media edit icons in new media table rows. */ - return { - init: function (options) { - options = options || {}; - _upload = new MediaListUpload('uploadButton', 'mediaListTableBody', { - categoryId: options.categoryId, - multiple: true, - elementTagSize: 48 - }); - MediaClipboard.init('wcf\\acp\\page\\MediaListPage', options.hasMarkedItems || false, this); - EventHandler.add('com.woltlab.wcf.media.upload', 'removedErroneousUploadRow', this._deleteCallback.bind(this)); - var deleteAction = new WCF.Action.Delete('wcf\\data\\media\\MediaAction', '.jsMediaRow'); - deleteAction.setCallback(this._deleteCallback); - _mediaEditor = new MediaEditor({ - _editorSuccess: function (media, oldCategoryId) { - if (media.categoryID != oldCategoryId) { - window.setTimeout(function () { - window.location.reload(); - }, 500); - } - } - }); - this._addButtonEventListeners(); - DomChangeListener.add('WoltLabSuite/Core/Controller/Media/List', this._addButtonEventListeners.bind(this)); - EventHandler.add('com.woltlab.wcf.media.upload', 'success', this._openEditorAfterUpload.bind(this)); - }, - /** - * Adds the `click` event listeners to the media edit icons in - * new media table rows. - */ - _addButtonEventListeners: function () { - var buttons = elByClass('jsMediaEditButton', _tableBody), button; - while (buttons.length) { - button = buttons[0]; - button.classList.remove('jsMediaEditButton'); - button.addEventListener('click', this._edit.bind(this)); - } - }, - /** - * Is triggered after media files have been deleted using the delete icon. - * - * @param {int[]?} objectIds - */ - _deleteCallback: function (objectIds) { - var tableRowCount = elByTag('tr', _tableBody).length; - if (objectIds.length === undefined) { - if (!tableRowCount) { - window.location.reload(); - } - } - else if (objectIds.length === tableRowCount) { - // table is empty, reload page + function addButtonEventListeners() { + Array.from(_tableBody.getElementsByClassName("jsMediaEditButton")).forEach((button) => { + button.classList.remove("jsMediaEditButton"); + button.addEventListener("click", (ev) => edit(ev)); + }); + } + /** + * Is triggered after media files have been deleted using the delete icon. + */ + function deleteCallback(objectIds) { + var tableRowCount = _tableBody.getElementsByTagName("tr").length; + if (objectIds === undefined) { + if (!tableRowCount) { window.location.reload(); } - else { - Clipboard.reload.bind(Clipboard); - } - }, - /** - * Is called when a media edit icon is clicked. - * - * @param {Event} event - */ - _edit: function (event) { - _mediaEditor.edit(elData(event.currentTarget, 'object-id')); - }, - /** - * Opens the media editor after uploading a single file. - * - * @param {object} data upload event data - * @since 5.2 - */ - _openEditorAfterUpload: function (data) { - if (data.upload === _upload && !data.isMultiFileUpload && !_upload.hasPendingUploads()) { - var keys = Object.keys(data.media); - if (keys.length) { - _mediaEditor.edit(data.media[keys[0]]); - } - } - }, - /** - * Is called after the media files with the given ids have been deleted via clipboard. - * - * @param {int[]} mediaIds ids of deleted media files - */ - clipboardDeleteMedia: function (mediaIds) { - var mediaRows = elByClass('jsMediaRow'); - for (var i = 0; i < mediaRows.length; i++) { - var media = mediaRows[i]; - var mediaID = ~~elData(elByClass('jsClipboardItem', media)[0], 'object-id'); - if (mediaIds.indexOf(mediaID) !== -1) { - elRemove(media); - i--; - } + } + else if (objectIds.length === tableRowCount) { + // table is empty, reload page + window.location.reload(); + } + else { + Clipboard.reload.bind(Clipboard); + } + } + /** + * Is called when a media edit icon is clicked. + */ + function edit(event) { + _mediaEditor.edit(~~event.currentTarget.dataset.objectId); + } + /** + * Opens the media editor after uploading a single file. + */ + function openEditorAfterUpload(data) { + if (data.upload === _upload && !data.isMultiFileUpload && !_upload.hasPendingUploads()) { + var keys = Object.keys(data.media); + if (keys.length) { + _mediaEditor.edit(data.media[keys[0]]); } - if (!mediaRows.length) { - window.location.reload(); + } + } + /** + * Is called after the media files with the given ids have been deleted via clipboard. + */ + function clipboardDeleteMedia(mediaIds) { + Array.from(document.getElementsByClassName("jsMediaRow")).forEach((media) => { + const mediaID = ~~media.querySelector(".jsClipboardItem").dataset.objectId; + if (mediaIds.indexOf(mediaID) !== -1) { + media.remove(); } + }); + if (!document.getElementsByClassName("jsMediaRow").length) { + window.location.reload(); } - }; + } }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.js deleted file mode 100644 index 2c9bad0f5b..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.js +++ /dev/null @@ -1,165 +0,0 @@ -/** - * Initializes modules required for media list view. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Controller/Media/List - */ -define([ - 'Dom/ChangeListener', - 'EventHandler', - 'WoltLabSuite/Core/Controller/Clipboard', - 'WoltLabSuite/Core/Media/Clipboard', - 'WoltLabSuite/Core/Media/Editor', - 'WoltLabSuite/Core/Media/List/Upload' - ], - function( - DomChangeListener, - EventHandler, - Clipboard, - MediaClipboard, - MediaEditor, - MediaListUpload - ) { - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - init: function() {}, - _addButtonEventListeners: function() {}, - _deleteCallback: function() {}, - _deleteMedia: function(mediaIds) {}, - _edit: function() {} - }; - return Fake; - } - - var _mediaEditor; - var _tableBody = elById('mediaListTableBody'); - var _clipboardObjectIds = []; - var _upload; - - /** - * @exports WoltLabSuite/Core/Controller/Media/List - */ - return { - init: function(options) { - options = options || {}; - _upload = new MediaListUpload('uploadButton', 'mediaListTableBody', { - categoryId: options.categoryId, - multiple: true, - elementTagSize: 48 - }); - - MediaClipboard.init( - 'wcf\\acp\\page\\MediaListPage', - options.hasMarkedItems || false, - this - ); - - EventHandler.add('com.woltlab.wcf.media.upload', 'removedErroneousUploadRow', this._deleteCallback.bind(this)); - - var deleteAction = new WCF.Action.Delete('wcf\\data\\media\\MediaAction', '.jsMediaRow'); - deleteAction.setCallback(this._deleteCallback); - - _mediaEditor = new MediaEditor({ - _editorSuccess: function(media, oldCategoryId) { - if (media.categoryID != oldCategoryId) { - window.setTimeout(function() { - window.location.reload(); - }, 500); - } - } - }); - - this._addButtonEventListeners(); - - DomChangeListener.add('WoltLabSuite/Core/Controller/Media/List', this._addButtonEventListeners.bind(this)); - - EventHandler.add('com.woltlab.wcf.media.upload', 'success', this._openEditorAfterUpload.bind(this)); - }, - - /** - * Adds the `click` event listeners to the media edit icons in - * new media table rows. - */ - _addButtonEventListeners: function() { - var buttons = elByClass('jsMediaEditButton', _tableBody), button; - while (buttons.length) { - button = buttons[0]; - button.classList.remove('jsMediaEditButton'); - button.addEventListener('click', this._edit.bind(this)); - } - }, - - /** - * Is triggered after media files have been deleted using the delete icon. - * - * @param {int[]?} objectIds - */ - _deleteCallback: function(objectIds) { - var tableRowCount = elByTag('tr', _tableBody).length; - if (objectIds.length === undefined) { - if (!tableRowCount) { - window.location.reload(); - } - } - else if (objectIds.length === tableRowCount) { - // table is empty, reload page - window.location.reload(); - } - else { - Clipboard.reload.bind(Clipboard) - } - }, - - /** - * Is called when a media edit icon is clicked. - * - * @param {Event} event - */ - _edit: function(event) { - _mediaEditor.edit(elData(event.currentTarget, 'object-id')); - }, - - /** - * Opens the media editor after uploading a single file. - * - * @param {object} data upload event data - * @since 5.2 - */ - _openEditorAfterUpload: function(data) { - if (data.upload === _upload && !data.isMultiFileUpload && !_upload.hasPendingUploads()) { - var keys = Object.keys(data.media); - - if (keys.length) { - _mediaEditor.edit(data.media[keys[0]]); - } - } - }, - - /** - * Is called after the media files with the given ids have been deleted via clipboard. - * - * @param {int[]} mediaIds ids of deleted media files - */ - clipboardDeleteMedia: function(mediaIds) { - var mediaRows = elByClass('jsMediaRow'); - for (var i = 0; i < mediaRows.length; i++) { - var media = mediaRows[i]; - var mediaID = ~~elData(elByClass('jsClipboardItem', media)[0], 'object-id'); - - if (mediaIds.indexOf(mediaID) !== -1) { - elRemove(media); - i--; - } - } - - if (!mediaRows.length) { - window.location.reload(); - } - } - } -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.ts new file mode 100644 index 0000000000..9254e16853 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.ts @@ -0,0 +1,126 @@ +/** + * Initializes modules required for media list view. + * + * @author Matthias Schmidt + * @copyright 2001-2021 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Controller/Media/List + */ + +import MediaListUpload from "../../Media/List/Upload"; +import * as MediaClipboard from "../../Media/Clipboard"; +import * as EventHandler from "../../Event/Handler"; +import MediaEditor from "../../Media/Editor"; +import * as DomChangeListener from "../../Dom/Change/Listener"; +import * as Clipboard from "../../Controller/Clipboard"; +import { MediaUploadSuccessEventData } from "../../Media/Data"; +import MediaManager from "../../Media/Manager/Base"; + +const _mediaEditor = new MediaEditor({ + _editorSuccess: function (media, oldCategoryId) { + if (media.categoryID != oldCategoryId) { + window.setTimeout(function () { + window.location.reload(); + }, 500); + } + }, +}); +const _tableBody = document.getElementById("mediaListTableBody")!; +let _upload: MediaListUpload; + +type MediaListOptions = { + categoryId?: number; + hasMarkedItems?: boolean; +}; + +export function init(options: MediaListOptions): void { + options = options || {}; + _upload = new MediaListUpload("uploadButton", "mediaListTableBody", { + categoryId: options.categoryId, + multiple: true, + elementTagSize: 48, + }); + + MediaClipboard.init("wcf\\acp\\page\\MediaListPage", options.hasMarkedItems || false, { + clipboardDeleteMedia: (mediaIds: number[]) => clipboardDeleteMedia(mediaIds), + } as MediaManager); + + EventHandler.add("com.woltlab.wcf.media.upload", "removedErroneousUploadRow", () => deleteCallback()); + + // eslint-disable-next-line + //@ts-ignore + var deleteAction = new WCF.Action.Delete("wcf\\data\\media\\MediaAction", ".jsMediaRow"); + deleteAction.setCallback(deleteCallback); + + addButtonEventListeners(); + + DomChangeListener.add("WoltLabSuite/Core/Controller/Media/List", () => addButtonEventListeners()); + + EventHandler.add("com.woltlab.wcf.media.upload", "success", (data: MediaUploadSuccessEventData) => + openEditorAfterUpload(data), + ); +} + +/** + * Adds the `click` event listeners to the media edit icons in new media table rows. + */ +function addButtonEventListeners(): void { + Array.from(_tableBody.getElementsByClassName("jsMediaEditButton")).forEach((button) => { + button.classList.remove("jsMediaEditButton"); + button.addEventListener("click", (ev) => edit(ev)); + }); +} + +/** + * Is triggered after media files have been deleted using the delete icon. + */ +function deleteCallback(objectIds?: number[]): void { + var tableRowCount = _tableBody.getElementsByTagName("tr").length; + if (objectIds === undefined) { + if (!tableRowCount) { + window.location.reload(); + } + } else if (objectIds.length === tableRowCount) { + // table is empty, reload page + window.location.reload(); + } else { + Clipboard.reload.bind(Clipboard); + } +} + +/** + * Is called when a media edit icon is clicked. + */ +function edit(event: Event): void { + _mediaEditor.edit(~~(event.currentTarget as HTMLElement).dataset.objectId!); +} + +/** + * Opens the media editor after uploading a single file. + */ +function openEditorAfterUpload(data: MediaUploadSuccessEventData) { + if (data.upload === _upload && !data.isMultiFileUpload && !_upload.hasPendingUploads()) { + var keys = Object.keys(data.media); + + if (keys.length) { + _mediaEditor.edit(data.media[keys[0]]); + } + } +} + +/** + * Is called after the media files with the given ids have been deleted via clipboard. + */ +function clipboardDeleteMedia(mediaIds: number[]) { + Array.from(document.getElementsByClassName("jsMediaRow")).forEach((media) => { + const mediaID = ~~media.querySelector(".jsClipboardItem")!.dataset.objectId!; + + if (mediaIds.indexOf(mediaID) !== -1) { + media.remove(); + } + }); + + if (!document.getElementsByClassName("jsMediaRow").length) { + window.location.reload(); + } +}