summaryrefslogtreecommitdiff
path: root/ext/bg/js/settings.js
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 /ext/bg/js/settings.js
parent40c8268fd6b32c9918fbebd374723cd17f2e19aa (diff)
Use HTML templates for anki fields
Diffstat (limited to 'ext/bg/js/settings.js')
-rw-r--r--ext/bg/js/settings.js99
1 files changed, 67 insertions, 32 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));
}