Use HTML templates for anki fields
This commit is contained in:
parent
40c8268fd6
commit
085881d342
@ -489,18 +489,38 @@ async function ankiDeckAndModelPopulate(options) {
|
|||||||
ankiFormat.show();
|
ankiFormat.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function ankiFieldsPopulate(element, options) {
|
function ankiCreateFieldTemplate(name, value, markers) {
|
||||||
const modelName = element.val();
|
const template = document.querySelector('#anki-field-template').content;
|
||||||
if (!modelName) {
|
const content = document.importNode(template, true).firstChild;
|
||||||
return;
|
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
const tab = element.closest('.tab-pane');
|
function ankiGetFieldMarkersHtml(markers, fragment) {
|
||||||
const tabId = tab.attr('id');
|
const template = document.querySelector('#anki-field-marker-template').content;
|
||||||
const container = tab.find('tbody').empty();
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
const markers = {
|
function ankiGetFieldMarkers(type) {
|
||||||
'terms': [
|
switch (type) {
|
||||||
|
case 'terms':
|
||||||
|
return [
|
||||||
'audio',
|
'audio',
|
||||||
'cloze-body',
|
'cloze-body',
|
||||||
'cloze-prefix',
|
'cloze-prefix',
|
||||||
@ -516,8 +536,9 @@ async function ankiFieldsPopulate(element, options) {
|
|||||||
'sentence',
|
'sentence',
|
||||||
'tags',
|
'tags',
|
||||||
'url'
|
'url'
|
||||||
],
|
];
|
||||||
'kanji': [
|
case 'kanji':
|
||||||
|
return [
|
||||||
'character',
|
'character',
|
||||||
'dictionary',
|
'dictionary',
|
||||||
'glossary',
|
'glossary',
|
||||||
@ -527,12 +548,26 @@ async function ankiFieldsPopulate(element, options) {
|
|||||||
'sentence',
|
'sentence',
|
||||||
'tags',
|
'tags',
|
||||||
'url'
|
'url'
|
||||||
]
|
];
|
||||||
}[tabId] || {};
|
default:
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function ankiFieldsPopulate(element, options) {
|
||||||
|
const modelName = element.val();
|
||||||
|
if (!modelName) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tab = element.closest('.tab-pane');
|
||||||
|
const tabId = tab.attr('id');
|
||||||
|
const container = tab.find('tbody').empty();
|
||||||
|
const markers = ankiGetFieldMarkers(tabId);
|
||||||
|
|
||||||
for (const name of await utilAnkiGetModelFieldNames(modelName)) {
|
for (const name of await utilAnkiGetModelFieldNames(modelName)) {
|
||||||
const value = options.anki[tabId].fields[name] || '';
|
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));
|
container.append($(html));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -163,23 +163,6 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
|
|||||||
}
|
}
|
||||||
|
|
||||||
,"useDecorators":true,"usePartial":true,"useData":true,"useDepths":true});
|
,"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) {
|
templates['terms.html'] = template({"1":function(container,depth0,helpers,partials,data) {
|
||||||
var stack1, helper, options, alias1=depth0 != null ? depth0 : (container.nullContext || {}), buffer =
|
var stack1, helper, options, alias1=depth0 != null ? depth0 : (container.nullContext || {}), buffer =
|
||||||
"<div class=\"dict-";
|
"<div class=\"dict-";
|
||||||
|
@ -704,6 +704,23 @@
|
|||||||
</p>
|
</p>
|
||||||
<textarea autocomplete="off" spellcheck="false" wrap="soft" class="form-control" rows="10" id="field-templates"></textarea>
|
<textarea autocomplete="off" spellcheck="false" wrap="soft" class="form-control" rows="10" id="field-templates"></textarea>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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>
|
|
Loading…
Reference in New Issue
Block a user