Options page now works as intended

This commit is contained in:
Alex Yatskov 2016-05-28 18:27:26 -07:00
parent b229295688
commit 7a37c10aed

View File

@ -21,6 +21,19 @@ function yomichan() {
return chrome.extension.getBackgroundPage().yomichan; return chrome.extension.getBackgroundPage().yomichan;
} }
function fieldsToDict(selection) {
const result = {};
selection.each((index, element) => {
result[$(element).data('field')] = $(element).val();
});
return result;
}
function modelIdToFieldOptKey(id) {
return {'anki-vocab-model': 'ankiVocabFields', 'anki-kanji-model': 'ankiKanjiFields'}[id];
}
function formToOptions(section, callback) { function formToOptions(section, callback) {
loadOptions((optsOld) => { loadOptions((optsOld) => {
const optsNew = $.extend({}, optsOld); const optsNew = $.extend({}, optsOld);
@ -36,8 +49,10 @@ function formToOptions(section, callback) {
case 'anki': case 'anki':
optsNew.ankiVocabDeck = $('#anki-vocab-deck').val(); optsNew.ankiVocabDeck = $('#anki-vocab-deck').val();
optsNew.ankiVocabModel = $('#anki-vocab-model').val(); optsNew.ankiVocabModel = $('#anki-vocab-model').val();
optsNew.ankiVocabFields = fieldsToDict($('#vocab .anki-field-value'));
optsNew.ankiKanjiDeck = $('#anki-kanji-deck').val(); optsNew.ankiKanjiDeck = $('#anki-kanji-deck').val();
optsNew.ankiKanjiModel = $('#anki-kanji-model').val(); optsNew.ankiKanjiModel = $('#anki-kanji-model').val();
optsNew.ankiKanjiFields = fieldsToDict($('#kanji .anki-field-value'));
break; break;
} }
@ -77,6 +92,7 @@ function populateAnkiFields(element, opts) {
return; return;
} }
const optKey = modelIdToFieldOptKey(element.attr('id'));
yomichan().api_getModelFieldNames({modelName, callback: (names) => { yomichan().api_getModelFieldNames({modelName, callback: (names) => {
const table = element.closest('.tab-pane').find('.anki-fields'); const table = element.closest('.tab-pane').find('.anki-fields');
table.find('tbody').remove(); table.find('tbody').remove();
@ -85,7 +101,8 @@ function populateAnkiFields(element, opts) {
names.forEach((name) => { names.forEach((name) => {
const row = $('<tr>'); const row = $('<tr>');
row.append($('<td>').text(name)); row.append($('<td>').text(name));
row.append($('<input>', {class: 'anki-field-value form-control'}).data('field', name)); const value = opts[optKey][name] || '';
row.append($('<input>', {class: 'anki-field-value form-control', value}).data('field', name).change(onOptionsAnkiChanged));
body.append(row); body.append(row);
}); });
@ -103,6 +120,9 @@ function onOptionsGeneralChanged(e) {
yomichan().setOptions(optsNew); yomichan().setOptions(optsNew);
if (!optsOld.enableAnkiConnect && optsNew.enableAnkiConnect) { if (!optsOld.enableAnkiConnect && optsNew.enableAnkiConnect) {
populateAnkiDeckAndModel(optsNew); populateAnkiDeckAndModel(optsNew);
$('.options-anki').fadeIn();
} else if (optsOld.enableAnkiConnect && !optsNew.enableAnkiConnect) {
$('.options-anki').fadeOut();
} }
}); });
}); });
@ -116,6 +136,16 @@ function onOptionsAnkiChanged(e) {
} }
} }
function onAnkiModelChanged(e) {
if (e.originalEvent) {
formToOptions('anki', (opts) => {
opts[modelIdToFieldOptKey($(this).id)] = {};
populateAnkiFields($(this), opts);
saveOptions(opts, () => yomichan().setOptions(opts));
});
}
}
$(document).ready(() => { $(document).ready(() => {
loadOptions((opts) => { loadOptions((opts) => {
$('#scan-length').val(opts.scanLength); $('#scan-length').val(opts.scanLength);
@ -125,17 +155,8 @@ $(document).ready(() => {
$('#enable-anki-connect').prop('checked', opts.enableAnkiConnect); $('#enable-anki-connect').prop('checked', opts.enableAnkiConnect);
$('.options-general input').change(onOptionsGeneralChanged); $('.options-general input').change(onOptionsGeneralChanged);
$('.options-anki input, .options-anki select').change(onOptionsAnkiChanged); $('.anki-deck').change(onOptionsAnkiChanged);
$('.anki-model').change((e) => { $('.anki-model').change(onAnkiModelChanged);
loadOptions((opts) => populateAnkiFields($(e.currentTarget), opts));
});
$('#enable-anki-connect').change((e) => {
if ($(e.currentTarget).prop('checked')) {
$('.options-anki').fadeIn();
} else {
$('.options-anki').fadeOut();
}
});
if (opts.enableAnkiConnect) { if (opts.enableAnkiConnect) {
populateAnkiDeckAndModel(opts); populateAnkiDeckAndModel(opts);