From c2e3f60e51529f05284fea5f5bc1afcd1674f5ca Mon Sep 17 00:00:00 2001 From: StefanVukovic99 Date: Sun, 18 Feb 2024 14:00:04 +0100 Subject: 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 Co-authored-by: Darius Jahandarie --- ext/js/pages/settings/popup-preview-controller.js | 22 ++++++++++ ext/js/pages/settings/popup-preview-frame.js | 50 +++++++++++++++++++---- 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'; } @@ -78,6 +86,20 @@ export class PopupPreviewController { this._invoke('PopupPreviewFrame.updateOptionsContext', {optionsContext}); } + /** + * @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 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 @@
- - 読め + +
-- cgit v1.2.3