Cleanup

2 files changed, 60 insertions, 65 deletions

diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index ceee9e3f..f66a678c 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -65,29 +65,19 @@ function modelIdToMarkers(id) {
     }[id];
 }
 
-function getBasicOptions() {
+function getFormValues() {
     return loadOptions().then(optsOld => {
         const optsNew = $.extend({}, optsOld);
 
         optsNew.activateOnStartup = $('#activate-on-startup').prop('checked');
-        optsNew.showAdvancedOptions = $('#show-advanced-options').prop('checked');
         optsNew.enableAudioPlayback = $('#enable-audio-playback').prop('checked');
+        optsNew.showAdvancedOptions = $('#show-advanced-options').prop('checked');
+
         optsNew.holdShiftToScan = $('#hold-shift-to-scan').prop('checked');
         optsNew.selectMatchedText = $('#select-matched-text').prop('checked');
         optsNew.scanDelay = parseInt($('#scan-delay').val(), 10);
         optsNew.scanLength = parseInt($('#scan-length').val(), 10);
 
-        return {
-            optsNew: sanitizeOptions(optsNew),
-            optsOld: sanitizeOptions(optsOld)
-        };
-    });
-}
-
-function getAnkiOptions() {
-    return loadOptions().then(optsOld => {
-        const optsNew = $.extend({}, optsOld);
-
         optsNew.ankiMethod = $('#anki-method').val();
         optsNew.ankiUsername = $('#anki-username').val();
         optsNew.ankiPassword = $('#anki-password').val();
@@ -110,15 +100,15 @@ function getAnkiOptions() {
 function updateVisibility(opts) {
     switch (opts.ankiMethod) {
         case 'ankiweb':
-            $('#options-anki-general').show();
-            $('#options-anki-login').show();
+            $('#anki-general').show();
+            $('.anki-login').show();
             break;
         case 'ankiconnect':
-            $('#options-anki-general').show();
-            $('#options-anki-login').hide();
+            $('#anki-general').show();
+            $('.anki-login').hide();
             break;
         default:
-            $('#options-anki-general').hide();
+            $('#anki-general').hide();
             break;
     }
 
@@ -135,7 +125,7 @@ function populateAnkiDeckAndModel(opts) {
     const ankiSpinner = $('#ankiSpinner');
     ankiSpinner.show();
 
-    const ankiFormat = $('#options-anki-format');
+    const ankiFormat = $('#anki-format');
     ankiFormat.hide();
 
     const ankiDeck = $('.anki-deck');
@@ -168,6 +158,9 @@ function populateAnkiDeckAndModel(opts) {
 }
 
 function populateAnkiFields(element, opts) {
+    const table = element.closest('.tab-pane').find('.anki-fields');
+    table.find('tbody').remove();
+
     const modelName = element.val();
     if (modelName === null) {
         return Promise.resolve();
@@ -178,9 +171,6 @@ function populateAnkiFields(element, opts) {
     const markers = modelIdToMarkers(modelId);
 
     return anki().getModelFieldNames(modelName).then(names => {
-        const table = element.closest('.tab-pane').find('.anki-fields');
-        table.find('tbody').remove();
-
         const tbody = $('<tbody>');
         names.forEach(name => {
             const button = $('<button>', {type: 'button', class: 'btn btn-default dropdown-toggle'});
@@ -201,7 +191,11 @@ function populateAnkiFields(element, opts) {
             groupBtn.append(markerItems);
 
             const group = $('<div>', {class: 'input-group'});
-            group.append($('<input>', {type: 'text', class: 'anki-field-value form-control', value: opts[optKey][name] || ''}).data('field', name).change(onOptionsAnkiChanged));
+            group.append($('<input>', {
+                type: 'text',
+                class: 'anki-field-value form-control',
+                value: opts[optKey][name] || ''
+            }).data('field', name).change(onOptionsChanged));
             group.append(groupBtn);
 
             const row = $('<tr>');
@@ -215,39 +209,43 @@ function populateAnkiFields(element, opts) {
     });
 }
 
-function onOptionsBasicChanged(e) {
-    if (e.originalEvent || e.isTrigger) {
-        getBasicOptions().then(({optsNew, optsOld}) => {
-            saveOptions(optsNew).then(() => {
-                yomichan().setOptions(optsNew);
-                updateVisibility(optsNew);
-            });
-        });
+function onOptionsChanged(e) {
+    if (!e.originalEvent && !e.isTrigger) {
+        return;
     }
-}
 
-function onOptionsAnkiChanged(e) {
-    if (e.originalEvent || e.isTrigger) {
-        getAnkiOptions().then(({optsNew, optsOld}) => {
+    getFormValues().then(({optsNew, optsOld}) => {
+        saveOptions(optsNew).then(() => {
+            yomichan().setOptions(optsNew);
             updateVisibility(optsNew);
-            saveOptions(optsNew).then(() => {
-                yomichan().setOptions(optsNew);
-                if (optsNew.ankiMethod !== optsOld.ankiMethod) {
-                    populateAnkiDeckAndModel(optsNew);
-                }
-            });
+            if (optsNew.ankiMethod !== optsOld.ankiMethod) {
+                populateAnkiDeckAndModel(optsNew);
+            }
         });
-    }
+    });
 }
 
 function onAnkiModelChanged(e) {
-    if (e.originalEvent) {
-        getAnkiOptions().then(({optsNew, optsOld}) => {
-            optsNew[modelIdToFieldOptKey($(this).id)] = {};
-            populateAnkiFields($(this), optsNew);
+    if (!e.originalEvent) {
+        return;
+    }
+
+    getFormValues().then(({optsNew, optsOld}) => {
+        optsNew[modelIdToFieldOptKey($(this).id)] = {};
+
+        const ankiSpinner = $('#ankiSpinner');
+        ankiSpinner.show();
+
+        populateAnkiFields($(this), optsNew).then(() => {
             saveOptions(optsNew).then(() => yomichan().setOptions(optsNew));
+        }).catch(error => {
+            $('#success-dlg').hide();
+            $('#error-dlg').show().find('span').text(error);
+        }).then(() => {
+            $('#success-dlg').show();
+            ankiSpinner.hide();
         });
-    }
+    });
 }
 
 $(document).ready(() => {
@@ -266,8 +264,7 @@ $(document).ready(() => {
         $('#anki-card-tags').val(opts.ankiCardTags.join(' '));
         $('#sentence-extent').val(opts.sentenceExtent);
 
-        $('#options-general, #options-scanning').change(onOptionsBasicChanged);
-        $('#options-anki').not('.anki-model').change(onOptionsAnkiChanged);
+        $('input, select').not('.anki-model').change(onOptionsChanged);
         $('.anki-model').change(onAnkiModelChanged);
 
         populateAnkiDeckAndModel(opts);
diff --git a/ext/bg/options.html b/ext/bg/options.html
index b5c08eaf..4d67716e 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -6,7 +6,7 @@
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
         <style>
-            #anki-spinner, #options-anki-general, #options-anki-login, #options-advanced {
+            #anki-spinner, #anki-general, #options-advanced {
                 display: none;
             }
 
@@ -24,7 +24,7 @@
     </head>
     <body>
         <div class="container">
-            <div id="options-general">
+            <div>
                 <h3>General Options</h3>
 
                 <form class="form-horizontal">
@@ -54,7 +54,7 @@
                 </form>
             </div>
 
-            <div id="options-scanning">
+            <div>
                 <h3>Scanning Options</h3>
 
                 <form class="form-horizontal">
@@ -86,7 +86,7 @@
                 </form>
             </div>
 
-            <div id="options-anki">
+            <div>
                 <img src="img/spinner.gif" class="pull-right" id="anki-spinner" alt>
 
                 <h3>Anki Options</h3>
@@ -110,17 +110,15 @@
                     <span>Connection established</span>
                 </div>
 
-                <form class="form-horizontal" id="options-anki-general">
-                    <div id="options-anki-login">
-                        <div class="form-group">
-                            <label for="anki-username" class="control-label col-sm-2">Username</label>
-                            <div class="col-sm-10"><input type="text" id="anki-username" class="form-control"></div>
-                        </div>
+                <form class="form-horizontal" id="anki-general">
+                    <div class="form-group anki-login">
+                        <label for="anki-username" class="control-label col-sm-2">Username</label>
+                        <div class="col-sm-10"><input type="text" id="anki-username" class="form-control anki-credential"></div>
+                    </div>
 
-                        <div class="form-group">
-                            <label for="anki-password" class="control-label col-sm-2">Password</label>
-                            <div class="col-sm-10"><input type="password" id="anki-password" class="form-control"></div>
-                        </div>
+                    <div class="form-group anki-login">
+                        <label for="anki-password" class="control-label col-sm-2">Password</label>
+                        <div class="col-sm-10"><input type="password" id="anki-password" class="form-control anki-credential"></div>
                     </div>
 
                     <div class="form-group">
@@ -133,7 +131,7 @@
                         <div class="col-sm-10"><input type="number" min="1" id="sentence-extent" class="form-control"></div>
                     </div>
 
-                    <div id="options-anki-format">
+                    <div id="anki-format">
                         <ul class="nav nav-tabs col-sm-offset-2 col-sm-10">
                             <li class="active"><a href="#term" data-toggle="tab">Terms</a></li>
                             <li><a href="#kanji" data-toggle="tab">Kanji</a></li>
@@ -198,7 +196,7 @@
                 </form>
             </div>
 
-            <div style="text-align: right;">
+            <div class="pull-right">
                 <small><a href="https://foosoft.net/projects/yomichan-chrome">Homepage</a> &bull; <a href="legal.html">Legal</a></small>
             </div>
         </div>