summaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authorStefanVukovic99 <stefanvukovic44@gmail.com>2024-02-18 14:00:04 +0100
committerGitHub <noreply@github.com>2024-02-18 13:00:04 +0000
commitc2e3f60e51529f05284fea5f5bc1afcd1674f5ca (patch)
tree61b0b35a73c41f4ab552bbbe056748a204562745 /ext
parent7e9f7e2616973418cc50f7706bd8f644cb9d5559 (diff)
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>
Diffstat (limited to 'ext')
-rw-r--r--ext/js/pages/settings/popup-preview-controller.js22
-rw-r--r--ext/js/pages/settings/popup-preview-frame.js50
-rw-r--r--ext/popup-preview.html4
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">