From c62f980f37007743bed004ff43a82a8d7664dac6 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Fri, 29 May 2020 19:56:38 -0400 Subject: Audio controller (#569) * Convert audio.js into a class * Move audio-ui.js classes into audio.js * Rename fields * Merge classes * Remove audio-ui.js --- ext/bg/js/settings/audio.js | 255 ++++++++++++++++++++++++++++++-------------- 1 file changed, 176 insertions(+), 79 deletions(-) (limited to 'ext/bg/js/settings/audio.js') diff --git a/ext/bg/js/settings/audio.js b/ext/bg/js/settings/audio.js index ac2d82f3..5c1cb131 100644 --- a/ext/bg/js/settings/audio.js +++ b/ext/bg/js/settings/audio.js @@ -16,110 +16,207 @@ */ /* global - * AudioSourceUI * AudioSystem * getOptionsContext * getOptionsMutable * settingsSaveOptions */ -let audioSourceUI = null; -let audioSystem = null; - -async function audioSettingsInitialize() { - audioSystem = new AudioSystem({ - audioUriBuilder: null, - useCache: true - }); - - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); - audioSourceUI = new AudioSourceUI.Container( - options.audio.sources, - document.querySelector('.audio-source-list'), - document.querySelector('.audio-source-add') - ); - audioSourceUI.save = settingsSaveOptions; - - textToSpeechInitialize(); -} +class AudioController { + constructor() { + this._audioSystem = null; + this._settingsAudioSources = null; + this._audioSourceContainer = null; + this._audioSourceAddButton = null; + this._audioSourceEntries = []; + } -function textToSpeechInitialize() { - if (typeof speechSynthesis === 'undefined') { return; } + async prepare() { + this._audioSystem = new AudioSystem({ + audioUriBuilder: null, + useCache: true + }); - speechSynthesis.addEventListener('voiceschanged', updateTextToSpeechVoices, false); - updateTextToSpeechVoices(); + const optionsContext = getOptionsContext(); + const options = await getOptionsMutable(optionsContext); - document.querySelector('#text-to-speech-voice').addEventListener('change', onTextToSpeechVoiceChange, false); - document.querySelector('#text-to-speech-voice-test').addEventListener('click', textToSpeechTest, false); -} + this._settingsAudioSources = options.audio.sources; + this._audioSourceContainer = document.querySelector('.audio-source-list'); + this._audioSourceAddButton = document.querySelector('.audio-source-add'); + this._audioSourceContainer.textContent = ''; + + this._audioSourceAddButton.addEventListener('click', this._onAddAudioSource.bind(this), false); + + for (const audioSource of toIterable(this._settingsAudioSources)) { + this._createAudioSourceEntry(audioSource); + } -function updateTextToSpeechVoices() { - const voices = Array.prototype.map.call(speechSynthesis.getVoices(), (voice, index) => ({voice, index})); - voices.sort(textToSpeechVoiceCompare); + this._prepareTextToSpeech(); + } + + // Private - document.querySelector('#text-to-speech-voice-container').hidden = (voices.length === 0); + async _save() { + await settingsSaveOptions(); + } - const fragment = document.createDocumentFragment(); + _prepareTextToSpeech() { + if (typeof speechSynthesis === 'undefined') { return; } - let option = document.createElement('option'); - option.value = ''; - option.textContent = 'None'; - fragment.appendChild(option); + speechSynthesis.addEventListener('voiceschanged', this._updateTextToSpeechVoices.bind(this), false); + this._updateTextToSpeechVoices(); + + document.querySelector('#text-to-speech-voice').addEventListener('change', this._onTextToSpeechVoiceChange.bind(this), false); + document.querySelector('#text-to-speech-voice-test').addEventListener('click', this._testTextToSpeech.bind(this), false); + } - for (const {voice} of voices) { - option = document.createElement('option'); - option.value = voice.voiceURI; - option.textContent = `${voice.name} (${voice.lang})`; + _updateTextToSpeechVoices() { + const voices = Array.prototype.map.call(speechSynthesis.getVoices(), (voice, index) => ({voice, index})); + voices.sort(this._textToSpeechVoiceCompare.bind(this)); + + document.querySelector('#text-to-speech-voice-container').hidden = (voices.length === 0); + + const fragment = document.createDocumentFragment(); + + let option = document.createElement('option'); + option.value = ''; + option.textContent = 'None'; fragment.appendChild(option); + + for (const {voice} of voices) { + option = document.createElement('option'); + option.value = voice.voiceURI; + option.textContent = `${voice.name} (${voice.lang})`; + fragment.appendChild(option); + } + + const select = document.querySelector('#text-to-speech-voice'); + select.textContent = ''; + select.appendChild(fragment); + select.value = select.dataset.value; } - const select = document.querySelector('#text-to-speech-voice'); - select.textContent = ''; - select.appendChild(fragment); - select.value = select.dataset.value; -} + _textToSpeechVoiceCompare(a, b) { + const aIsJapanese = this._languageTagIsJapanese(a.voice.lang); + const bIsJapanese = this._languageTagIsJapanese(b.voice.lang); + if (aIsJapanese) { + if (!bIsJapanese) { return -1; } + } else { + if (bIsJapanese) { return 1; } + } + + const aIsDefault = a.voice.default; + const bIsDefault = b.voice.default; + if (aIsDefault) { + if (!bIsDefault) { return -1; } + } else { + if (bIsDefault) { return 1; } + } + + return a.index - b.index; + } -function languageTagIsJapanese(languageTag) { - return ( - languageTag.startsWith('ja-') || - languageTag.startsWith('jpn-') - ); -} + _languageTagIsJapanese(languageTag) { + return ( + languageTag.startsWith('ja-') || + languageTag.startsWith('jpn-') + ); + } -function textToSpeechVoiceCompare(a, b) { - const aIsJapanese = languageTagIsJapanese(a.voice.lang); - const bIsJapanese = languageTagIsJapanese(b.voice.lang); - if (aIsJapanese) { - if (!bIsJapanese) { return -1; } - } else { - if (bIsJapanese) { return 1; } + _testTextToSpeech() { + try { + const text = document.querySelector('#text-to-speech-voice-test').dataset.speechText || ''; + const voiceUri = document.querySelector('#text-to-speech-voice').value; + + const audio = this._audioSystem.createTextToSpeechAudio(text, voiceUri); + audio.volume = 1.0; + audio.play(); + } catch (e) { + // NOP + } } - const aIsDefault = a.voice.default; - const bIsDefault = b.voice.default; - if (aIsDefault) { - if (!bIsDefault) { return -1; } - } else { - if (bIsDefault) { return 1; } + _instantiateTemplate(templateSelector) { + const template = document.querySelector(templateSelector); + const content = document.importNode(template.content, true); + return content.firstChild; } - return a.index - b.index; -} + _getUnusedAudioSource() { + const audioSourcesAvailable = [ + 'jpod101', + 'jpod101-alternate', + 'jisho', + 'custom' + ]; + for (const source of audioSourcesAvailable) { + if (this._settingsAudioSources.indexOf(source) < 0) { + return source; + } + } + return audioSourcesAvailable[0]; + } + + _createAudioSourceEntry(value) { + const eventListeners = new EventListenerCollection(); + const container = this._instantiateTemplate('#audio-source-template'); + const select = container.querySelector('.audio-source-select'); + const removeButton = container.querySelector('.audio-source-remove'); + + select.value = value; -function textToSpeechTest() { - try { - const text = document.querySelector('#text-to-speech-voice-test').dataset.speechText || ''; - const voiceUri = document.querySelector('#text-to-speech-voice').value; + const entry = { + container, + eventListeners + }; - const audio = audioSystem.createTextToSpeechAudio(text, voiceUri); - audio.volume = 1.0; - audio.play(); - } catch (e) { - // NOP + eventListeners.addEventListener(select, 'change', this._onAudioSourceSelectChange.bind(this, entry), false); + eventListeners.addEventListener(removeButton, 'click', this._onAudioSourceRemoveClicked.bind(this, entry), false); + + this._audioSourceContainer.appendChild(container); + this._audioSourceEntries.push(entry); + } + + _removeAudioSourceEntry(entry) { + const index = this._audioSourceEntries.indexOf(entry); + if (index < 0) { return; } + + const {container, eventListeners} = entry; + if (container.parentNode !== null) { + container.parentNode.removeChild(container); + } + eventListeners.removeAllEventListeners(); + + this._audioSourceEntries.splice(index, 1); + this._settingsAudioSources.splice(index, 1); + + for (let i = index, ii = this._audioSourceEntries.length; i < ii; ++i) { + this._audioSourceEntries[i].index = i; + } + } + + _onTextToSpeechVoiceChange(e) { + e.currentTarget.dataset.value = e.currentTarget.value; + } + + _onAddAudioSource() { + const audioSource = this._getUnusedAudioSource(); + this._settingsAudioSources.push(audioSource); + this._createAudioSourceEntry(audioSource); + this._save(); } -} -function onTextToSpeechVoiceChange(e) { - e.currentTarget.dataset.value = e.currentTarget.value; + _onAudioSourceSelectChange(entry, event) { + const index = this._audioSourceEntries.indexOf(entry); + if (index < 0) { return; } + + const value = event.currentTarget.value; + this._settingsAudioSources[index] = value; + this._save(); + } + + _onAudioSourceRemoveClicked(entry) { + this._removeAudioSourceEntry(entry); + this._save(); + } } -- cgit v1.2.3 From 63a3e56367b95f7ea64a5701d17179de60ed8718 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 30 May 2020 09:33:13 -0400 Subject: Use SettingsController (#576) * Use settingsController internally in settings/main.js * Replace modifyingProfileChange with SettingsController.optionsContextChanged * Update ClipboardPopupsController to use SettingsController * Store reference to checkbox * Use this._settingsController for everything * Change where current profile is initially assigned from * Remove some unnecessary async calls * Move setup calls * Update AnkiTemplatesController to use SettingsController * Cache default field templates * Update AnkiController to use SettingsController * Update AudioController to use SettingsController * Update SettingsBackup to use SettingsController * Update DictionaryController to use SettingsController * Update GenericSettingController to use SettingsController * Update ProfileController to use SettingsController * Remove unused * Remove unused * Replace some uses of api.options* functions * Fix missing awaits * Fix invalid function --- ext/bg/js/settings/anki-templates.js | 35 ++++---- ext/bg/js/settings/anki.js | 53 +++++------ ext/bg/js/settings/audio.js | 33 ++++--- ext/bg/js/settings/backup.js | 12 +-- ext/bg/js/settings/clipboard-popups-controller.js | 34 ++++--- ext/bg/js/settings/dictionaries.js | 54 ++++++----- ext/bg/js/settings/dom-settings-binder.js | 1 - ext/bg/js/settings/generic-setting-controller.js | 28 +++--- ext/bg/js/settings/main.js | 97 +++----------------- ext/bg/js/settings/popup-preview.js | 9 +- ext/bg/js/settings/profiles.js | 105 +++++++++------------- ext/bg/js/settings/settings-controller.js | 5 ++ 12 files changed, 192 insertions(+), 274 deletions(-) (limited to 'ext/bg/js/settings/audio.js') diff --git a/ext/bg/js/settings/anki-templates.js b/ext/bg/js/settings/anki-templates.js index dd128ab8..4ceff835 100644 --- a/ext/bg/js/settings/anki-templates.js +++ b/ext/bg/js/settings/anki-templates.js @@ -18,19 +18,20 @@ /* global * AnkiNoteBuilder * api - * getOptionsContext - * getOptionsMutable - * settingsSaveOptions */ class AnkiTemplatesController { - constructor(ankiController) { + constructor(settingsController, ankiController) { + this._settingsController = settingsController; this._ankiController = ankiController; this._cachedDefinitionValue = null; this._cachedDefinitionText = null; + this._defaultFieldTemplates = null; } - prepare() { + async prepare() { + this._defaultFieldTemplates = await api.getDefaultAnkiFieldTemplates(); + const markers = new Set([ ...this._ankiController.getFieldMarkers('terms'), ...this._ankiController.getFieldMarkers('kanji') @@ -48,21 +49,22 @@ class AnkiTemplatesController { $('#field-templates-reset').on('click', this._onReset.bind(this)); $('#field-templates-reset-confirm').on('click', this._onResetConfirm.bind(this)); - this.updateValue(); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); } - async updateValue() { - const optionsContext = getOptionsContext(); - const options = await api.optionsGet(optionsContext); + // Private + + _onOptionsChanged({options}) { let templates = options.anki.fieldTemplates; - if (typeof templates !== 'string') { templates = await api.getDefaultAnkiFieldTemplates(); } + if (typeof templates !== 'string') { templates = this._defaultFieldTemplates; } $('#field-templates').val(templates); this._onValidateCompile(); } - // Private - _onReset(e) { e.preventDefault(); $('#field-template-reset-modal').modal('show'); @@ -89,10 +91,9 @@ class AnkiTemplatesController { } // Overwrite - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); + const options = await this._settingsController.getOptionsMutable(); options.anki.fieldTemplates = templates; - await settingsSaveOptions(); + await this._settingsController.save(); // Compile this._onValidateCompile(); @@ -133,10 +134,10 @@ class AnkiTemplatesController { const exceptions = []; let result = `No definition found for ${text}`; try { - const optionsContext = getOptionsContext(); + const optionsContext = this._settingsController.getOptionsContext(); const definition = await this._getDefinition(text, optionsContext); if (definition !== null) { - const options = await api.optionsGet(optionsContext); + const options = await this._settingsController.getOptions(); const context = { document: { title: document.title diff --git a/ext/bg/js/settings/anki.js b/ext/bg/js/settings/anki.js index d110ef39..d099239d 100644 --- a/ext/bg/js/settings/anki.js +++ b/ext/bg/js/settings/anki.js @@ -17,38 +17,25 @@ /* global * api - * getOptionsContext - * getOptionsMutable - * settingsSaveOptions * utilBackgroundIsolate */ class AnkiController { - prepare() { + constructor(settingsController) { + this._settingsController = settingsController; + } + + async prepare() { $('#anki-fields-container input,#anki-fields-container select,#anki-fields-container textarea').change(this._onFieldsChanged.bind(this)); for (const node of document.querySelectorAll('#anki-terms-model,#anki-kanji-model')) { node.addEventListener('change', this._onModelChanged.bind(this), false); } - this.optionsChanged(); - } + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); - async optionsChanged(options=null) { - if (options === null) { - const optionsContext = getOptionsContext(); - options = await getOptionsMutable(optionsContext); - } - - if (!options.anki.enable) { - return; - } - - await this._deckAndModelPopulate(options); - await Promise.all([ - this._fieldsPopulate('terms', options), - this._fieldsPopulate('kanji', options) - ]); + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); } getFieldMarkers(type) { @@ -103,6 +90,18 @@ class AnkiController { // Private + async _onOptionsChanged({options}) { + if (!options.anki.enable) { + return; + } + + await this._deckAndModelPopulate(options); + await Promise.all([ + this._fieldsPopulate('terms', options), + this._fieldsPopulate('kanji', options) + ]); + } + _fieldsToDict(elements) { const result = {}; for (const element of elements) { @@ -277,17 +276,15 @@ class AnkiController { fields[name] = ''; } - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); + const options = await this._settingsController.getOptionsMutable(); options.anki[tabId].fields = utilBackgroundIsolate(fields); - await settingsSaveOptions(); + await this._settingsController.save(); await this._fieldsPopulate(tabId, options); } async _onFieldsChanged() { - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); + const options = await this._settingsController.getOptionsMutable(); options.anki.terms.deck = $('#anki-terms-deck').val(); options.anki.terms.model = $('#anki-terms-model').val(); @@ -296,8 +293,6 @@ class AnkiController { options.anki.kanji.model = $('#anki-kanji-model').val(); options.anki.kanji.fields = utilBackgroundIsolate(this._fieldsToDict(document.querySelectorAll('#kanji .anki-field-value'))); - await settingsSaveOptions(); - - await this.optionsChanged(options); + await this._settingsController.save(); } } diff --git a/ext/bg/js/settings/audio.js b/ext/bg/js/settings/audio.js index 5c1cb131..1a41a498 100644 --- a/ext/bg/js/settings/audio.js +++ b/ext/bg/js/settings/audio.js @@ -17,13 +17,11 @@ /* global * AudioSystem - * getOptionsContext - * getOptionsMutable - * settingsSaveOptions */ class AudioController { - constructor() { + constructor(settingsController) { + this._settingsController = settingsController; this._audioSystem = null; this._settingsAudioSources = null; this._audioSourceContainer = null; @@ -37,27 +35,36 @@ class AudioController { useCache: true }); - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); - - this._settingsAudioSources = options.audio.sources; this._audioSourceContainer = document.querySelector('.audio-source-list'); this._audioSourceAddButton = document.querySelector('.audio-source-add'); this._audioSourceContainer.textContent = ''; this._audioSourceAddButton.addEventListener('click', this._onAddAudioSource.bind(this), false); - for (const audioSource of toIterable(this._settingsAudioSources)) { - this._createAudioSourceEntry(audioSource); - } - this._prepareTextToSpeech(); + + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + this._onOptionsChanged(); } // Private + async _onOptionsChanged() { + const options = await this._settingsController.getOptionsMutable(); + + for (const entry of [...this._audioSourceEntries]) { + this._removeAudioSourceEntry(entry); + } + + this._settingsAudioSources = options.audio.sources; + for (const audioSource of toIterable(this._settingsAudioSources)) { + this._createAudioSourceEntry(audioSource); + } + } + async _save() { - await settingsSaveOptions(); + await this._settingsController.save(); } _prepareTextToSpeech() { diff --git a/ext/bg/js/settings/backup.js b/ext/bg/js/settings/backup.js index 4e104e6f..e93e15bf 100644 --- a/ext/bg/js/settings/backup.js +++ b/ext/bg/js/settings/backup.js @@ -19,13 +19,11 @@ * api * optionsGetDefault * optionsUpdateVersion - * utilBackend - * utilBackgroundIsolate - * utilIsolate */ class SettingsBackup { - constructor() { + constructor(settingsController) { + this._settingsController = settingsController; this._settingsExportToken = null; this._settingsExportRevoke = null; this._currentVersion = 0; @@ -59,7 +57,7 @@ class SettingsBackup { } async _getSettingsExportData(date) { - const optionsFull = await api.optionsGetFull(); + const optionsFull = await this._settingsController.getOptionsFull(); const environment = await api.getEnvironmentInfo(); const fieldTemplatesDefault = await api.getDefaultAnkiFieldTemplates(); @@ -143,9 +141,7 @@ class SettingsBackup { // Importing async _settingsImportSetOptionsFull(optionsFull) { - return utilIsolate(utilBackend().setFullOptions( - utilBackgroundIsolate(optionsFull) - )); + await this._settingsController.setOptionsFull(optionsFull); } _showSettingsImportError(error) { diff --git a/ext/bg/js/settings/clipboard-popups-controller.js b/ext/bg/js/settings/clipboard-popups-controller.js index cb9e857f..77fae305 100644 --- a/ext/bg/js/settings/clipboard-popups-controller.js +++ b/ext/bg/js/settings/clipboard-popups-controller.js @@ -15,29 +15,37 @@ * along with this program. If not, see . */ -/* globals - * getOptionsContext - * getOptionsMutable - * settingsSaveOptions - */ - class ClipboardPopupsController { - prepare() { - document.querySelector('#enable-clipboard-popups').addEventListener('change', this._onEnableClipboardPopupsChanged.bind(this), false); + constructor(settingsController) { + this._settingsController = settingsController; + this._checkbox = document.querySelector('#enable-clipboard-popups'); } - async _onEnableClipboardPopupsChanged(e) { - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); + async prepare() { + this._checkbox.addEventListener('change', this._onEnableClipboardPopupsChanged.bind(this), false); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); + } + // Private + + _onOptionsChanged({options}) { + this._checkbox.checked = options.general.enableClipboardPopups; + } + + async _onEnableClipboardPopupsChanged(e) { const enableClipboardPopups = e.target.checked; + const options = await this._settingsController.getOptionsMutable(); + if (enableClipboardPopups) { options.general.enableClipboardPopups = await new Promise((resolve) => { chrome.permissions.request( {permissions: ['clipboardRead']}, (granted) => { if (!granted) { - $('#enable-clipboard-popups').prop('checked', false); + this._checkbox.checked = false; } resolve(granted); } @@ -47,6 +55,6 @@ class ClipboardPopupsController { options.general.enableClipboardPopups = false; } - await settingsSaveOptions(); + await this._settingsController.save(); } } diff --git a/ext/bg/js/settings/dictionaries.js b/ext/bg/js/settings/dictionaries.js index dd6dd1c1..94a71233 100644 --- a/ext/bg/js/settings/dictionaries.js +++ b/ext/bg/js/settings/dictionaries.js @@ -18,15 +18,12 @@ /* global * PageExitPrevention * api - * getOptionsContext - * getOptionsFullMutable - * getOptionsMutable - * settingsSaveOptions * utilBackgroundIsolate */ -class SettingsDictionaryListUI { +class SettingsDictionaryListUI extends EventDispatcher { constructor(container, template, extraContainer, extraTemplate) { + super(); this.container = container; this.template = template; this.extraContainer = extraContainer; @@ -309,7 +306,7 @@ class SettingsDictionaryEntryUI { this.isDeleting = false; progress.hidden = true; - this.onDatabaseUpdated(); + this.parent.trigger('databaseUpdated'); } } @@ -384,7 +381,8 @@ class SettingsDictionaryExtraUI { } class DictionaryController { - constructor(storageController) { + constructor(settingsController, storageController) { + this._settingsController = settingsController; this._storageController = storageController; this._dictionaryUI = null; this._dictionaryErrorToStringOverrides = [ @@ -410,7 +408,8 @@ class DictionaryController { document.querySelector('#dict-groups-extra'), document.querySelector('#dict-extra-template') ); - this._dictionaryUI.save = settingsSaveOptions; + this._dictionaryUI.save = () => this._settingsController.save(); + this._dictionaryUI.on('databaseUpdated', this._onDatabaseUpdated.bind(this)); document.querySelector('#dict-purge-button').addEventListener('click', this._onPurgeButtonClick.bind(this), false); document.querySelector('#dict-purge-confirm').addEventListener('click', this._onPurgeConfirmButtonClick.bind(this), false); @@ -419,26 +418,25 @@ class DictionaryController { document.querySelector('#dict-main').addEventListener('change', this._onDictionaryMainChanged.bind(this), false); document.querySelector('#database-enable-prefix-wildcard-searches').addEventListener('change', this._onDatabaseEnablePrefixWildcardSearchesChanged.bind(this), false); - await this.optionsChanged(); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + await this._onOptionsChanged(); await this._onDatabaseUpdated(); } - async optionsChanged() { - if (this._dictionaryUI === null) { return; } + // Private - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); + async _onOptionsChanged() { + const options = await this._settingsController.getOptionsMutable(); this._dictionaryUI.setOptionsDictionaries(options.dictionaries); - const optionsFull = await api.optionsGetFull(); + const optionsFull = await this._settingsController.getOptionsFull(); document.querySelector('#database-enable-prefix-wildcard-searches').checked = optionsFull.global.database.prefixWildcardsSupported; await this._updateMainDictionarySelectValue(); } - // Private - _updateMainDictionarySelectOptions(dictionaries) { const select = document.querySelector('#dict-main'); select.textContent = ''; // Empty @@ -460,8 +458,7 @@ class DictionaryController { } async _updateMainDictionarySelectValue() { - const optionsContext = getOptionsContext(); - const options = await api.optionsGet(optionsContext); + const options = await this._settingsController.getOptions(); const value = options.general.mainDictionary; @@ -589,10 +586,9 @@ class DictionaryController { missingNodeOption.parentNode.removeChild(missingNodeOption); } - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); + const options = await this._settingsController.getOptionsMutable(); options.general.mainDictionary = value; - await settingsSaveOptions(); + await this._settingsController.save(); } _onImportButtonClick() { @@ -622,11 +618,12 @@ class DictionaryController { this._dictionarySpinnerShow(true); await api.purgeDatabase(); - for (const {options} of toIterable((await getOptionsFullMutable()).profiles)) { + const optionsFull = await this._settingsController.getOptionsFullMutable(); + for (const {options} of toIterable(optionsFull.profiles)) { options.dictionaries = utilBackgroundIsolate({}); options.general.mainDictionary = ''; } - await settingsSaveOptions(); + await this._settingsController.save(); this._onDatabaseUpdated(); } catch (err) { @@ -665,7 +662,7 @@ class DictionaryController { this._storageController.updateStats(); }; - const optionsFull = await api.optionsGetFull(); + const optionsFull = await this._settingsController.getOptionsFull(); const importDetails = { prefixWildcardsSupported: optionsFull.global.database.prefixWildcardsSupported @@ -680,7 +677,8 @@ class DictionaryController { const archiveContent = await this._dictReadFile(files[i]); const {result, errors} = await api.importDictionaryArchive(archiveContent, importDetails, updateProgress); - for (const {options} of toIterable((await getOptionsFullMutable()).profiles)) { + const optionsFull2 = await this._settingsController.getOptionsFullMutable(); + for (const {options} of toIterable(optionsFull2.profiles)) { const dictionaryOptions = SettingsDictionaryListUI.createDictionaryOptions(); dictionaryOptions.enabled = true; options.dictionaries[result.title] = dictionaryOptions; @@ -689,7 +687,7 @@ class DictionaryController { } } - await settingsSaveOptions(); + await this._settingsController.save(); if (errors.length > 0) { const errors2 = errors.map((error) => jsonToError(error)); @@ -714,10 +712,10 @@ class DictionaryController { } async _onDatabaseEnablePrefixWildcardSearchesChanged(e) { - const optionsFull = await getOptionsFullMutable(); + const optionsFull = await this._settingsController.getOptionsFullMutable(); const v = !!e.target.checked; if (optionsFull.global.database.prefixWildcardsSupported === v) { return; } optionsFull.global.database.prefixWildcardsSupported = !!e.target.checked; - await settingsSaveOptions(); + await this._settingsController.save(); } } diff --git a/ext/bg/js/settings/dom-settings-binder.js b/ext/bg/js/settings/dom-settings-binder.js index 4b63859f..07da4f37 100644 --- a/ext/bg/js/settings/dom-settings-binder.js +++ b/ext/bg/js/settings/dom-settings-binder.js @@ -18,7 +18,6 @@ /* global * DOMDataBinder * api - * getOptionsContext */ class DOMSettingsBinder { diff --git a/ext/bg/js/settings/generic-setting-controller.js b/ext/bg/js/settings/generic-setting-controller.js index 4a20bf65..d7d40c5d 100644 --- a/ext/bg/js/settings/generic-setting-controller.js +++ b/ext/bg/js/settings/generic-setting-controller.js @@ -16,24 +16,26 @@ */ /* globals - * getOptionsContext - * getOptionsMutable - * settingsSaveOptions * utilBackgroundIsolate */ class GenericSettingController { - prepare() { - $('input, select, textarea').not('.anki-model').not('.ignore-form-changes *').change(this._onFormOptionsChanged.bind(this)); + constructor(settingsController) { + this._settingsController = settingsController; } - optionsChanged(options) { - this._formWrite(options); + async prepare() { + $('input, select, textarea').not('.anki-model').not('.ignore-form-changes *').change(this._onFormOptionsChanged.bind(this)); + + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); } // Private - async _formWrite(options) { + _onOptionsChanged({options}) { $('#enable').prop('checked', options.general.enable); $('#show-usage-guide').prop('checked', options.general.showGuide); $('#compact-tags').prop('checked', options.general.compactTags); @@ -107,7 +109,7 @@ class GenericSettingController { this._formUpdateVisibility(options); } - async _formRead(options) { + _formRead(options) { options.general.enable = $('#enable').prop('checked'); options.general.showGuide = $('#show-usage-guide').prop('checked'); options.general.compactTags = $('#compact-tags').prop('checked'); @@ -180,12 +182,10 @@ class GenericSettingController { } async _onFormOptionsChanged() { - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); - - await this._formRead(options); - await settingsSaveOptions(); + const options = await this._settingsController.getOptionsMutable(); + this._formRead(options); this._formUpdateVisibility(options); + await this._settingsController.save(); } _formUpdateVisibility(options) { diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js index d6f55bde..cf74c0fc 100644 --- a/ext/bg/js/settings/main.js +++ b/ext/bg/js/settings/main.js @@ -28,71 +28,8 @@ * SettingsController * StorageController * api - * utilBackend - * utilBackgroundIsolate */ -let profileIndex = 0; - -function getOptionsContext() { - return {index: getProfileIndex()}; -} - -function getProfileIndex() { - return profileIndex; -} - -function setProfileIndex(value) { - profileIndex = value; -} - - -function getOptionsMutable(optionsContext) { - return utilBackend().getOptions( - utilBackgroundIsolate(optionsContext) - ); -} - -function getOptionsFullMutable() { - return utilBackend().getFullOptions(); -} - - -function settingsGetSource() { - return new Promise((resolve) => { - chrome.tabs.getCurrent((tab) => resolve(`settings${tab ? tab.id : ''}`)); - }); -} - -async function settingsSaveOptions() { - const source = await settingsGetSource(); - await api.optionsSave(source); -} - -async function onOptionsUpdated({source}) { - const thisSource = await settingsGetSource(); - if (source === thisSource) { return; } - - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); - - document.querySelector('#enable-clipboard-popups').checked = options.general.enableClipboardPopups; - if (ankiTemplatesController !== null) { - ankiTemplatesController.updateValue(); - } - if (dictionaryController !== null) { - dictionaryController.optionsChanged(); - } - if (ankiController !== null) { - ankiController.optionsChanged(); - } - - if (genericSettingController !== null) { - genericSettingController.optionsChanged(options); - } -} - - function showExtensionInformation() { const node = document.getElementById('extension-info'); if (node === null) { return; } @@ -124,40 +61,34 @@ async function setupEnvironmentInfo() { document.documentElement.dataset.operatingSystem = platform.os; } -let ankiController = null; -let ankiTemplatesController = null; -let dictionaryController = null; -let genericSettingController = null; async function onReady() { api.forwardLogsToBackend(); await yomichan.prepare(); - const settingsController = new SettingsController(); - settingsController.prepare(); - setupEnvironmentInfo(); showExtensionInformation(); + settingsPopulateModifierKeys(); + + const optionsFull = await api.optionsGetFull(); + const settingsController = new SettingsController(optionsFull.profileCurrent); + settingsController.prepare(); const storageController = new StorageController(); storageController.prepare(); - await settingsPopulateModifierKeys(); - genericSettingController = new GenericSettingController(); + const genericSettingController = new GenericSettingController(settingsController); genericSettingController.prepare(); - new ClipboardPopupsController().prepare(); - new PopupPreviewController().prepare(); - new AudioController().prepare(); - await (new ProfileController()).prepare(); - dictionaryController = new DictionaryController(storageController); + new ClipboardPopupsController(settingsController).prepare(); + new PopupPreviewController(settingsController).prepare(); + new AudioController(settingsController).prepare(); + new ProfileController(settingsController).prepare(); + const dictionaryController = new DictionaryController(settingsController, storageController); dictionaryController.prepare(); - ankiController = new AnkiController(); + const ankiController = new AnkiController(settingsController); ankiController.prepare(); - ankiTemplatesController = new AnkiTemplatesController(ankiController); - ankiTemplatesController.prepare(); - new SettingsBackup().prepare(); - - yomichan.on('optionsUpdated', onOptionsUpdated); + new AnkiTemplatesController(settingsController, ankiController).prepare(); + new SettingsBackup(settingsController).prepare(); } $(document).ready(() => onReady()); diff --git a/ext/bg/js/settings/popup-preview.js b/ext/bg/js/settings/popup-preview.js index d5519959..d4145b76 100644 --- a/ext/bg/js/settings/popup-preview.js +++ b/ext/bg/js/settings/popup-preview.js @@ -16,12 +16,12 @@ */ /* global - * getOptionsContext * wanakana */ class PopupPreviewController { - constructor() { + constructor(settingsController) { + this._settingsController = settingsController; this._previewVisible = false; this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); this._frame = null; @@ -58,7 +58,7 @@ class PopupPreviewController { text.addEventListener('input', this._onTextChange.bind(this), false); customCss.addEventListener('input', this._onCustomCssChange.bind(this), false); customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false); - yomichan.on('modifyingProfileChange', this._onOptionsContextChange.bind(this)); + this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this)); frame.src = '/bg/settings-popup-preview.html'; frame.id = 'settings-popup-preview-frame'; @@ -88,7 +88,8 @@ class PopupPreviewController { } _onOptionsContextChange() { - this._invoke('updateOptionsContext', {optionsContext: getOptionsContext()}); + const optionsContext = this._settingsController.getOptionsContext(); + this._invoke('updateOptionsContext', {optionsContext}); } _setText(text) { diff --git a/ext/bg/js/settings/profiles.js b/ext/bg/js/settings/profiles.js index e2c558e9..2449ab44 100644 --- a/ext/bg/js/settings/profiles.js +++ b/ext/bg/js/settings/profiles.js @@ -17,34 +17,19 @@ /* global * ConditionsUI - * api * conditionsClearCaches - * getOptionsFullMutable - * getProfileIndex - * onOptionsUpdated * profileConditionsDescriptor * profileConditionsDescriptorPromise - * setProfileIndex - * settingsSaveOptions * utilBackgroundIsolate */ class ProfileController { - constructor() { + constructor(settingsController) { + this._settingsController = settingsController; this._conditionsContainer = null; } async prepare() { - const optionsFull = await getOptionsFullMutable(); - setProfileIndex(optionsFull.profileCurrent); - - this._setupEventListeners(); - await this._updateTarget(optionsFull); - } - - // Private - - _setupEventListeners() { $('#profile-target').change(this._onTargetProfileChanged.bind(this)); $('#profile-name').change(this._onNameChanged.bind(this)); $('#profile-add').click(this._onAdd.bind(this)); @@ -55,6 +40,17 @@ class ProfileController { $('#profile-move-up').click(() => this._onMove(-1)); $('#profile-move-down').click(() => this._onMove(1)); $('.profile-form').find('input, select, textarea').not('.profile-form-manual').change(this._onInputChanged.bind(this)); + + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + this._onOptionsChanged(); + } + + // Private + + async _onOptionsChanged() { + const optionsFull = await this._settingsController.getOptionsFullMutable(); + await this._formWrite(optionsFull); } _tryGetIntegerValue(selector, min, max) { @@ -69,7 +65,7 @@ class ProfileController { } async _formRead(optionsFull) { - const currentProfileIndex = getProfileIndex(); + const currentProfileIndex = this._settingsController.profileIndex; const profile = optionsFull.profiles[currentProfileIndex]; // Current profile @@ -83,7 +79,7 @@ class ProfileController { } async _formWrite(optionsFull) { - const currentProfileIndex = getProfileIndex(); + const currentProfileIndex = this._settingsController.profileIndex; const profile = optionsFull.profiles[currentProfileIndex]; this._populateSelect($('#profile-active'), optionsFull.profiles, optionsFull.profileCurrent, null); @@ -108,7 +104,7 @@ class ProfileController { $('#profile-add-condition-group') ); this._conditionsContainer.save = () => { - settingsSaveOptions(); + this._settingsController.save(); conditionsClearCaches(profileConditionsDescriptor); }; this._conditionsContainer.isolate = utilBackgroundIsolate; @@ -129,11 +125,6 @@ class ProfileController { select.val(`${currentValue}`); } - async _updateTarget(optionsFull) { - await this._formWrite(optionsFull); - await onOptionsUpdated({source: null}); - } - _createCopyName(name, profiles, maxUniqueAttempts) { let space, index, prefix, suffix; const match = /^([\w\W]*\(Copy)((\s+)(\d+))?(\)\s*)$/.exec(name); @@ -174,39 +165,32 @@ class ProfileController { return; } - const optionsFull = await getOptionsFullMutable(); + const optionsFull = await this._settingsController.getOptionsFullMutable(); await this._formRead(optionsFull); - await settingsSaveOptions(); + await this._settingsController.save(); } async _onTargetProfileChanged() { - const optionsFull = await getOptionsFullMutable(); - const currentProfileIndex = getProfileIndex(); + const optionsFull = await this._settingsController.getOptionsFullMutable(); + const currentProfileIndex = this._settingsController.profileIndex; const index = this._tryGetIntegerValue('#profile-target', 0, optionsFull.profiles.length); if (index === null || currentProfileIndex === index) { return; } - setProfileIndex(index); - - await this._updateTarget(optionsFull); - - yomichan.trigger('modifyingProfileChange'); + this._settingsController.profileIndex = index; } async _onAdd() { - const optionsFull = await getOptionsFullMutable(); - const currentProfileIndex = getProfileIndex(); + const optionsFull = await this._settingsController.getOptionsFullMutable(); + const currentProfileIndex = this._settingsController.profileIndex; const profile = utilBackgroundIsolate(optionsFull.profiles[currentProfileIndex]); profile.name = this._createCopyName(profile.name, optionsFull.profiles, 100); optionsFull.profiles.push(profile); - setProfileIndex(optionsFull.profiles.length - 1); - - await this._updateTarget(optionsFull); - await settingsSaveOptions(); + this._settingsController.profileIndex = optionsFull.profiles.length - 1; - yomichan.trigger('modifyingProfileChange'); + await this._settingsController.save(); } async _onRemove(e) { @@ -214,12 +198,12 @@ class ProfileController { return await this._onRemoveConfirm(); } - const optionsFull = await api.optionsGetFull(); + const optionsFull = await this._settingsController.getOptionsFull(); if (optionsFull.profiles.length <= 1) { return; } - const currentProfileIndex = getProfileIndex(); + const currentProfileIndex = this._settingsController.profileIndex; const profile = optionsFull.profiles[currentProfileIndex]; $('#profile-remove-modal-profile-name').text(profile.name); @@ -229,36 +213,33 @@ class ProfileController { async _onRemoveConfirm() { $('#profile-remove-modal').modal('hide'); - const optionsFull = await getOptionsFullMutable(); + const optionsFull = await this._settingsController.getOptionsFullMutable(); if (optionsFull.profiles.length <= 1) { return; } - const currentProfileIndex = getProfileIndex(); + const currentProfileIndex = this._settingsController.profileIndex; optionsFull.profiles.splice(currentProfileIndex, 1); if (currentProfileIndex >= optionsFull.profiles.length) { - setProfileIndex(optionsFull.profiles.length - 1); + this._settingsController.profileIndex = optionsFull.profiles.length - 1; } if (optionsFull.profileCurrent >= optionsFull.profiles.length) { optionsFull.profileCurrent = optionsFull.profiles.length - 1; } - await this._updateTarget(optionsFull); - await settingsSaveOptions(); - - yomichan.trigger('modifyingProfileChange'); + await this._settingsController.save(); } _onNameChanged() { - const currentProfileIndex = getProfileIndex(); + const currentProfileIndex = this._settingsController.profileIndex; $('#profile-active, #profile-target').find(`[value="${currentProfileIndex}"]`).text(this.value); } async _onMove(offset) { - const optionsFull = await getOptionsFullMutable(); - const currentProfileIndex = getProfileIndex(); + const optionsFull = await this._settingsController.getOptionsFullMutable(); + const currentProfileIndex = this._settingsController.profileIndex; const index = currentProfileIndex + offset; if (index < 0 || index >= optionsFull.profiles.length) { return; @@ -272,21 +253,18 @@ class ProfileController { optionsFull.profileCurrent = index; } - setProfileIndex(index); - - await this._updateTarget(optionsFull); - await settingsSaveOptions(); + this._settingsController.profileIndex = index; - yomichan.trigger('modifyingProfileChange'); + await this._settingsController.save(); } async _onCopy() { - const optionsFull = await api.optionsGetFull(); + const optionsFull = await this._settingsController.getOptionsFullMutable(); if (optionsFull.profiles.length <= 1) { return; } - const currentProfileIndex = getProfileIndex(); + const currentProfileIndex = this._settingsController.profileIndex; this._populateSelect($('#profile-copy-source'), optionsFull.profiles, currentProfileIndex === 0 ? 1 : 0, [currentProfileIndex]); $('#profile-copy-modal').modal('show'); } @@ -294,9 +272,9 @@ class ProfileController { async _onCopyConfirm() { $('#profile-copy-modal').modal('hide'); - const optionsFull = await getOptionsFullMutable(); + const optionsFull = await this._settingsController.getOptionsFullMutable(); const index = this._tryGetIntegerValue('#profile-copy-source', 0, optionsFull.profiles.length); - const currentProfileIndex = getProfileIndex(); + const currentProfileIndex = this._settingsController.profileIndex; if (index === null || index === currentProfileIndex) { return; } @@ -304,7 +282,6 @@ class ProfileController { const profileOptions = utilBackgroundIsolate(optionsFull.profiles[index].options); optionsFull.profiles[currentProfileIndex].options = profileOptions; - await this._updateTarget(optionsFull); - await settingsSaveOptions(); + await this._settingsController.save(); } } diff --git a/ext/bg/js/settings/settings-controller.js b/ext/bg/js/settings/settings-controller.js index 61230226..9f903f48 100644 --- a/ext/bg/js/settings/settings-controller.js +++ b/ext/bg/js/settings/settings-controller.js @@ -65,6 +65,11 @@ class SettingsController extends EventDispatcher { return utilBackend().getFullOptions(); } + async setOptionsFull(optionsFull) { + utilBackend().setFullOptions(utilBackgroundIsolate(optionsFull)); + await this.save(); + } + getOptionsContext() { return {index: this._profileIndex}; } -- cgit v1.2.3 From cfd3a1ec3a5140e539a7fcc7d83656254c97b4d4 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 30 May 2020 21:54:38 -0400 Subject: Update AudioController to not use mutable options references (#585) --- ext/bg/js/settings/audio.js | 68 ++++++++++++++++++++++++--------------------- 1 file changed, 36 insertions(+), 32 deletions(-) (limited to 'ext/bg/js/settings/audio.js') diff --git a/ext/bg/js/settings/audio.js b/ext/bg/js/settings/audio.js index 1a41a498..9ef9cd4c 100644 --- a/ext/bg/js/settings/audio.js +++ b/ext/bg/js/settings/audio.js @@ -23,7 +23,6 @@ class AudioController { constructor(settingsController) { this._settingsController = settingsController; this._audioSystem = null; - this._settingsAudioSources = null; this._audioSourceContainer = null; this._audioSourceAddButton = null; this._audioSourceEntries = []; @@ -45,28 +44,22 @@ class AudioController { this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); - this._onOptionsChanged(); + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); } // Private - async _onOptionsChanged() { - const options = await this._settingsController.getOptionsMutable(); - - for (const entry of [...this._audioSourceEntries]) { - this._removeAudioSourceEntry(entry); + _onOptionsChanged({options}) { + for (let i = this._audioSourceEntries.length - 1; i >= 0; --i) { + this._cleanupAudioSourceEntry(i); } - this._settingsAudioSources = options.audio.sources; - for (const audioSource of toIterable(this._settingsAudioSources)) { + for (const audioSource of options.audio.sources) { this._createAudioSourceEntry(audioSource); } } - async _save() { - await this._settingsController.save(); - } - _prepareTextToSpeech() { if (typeof speechSynthesis === 'undefined') { return; } @@ -157,7 +150,7 @@ class AudioController { 'custom' ]; for (const source of audioSourcesAvailable) { - if (this._settingsAudioSources.indexOf(source) < 0) { + if (!this._audioSourceEntries.some((metadata) => metadata.value === source)) { return source; } } @@ -174,7 +167,8 @@ class AudioController { const entry = { container, - eventListeners + eventListeners, + value }; eventListeners.addEventListener(select, 'change', this._onAudioSourceSelectChange.bind(this, entry), false); @@ -184,46 +178,56 @@ class AudioController { this._audioSourceEntries.push(entry); } - _removeAudioSourceEntry(entry) { + async _removeAudioSourceEntry(entry) { const index = this._audioSourceEntries.indexOf(entry); if (index < 0) { return; } - const {container, eventListeners} = entry; + this._cleanupAudioSourceEntry(index); + await this._settingsController.modifyProfileSettings([{ + action: 'splice', + path: 'audio.sources', + start: index, + deleteCount: 1, + items: [] + }]); + } + + _cleanupAudioSourceEntry(index) { + const {container, eventListeners} = this._audioSourceEntries[index]; if (container.parentNode !== null) { container.parentNode.removeChild(container); } eventListeners.removeAllEventListeners(); - this._audioSourceEntries.splice(index, 1); - this._settingsAudioSources.splice(index, 1); - - for (let i = index, ii = this._audioSourceEntries.length; i < ii; ++i) { - this._audioSourceEntries[i].index = i; - } } _onTextToSpeechVoiceChange(e) { e.currentTarget.dataset.value = e.currentTarget.value; } - _onAddAudioSource() { + async _onAddAudioSource() { const audioSource = this._getUnusedAudioSource(); - this._settingsAudioSources.push(audioSource); + const index = this._audioSourceEntries.length; this._createAudioSourceEntry(audioSource); - this._save(); + await this._settingsController.modifyProfileSettings([{ + action: 'splice', + path: 'audio.sources', + start: index, + deleteCount: 0, + items: [audioSource] + }]); } - _onAudioSourceSelectChange(entry, event) { + async _onAudioSourceSelectChange(entry, event) { const index = this._audioSourceEntries.indexOf(entry); if (index < 0) { return; } const value = event.currentTarget.value; - this._settingsAudioSources[index] = value; - this._save(); + entry.value = value; + await this._settingsController.setProfileSetting(`audio.sources[${index}]`, value); } - _onAudioSourceRemoveClicked(entry) { - this._removeAudioSourceEntry(entry); - this._save(); + async _onAudioSourceRemoveClicked(entry) { + await this._removeAudioSourceEntry(entry); } } -- cgit v1.2.3 From 8bc15e60b55f8a251006ac03e0237420644cf029 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 13 Jun 2020 10:18:44 -0400 Subject: Detect language tags starting with "ja_" (#596) --- ext/bg/js/settings/audio.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ext/bg/js/settings/audio.js') diff --git a/ext/bg/js/settings/audio.js b/ext/bg/js/settings/audio.js index 9ef9cd4c..d389acb5 100644 --- a/ext/bg/js/settings/audio.js +++ b/ext/bg/js/settings/audio.js @@ -118,6 +118,7 @@ class AudioController { _languageTagIsJapanese(languageTag) { return ( + languageTag.startsWith('ja_') || languageTag.startsWith('ja-') || languageTag.startsWith('jpn-') ); -- cgit v1.2.3