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);
}
function formToOptions() {
return sanitizeOptions({
scanLength: $('#scan-length').val(),
activateOnStartup: $('#activate-on-startup').prop('checked'),
loadEnamDict: $('#load-enamdict').prop('checked'),
selectMatchedText: $('#select-matched-text').prop('checked'),
enableAnkiConnect: $('#enable-anki-connect').prop('checked'),
ankiVocabDeck: $('#anki-vocab-deck').val(),
ankiVocabModel: $('#anki-vocab-model').val(),
ankiKanjiDeck: $('#anki-kanji-deck').val(),
ankiKanjiModel: $('#anki-kanji-model').val()
});
function formToOptions(section, callback) {
loadOptions((optsOld) => {
const optsNew = $.extend({}, optsOld);
switch (section) {
case 'general':
optsNew.scanLength = $('#scan-length').val();
optsNew.activateOnStartup = $('#activate-on-startup').prop('checked');
optsNew.loadEnamDict = $('#load-enamdict').prop('checked');
optsNew.selectMatchedText = $('#select-matched-text').prop('checked');
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) {
if (opts.enableAnkiConnect) {
populateAnkiDeckAndModel();
$('.options-anki').fadeIn();
} else {
$('.options-anki').fadeOut();
}
callback(sanitizeOptions(optsNew), sanitizeOptions(optsOld));
});
}
function populateAnkiDeckAndModel() {
@ -72,18 +73,32 @@ function populateAnkiDeckAndModel() {
yomi.api_getModelNames({callback: (names) => {
if (names !== null) {
names.forEach((name) => ankiModel.append($('<option/>', {value: name, text: name})));
$('.anki-model').trigger('change');
ankiModel.trigger('change');
}
}});
}
function onOptionsChanged() {
const opts = formToOptions();
saveOptions(opts, () => {
yomichan().setOptions(opts);
updateAnkiFormVis(opts);
function onOptionsGeneralChanged(e) {
if (!e.originalEvent) {
return;
}
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() {
@ -112,9 +127,20 @@ $(document).ready(() => {
loadOptions((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);
$('#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">
<div class="form-group">
<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 class="form-group">
@ -52,7 +52,7 @@
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<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>