alex/yomichan
1
Fork 0
Code Releases Activity

fix options page

Browse Source
This commit is contained in:
Alex Yatskov 2017-01-15 11:15:24 -08:00
parent 6ad860bd72
commit c512412c05
3 changed files with 82 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
ext/bg/js/options-form.js
View File

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

4
ext/bg/js/yomichan.js
View File

@ -32,8 +32,8 @@ class Yomichan {
chrome.browserAction.onClicked.addListener(this.onBrowserAction.bind(this)); chrome.browserAction.onClicked.addListener(this.onBrowserAction.bind(this));
chrome.runtime.onInstalled.addListener(this.onInstalled.bind(this)); chrome.runtime.onInstalled.addListener(this.onInstalled.bind(this));
optionsLoad().then(opts => { optionsLoad().then(options => {
this.setOptions(opts); this.setOptions(options);
if (this.options.general.autoStart) { if (this.options.general.autoStart) {
this.setState('loading'); this.setState('loading');
} }

4
ext/bg/options.html
View File

@ -154,12 +154,12 @@
<div id="anki-format"> <div id="anki-format">
<ul class="nav nav-tabs"> <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> <li><a href="#kanji" data-toggle="tab">Kanji</a></li>
</ul> </ul>
<div class="tab-content"> <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="row">
<div class="form-group col-xs-6"> <div class="form-group col-xs-6">
<label for="anki-term-deck">Deck</label> <label for="anki-term-deck">Deck</label>