fix options page

3 files changed, 85 insertions, 112 deletions

diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index c0a9b22f..8be8ae30 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -25,52 +25,52 @@ function yomichan() {
 }
 
 function getFormValues() {
-    return optionsLoad().then(optsOld => {
-        const optsNew = $.extend({}, optsOld);
-
-        optsNew.general.autoStart = $('#activate-on-startup').prop('checked');
-        optsNew.general.audioPlayback = $('#enable-audio-playback').prop('checked');
-        optsNew.general.softKatakana = $('#enable-soft-katakana-search').prop('checked');
-        optsNew.general.groupResults = $('#group-term-results').prop('checked');
-        optsNew.general.showAdvanced = $('#show-advanced-options').prop('checked');
-
-        optsNew.scanning.requireShift = $('#hold-shift-to-scan').prop('checked');
-        optsNew.scanning.selectText = $('#select-matched-text').prop('checked');
-        optsNew.scanning.delay = parseInt($('#scan-delay').val(), 10);
-        optsNew.scanning.length = parseInt($('#scan-length').val(), 10);
-
-        optsNew.anki.enable = $('#anki-enable').prop('checked');
-        optsNew.anki.tags = $('#anki-card-tags').val().split(/[,; ]+/);
-        optsNew.anki.sentenceExt = parseInt($('#sentence-extent').val(), 10);
-        optsNew.anki.terms.deck = $('#anki-term-deck').val();
-        optsNew.anki.terms.model = $('#anki-term-model').val();
-        optsNew.anki.terms.fields = fieldsToDict($('#term .anki-field-value'));
-        optsNew.anki.kanji.deck = $('#anki-kanji-deck').val();
-        optsNew.anki.kanji.model = $('#anki-kanji-model').val();
-        optsNew.anki.kanji.fields = fieldsToDict($('#kanji .anki-field-value'));
+    return optionsLoad().then(optionsOld => {
+        const optionsNew = $.extend({}, optionsOld);
+
+        optionsNew.general.autoStart = $('#activate-on-startup').prop('checked');
+        optionsNew.general.audioPlayback = $('#enable-audio-playback').prop('checked');
+        optionsNew.general.softKatakana = $('#enable-soft-katakana-search').prop('checked');
+        optionsNew.general.groupResults = $('#group-term-results').prop('checked');
+        optionsNew.general.showAdvanced = $('#show-advanced-options').prop('checked');
+
+        optionsNew.scanning.requireShift = $('#hold-shift-to-scan').prop('checked');
+        optionsNew.scanning.selectText = $('#select-matched-text').prop('checked');
+        optionsNew.scanning.delay = parseInt($('#scan-delay').val(), 10);
+        optionsNew.scanning.length = parseInt($('#scan-length').val(), 10);
+
+        optionsNew.anki.enable = $('#anki-enable').prop('checked');
+        optionsNew.anki.tags = $('#anki-card-tags').val().split(/[,; ]+/);
+        optionsNew.anki.sentenceExt = parseInt($('#sentence-extent').val(), 10);
+        optionsNew.anki.terms.deck = $('#anki-term-deck').val();
+        optionsNew.anki.terms.model = $('#anki-term-model').val();
+        optionsNew.anki.terms.fields = fieldsToDict($('#terms .anki-field-value'));
+        optionsNew.anki.kanji.deck = $('#anki-kanji-deck').val();
+        optionsNew.anki.kanji.model = $('#anki-kanji-model').val();
+        optionsNew.anki.kanji.fields = fieldsToDict($('#kanji .anki-field-value'));
 
         $('.dict-group').each((index, element) => {
             const dictionary = $(element);
             const title = dictionary.data('title');
             const enableTerms = dictionary.find('.dict-enable-terms').prop('checked');
             const enableKanji = dictionary.find('.dict-enable-kanji').prop('checked');
-            optsNew.dictionaries[title] = {enableTerms, enableKanji};
+            optionsNew.dictionaries[title] = {enableTerms, enableKanji};
         });
 
-        return {optsNew, optsOld};
+        return {optionsNew, optionsOld};
     });
 }
 
-function updateVisibility(opts) {
+function updateVisibility(options) {
     const general = $('#anki-general');
-    if (opts.anki.enable) {
+    if (options.anki.enable) {
         general.show();
     } else {
         general.hide();
     }
 
     const advanced = $('.options-advanced');
-    if (opts.general.showAdvanced) {
+    if (options.general.showAdvanced) {
         advanced.show();
     } else {
         advanced.hide();
@@ -80,32 +80,32 @@ function updateVisibility(opts) {
 $(document).ready(() => {
     Handlebars.partials = Handlebars.templates;
 
-    optionsLoad().then(opts => {
-        $('#activate-on-startup').prop('checked', opts.general.autoStart);
-        $('#enable-audio-playback').prop('checked', opts.general.audioPlayback);
-        $('#enable-soft-katakana-search').prop('checked', opts.general.softKatakana);
-        $('#group-term-results').prop('checked', opts.general.groupResults);
-        $('#show-advanced-options').prop('checked', opts.general.showAdvanced);
+    optionsLoad().then(options => {
+        $('#activate-on-startup').prop('checked', options.general.autoStart);
+        $('#enable-audio-playback').prop('checked', options.general.audioPlayback);
+        $('#enable-soft-katakana-search').prop('checked', options.general.softKatakana);
+        $('#group-term-results').prop('checked', options.general.groupResults);
+        $('#show-advanced-options').prop('checked', options.general.showAdvanced);
 
-        $('#hold-shift-to-scan').prop('checked', opts.scanning.requireShift);
-        $('#select-matched-text').prop('checked', opts.scanning.selectText);
-        $('#scan-delay').val(opts.scanning.delay);
-        $('#scan-length').val(opts.scanning.length);
+        $('#hold-shift-to-scan').prop('checked', options.scanning.requireShift);
+        $('#select-matched-text').prop('checked', options.scanning.selectText);
+        $('#scan-delay').val(options.scanning.delay);
+        $('#scan-length').val(options.scanning.length);
 
         $('#dict-purge').click(onDictionaryPurge);
         $('#dict-importer a').click(onDictionarySetUrl);
         $('#dict-import').click(onDictionaryImport);
         $('#dict-url').on('input', onDictionaryUpdateUrl);
 
-        $('#anki-enable').prop('checked', opts.anki.enable);
-        $('#anki-card-tags').val(opts.anki.tags.join(' '));
-        $('#sentence-extent').val(opts.anki.sentenceExt);
+        $('#anki-enable').prop('checked', options.anki.enable);
+        $('#anki-card-tags').val(options.anki.tags.join(' '));
+        $('#sentence-extent').val(options.anki.sentenceExt);
         $('input, select').not('.anki-model').change(onOptionsChanged);
         $('.anki-model').change(onAnkiModelChanged);
 
-        populateDictionaries(opts);
-        populateAnkiDeckAndModel(opts);
-        updateVisibility(opts);
+        populateDictionaries(options);
+        populateAnkiDeckAndModel(options);
+        updateVisibility(options);
     });
 });
 
@@ -135,7 +135,7 @@ function showDictionarySpinner(show) {
     }
 }
 
-function populateDictionaries(opts) {
+function populateDictionaries(options) {
     showDictionaryError(null);
     showDictionarySpinner(true);
 
@@ -145,15 +145,15 @@ function populateDictionaries(opts) {
     let dictCount = 0;
     return database().getDictionaries().then(rows => {
         rows.forEach(row => {
-            const dictOpts = opts.dictionaries[row.title] || {enableTerms: false, enableKanji: false};
+            const dictoptions = options.dictionaries[row.title] || {enableTerms: false, enableKanji: false};
             const html = Handlebars.templates['dictionary.html']({
                 title: row.title,
                 version: row.version,
                 revision: row.revision,
                 hasTerms: row.hasTerms,
                 hasKanji: row.hasKanji,
-                enableTerms: dictOpts.enableTerms,
-                enableKanji: dictOpts.enableKanji
+                enableTerms: dictoptions.enableTerms,
+                enableKanji: dictoptions.enableKanji
             });
 
             dictGroups.append($(html));
@@ -187,7 +187,7 @@ function onDictionaryPurge(e) {
         showDictionarySpinner(false);
         dictControls.show();
         dictProgress.hide();
-        return optionsLoad().then(opts => populateDictionaries(opts));
+        return optionsLoad().then(options => populateDictionaries(options));
     });
 }
 
@@ -210,7 +210,7 @@ function onDictionaryDelete() {
         showDictionarySpinner(false);
         dictProgress.hide();
         dictControls.show();
-        return optionsLoad().then(opts => populateDictionaries(opts));
+        return optionsLoad().then(options => populateDictionaries(options));
     });
 }
 
@@ -227,12 +227,12 @@ function onDictionaryImport() {
 
     setProgress(0.0);
 
-    optionsLoad().then(opts => {
+    optionsLoad().then(options => {
         database().importDictionary(dictUrl.val(), (total, current) => setProgress(current / total * 100.0)).then(summary => {
-            opts.dictionaries[summary.title] = {enableTerms: summary.hasTerms, enableKanji: summary.hasKanji};
-            return optionsSave(opts).then(() => yomichan().setOptions(opts));
+            options.dictionaries[summary.title] = {enableTerms: summary.hasTerms, enableKanji: summary.hasKanji};
+            return optionsSave(options).then(() => yomichan().setOptions(options));
         }).then(() => {
-            return populateDictionaries(opts);
+            return populateDictionaries(options);
         }).catch(error => {
             showDictionaryError(error);
         }).then(() => {
@@ -299,40 +299,7 @@ function fieldsToDict(selection) {
     return result;
 }
 
-function modelIdToCard(id) {
-    return {
-        'anki-term-model': 'terms',
-        'anki-kanji-model': 'kanji'
-    }[id];
-}
-
-function modelIdToMarkers(id) {
-    return {
-        'anki-term-model': [
-            'audio',
-            'dictionary',
-            'expression',
-            'expression-furigana',
-            'glossary',
-            'glossary-list',
-            'reading',
-            'sentence',
-            'tags',
-            'url'
-        ],
-        'anki-kanji-model': [
-            'character',
-            'dictionary',
-            'glossary',
-            'glossary-list',
-            'kunyomi',
-            'onyomi',
-            'url'
-        ],
-    }[id];
-}
-
-function populateAnkiDeckAndModel(opts) {
+function populateAnkiDeckAndModel(options) {
     showAnkiError(null);
     showAnkiSpinner(true);
 
@@ -342,16 +309,16 @@ function populateAnkiDeckAndModel(opts) {
         ankiDeck.find('option').remove();
         deckNames.forEach(name => ankiDeck.append($('<option/>', {value: name, text: name})));
 
-        $('#anki-term-deck').val(opts.anki.terms.deck);
-        $('#anki-kanji-deck').val(opts.anki.kanji.deck);
+        $('#anki-term-deck').val(options.anki.terms.deck);
+        $('#anki-kanji-deck').val(options.anki.kanji.deck);
 
         const ankiModel = $('.anki-model');
         ankiModel.find('option').remove();
         modelNames.forEach(name => ankiModel.append($('<option/>', {value: name, text: name})));
 
         return Promise.all([
-            populateAnkiFields($('#anki-term-model').val(opts.anki.terms.model), opts),
-            populateAnkiFields($('#anki-kanji-model').val(opts.anki.kanji.model), opts)
+            populateAnkiFields($('#anki-term-model').val(options.anki.terms.model), options),
+            populateAnkiFields($('#anki-kanji-model').val(options.anki.kanji.model), options)
         ]);
     }).then(() => {
         ankiFormat.show();
@@ -362,8 +329,9 @@ function populateAnkiDeckAndModel(opts) {
     });
 }
 
-function populateAnkiFields(element, opts) {
+function populateAnkiFields(element, options) {
     const tab = element.closest('.tab-pane');
+    const tabId = tab.attr('id');
     const container = tab.find('tbody').empty();
 
     const modelName = element.val();
@@ -371,13 +339,15 @@ function populateAnkiFields(element, opts) {
         return Promise.resolve();
     }
 
-    const modelId = element.attr('id');
-    const card = modelIdToCard(modelId);
-    const markers = modelIdToMarkers(modelId);
+    const markers = {
+        'terms': ['audio', 'dictionary', 'expression', 'expression-furigana', 'glossary', 'glossary-list', 'reading', 'sentence', 'tags', 'url'],
+        'kanji': ['character', 'dictionary', 'glossary', 'glossary-list', 'kunyomi', 'onyomi', 'url']
+    }[tabId] || {};
 
     return anki().getModelFieldNames(modelName).then(names => {
         names.forEach(name => {
-            const html = Handlebars.templates['model.html']({name, markers, value: opts.anki[card].fields[name] || ''});
+            const value = options.anki[tabId].fields[name] || '';
+            const html = Handlebars.templates['model.html']({name, markers, value});
             container.append($(html));
         });
 
@@ -398,11 +368,14 @@ function onAnkiModelChanged(e) {
     showAnkiError(null);
     showAnkiSpinner(true);
 
-    getFormValues().then(({optsNew, optsOld}) => {
-        const card = modelIdToCard($(this).id);
-        optsNew.anki[card].fields = {};
-        populateAnkiFields($(this), optsNew).then(() => {
-            optionsSave(optsNew).then(() => yomichan().setOptions(optsNew));
+    const element = $(this);
+    getFormValues().then(({optionsNew, optionsOld}) => {
+        const tab = element.closest('.tab-pane');
+        const tabId = tab.attr('id');
+
+        optionsNew.anki[tabId].fields = {};
+        populateAnkiFields(element, optionsNew).then(() => {
+            optionsSave(optionsNew).then(() => yomichan().setOptions(optionsNew));
         }).catch(error => {
             showAnkiError(error);
         }).then(() => {
@@ -416,14 +389,14 @@ function onOptionsChanged(e) {
         return;
     }
 
-    getFormValues().then(({optsNew, optsOld}) => {
-        return optionsSave(optsNew).then(() => {
-            yomichan().setOptions(optsNew);
-            updateVisibility(optsNew);
-            if (optsNew.anki.enable !== optsOld.anki.enable) {
+    getFormValues().then(({optionsNew, optionsOld}) => {
+        return optionsSave(optionsNew).then(() => {
+            yomichan().setOptions(optionsNew);
+            updateVisibility(optionsNew);
+            if (optionsNew.anki.enable !== optionsOld.anki.enable) {
                 showAnkiError(null);
                 showAnkiSpinner(true);
-                return populateAnkiDeckAndModel(optsNew);
+                return populateAnkiDeckAndModel(optionsNew);
             }
         });
     }).catch(error => {
diff --git a/ext/bg/js/yomichan.js b/ext/bg/js/yomichan.js
index 01460289..67b1606c 100644
--- a/ext/bg/js/yomichan.js
+++ b/ext/bg/js/yomichan.js
@@ -32,8 +32,8 @@ class Yomichan {
         chrome.browserAction.onClicked.addListener(this.onBrowserAction.bind(this));
         chrome.runtime.onInstalled.addListener(this.onInstalled.bind(this));
 
-        optionsLoad().then(opts => {
-            this.setOptions(opts);
+        optionsLoad().then(options => {
+            this.setOptions(options);
             if (this.options.general.autoStart) {
                 this.setState('loading');
             }
diff --git a/ext/bg/options.html b/ext/bg/options.html
index 68535a64..55836704 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -154,12 +154,12 @@
 
                     <div id="anki-format">
                         <ul class="nav nav-tabs">
-                            <li class="active"><a href="#term" data-toggle="tab">Terms</a></li>
+                            <li class="active"><a href="#terms" data-toggle="tab">Terms</a></li>
                             <li><a href="#kanji" data-toggle="tab">Kanji</a></li>
                         </ul>
 
                         <div class="tab-content">
-                            <div id="term" class="tab-pane fade in active">
+                            <div id="terms" class="tab-pane fade in active">
                                 <div class="row">
                                     <div class="form-group col-xs-6">
                                         <label for="anki-term-deck">Deck</label>