Convert `Acp/Ui/CodeMirror/Media` to TypeScript

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 5c62c2d86cdc8566bfc43ee19fee132f4aefdee0..a9036d18db66f342ccb7ca68642c5952fe6c248e 100644 (file)
--- 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 (file)
index 9a23f57..0000000
--- 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 (file)
index 0000000..a674182
--- /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<number, Media>, 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;