From 3089bb7908e42e9101241476f700033df82e685d Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 24 May 2020 13:38:48 -0400 Subject: [PATCH] Settings refactor (#541) * Remove debug info * Trigger onOptionsUpdated instead of formWrite when profile changes * Update how Anki field changes are observed * Update how general.enableClipboardPopups setting is changed * Change where ankiTemplatesUpdateValue occurs * Change where onDictionaryOptionsChanged occurs * Remove unused global declarations * Remove stray data attribute --- ext/bg/js/settings/anki.js | 38 ++++++++++++----- ext/bg/js/settings/main.js | 74 ++++++++++++++-------------------- ext/bg/js/settings/profiles.js | 8 +--- ext/bg/settings.html | 6 +-- 4 files changed, 62 insertions(+), 64 deletions(-) diff --git a/ext/bg/js/settings/anki.js b/ext/bg/js/settings/anki.js index ba83f994..8de97554 100644 --- a/ext/bg/js/settings/anki.js +++ b/ext/bg/js/settings/anki.js @@ -19,16 +19,12 @@ * api * getOptionsContext * getOptionsMutable - * onFormOptionsChanged * settingsSaveOptions * utilBackgroundIsolate */ // Private -let _ankiDataPopulated = false; - - function _ankiSpinnerShow(show) { const spinner = $('#anki-spinner'); if (show) { @@ -158,7 +154,7 @@ async function _ankiFieldsPopulate(tabId, options) { container.appendChild(fragment); for (const node of container.querySelectorAll('.anki-field-value')) { - node.addEventListener('change', onFormOptionsChanged, false); + node.addEventListener('change', _onAnkiFieldsChanged, false); } for (const node of container.querySelectorAll('.marker-link')) { node.addEventListener('click', _onAnkiMarkerClicked, false); @@ -203,6 +199,23 @@ async function _onAnkiModelChanged(e) { await _ankiFieldsPopulate(tabId, options); } +async function _onAnkiFieldsChanged() { + const optionsContext = getOptionsContext(); + const options = await getOptionsMutable(optionsContext); + + options.anki.terms.deck = $('#anki-terms-deck').val(); + options.anki.terms.model = $('#anki-terms-model').val(); + options.anki.terms.fields = utilBackgroundIsolate(ankiFieldsToDict(document.querySelectorAll('#terms .anki-field-value'))); + options.anki.kanji.deck = $('#anki-kanji-deck').val(); + options.anki.kanji.model = $('#anki-kanji-model').val(); + options.anki.kanji.fields = utilBackgroundIsolate(ankiFieldsToDict(document.querySelectorAll('#kanji .anki-field-value'))); + + await settingsSaveOptions(); + + await onAnkiOptionsChanged(options); +} + + // Public @@ -272,20 +285,25 @@ function ankiGetFieldMarkers(type) { function ankiInitialize() { + $('#anki-fields-container input,#anki-fields-container select,#anki-fields-container textarea').change(_onAnkiFieldsChanged); + for (const node of document.querySelectorAll('#anki-terms-model,#anki-kanji-model')) { node.addEventListener('change', _onAnkiModelChanged, false); } + + onAnkiOptionsChanged(); } -async function onAnkiOptionsChanged(options) { +async function onAnkiOptionsChanged(options=null) { + if (options === null) { + const optionsContext = getOptionsContext(); + options = await getOptionsMutable(optionsContext); + } + if (!options.anki.enable) { - _ankiDataPopulated = false; return; } - if (_ankiDataPopulated) { return; } - await _ankiDeckAndModelPopulate(options); - _ankiDataPopulated = true; await Promise.all([_ankiFieldsPopulate('terms', options), _ankiFieldsPopulate('kanji', options)]); } diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js index 94f7f8f5..60b9e008 100644 --- a/ext/bg/js/settings/main.js +++ b/ext/bg/js/settings/main.js @@ -16,8 +16,6 @@ */ /* global - * ankiErrorShown - * ankiFieldsToDict * ankiInitialize * ankiTemplatesInitialize * ankiTemplatesUpdateValue @@ -33,7 +31,6 @@ * storageInfoInitialize * utilBackend * utilBackgroundIsolate - * utilIsolate */ function getOptionsMutable(optionsContext) { @@ -48,22 +45,6 @@ function getOptionsFullMutable() { async function formRead(options) { options.general.enable = $('#enable').prop('checked'); - const enableClipboardPopups = $('#enable-clipboard-popups').prop('checked'); - if (enableClipboardPopups) { - options.general.enableClipboardPopups = await new Promise((resolve, _reject) => { - chrome.permissions.request( - {permissions: ['clipboardRead']}, - (granted) => { - if (!granted) { - $('#enable-clipboard-popups').prop('checked', false); - } - resolve(granted); - } - ); - }); - } else { - options.general.enableClipboardPopups = false; - } options.general.showGuide = $('#show-usage-guide').prop('checked'); options.general.compactTags = $('#compact-tags').prop('checked'); options.general.compactGlossaries = $('#compact-glossaries').prop('checked'); @@ -125,7 +106,6 @@ async function formRead(options) { options.parsing.termSpacing = $('#parsing-term-spacing').prop('checked'); options.parsing.readingMode = $('#parsing-reading-mode').val(); - const optionsAnkiEnableOld = options.anki.enable; options.anki.enable = $('#anki-enable').prop('checked'); options.anki.tags = utilBackgroundIsolate($('#card-tags').val().split(/[,; ]+/)); options.anki.sentenceExt = parseInt($('#sentence-detection-extent').val(), 10); @@ -133,20 +113,10 @@ async function formRead(options) { options.anki.duplicateScope = $('#duplicate-scope').val(); options.anki.screenshot.format = $('#screenshot-format').val(); options.anki.screenshot.quality = parseInt($('#screenshot-quality').val(), 10); - - if (optionsAnkiEnableOld && !ankiErrorShown()) { - options.anki.terms.deck = $('#anki-terms-deck').val(); - options.anki.terms.model = $('#anki-terms-model').val(); - options.anki.terms.fields = utilBackgroundIsolate(ankiFieldsToDict(document.querySelectorAll('#terms .anki-field-value'))); - options.anki.kanji.deck = $('#anki-kanji-deck').val(); - options.anki.kanji.model = $('#anki-kanji-model').val(); - options.anki.kanji.fields = utilBackgroundIsolate(ankiFieldsToDict(document.querySelectorAll('#kanji .anki-field-value'))); - } } async function formWrite(options) { $('#enable').prop('checked', options.general.enable); - $('#enable-clipboard-popups').prop('checked', options.general.enableClipboardPopups); $('#show-usage-guide').prop('checked', options.general.showGuide); $('#compact-tags').prop('checked', options.general.compactTags); $('#compact-glossaries').prop('checked', options.general.compactGlossaries); @@ -216,14 +186,11 @@ async function formWrite(options) { $('#screenshot-format').val(options.anki.screenshot.format); $('#screenshot-quality').val(options.anki.screenshot.quality); - await ankiTemplatesUpdateValue(); - await onAnkiOptionsChanged(options); - await onDictionaryOptionsChanged(); - formUpdateVisibility(options); } function formSetupEventListeners() { + document.querySelector('#enable-clipboard-popups').addEventListener('change', onEnableClipboardPopupsChanged, false); $('input, select, textarea').not('.anki-model').not('.ignore-form-changes *').change(onFormOptionsChanged); } @@ -232,15 +199,6 @@ function formUpdateVisibility(options) { document.documentElement.dataset.optionsGeneralDebugInfo = `${!!options.general.debugInfo}`; document.documentElement.dataset.optionsGeneralShowAdvanced = `${!!options.general.showAdvanced}`; document.documentElement.dataset.optionsGeneralResultOutputMode = `${options.general.resultOutputMode}`; - - if (options.general.debugInfo) { - const temp = utilIsolate(options); - if (typeof temp.anki.fieldTemplates === 'string') { - temp.anki.fieldTemplates = '...'; - } - const text = JSON.stringify(temp, null, 4); - $('#debug').text(text); - } } async function onFormOptionsChanged() { @@ -250,8 +208,30 @@ async function onFormOptionsChanged() { await formRead(options); await settingsSaveOptions(); formUpdateVisibility(options); +} - await onAnkiOptionsChanged(options); +async function onEnableClipboardPopupsChanged(e) { + const optionsContext = getOptionsContext(); + const options = await getOptionsMutable(optionsContext); + + const enableClipboardPopups = e.target.checked; + if (enableClipboardPopups) { + options.general.enableClipboardPopups = await new Promise((resolve) => { + chrome.permissions.request( + {permissions: ['clipboardRead']}, + (granted) => { + if (!granted) { + $('#enable-clipboard-popups').prop('checked', false); + } + resolve(granted); + } + ); + }); + } else { + options.general.enableClipboardPopups = false; + } + + await settingsSaveOptions(); } @@ -272,6 +252,12 @@ async function onOptionsUpdated({source}) { const optionsContext = getOptionsContext(); const options = await getOptionsMutable(optionsContext); + + document.querySelector('#enable-clipboard-popups').checked = options.general.enableClipboardPopups; + ankiTemplatesUpdateValue(); + onDictionaryOptionsChanged(); + onAnkiOptionsChanged(); + await formWrite(options); } diff --git a/ext/bg/js/settings/profiles.js b/ext/bg/js/settings/profiles.js index e32d5525..59f7fbb1 100644 --- a/ext/bg/js/settings/profiles.js +++ b/ext/bg/js/settings/profiles.js @@ -19,9 +19,8 @@ * ConditionsUI * api * conditionsClearCaches - * formWrite * getOptionsFullMutable - * getOptionsMutable + * onOptionsUpdated * profileConditionsDescriptor * profileConditionsDescriptorPromise * settingsSaveOptions @@ -131,10 +130,7 @@ function profileOptionsPopulateSelect(select, profiles, currentValue, ignoreIndi async function profileOptionsUpdateTarget(optionsFull) { await profileFormWrite(optionsFull); - - const optionsContext = getOptionsContext(); - const options = await getOptionsMutable(optionsContext); - await formWrite(options); + await onOptionsUpdated({source: null}); } function profileOptionsCreateCopyName(name, profiles, maxUniqueAttempts) { diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 3ce91f12..7964ab90 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -138,7 +138,7 @@ -
+
@@ -854,7 +854,7 @@
  • Kanji
    • -
    +
    @@ -1111,8 +1111,6 @@

    - 
    
-
             
    
                  • Search • Homepage • Legal