summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ext/bg/js/settings/anki.js145
-rw-r--r--ext/bg/js/settings/main.js10
-rw-r--r--ext/bg/settings.html12
3 files changed, 93 insertions, 74 deletions
diff --git a/ext/bg/js/settings/anki.js b/ext/bg/js/settings/anki.js
index 68230139..3cea4da7 100644
--- a/ext/bg/js/settings/anki.js
+++ b/ext/bg/js/settings/anki.js
@@ -44,26 +44,44 @@ function _ankiSetError(error) {
}
}
-async function _ankiDeckAndModelPopulate(options) {
- const ankiFormat = $('#anki-format').hide();
-
- const deckNames = await utilAnkiGetDeckNames();
- const ankiDeck = $('.anki-deck');
- ankiDeck.find('option').remove();
- deckNames.sort().forEach((name) => ankiDeck.append($('<option/>', {value: name, text: name})));
-
- const modelNames = await utilAnkiGetModelNames();
- const ankiModel = $('.anki-model');
- ankiModel.find('option').remove();
- modelNames.sort().forEach((name) => ankiModel.append($('<option/>', {value: name, text: name})));
-
- $('#anki-terms-deck').val(options.anki.terms.deck);
- await _ankiFieldsPopulate($('#anki-terms-model').val(options.anki.terms.model), options);
+function _ankiSetDropdownOptions(dropdown, optionValues) {
+ const fragment = document.createDocumentFragment();
+ for (const optionValue of optionValues) {
+ const option = document.createElement('option');
+ option.value = optionValue;
+ option.textContent = optionValue;
+ fragment.appendChild(option);
+ }
+ dropdown.textContent = '';
+ dropdown.appendChild(fragment);
+}
- $('#anki-kanji-deck').val(options.anki.kanji.deck);
- await _ankiFieldsPopulate($('#anki-kanji-model').val(options.anki.kanji.model), options);
+async function _ankiDeckAndModelPopulate(options) {
+ const termsDeck = {value: options.anki.terms.deck, selector: '#anki-terms-deck'};
+ const kanjiDeck = {value: options.anki.kanji.deck, selector: '#anki-kanji-deck'};
+ const termsModel = {value: options.anki.terms.model, selector: '#anki-terms-model'};
+ const kanjiModel = {value: options.anki.kanji.model, selector: '#anki-kanji-model'};
+ try {
+ _ankiSpinnerShow(true);
+ const [deckNames, modelNames] = await Promise.all([utilAnkiGetDeckNames(), utilAnkiGetModelNames()]);
+ deckNames.sort();
+ modelNames.sort();
+ termsDeck.values = deckNames;
+ kanjiDeck.values = deckNames;
+ termsModel.values = modelNames;
+ kanjiModel.values = modelNames;
+ _ankiSetError(null);
+ } catch (error) {
+ _ankiSetError(error);
+ } finally {
+ _ankiSpinnerShow(false);
+ }
- ankiFormat.show();
+ for (const {value, values, selector} of [termsDeck, kanjiDeck, termsModel, kanjiModel]) {
+ const node = document.querySelector(selector);
+ _ankiSetDropdownOptions(node, Array.isArray(values) ? values : [value]);
+ node.value = value;
+ }
}
function _ankiCreateFieldTemplate(name, value, markers) {
@@ -81,53 +99,66 @@ function _ankiCreateFieldTemplate(name, value, markers) {
return content;
}
-async function _ankiFieldsPopulate(element, options) {
- const modelName = element.val();
- if (!modelName) {
- return;
- }
-
- const tab = element.closest('.tab-pane');
- const tabId = tab.attr('id');
- const container = tab.find('tbody').empty();
+async function _ankiFieldsPopulate(tabId, options) {
+ const tab = document.querySelector(`.tab-pane[data-anki-card-type=${tabId}]`);
+ const container = tab.querySelector('tbody');
const markers = ankiGetFieldMarkers(tabId);
- for (const name of await utilAnkiGetModelFieldNames(modelName)) {
- const value = options.anki[tabId].fields[name] || '';
+ const fragment = document.createDocumentFragment();
+ const fields = options.anki[tabId].fields;
+ for (const name of Object.keys(fields)) {
+ const value = fields[name];
const html = _ankiCreateFieldTemplate(name, value, markers);
- container.append($(html));
+ fragment.appendChild(html);
}
- tab.find('.anki-field-value').change((e) => onFormOptionsChanged(e));
- tab.find('.marker-link').click((e) => _onAnkiMarkerClicked(e));
+ container.textContent = '';
+ container.appendChild(fragment);
+
+ for (const node of container.querySelectorAll('.anki-field-value')) {
+ node.addEventListener('change', (e) => onFormOptionsChanged(e), false);
+ }
+ for (const node of container.querySelectorAll('.marker-link')) {
+ node.addEventListener('click', (e) => _onAnkiMarkerClicked(e), false);
+ }
}
function _onAnkiMarkerClicked(e) {
e.preventDefault();
- const link = e.target;
- $(link).closest('.input-group').find('.anki-field-value').val(`{${link.text}}`).trigger('change');
+ const link = e.currentTarget;
+ const input = $(link).closest('.input-group').find('.anki-field-value')[0];
+ input.value = `{${link.textContent}}`;
+ input.dispatchEvent(new Event('change'));
}
async function _onAnkiModelChanged(e) {
+ const node = e.currentTarget;
+ let fieldNames;
try {
- const element = $(e.currentTarget);
- const tab = element.closest('.tab-pane');
- const tabId = tab.attr('id');
-
- const optionsContext = getOptionsContext();
- const options = await apiOptionsGet(optionsContext);
- await formRead(options);
- options.anki[tabId].fields = utilBackgroundIsolate({});
- await settingsSaveOptions();
-
- _ankiSpinnerShow(true);
- await _ankiFieldsPopulate(element, options);
+ const modelName = node.value;
+ fieldNames = await utilAnkiGetModelFieldNames(modelName);
_ankiSetError(null);
} catch (error) {
_ankiSetError(error);
+ return;
} finally {
_ankiSpinnerShow(false);
}
+
+ const tabId = node.dataset.ankiCardType;
+ if (tabId !== 'terms' && tabId !== 'kanji') { return; }
+
+ const fields = {};
+ for (const name of fieldNames) {
+ fields[name] = '';
+ }
+
+ const optionsContext = getOptionsContext();
+ const options = await apiOptionsGet(optionsContext);
+ options.anki[tabId].fields = utilBackgroundIsolate(fields);
+ await settingsSaveOptions();
+
+ await _ankiFieldsPopulate(tabId, options);
}
@@ -138,12 +169,11 @@ function ankiErrorShown() {
return node && !node.hidden;
}
-function ankiFieldsToDict(selection) {
+function ankiFieldsToDict(elements) {
const result = {};
- selection.each((index, element) => {
- result[$(element).data('field')] = $(element).val();
- });
-
+ for (const element of elements) {
+ result[element.dataset.field] = element.value;
+ }
return result;
}
@@ -213,14 +243,7 @@ async function onAnkiOptionsChanged(options) {
if (_ankiDataPopulated) { return; }
- try {
- _ankiSpinnerShow(true);
- await _ankiDeckAndModelPopulate(options);
- _ankiSetError(null);
- _ankiDataPopulated = true;
- } catch (error) {
- _ankiSetError(error);
- } finally {
- _ankiSpinnerShow(false);
- }
+ 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 82d75d8b..7456e7a4 100644
--- a/ext/bg/js/settings/main.js
+++ b/ext/bg/js/settings/main.js
@@ -80,10 +80,10 @@ async function formRead(options) {
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($('#terms .anki-field-value')));
+ 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($('#kanji .anki-field-value')));
+ options.anki.kanji.fields = utilBackgroundIsolate(ankiFieldsToDict(document.querySelectorAll('#kanji .anki-field-value')));
}
}
@@ -167,11 +167,7 @@ function formUpdateVisibility(options) {
}
}
-async function onFormOptionsChanged(e) {
- if (!e.originalEvent && !e.isTrigger) {
- return;
- }
-
+async function onFormOptionsChanged() {
const optionsContext = getOptionsContext();
const options = await apiOptionsGet(optionsContext);
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index e4cc7bc8..3c5494b8 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -694,16 +694,16 @@
</ul>
<div class="tab-content">
- <div id="terms" class="tab-pane fade in active">
+ <div id="terms" class="tab-pane fade in active" data-anki-card-type="terms">
<div class="row">
<div class="form-group col-xs-6">
<label for="anki-terms-deck">Deck</label>
- <select class="form-control anki-deck" id="anki-terms-deck"></select>
+ <select class="form-control anki-deck" id="anki-terms-deck" data-anki-card-type="terms"></select>
</div>
<div class="form-group col-xs-6">
<label for="anki-terms-model">Model</label>
- <select class="form-control anki-model" id="anki-terms-model"></select>
+ <select class="form-control anki-model" id="anki-terms-model" data-anki-card-type="terms"></select>
</div>
</div>
@@ -713,16 +713,16 @@
</table>
</div>
- <div id="kanji" class="tab-pane fade">
+ <div id="kanji" class="tab-pane fade" data-anki-card-type="kanji">
<div class="row">
<div class="form-group col-xs-6">
<label for="anki-kanji-deck">Deck</label>
- <select class="form-control anki-deck" id="anki-kanji-deck"></select>
+ <select class="form-control anki-deck" id="anki-kanji-deck" data-anki-card-type="kanji"></select>
</div>
<div class="form-group col-xs-6">
<label for="anki-kanji-model">Model</label>
- <select class="form-control anki-model" id="anki-kanji-model"></select>
+ <select class="form-control anki-model" id="anki-kanji-model" data-anki-card-type="kanji"></select>
</div>
</div>