aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlex Yatskov <alex@foosoft.net>2017-01-15 11:15:24 -0800
committerAlex Yatskov <alex@foosoft.net>2017-01-15 11:15:24 -0800
commitc512412c057573a9cf07efd6b1040c5017300406 (patch)
tree09b8a3134f500c204f642c3bdb22766c1a6fa7f6
parent6ad860bd728d8cca8f30ef83c34bdba8801f0238 (diff)
fix options page
-rw-r--r--ext/bg/js/options-form.js189
-rw-r--r--ext/bg/js/yomichan.js4
-rw-r--r--ext/bg/options.html4
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>