diff options
| -rw-r--r-- | ext/js/pages/settings/popup-preview-controller.js | 22 | ||||
| -rw-r--r-- | ext/js/pages/settings/popup-preview-frame.js | 50 | ||||
| -rw-r--r-- | ext/popup-preview.html | 4 |
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"> |