aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ext/bg/js/options-form.js49
-rw-r--r--ext/bg/js/yomichan.js4
-rw-r--r--ext/bg/options.html8
3 files changed, 46 insertions, 15 deletions
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index 31756486..06be044a 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -17,6 +17,10 @@
*/
+function yomichan() {
+ return chrome.extension.getBackgroundPage().yomichan;
+}
+
function optionsToForm(opts) {
$('#activateOnStartup').prop('checked', opts.activateOnStartup);
$('#enableAnkiConnect').prop('checked', opts.enableAnkiConnect);
@@ -35,21 +39,21 @@ function formToOptions() {
});
}
-function updateAnkiFormDataVis(opts) {
+function updateAnkiFormVis(opts) {
if (opts.enableAnkiConnect) {
- updateAnkiFormData();
+ populateAnkiDeckAndModel();
$('.options-anki').fadeIn();
} else {
$('.options-anki').fadeOut();
}
}
-function updateAnkiFormData() {
- const yomichan = chrome.extension.getBackgroundPage().yomichan;
+function populateAnkiDeckAndModel() {
+ const yomi = yomichan();
const ankiDeck = $('.ankiDeck');
ankiDeck.find('option').remove();
- yomichan.api_getDeckNames({callback: (names) => {
+ yomi.api_getDeckNames({callback: (names) => {
if (names !== null) {
names.forEach((name) => ankiDeck.append($('<option/>', {value: name, text: name})));
}
@@ -57,25 +61,52 @@ function updateAnkiFormData() {
const ankiModel = $('.ankiModel');
ankiModel.find('option').remove();
- yomichan.api_getModelNames({callback: (names) => {
+ yomi.api_getModelNames({callback: (names) => {
if (names !== null) {
names.forEach((name) => ankiModel.append($('<option/>', {value: name, text: name})));
+ $('.ankiModel').trigger('change');
}
}});
+
}
function onOptionsChanged() {
const opts = formToOptions();
saveOptions(opts, () => {
- chrome.extension.getBackgroundPage().yomichan.setOptions(opts);
- updateAnkiFormDataVis(opts);
+ yomichan().setOptions(opts);
+ updateAnkiFormVis(opts);
});
}
+function onModelChanged() {
+ const modelName = $(this).val();
+ if (modelName === null) {
+ return;
+ }
+
+ yomichan().api_getModelFieldNames({modelName, callback: (names) => {
+ const table = $(this).closest('.tab-pane').find('.ankiFields');
+ table.find('tbody').remove();
+
+ const body = $('<tbody>');
+ names.forEach((name) => {
+ const row = $('<tr>');
+ row.append($('<td>').text(name));
+ row.append($('<input>', {class: 'ankiFieldValue form-control'}).data('field', name));
+ body.append(row);
+ });
+
+ table.append(body);
+ }});
+}
+
$(document).ready(() => {
loadOptions((opts) => {
optionsToForm(opts);
- updateAnkiFormDataVis(opts);
+
$('input').on('input paste change', onOptionsChanged);
+ $('.ankiModel').change(onModelChanged);
+
+ updateAnkiFormVis(opts);
});
});
diff --git a/ext/bg/js/yomichan.js b/ext/bg/js/yomichan.js
index 1714e778..d62f97aa 100644
--- a/ext/bg/js/yomichan.js
+++ b/ext/bg/js/yomichan.js
@@ -156,8 +156,8 @@ class Yomichan {
this.ankiInvoke('modelNames', {}, null, callback);
}
- api_getModelFieldNames({callback}) {
- this.ankiInvoke('modelFieldNames', {}, null, callback);
+ api_getModelFieldNames({modelName, callback}) {
+ this.ankiInvoke('modelFieldNames', {modelName}, null, callback);
}
api_getOptions({callback}) {
diff --git a/ext/bg/options.html b/ext/bg/options.html
index ae7e4257..6f4bd8a8 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -93,14 +93,14 @@
</div>
</div>
- <table class="table table-bordered">
+ <table class="table table-bordered ankiFields">
<thead>
<tr>
<th>Field</th>
<th>Value</th>
</tr>
</thead>
- <tbody class="ankiFields">
+ <tbody>
</tbody>
</table>
</div>
@@ -119,14 +119,14 @@
</div>
</div>
- <table class="table table-bordered">
+ <table class="table table-bordered ankiFields">
<thead>
<tr>
<th>Field</th>
<th>Value</th>
</tr>
</thead>
- <tbody class="ankiFields">
+ <tbody>
</tbody>
</table>
</div>