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
This commit is contained in:
toasted-nutbread 2020-05-24 13:38:48 -04:00 committed by GitHub
parent a595a0a481
commit 3089bb7908
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 62 additions and 64 deletions

View File

@ -19,16 +19,12 @@
* api * api
* getOptionsContext * getOptionsContext
* getOptionsMutable * getOptionsMutable
* onFormOptionsChanged
* settingsSaveOptions * settingsSaveOptions
* utilBackgroundIsolate * utilBackgroundIsolate
*/ */
// Private // Private
let _ankiDataPopulated = false;
function _ankiSpinnerShow(show) { function _ankiSpinnerShow(show) {
const spinner = $('#anki-spinner'); const spinner = $('#anki-spinner');
if (show) { if (show) {
@ -158,7 +154,7 @@ async function _ankiFieldsPopulate(tabId, options) {
container.appendChild(fragment); container.appendChild(fragment);
for (const node of container.querySelectorAll('.anki-field-value')) { 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')) { for (const node of container.querySelectorAll('.marker-link')) {
node.addEventListener('click', _onAnkiMarkerClicked, false); node.addEventListener('click', _onAnkiMarkerClicked, false);
@ -203,6 +199,23 @@ async function _onAnkiModelChanged(e) {
await _ankiFieldsPopulate(tabId, options); 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 // Public
@ -272,20 +285,25 @@ function ankiGetFieldMarkers(type) {
function ankiInitialize() { 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')) { for (const node of document.querySelectorAll('#anki-terms-model,#anki-kanji-model')) {
node.addEventListener('change', _onAnkiModelChanged, false); node.addEventListener('change', _onAnkiModelChanged, false);
} }
onAnkiOptionsChanged();
}
async function onAnkiOptionsChanged(options=null) {
if (options === null) {
const optionsContext = getOptionsContext();
options = await getOptionsMutable(optionsContext);
} }
async function onAnkiOptionsChanged(options) {
if (!options.anki.enable) { if (!options.anki.enable) {
_ankiDataPopulated = false;
return; return;
} }
if (_ankiDataPopulated) { return; }
await _ankiDeckAndModelPopulate(options); await _ankiDeckAndModelPopulate(options);
_ankiDataPopulated = true;
await Promise.all([_ankiFieldsPopulate('terms', options), _ankiFieldsPopulate('kanji', options)]); await Promise.all([_ankiFieldsPopulate('terms', options), _ankiFieldsPopulate('kanji', options)]);
} }

View File

@ -16,8 +16,6 @@
*/ */
/* global /* global
* ankiErrorShown
* ankiFieldsToDict
* ankiInitialize * ankiInitialize
* ankiTemplatesInitialize * ankiTemplatesInitialize
* ankiTemplatesUpdateValue * ankiTemplatesUpdateValue
@ -33,7 +31,6 @@
* storageInfoInitialize * storageInfoInitialize
* utilBackend * utilBackend
* utilBackgroundIsolate * utilBackgroundIsolate
* utilIsolate
*/ */
function getOptionsMutable(optionsContext) { function getOptionsMutable(optionsContext) {
@ -48,22 +45,6 @@ function getOptionsFullMutable() {
async function formRead(options) { async function formRead(options) {
options.general.enable = $('#enable').prop('checked'); 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.showGuide = $('#show-usage-guide').prop('checked');
options.general.compactTags = $('#compact-tags').prop('checked'); options.general.compactTags = $('#compact-tags').prop('checked');
options.general.compactGlossaries = $('#compact-glossaries').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.termSpacing = $('#parsing-term-spacing').prop('checked');
options.parsing.readingMode = $('#parsing-reading-mode').val(); options.parsing.readingMode = $('#parsing-reading-mode').val();
const optionsAnkiEnableOld = options.anki.enable;
options.anki.enable = $('#anki-enable').prop('checked'); options.anki.enable = $('#anki-enable').prop('checked');
options.anki.tags = utilBackgroundIsolate($('#card-tags').val().split(/[,; ]+/)); options.anki.tags = utilBackgroundIsolate($('#card-tags').val().split(/[,; ]+/));
options.anki.sentenceExt = parseInt($('#sentence-detection-extent').val(), 10); 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.duplicateScope = $('#duplicate-scope').val();
options.anki.screenshot.format = $('#screenshot-format').val(); options.anki.screenshot.format = $('#screenshot-format').val();
options.anki.screenshot.quality = parseInt($('#screenshot-quality').val(), 10); 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) { async function formWrite(options) {
$('#enable').prop('checked', options.general.enable); $('#enable').prop('checked', options.general.enable);
$('#enable-clipboard-popups').prop('checked', options.general.enableClipboardPopups);
$('#show-usage-guide').prop('checked', options.general.showGuide); $('#show-usage-guide').prop('checked', options.general.showGuide);
$('#compact-tags').prop('checked', options.general.compactTags); $('#compact-tags').prop('checked', options.general.compactTags);
$('#compact-glossaries').prop('checked', options.general.compactGlossaries); $('#compact-glossaries').prop('checked', options.general.compactGlossaries);
@ -216,14 +186,11 @@ async function formWrite(options) {
$('#screenshot-format').val(options.anki.screenshot.format); $('#screenshot-format').val(options.anki.screenshot.format);
$('#screenshot-quality').val(options.anki.screenshot.quality); $('#screenshot-quality').val(options.anki.screenshot.quality);
await ankiTemplatesUpdateValue();
await onAnkiOptionsChanged(options);
await onDictionaryOptionsChanged();
formUpdateVisibility(options); formUpdateVisibility(options);
} }
function formSetupEventListeners() { function formSetupEventListeners() {
document.querySelector('#enable-clipboard-popups').addEventListener('change', onEnableClipboardPopupsChanged, false);
$('input, select, textarea').not('.anki-model').not('.ignore-form-changes *').change(onFormOptionsChanged); $('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.optionsGeneralDebugInfo = `${!!options.general.debugInfo}`;
document.documentElement.dataset.optionsGeneralShowAdvanced = `${!!options.general.showAdvanced}`; document.documentElement.dataset.optionsGeneralShowAdvanced = `${!!options.general.showAdvanced}`;
document.documentElement.dataset.optionsGeneralResultOutputMode = `${options.general.resultOutputMode}`; 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() { async function onFormOptionsChanged() {
@ -250,8 +208,30 @@ async function onFormOptionsChanged() {
await formRead(options); await formRead(options);
await settingsSaveOptions(); await settingsSaveOptions();
formUpdateVisibility(options); 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 optionsContext = getOptionsContext();
const options = await getOptionsMutable(optionsContext); const options = await getOptionsMutable(optionsContext);
document.querySelector('#enable-clipboard-popups').checked = options.general.enableClipboardPopups;
ankiTemplatesUpdateValue();
onDictionaryOptionsChanged();
onAnkiOptionsChanged();
await formWrite(options); await formWrite(options);
} }

View File

@ -19,9 +19,8 @@
* ConditionsUI * ConditionsUI
* api * api
* conditionsClearCaches * conditionsClearCaches
* formWrite
* getOptionsFullMutable * getOptionsFullMutable
* getOptionsMutable * onOptionsUpdated
* profileConditionsDescriptor * profileConditionsDescriptor
* profileConditionsDescriptorPromise * profileConditionsDescriptorPromise
* settingsSaveOptions * settingsSaveOptions
@ -131,10 +130,7 @@ function profileOptionsPopulateSelect(select, profiles, currentValue, ignoreIndi
async function profileOptionsUpdateTarget(optionsFull) { async function profileOptionsUpdateTarget(optionsFull) {
await profileFormWrite(optionsFull); await profileFormWrite(optionsFull);
await onOptionsUpdated({source: null});
const optionsContext = getOptionsContext();
const options = await getOptionsMutable(optionsContext);
await formWrite(options);
} }
function profileOptionsCreateCopyName(name, profiles, maxUniqueAttempts) { function profileOptionsCreateCopyName(name, profiles, maxUniqueAttempts) {

View File

@ -138,7 +138,7 @@
<label><input type="checkbox" id="enable"> Enable content scanning</label> <label><input type="checkbox" id="enable"> Enable content scanning</label>
</div> </div>
<div class="checkbox" data-hide-for-browser="firefox-mobile"> <div class="checkbox ignore-form-changes" data-hide-for-browser="firefox-mobile">
<label><input type="checkbox" id="enable-clipboard-popups"> Enable native popups when copying Japanese text</label> <label><input type="checkbox" id="enable-clipboard-popups"> Enable native popups when copying Japanese text</label>
</div> </div>
@ -854,7 +854,7 @@
<li><a href="#kanji" data-toggle="tab">Kanji</a></li> <li><a href="#kanji" data-toggle="tab">Kanji</a></li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content ignore-form-changes" id="anki-fields-container">
<div id="terms" class="tab-pane fade in active" data-anki-card-type="terms"> <div id="terms" class="tab-pane fade in active" data-anki-card-type="terms">
<div class="row"> <div class="row">
<div class="form-group col-xs-6"> <div class="form-group col-xs-6">
@ -1111,8 +1111,6 @@
</p> </p>
</div> </div>
<pre id="debug" class="debug"></pre>
<div class="pull-right bottom-links"> <div class="pull-right bottom-links">
<small><span id="extension-info"></span> &bull; <a href="search.html">Search</a> &bull; <a href="https://foosoft.net/projects/yomichan/" target="_blank" rel="noopener">Homepage</a> &bull; <a href="legal.html">Legal</a></small> <small><span id="extension-info"></span> &bull; <a href="search.html">Search</a> &bull; <a href="https://foosoft.net/projects/yomichan/" target="_blank" rel="noopener">Homepage</a> &bull; <a href="legal.html">Legal</a></small>
</div> </div>