diff options
-rw-r--r-- | ext/bg/js/options-form.js | 189 | ||||
-rw-r--r-- | ext/bg/js/yomichan.js | 4 | ||||
-rw-r--r-- | ext/bg/options.html | 4 |
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> |