aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ext/bg/js/options-form.js56
-rw-r--r--ext/bg/js/templates.js17
-rw-r--r--tmpl/model.html18
3 files changed, 54 insertions, 37 deletions
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index ec603eed..98ec15a3 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -155,11 +155,11 @@ function populateAnkiDeckAndModel(opts) {
}
function populateDictionaries() {
- const dictGroups = $('.dictionaries');
- dictGroups.empty();
+ const container = $('.dictionaries');
+ container.empty();
yomichan().translator.dictionary.getInfo().then(rows => {
- for (const row of rows) {
+ rows.forEach(row => {
const html = Handlebars.templates['dictionary.html']({
name: row.dictionary,
version: row.version,
@@ -167,14 +167,15 @@ function populateDictionaries() {
hasKanji: row.hasKanji
});
- dictGroups.append($(html));
- }
+ container.append($(html));
+ });
});
}
function populateAnkiFields(element, opts) {
- const table = element.closest('.tab-pane').find('.anki-fields');
- table.find('tbody').remove();
+ const tab = element.closest('.tab-pane');
+ const container = tab.find('.anki-fields tbody');
+ container.empty();
const modelName = element.val();
if (modelName === null) {
@@ -186,41 +187,22 @@ function populateAnkiFields(element, opts) {
const markers = modelIdToMarkers(modelId);
return anki().getModelFieldNames(modelName).then(names => {
- const tbody = $('<tbody>');
names.forEach(name => {
- const button = $('<button>', {type: 'button', class: 'btn btn-default dropdown-toggle'});
- button.attr('data-toggle', 'dropdown').dropdown();
-
- const markerItems = $('<ul>', {class: 'dropdown-menu dropdown-menu-right'});
- for (const marker of markers) {
- const link = $('<a>', {href: '#'}).text(`{${marker}}`);
- link.click(e => {
- e.preventDefault();
- link.closest('.input-group').find('.anki-field-value').val(link.text()).trigger('change');
- });
- markerItems.append($('<li>').append(link));
- }
-
- const groupBtn = $('<div>', {class: 'input-group-btn'});
- groupBtn.append(button.append($('<span>', {class: 'caret'})));
- groupBtn.append(markerItems);
-
- const group = $('<div>', {class: 'input-group'});
- group.append($('<input>', {
- type: 'text',
- class: 'anki-field-value form-control',
+ const html = Handlebars.templates['model.html']({
+ name,
+ markers,
value: opts[optKey][name] || ''
- }).data('field', name).change(onOptionsChanged));
- group.append(groupBtn);
-
- const row = $('<tr>');
- row.append($('<td>', {class: 'col-sm-2'}).text(name));
- row.append($('<td>', {class: 'col-sm-10'}).append(group));
+ });
- tbody.append(row);
+ container.append($(html));
});
- table.append(tbody);
+ tab.find('.anki-field-value').change(onOptionsChanged);
+ tab.find('.marker-link').click(e => {
+ e.preventDefault();
+ const link = e.target;
+ $(link).closest('.input-group').find('.anki-field-value').val(`{${link.text}}`).trigger('change');
+ });
});
}
diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index d9825914..7e78db3b 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -104,6 +104,23 @@ templates['kanji-list.html'] = template({"1":function(container,depth0,helpers,p
+ ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ ((stack1 = container.invokePartial(partials["footer.html"],depth0,{"name":"footer.html","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
},"usePartial":true,"useData":true,"useDepths":true});
+templates['model.html'] = template({"1":function(container,depth0,helpers,partials,data) {
+ return " <li><a class=\"marker-link\" href=\"#\">"
+ + container.escapeExpression(container.lambda(depth0, depth0))
+ + "</a></li>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+ var stack1, helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+ return "<tr>\n <td class=\"col-sm-2\">"
+ + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+ + "</td>\n <td class=\"col-sm-10\">\n <div class=\"input-group\">\n <input type=\"text\" class=\"anki-field-value form-control\" data-field=\""
+ + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+ + "\" value=\""
+ + alias4(((helper = (helper = helpers.value || (depth0 != null ? depth0.value : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"value","hash":{},"data":data}) : helper)))
+ + "\">\n <div class=\"input-group-btn\">\n <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\">\n <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu dropdown-menu-right\">\n"
+ + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.markers : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ + " </ul>\n </div>\n </div>\n </td>\n</tr>\n";
+},"useData":true});
templates['term.html'] = template({"1":function(container,depth0,helpers,partials,data) {
var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
diff --git a/tmpl/model.html b/tmpl/model.html
new file mode 100644
index 00000000..94772316
--- /dev/null
+++ b/tmpl/model.html
@@ -0,0 +1,18 @@
+<tr>
+ <td class="col-sm-2">{{name}}</td>
+ <td class="col-sm-10">
+ <div class="input-group">
+ <input type="text" class="anki-field-value form-control" data-field="{{name}}" value="{{value}}">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-right">
+ {{#each markers}}
+ <li><a class="marker-link" href="#">{{.}}</a></li>
+ {{/each}}
+ </ul>
+ </div>
+ </div>
+ </td>
+</tr>