aboutsummaryrefslogtreecommitdiff
path: root/ext/js
diff options
context:
space:
mode:
Diffstat (limited to 'ext/js')
-rw-r--r--ext/js/pages/settings/popup-preview-controller.js22
-rw-r--r--ext/js/pages/settings/popup-preview-frame.js50
2 files changed, 64 insertions, 8 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; }