Load and set language for `emoji-picker` element

diff --git a/ts/WoltLabSuite/Core/BootstrapFrontend.ts b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
index be6881d2a14f2ed674d44be7efb7e208cbbb7c25..9ed290f3a489dc07b48e8e17dc5009b7ed6cef2a 100644 (file)
--- a/ts/WoltLabSuite/Core/BootstrapFrontend.ts
+++ b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
@@ -133,4 +133,7 @@ export function setup(options: BootstrapOptions): void {
   whenFirstSeen("[data-ignore-user]", () => {
     void import("./Component/User/Ignore").then(({ setup }) => setup());
   });
+  whenFirstSeen("emoji-picker", () => {
+    void import("./Component/EmojiPicker/Setup");
+  });
 }

diff --git a/ts/WoltLabSuite/Core/Component/EmojiPicker/Setup.ts b/ts/WoltLabSuite/Core/Component/EmojiPicker/Setup.ts
new file mode 100644 (file)
index 0000000..fb77704
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Component/EmojiPicker/Setup.ts
@@ -0,0 +1,10 @@
+import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
+import { Picker } from "emoji-picker-element";
+
+wheneverFirstSeen("emoji-picker", (emojiPicker: Picker) => {
+  emojiPicker.locale = window.LANGUAGE_CODE;
+
+  if (window.EmojiPickerLocales[window.LANGUAGE_CODE] !== undefined) {
+    emojiPicker.i18n = window.EmojiPickerLocales[window.LANGUAGE_CODE];
+  }
+});

diff --git a/ts/WoltLabSuite/WebComponent/emoji-picker.ts b/ts/WoltLabSuite/WebComponent/emoji-picker.ts
index 1606107da687ee145c72ca2967e91a0fd521bf9d..dd86b1c56594cd2b0a36d1a8ccbc567b8c7d3241 100644 (file)
--- a/ts/WoltLabSuite/WebComponent/emoji-picker.ts
+++ b/ts/WoltLabSuite/WebComponent/emoji-picker.ts
@@ -1,11 +1,37 @@
-import { wheneverSeen } from "WoltLabSuite/Core/Helper/Selector";
-import { Picker } from "emoji-picker-element";
-
 import "emoji-picker-element";
 
-void import("emoji-picker-element/i18n/de").then((emojiLanguage) => {
-  wheneverSeen("emoji-picker", (emojiPicker: Picker) => {
-    emojiPicker.locale = window.LANGUAGE_CODE;
-    emojiPicker.i18n = emojiLanguage.default;
-  });
-});
+import ar from "emoji-picker-element/i18n/ar";
+import de from "emoji-picker-element/i18n/de";
+import en from "emoji-picker-element/i18n/en";
+import es from "emoji-picker-element/i18n/es";
+import fr from "emoji-picker-element/i18n/fr";
+import hi from "emoji-picker-element/i18n/hi";
+import id from "emoji-picker-element/i18n/id";
+import it from "emoji-picker-element/i18n/it";
+import ms_MY from "emoji-picker-element/i18n/ms_MY";
+import nl from "emoji-picker-element/i18n/nl";
+import pl from "emoji-picker-element/i18n/pl";
+import pt_BR from "emoji-picker-element/i18n/pt_BR";
+import pt_PT from "emoji-picker-element/i18n/pt_PT";
+import ru_RU from "emoji-picker-element/i18n/ru_RU";
+import tr from "emoji-picker-element/i18n/tr";
+import zh_CN from "emoji-picker-element/i18n/zh_CN";
+
+window.EmojiPickerLocales = {
+  ar,
+  de,
+  en,
+  es,
+  fr,
+  hi,
+  id,
+  it,
+  ms_MY,
+  nl,
+  pl,
+  pt_BR,
+  pt_PT,
+  ru_RU,
+  tr,
+  zh_CN,
+};

diff --git a/ts/WoltLabSuite/WebComponent/global.d.ts b/ts/WoltLabSuite/WebComponent/global.d.ts
index 11c082dfadffdfd96e08fbf6ab19a89a763e14c7..3cd0204d00139b52d1af0134cb63b2c2d9c95773 100644 (file)
--- a/ts/WoltLabSuite/WebComponent/global.d.ts
+++ b/ts/WoltLabSuite/WebComponent/global.d.ts
@@ -1,4 +1,8 @@
 // This is a workaround for TS2669.
+import { I18n } from "emoji-picker-element/shared";
+import type * as Language from "./Language";
+import { Template } from "./Template";
+
 export {};
 
 // This is duplicated from the regular `global.ts` that we cannot
@@ -7,9 +11,6 @@ type Codepoint = string;
 type HasRegularVariant = boolean;
 type IconMetadata = [Codepoint, HasRegularVariant];
 
-import type * as Language from "./Language";
-import { Template } from "./Template";
-
 interface Reaction {
   title: string;
   renderedIcon: string;
@@ -34,6 +35,9 @@ declare global {
     HTMLParsedElement: HTMLParsedElement;
     WoltLabLanguage: typeof Language;
     WoltLabTemplate: typeof Template;
+    EmojiPickerLocales: {
+      [key: string]: I18n;
+    };
   }
 
   class HTMLParsedElement extends HTMLElement {

diff --git a/ts/global.d.ts b/ts/global.d.ts
index 2daa700660766ca7f3beb0ed5de50dcd15fe1ece..88896c52a8f1c1c8299d4ad46ecb19375d7190a2 100644 (file)
--- a/ts/global.d.ts
+++ b/ts/global.d.ts
@@ -11,6 +11,7 @@ import type WoltlabCoreDialogElement from "WoltLabSuite/Core/Element/woltlab-cor
 import type WoltlabCoreDialogControlElement from "WoltLabSuite/Core/Element/woltlab-core-dialog-control";
 import type WoltlabCoreGoogleMapsElement from "WoltLabSuite/Core/Component/GoogleMaps/woltlab-core-google-maps";
 import type WoltlabCoreFileElement from "WoltLabSuite/Core/Component/File/woltlab-core-file";
+import { I18n } from "emoji-picker-element/shared";
 
 type Codepoint = string;
 type HasRegularVariant = boolean;
@@ -57,6 +58,9 @@ declare global {
     };
 
     WoltLabTemplate: new (template: string) => WoltLabTemplate;
+    EmojiPickerLocales: {
+      [key: string]: I18n;
+    };
   }
 
   interface String {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
index 2ec14797d0b8fd1bf27d135138a78bc860fa6701..6111b8041fade1fcdc191399006500430a795822 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
@@ -96,5 +96,8 @@ define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Ui
         (0, LazyLoader_1.whenFirstSeen)("[data-ignore-user]", () => {
             void new Promise((resolve_7, reject_7) => { require(["./Component/User/Ignore"], resolve_7, reject_7); }).then(tslib_1.__importStar).then(({ setup }) => setup());
         });
+        (0, LazyLoader_1.whenFirstSeen)("emoji-picker", () => {
+            void new Promise((resolve_8, reject_8) => { require(["./Component/EmojiPicker/Setup"], resolve_8, reject_8); }).then(tslib_1.__importStar);
+        });
     }
 });

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/EmojiPicker/Setup.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/EmojiPicker/Setup.js
new file mode 100644 (file)
index 0000000..9da9c17
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/EmojiPicker/Setup.js
@@ -0,0 +1,10 @@
+define(["require", "exports", "WoltLabSuite/Core/Helper/Selector"], function (require, exports, Selector_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    (0, Selector_1.wheneverFirstSeen)("emoji-picker", (emojiPicker) => {
+        emojiPicker.locale = window.LANGUAGE_CODE;
+        if (window.EmojiPickerLocales[window.LANGUAGE_CODE] !== undefined) {
+            emojiPicker.i18n = window.EmojiPickerLocales[window.LANGUAGE_CODE];
+        }
+    });
+});