aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-11-09 14:24:36 -0500
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-11-09 14:31:13 -0500
commit085881d3426c5a872739d56e286514317b2ec8f3 (patch)
tree2b208d3a190e9bab835f97d33477556b8e226dd6
parent40c8268fd6b32c9918fbebd374723cd17f2e19aa (diff)
Use HTML templates for anki fields
-rw-r--r--ext/bg/js/settings.js99
-rw-r--r--ext/bg/js/templates.js17
-rw-r--r--ext/bg/settings.html17
-rw-r--r--tmpl/model.html18
4 files changed, 84 insertions, 67 deletions
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index d4b1549e..daa997d4 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -489,6 +489,71 @@ async function ankiDeckAndModelPopulate(options) {
ankiFormat.show();
}
+function ankiCreateFieldTemplate(name, value, markers) {
+ const template = document.querySelector('#anki-field-template').content;
+ const content = document.importNode(template, true).firstChild;
+
+ content.querySelector('.anki-field-name').textContent = name;
+
+ const field = content.querySelector('.anki-field-value');
+ field.dataset.field = name;
+ field.value = value;
+
+ content.querySelector('.anki-field-marker-list').appendChild(ankiGetFieldMarkersHtml(markers));
+
+ return content;
+}
+
+function ankiGetFieldMarkersHtml(markers, fragment) {
+ const template = document.querySelector('#anki-field-marker-template').content;
+ if (!fragment) {
+ fragment = new DocumentFragment();
+ }
+ for (const marker of markers) {
+ const markerNode = document.importNode(template, true).firstChild;
+ markerNode.querySelector('.marker-link').textContent = marker;
+ fragment.appendChild(markerNode);
+ }
+ return fragment;
+}
+
+function ankiGetFieldMarkers(type) {
+ switch (type) {
+ case 'terms':
+ return [
+ 'audio',
+ 'cloze-body',
+ 'cloze-prefix',
+ 'cloze-suffix',
+ 'dictionary',
+ 'expression',
+ 'furigana',
+ 'furigana-plain',
+ 'glossary',
+ 'glossary-brief',
+ 'reading',
+ 'screenshot',
+ 'sentence',
+ 'tags',
+ 'url'
+ ];
+ case 'kanji':
+ return [
+ 'character',
+ 'dictionary',
+ 'glossary',
+ 'kunyomi',
+ 'onyomi',
+ 'screenshot',
+ 'sentence',
+ 'tags',
+ 'url'
+ ];
+ default:
+ return [];
+ }
+}
+
async function ankiFieldsPopulate(element, options) {
const modelName = element.val();
if (!modelName) {
@@ -498,41 +563,11 @@ async function ankiFieldsPopulate(element, options) {
const tab = element.closest('.tab-pane');
const tabId = tab.attr('id');
const container = tab.find('tbody').empty();
-
- const markers = {
- 'terms': [
- 'audio',
- 'cloze-body',
- 'cloze-prefix',
- 'cloze-suffix',
- 'dictionary',
- 'expression',
- 'furigana',
- 'furigana-plain',
- 'glossary',
- 'glossary-brief',
- 'reading',
- 'screenshot',
- 'sentence',
- 'tags',
- 'url'
- ],
- 'kanji': [
- 'character',
- 'dictionary',
- 'glossary',
- 'kunyomi',
- 'onyomi',
- 'screenshot',
- 'sentence',
- 'tags',
- 'url'
- ]
- }[tabId] || {};
+ const markers = ankiGetFieldMarkers(tabId);
for (const name of await utilAnkiGetModelFieldNames(modelName)) {
const value = options.anki[tabId].fields[name] || '';
- const html = Handlebars.templates['model.html']({name, markers, value});
+ const html = ankiCreateFieldTemplate(name, value, markers);
container.append($(html));
}
diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index c8c95cc2..823b9e6f 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -163,23 +163,6 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
}
,"useDecorators":true,"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 : (container.nullContext || {}), 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['terms.html'] = template({"1":function(container,depth0,helpers,partials,data) {
var stack1, helper, options, alias1=depth0 != null ? depth0 : (container.nullContext || {}), buffer =
"<div class=\"dict-";
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 86feacf7..86d8935d 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -704,6 +704,23 @@
</p>
<textarea autocomplete="off" spellcheck="false" wrap="soft" class="form-control" rows="10" id="field-templates"></textarea>
</div>
+
+ <template id="anki-field-template"><tr>
+ <td class="col-sm-2 anki-field-name"></td>
+ <td class="col-sm-10">
+ <div class="input-group">
+ <input type="text" class="anki-field-value form-control" data-field="" 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 anki-field-marker-list"></ul>
+ </div>
+ </div>
+ </td>
+ </tr></template>
+
+ <template id="anki-field-marker-template"><li><a class="marker-link" href="#"></a></li></template>
</div>
</div>
</div>
diff --git a/tmpl/model.html b/tmpl/model.html
deleted file mode 100644
index 94772316..00000000
--- a/tmpl/model.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<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>