Update how anki settings are updated

2 files changed, 34 insertions, 29 deletions

diff --git a/ext/bg/js/settings/anki.js b/ext/bg/js/settings/anki.js
index ae380fdb..aa89c6bf 100644
--- a/ext/bg/js/settings/anki.js
+++ b/ext/bg/js/settings/anki.js
@@ -17,6 +17,9 @@
  */
 
 
+let _ankiDataPopulated = false;
+
+
 function ankiSpinnerShow(show) {
     const spinner = $('#anki-spinner');
     if (show) {
@@ -165,11 +168,7 @@ function onAnkiMarkerClicked(e) {
 
 async function onAnkiModelChanged(e) {
     try {
-        if (!e.originalEvent) {
-            return;
-        }
-
-        const element = $(this);
+        const element = $(e.currentTarget);
         const tab = element.closest('.tab-pane');
         const tabId = tab.attr('id');
 
@@ -188,3 +187,30 @@ async function onAnkiModelChanged(e) {
         ankiSpinnerShow(false);
     }
 }
+
+
+function ankiInitialize() {
+    for (const node of document.querySelectorAll('#anki-terms-model,#anki-kanji-model')) {
+        node.addEventListener('change', (e) => onAnkiModelChanged(e), false);
+    }
+}
+
+async function onAnkiOptionsChanged(options) {
+    if (!options.anki.enable) {
+        _ankiDataPopulated = false;
+        return;
+    }
+
+    if (_ankiDataPopulated) { return; }
+
+    try {
+        ankiSpinnerShow(true);
+        await ankiDeckAndModelPopulate(options);
+        ankiErrorShow();
+        _ankiDataPopulated = true;
+    } catch (e) {
+        ankiErrorShow(e);
+    } finally {
+        ankiSpinnerShow(false);
+    }
+}
diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js
index a9edab78..82d75d8b 100644
--- a/ext/bg/js/settings/main.js
+++ b/ext/bg/js/settings/main.js
@@ -143,20 +143,14 @@ async function formWrite(options) {
     $('#field-templates').val(options.anki.fieldTemplates);
 
     onAnkiTemplatesValidateCompile();
+    await onAnkiOptionsChanged(options);
     await onDictionaryOptionsChanged(options);
 
-    try {
-        await ankiDeckAndModelPopulate(options);
-    } catch (e) {
-        ankiErrorShow(e);
-    }
-
     formUpdateVisibility(options);
 }
 
 function formSetupEventListeners() {
     $('input, select, textarea').not('.anki-model').not('.ignore-form-changes *').change((e) => onFormOptionsChanged(e));
-    $('.anki-model').change((e) => onAnkiModelChanged(e));
 }
 
 function formUpdateVisibility(options) {
@@ -180,28 +174,12 @@ async function onFormOptionsChanged(e) {
 
     const optionsContext = getOptionsContext();
     const options = await apiOptionsGet(optionsContext);
-    const optionsAnkiEnableOld = options.anki.enable;
-    const optionsAnkiServerOld = options.anki.server;
 
     await formRead(options);
     await settingsSaveOptions();
     formUpdateVisibility(options);
 
-    try {
-        const ankiUpdated =
-            options.anki.enable !== optionsAnkiEnableOld ||
-            options.anki.server !== optionsAnkiServerOld;
-
-        if (ankiUpdated) {
-            ankiSpinnerShow(true);
-            await ankiDeckAndModelPopulate(options);
-            ankiErrorShow();
-        }
-    } catch (error) {
-        ankiErrorShow(error);
-    } finally {
-        ankiSpinnerShow(false);
-    }
+    await onAnkiOptionsChanged(options);
 }
 
 
@@ -254,6 +232,7 @@ async function onReady() {
     await audioSettingsInitialize();
     await profileOptionsSetup();
     await dictSettingsInitialize();
+    ankiInitialize();
     ankiTemplatesInitialize();
 
     storageInfoInitialize();