diff options
Diffstat (limited to 'ext')
-rw-r--r-- | ext/bg/js/settings.js | 99 | ||||
-rw-r--r-- | ext/bg/js/templates.js | 17 | ||||
-rw-r--r-- | ext/bg/settings.html | 17 |
3 files changed, 84 insertions, 49 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> |