switch preview popup's example text based on language (#700)

* Copy functions from JapaneseUtil

* Remove JapaneseUtil

* Update usages of JapaneseUtil functions

* part1

* frotend done?

* fix tests

* offscreen and type complications

* add tests

* start fixing tests

* keep fixing tests

* fix tests

* Copy functions from JapaneseUtil

* Remove JapaneseUtil

* Update usages of JapaneseUtil functions

* delete pt

* renames

* add tests

* kebab-case filenames

* lint

* minor fixes

* merge

* fixes

* fix part of comments

* fix more comments

* delete unused types

* comment

* comment

* do backend

* other files

* move fetch utils to own file

* remove extra line

* add extra line

* remove unnecessary export

* simplify folder structure

* remove redundant async

* fix param type in api

* fix language index

* undo changes to cssStyleApplier

* undo changes to utilities.js

* undo changes to utilities.js

* simplify language util

* lint

* undo phantom changes to anki integration

* require textTransformations options

* explicit locale in localeCompare

* punctuate notes

* prefer early exit

* rename LanguageOptionsObjectMap

* rename to textPreprocessor

* tuple with names instead of boolean array

* safe data setting

* optional chaining

* simplify LanguageOptions

* encapsulate languages

* delete language util

* nullable language in text preprocessors controller

* rename transform to process

* remove settings

* make translation advanced again

* remove unused getTextTransformations api call

* comments

* change language types

* RIP flags

* comments

* fix tests

* lint

* Text preprocessor type changes (#10)

* Add types

* Update types

* Simplify type check

* Refactor typing and structuring of language definitions

* lint

* update translator benchmark

* undo markdown changes

* undo markdown changes

* undo markdown changes

* more merge

* use example text

* comments

* comments

---------

Co-authored-by: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Co-authored-by: Darius Jahandarie <djahandarie@gmail.com>

3 files changed, 66 insertions, 10 deletions

diff --git a/ext/js/pages/settings/popup-preview-controller.js b/ext/js/pages/settings/popup-preview-controller.js
index 5194410c..bd335460 100644
--- a/ext/js/pages/settings/popup-preview-controller.js
+++ b/ext/js/pages/settings/popup-preview-controller.js
@@ -47,6 +47,14 @@ export class PopupPreviewController {
         this._customOuterCss.addEventListener('settingChanged', this._onCustomOuterCssChange.bind(this), false);
         this._frame.addEventListener('load', this._onFrameLoad.bind(this), false);
         this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this));
+        this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
+        const languageSelect = querySelectorNotNull(document, '#language-select');
+        languageSelect.addEventListener(
+            /** @type {string} */ ('settingChanged'),
+            /** @type {EventListener} */ (this._onLanguageSelectChanged.bind(this)),
+            false
+        );
+
 
         this._frame.src = '/popup-preview.html';
     }
@@ -79,6 +87,20 @@ export class PopupPreviewController {
     }
 
     /**
+     * @param {import('settings-controller').EventArgument<'optionsChanged'>} details
+     */
+    _onOptionsChanged({options}) {
+        this._invoke('PopupPreviewFrame.optionsChanged', {options});
+    }
+
+    /**
+     * @param {import('dom-data-binder').SettingChangedEvent} settingChangedEvent
+     */
+    _onLanguageSelectChanged(settingChangedEvent) {
+        this._invoke('PopupPreviewFrame.setLanguageExampleText', {language: settingChangedEvent.detail.value});
+    }
+
+    /**
      * @param {string} action
      * @param {import('core').SerializableObject} params
      */
diff --git a/ext/js/pages/settings/popup-preview-frame.js b/ext/js/pages/settings/popup-preview-frame.js
index 2898eaa2..d3e21641 100644
--- a/ext/js/pages/settings/popup-preview-frame.js
+++ b/ext/js/pages/settings/popup-preview-frame.js
@@ -52,24 +52,26 @@ export class PopupPreviewFrame {
         this._exampleTextInput = querySelectorNotNull(document, '#example-text-input');
         /** @type {string} */
         this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
+        /** @type {import('language').LanguageSummary[]} */
+        this._languageSummaries = [];
+        /** @type {boolean} */
+        this._wanakanaBound = false;
 
         /* eslint-disable @stylistic/no-multi-spaces */
         /** @type {Map<string, (params: import('core').SerializableObjectAny) => void>} */
         this._windowMessageHandlers = new Map(/** @type {[key: string, handler: (params: import('core').SerializableObjectAny) => void][]} */ ([
-            ['PopupPreviewFrame.setText',              this._onSetText.bind(this)],
-            ['PopupPreviewFrame.setCustomCss',         this._setCustomCss.bind(this)],
-            ['PopupPreviewFrame.setCustomOuterCss',    this._setCustomOuterCss.bind(this)],
-            ['PopupPreviewFrame.updateOptionsContext', this._updateOptionsContext.bind(this)]
+            ['PopupPreviewFrame.setText',                this._onSetText.bind(this)],
+            ['PopupPreviewFrame.setCustomCss',           this._setCustomCss.bind(this)],
+            ['PopupPreviewFrame.setCustomOuterCss',      this._setCustomOuterCss.bind(this)],
+            ['PopupPreviewFrame.updateOptionsContext',   this._updateOptionsContext.bind(this)],
+            ['PopupPreviewFrame.optionsChanged',         this._onOptionsChanged.bind(this)],
+            ['PopupPreviewFrame.setLanguageExampleText', this._setLanguageExampleText.bind(this)]
         ]));
         /* eslint-enable @stylistic/no-multi-spaces */
     }
 
     /** */
     async prepare() {
-        if (this._exampleTextInput !== null && typeof wanakana !== 'undefined') {
-            wanakana.bind(this._exampleTextInput);
-        }
-
         window.addEventListener('message', this._onMessage.bind(this), false);
 
         // Setup events
@@ -85,6 +87,10 @@ export class PopupPreviewFrame {
         this._apiOptionsGetOld = this._application.api.optionsGet.bind(this._application.api);
         this._application.api.optionsGet = this._apiOptionsGet.bind(this);
 
+        this._languageSummaries = await this._application.api.getLanguageSummaries();
+        const options = await this._application.api.optionsGet({current: true});
+        this._onOptionsChanged({options, optionsContext: {current: true}});
+
         // Overwrite frontend
         this._frontend = new Frontend({
             application: this._application,
@@ -268,6 +274,34 @@ export class PopupPreviewFrame {
         await this._updateSearch();
     }
 
+    /**
+     * @param {import('settings-controller').EventArgument<'optionsChanged'>} details
+     */
+    async _onOptionsChanged({options: {general: {language}}}) {
+        this._setLanguageExampleText({language});
+    }
+
+    /**
+     * @param {{language: string}} details
+     */
+    _setLanguageExampleText({language}) {
+        const activeLanguage = /** @type {import('language').LanguageSummary} */ (this._languageSummaries.find(({iso}) => iso === language));
+
+        if (this._exampleTextInput !== null) {
+            if (language === 'ja') {
+                wanakana.bind(this._exampleTextInput);
+                this._wanakanaBound = true;
+            } else if (this._wanakanaBound) {
+                wanakana.unbind(this._exampleTextInput);
+                this._wanakanaBound = false;
+            }
+        }
+
+        this._exampleTextInput.lang = language;
+        this._exampleTextInput.value = activeLanguage.exampleText;
+        this._exampleTextInput.dispatchEvent(new Event('input'));
+    }
+
     /** */
     async _updateSearch() {
         if (this._exampleText === null) { return; }
diff --git a/ext/popup-preview.html b/ext/popup-preview.html
index 15810242..0d410455 100644
--- a/ext/popup-preview.html
+++ b/ext/popup-preview.html
@@ -20,8 +20,8 @@
     <div class="top-options">
         <div class="top-options-left">
             <div class="example-text-container">
-                <input type="text" class="example-text example-text-input" id="example-text-input" value="読め" lang="ja" hidden>
-                <span class="example-text" id="example-text">読め</span>
+                <input type="text" class="example-text example-text-input" id="example-text-input" hidden>
+                <span class="example-text" id="example-text"></span>
             </div>
         </div>
         <div class="top-options-right">