From 08e660e237c7cd3714c336fdf1b5a0832e3d2a15 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Tim=20D=C3=BCsterhus?= Date: Tue, 12 Jan 2021 11:59:20 +0100 Subject: [PATCH] Convert `Acp/Ui/CodeMirror/Media` to TypeScript --- .../Core/Acp/Ui/CodeMirror/Media.js | 44 +++++++++---------- .../Core/Acp/Ui/CodeMirror/Media.js | 41 ----------------- .../Core/Acp/Ui/CodeMirror/Media.ts | 39 ++++++++++++++++ 3 files changed, 60 insertions(+), 64 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.js index 5c62c2d86c..a9036d18db 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.js @@ -1,33 +1,31 @@ -define(['WoltLabSuite/Core/Media/Manager/Editor'], function (MediaManagerEditor) { +define(["require", "exports", "tslib", "../../../Media/Manager/Editor", "../../../Core"], function (require, exports, tslib_1, Editor_1, Core) { "use strict"; - function AcpUiCodeMirrorMedia(elementId) { this.init(elementId); } - AcpUiCodeMirrorMedia.prototype = { - init: function (elementId) { - this._element = elById(elementId); - var button = elById('codemirror-' + elementId + '-media'); + Editor_1 = tslib_1.__importDefault(Editor_1); + Core = tslib_1.__importStar(Core); + class AcpUiCodeMirrorMedia { + constructor(elementId) { + this.element = document.getElementById(elementId); + const button = document.getElementById(`codemirror-${elementId}-media`); button.classList.add(button.id); - new MediaManagerEditor({ + new Editor_1.default({ buttonClass: button.id, - callbackInsert: this._insert.bind(this), - editor: null + callbackInsert: (media, insertType, thumbnailSize) => this.insert(media, insertType, thumbnailSize), }); - }, - _insert: function (mediaList, insertType, thumbnailSize) { - var content = ''; - if (insertType === 'gallery') { - var mediaIds = []; - mediaList.forEach(function (item) { - mediaIds.push(item.mediaID); - }); - content = '{{ mediaGallery="' + mediaIds.join(',') + '" }}'; + } + insert(mediaList, insertType, thumbnailSize) { + let content; + if (insertType === "gallery") { + const mediaIds = Array.from(mediaList.values()).map((item) => item.mediaID); + content = `{{ mediaGallery="${mediaIds.join(",")}" }}`; } else { - mediaList.forEach(function (item) { - content += '{{ media="' + item.mediaID + '" size="' + thumbnailSize + '" }}'; - }); + content = Array.from(mediaList.values()) + .map((item) => `{{ media="${item.mediaID}" size="${thumbnailSize}" }}`) + .join(""); } - this._element.codemirror.replaceSelection(content); + this.element.codemirror.replaceSelection(content); } - }; + } + Core.enableLegacyInheritance(AcpUiCodeMirrorMedia); return AcpUiCodeMirrorMedia; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.js deleted file mode 100644 index 9a23f570e5..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.js +++ /dev/null @@ -1,41 +0,0 @@ -define(['WoltLabSuite/Core/Media/Manager/Editor'], function(MediaManagerEditor) { - "use strict"; - - function AcpUiCodeMirrorMedia(elementId) { this.init(elementId); } - AcpUiCodeMirrorMedia.prototype = { - init: function(elementId) { - this._element = elById(elementId); - - var button = elById('codemirror-' + elementId + '-media'); - button.classList.add(button.id); - - new MediaManagerEditor({ - buttonClass: button.id, - callbackInsert: this._insert.bind(this), - editor: null - }); - }, - - _insert: function (mediaList, insertType, thumbnailSize) { - var content = ''; - - if (insertType === 'gallery') { - var mediaIds = []; - mediaList.forEach(function(item) { - mediaIds.push(item.mediaID); - }); - - content = '{{ mediaGallery="' + mediaIds.join(',') + '" }}'; - } - else { - mediaList.forEach(function(item) { - content += '{{ media="' + item.mediaID + '" size="' + thumbnailSize + '" }}'; - }); - } - - this._element.codemirror.replaceSelection(content); - } - }; - - return AcpUiCodeMirrorMedia; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.ts new file mode 100644 index 0000000000..a674182ebe --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Media.ts @@ -0,0 +1,39 @@ +import { Media } from "../../../Media/Data"; +import MediaManagerEditor from "../../../Media/Manager/Editor"; +import * as Core from "../../../Core"; + +class AcpUiCodeMirrorMedia { + protected readonly element: HTMLElement; + + constructor(elementId: string) { + this.element = document.getElementById(elementId) as HTMLElement; + + const button = document.getElementById(`codemirror-${elementId}-media`)!; + button.classList.add(button.id); + + new MediaManagerEditor({ + buttonClass: button.id, + callbackInsert: (media, insertType, thumbnailSize) => this.insert(media, insertType, thumbnailSize), + }); + } + + protected insert(mediaList: Map, insertType: string, thumbnailSize: string): void { + let content: string; + + if (insertType === "gallery") { + const mediaIds = Array.from(mediaList.values()).map((item) => item.mediaID); + + content = `{{ mediaGallery="${mediaIds.join(",")}" }}`; + } else { + content = Array.from(mediaList.values()) + .map((item) => `{{ media="${item.mediaID}" size="${thumbnailSize}" }}`) + .join(""); + } + + (this.element as any).codemirror.replaceSelection(content); + } +} + +Core.enableLegacyInheritance(AcpUiCodeMirrorMedia); + +export = AcpUiCodeMirrorMedia; -- 2.20.1