Use HTML templates for anki fields

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 = ankiGetFieldMarkers(tabId);
-    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] || {};
 
     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));
     }
 

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-";

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>

tmpl/model.html

@@ -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>