Improvements to options page

ext/bg/js/options-form.js

@@ -33,27 +33,28 @@ function optionsToForm(opts) {
     $('#anki-kanji-model').val(opts.ankiKanjiModel);
 }
 
-function formToOptions() {
+function formToOptions(section, callback) {
-    return sanitizeOptions({
+    loadOptions((optsOld) => {
-        scanLength:        $('#scan-length').val(),
+        const optsNew = $.extend({}, optsOld);
-        activateOnStartup: $('#activate-on-startup').prop('checked'),
-        loadEnamDict:      $('#load-enamdict').prop('checked'),
-        selectMatchedText: $('#select-matched-text').prop('checked'),
-        enableAnkiConnect: $('#enable-anki-connect').prop('checked'),
-        ankiVocabDeck:     $('#anki-vocab-deck').val(),
-        ankiVocabModel:    $('#anki-vocab-model').val(),
-        ankiKanjiDeck:     $('#anki-kanji-deck').val(),
-        ankiKanjiModel:    $('#anki-kanji-model').val()
-    });
-}
 
-function updateAnkiFormVis(opts) {
+        switch (section) {
-    if (opts.enableAnkiConnect) {
+            case 'general':
-        populateAnkiDeckAndModel();
+                optsNew.scanLength        = $('#scan-length').val();
-        $('.options-anki').fadeIn();
+                optsNew.activateOnStartup = $('#activate-on-startup').prop('checked');
-    } else {
+                optsNew.loadEnamDict      = $('#load-enamdict').prop('checked');
-        $('.options-anki').fadeOut();
+                optsNew.selectMatchedText = $('#select-matched-text').prop('checked');
-    }
+                optsNew.enableAnkiConnect = $('#enable-anki-connect').prop('checked');
+                break;
+            case 'anki':
+                optsNew.ankiVocabDeck  = $('#anki-vocab-deck').val();
+                optsNew.ankiVocabModel = $('#anki-vocab-model').val();
+                optsNew.ankiKanjiDeck  = $('#anki-kanji-deck').val();
+                optsNew.ankiKanjiModel = $('#anki-kanji-model').val();
+                break;
+        }
+
+        callback(sanitizeOptions(optsNew), sanitizeOptions(optsOld));
+    });
 }
 
 function populateAnkiDeckAndModel() {
@@ -72,20 +73,34 @@ function populateAnkiDeckAndModel() {
     yomi.api_getModelNames({callback: (names) => {
         if (names !== null) {
             names.forEach((name) => ankiModel.append($('<option/>', {value: name, text: name})));
-            $('.anki-model').trigger('change');
+            ankiModel.trigger('change');
         }
     }});
-
 }
 
-function onOptionsChanged() {
+function onOptionsGeneralChanged(e) {
-    const opts = formToOptions();
+    if (!e.originalEvent) {
-    saveOptions(opts, () => {
+        return;
-        yomichan().setOptions(opts);
+    }
-        updateAnkiFormVis(opts);
+
+    formToOptions('general', (optsNew, optsOld) => {
+        saveOptions(optsNew, () => {
+            yomichan().setOptions(optsNew);
+            if (!optsOld.enableAnkiConnect && optsNew.enableAnkiConnect) {
+                populateAnkiDeckAndModel();
+            }
+        });
     });
 }
 
+function onOptionsAnkiChanged(e) {
+    if (e.originalEvent) {
+        formToOptions('anki', (opts) => {
+            saveOptions(opts, () => yomichan().setOptions(opts));
+        });
+    }
+}
+
 function onModelChanged() {
     const modelName = $(this).val();
     if (modelName === null) {
@@ -112,9 +127,20 @@ $(document).ready(() => {
     loadOptions((opts) => {
         optionsToForm(opts);
 
-        $('input, select').on('input paste change', onOptionsChanged);
+        $('.options-general input').change(onOptionsGeneralChanged);
+        $('.options-anki input, .options-anki select').change(onOptionsAnkiChanged);
         $('.anki-model').change(onModelChanged);
+        $('#enable-anki-connect').change(() => {
+            if ($('#enable-anki-connect').prop('checked')) {
+                $('.options-anki').fadeIn();
+            } else {
+                $('.options-anki').fadeOut();
+            }
+        });
 
-        updateAnkiFormVis(opts);
+        if (opts.enableAnkiConnect) {
+            populateAnkiDeckAndModel();
+            $('.options-anki').show();
+        }
     });
 });

ext/bg/options.html

@@ -30,7 +30,7 @@
                 <form class="form-horizontal">
                     <div class="form-group">
                         <label for="scan-length" class="control-label col-sm-2">Scan length</label>
-                        <div class="col-sm-10"><input type="number" value="20" min="1" id="scan-length" class="form-control"></div>
+                        <div class="col-sm-10"><input type="number" min="1" id="scan-length" class="form-control"></div>
                     </div>
 
                     <div class="form-group">
@@ -52,7 +52,7 @@
                     <div class="form-group">
                         <div class="col-sm-offset-2 col-sm-10">
                             <div class="checkbox">
-                                <label class="control-label"><input type="checkbox" id="select-matched-text" checked> Select matched text</label>
+                                <label class="control-label"><input type="checkbox" id="select-matched-text"> Select matched text</label>
                             </div>
                         </div>
                     </div>