alex/yomichan
1
Fork 0
Code Releases Activity

Improvements to options page

Browse Source
This commit is contained in:
Alex Yatskov 2016-05-28 13:35:46 -07:00
parent e7b6b171cb
commit 4103b09893
2 changed files with 57 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,27 +33,28 @@ function optionsToForm(opts) {
$('#anki-kanji-model').val(opts.ankiKanjiModel); $('#anki-kanji-model').val(opts.ankiKanjiModel);
} }
function formToOptions() { function formToOptions(section, callback) {
return sanitizeOptions({ loadOptions((optsOld) => {
scanLength: $('#scan-length').val(), const optsNew = $.extend({}, optsOld);
activateOnStartup: $('#activate-on-startup').prop('checked'),
loadEnamDict: $('#load-enamdict').prop('checked'), switch (section) {
selectMatchedText: $('#select-matched-text').prop('checked'), case 'general':
enableAnkiConnect: $('#enable-anki-connect').prop('checked'), optsNew.scanLength = $('#scan-length').val();
ankiVocabDeck: $('#anki-vocab-deck').val(), optsNew.activateOnStartup = $('#activate-on-startup').prop('checked');
ankiVocabModel: $('#anki-vocab-model').val(), optsNew.loadEnamDict = $('#load-enamdict').prop('checked');
ankiKanjiDeck: $('#anki-kanji-deck').val(), optsNew.selectMatchedText = $('#select-matched-text').prop('checked');
ankiKanjiModel: $('#anki-kanji-model').val() optsNew.enableAnkiConnect = $('#enable-anki-connect').prop('checked');
}); break;
case 'anki':
optsNew.ankiVocabDeck = $('#anki-vocab-deck').val();
optsNew.ankiVocabModel = $('#anki-vocab-model').val();
optsNew.ankiKanjiDeck = $('#anki-kanji-deck').val();
optsNew.ankiKanjiModel = $('#anki-kanji-model').val();
break;
} }
function updateAnkiFormVis(opts) { callback(sanitizeOptions(optsNew), sanitizeOptions(optsOld));
if (opts.enableAnkiConnect) { });
populateAnkiDeckAndModel();
$('.options-anki').fadeIn();
} else {
$('.options-anki').fadeOut();
}
} }
function populateAnkiDeckAndModel() { function populateAnkiDeckAndModel() {
@ -72,18 +73,32 @@ function populateAnkiDeckAndModel() {
yomi.api_getModelNames({callback: (names) => { yomi.api_getModelNames({callback: (names) => {
if (names !== null) { if (names !== null) {
names.forEach((name) => ankiModel.append($('<option/>', {value: name, text: name}))); names.forEach((name) => ankiModel.append($('<option/>', {value: name, text: name})));
$('.anki-model').trigger('change'); ankiModel.trigger('change');
} }
}}); }});
} }
function onOptionsChanged() { function onOptionsGeneralChanged(e) {
const opts = formToOptions(); if (!e.originalEvent) {
saveOptions(opts, () => { return;
yomichan().setOptions(opts); }
updateAnkiFormVis(opts);
formToOptions('general', (optsNew, optsOld) => {
saveOptions(optsNew, () => {
yomichan().setOptions(optsNew);
if (!optsOld.enableAnkiConnect && optsNew.enableAnkiConnect) {
populateAnkiDeckAndModel();
}
}); });
});
}
function onOptionsAnkiChanged(e) {
if (e.originalEvent) {
formToOptions('anki', (opts) => {
saveOptions(opts, () => yomichan().setOptions(opts));
});
}
} }
function onModelChanged() { function onModelChanged() {
@ -112,9 +127,20 @@ $(document).ready(() => {
loadOptions((opts) => { loadOptions((opts) => {
optionsToForm(opts); optionsToForm(opts);
$('input, select').on('input paste change', onOptionsChanged); $('.options-general input').change(onOptionsGeneralChanged);
$('.options-anki input, .options-anki select').change(onOptionsAnkiChanged);
$('.anki-model').change(onModelChanged); $('.anki-model').change(onModelChanged);
$('#enable-anki-connect').change(() => {
if ($('#enable-anki-connect').prop('checked')) {
$('.options-anki').fadeIn();
} else {
$('.options-anki').fadeOut();
}
});
updateAnkiFormVis(opts); if (opts.enableAnkiConnect) {
populateAnkiDeckAndModel();
$('.options-anki').show();
}
}); });
}); });

4
ext/bg/options.html
View File

@ -30,7 +30,7 @@
<form class="form-horizontal"> <form class="form-horizontal">
<div class="form-group"> <div class="form-group">
<label for="scan-length" class="control-label col-sm-2">Scan length</label> <label for="scan-length" class="control-label col-sm-2">Scan length</label>
<div class="col-sm-10"><input type="number" value="20" min="1" id="scan-length" class="form-control"></div> <div class="col-sm-10"><input type="number" min="1" id="scan-length" class="form-control"></div>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -52,7 +52,7 @@
<div class="form-group"> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10"> <div class="col-sm-offset-2 col-sm-10">
<div class="checkbox"> <div class="checkbox">
<label class="control-label"><input type="checkbox" id="select-matched-text" checked> Select matched text</label> <label class="control-label"><input type="checkbox" id="select-matched-text"> Select matched text</label>
</div> </div>
</div> </div>
</div> </div>