aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authorAlex Yatskov <alex@foosoft.net>2016-11-06 17:10:31 -0800
committerAlex Yatskov <alex@foosoft.net>2016-11-06 17:10:31 -0800
commitfd6622400f64b2d568d38bde72f9fd75f8d06beb (patch)
tree35c7772acc0b37e56196138207bf4e73a5061d5d /ext
parent5172155c7813965ca8f896940fa30e613f08ebac (diff)
Templates
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/js/dictionary.js10
-rw-r--r--ext/bg/js/options-form.js36
-rw-r--r--ext/bg/js/templates.js18
-rw-r--r--ext/bg/js/util.js10
-rw-r--r--ext/bg/options.html14
5 files changed, 55 insertions, 33 deletions
diff --git a/ext/bg/js/dictionary.js b/ext/bg/js/dictionary.js
index 5859350b..008bc483 100644
--- a/ext/bg/js/dictionary.js
+++ b/ext/bg/js/dictionary.js
@@ -131,7 +131,7 @@ class Dictionary {
});
}
- getNames() {
+ getInfo() {
if (this.db === null) {
return Promise.reject('database not initialized');
}
@@ -144,8 +144,8 @@ class Dictionary {
return Promise.reject('database not initialized');
}
- const indexLoaded = (dictionary, version, entities) => {
- return this.db.dictionaries.add({dictionary, version}).then(() => {
+ const indexLoaded = (dictionary, version, entities, hasTerms, hasKanji) => {
+ return this.db.dictionaries.add({dictionary, version, hasTerms, hasKanji}).then(() => {
this.entities = entities || {};
const rows = [];
@@ -161,7 +161,7 @@ class Dictionary {
});
};
- const termsLoaded = (dictionary, version, entries, total, current) => {
+ const termsLoaded = (dictionary, entries, total, current) => {
const rows = [];
for (const [expression, reading, tags, ...glossary] of entries) {
rows.push({
@@ -180,7 +180,7 @@ class Dictionary {
});
};
- const kanjiLoaded = (dictionary, version, entries, total, current) => {
+ const kanjiLoaded = (dictionary, entries, total, current) => {
const rows = [];
for (const [character, onyomi, kunyomi, tags, ...meanings] of entries) {
rows.push({
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index 060ee269..ec603eed 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -155,25 +155,21 @@ function populateAnkiDeckAndModel(opts) {
}
function populateDictionaries() {
- // const dictGroups = $('.dictionaries');
- // dictGroups.empty();
-
- // yomichan().translator.dictionary.getNames().then(rows => {
- // for (const row of rows) {
- // const dictPanel = $('<div>', {class: 'dictionary panel panel-default'});
- // const dictRow = $('<div>', {class: 'panel-body row'}).appendTo(dictPanel);
-
- // const title = $('<div>', {class: 'col-xs-8'});
- // $('<h4>').append().html(`<span class="text-muted glyphicon glyphicon-book"></span> ${row.dictionary} <small>v.${row.version}</small>`).appendTo(title);
- // title.appendTo(dictRow);
-
- // const controls = $('<div>', {class: 'col-xs-4 text-right'});
- // $('<button>', {class: 'btn btn-danger dictionary-delete'}).text('Delete').appendTo(controls);
- // controls.appendTo(dictRow);
-
- // dictGroups.append(dictPanel);
- // }
- // });
+ const dictGroups = $('.dictionaries');
+ dictGroups.empty();
+
+ yomichan().translator.dictionary.getInfo().then(rows => {
+ for (const row of rows) {
+ const html = Handlebars.templates['dictionary.html']({
+ name: row.dictionary,
+ version: row.version,
+ hasTerms: row.hasTerms,
+ hasKanji: row.hasKanji
+ });
+
+ dictGroups.append($(html));
+ }
+ });
}
function populateAnkiFields(element, opts) {
@@ -276,6 +272,8 @@ function onAnkiModelChanged(e) {
}
$(document).ready(() => {
+ Handlebars.partials = Handlebars.templates;
+
loadOptions().then(opts => {
$('#activate-on-startup').prop('checked', opts.activateOnStartup);
$('#enable-audio-playback').prop('checked', opts.enableAudioPlayback);
diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index 70920cec..d9825914 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -1,5 +1,23 @@
(function() {
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['dictionary.html'] = template({"1":function(container,depth0,helpers,partials,data) {
+ return " <div class=\"checkbox\">\n <label><input type=\"checkbox\" class=\"dict-enable-terms\"> Enable term search</label>\n </div>\n";
+},"3":function(container,depth0,helpers,partials,data) {
+ return " <div class=\"checkbox\">\n <label><input type=\"checkbox\" class=\"dict-enable-kanji\"> Enable Kanji search</label>\n </div>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+ var stack1, helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+ return "<div class=\"dictionary well well-sm\" data-name=\""
+ + 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)))
+ + "\">\n <div class=\"row\">\n <div class=\"col-xs-8\">\n <h4><span class=\"text-muted glyphicon glyphicon-book\"></span> "
+ + 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)))
+ + " <small>v."
+ + alias4(((helper = (helper = helpers.version || (depth0 != null ? depth0.version : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"version","hash":{},"data":data}) : helper)))
+ + "</small></h4>\n </div>\n <div class=\"col-xs-4 text-right\">\n <button type=\"button\" class=\"dict-delete btn btn-danger\">Delete</button>\n </div>\n </div>\n\n"
+ + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.hasTerms : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.hasKanji : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ + "</div>\n";
+},"useData":true});
templates['footer.html'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var helper;
diff --git a/ext/bg/js/util.js b/ext/bg/js/util.js
index eaa7dd01..e99cdeab 100644
--- a/ext/bg/js/util.js
+++ b/ext/bg/js/util.js
@@ -121,7 +121,13 @@ function importJsonDb(indexUrl, indexLoaded, termsLoaded, kanjiLoaded) {
const indexDir = indexUrl.slice(0, indexUrl.lastIndexOf('/'));
return loadJson(indexUrl).then(index => {
if (indexLoaded !== null) {
- return indexLoaded(index.title, index.version).then(() => index);
+ return indexLoaded(
+ index.title,
+ index.version,
+ index.entities,
+ index.termBanks > 0,
+ index.kanjiBanks > 0
+ ).then(() => index);
}
return index;
@@ -134,7 +140,6 @@ function importJsonDb(indexUrl, indexLoaded, termsLoaded, kanjiLoaded) {
const bankUrl = `${indexDir}/term_bank_${i}.json`;
loaders.push(() => loadJson(bankUrl).then(entries => termsLoaded(
index.title,
- index.version,
entries,
banksTotal,
banksLoaded++
@@ -145,7 +150,6 @@ function importJsonDb(indexUrl, indexLoaded, termsLoaded, kanjiLoaded) {
const bankUrl = `${indexDir}/kanji_bank_${i}.json`;
loaders.push(() => loadJson(bankUrl).then(entries => kanjiLoaded(
index.title,
- index.version,
entries,
banksTotal,
banksLoaded++
diff --git a/ext/bg/options.html b/ext/bg/options.html
index 1136eefc..acd786cf 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -124,18 +124,18 @@
</div>
<div class="form-group">
- <label for="anki-method">Connection method</label>
- <select class="form-control" id="anki-method">
- <option value="disabled">Disabled (no auto flashcard creation)</option>
- <option value="ankiconnect">AnkiConnect (requires the AnkiConnect plugin)</option>
- <option value="ankiweb">AnkiWeb (requires an account on AnkiWeb)</option>
- </select>
<p class="help-block">
Yomichan features automatic flashcard creation for <a href="http://ankisrs.net/">Anki</a>, a free application
designed to help you retain knowledge. While the <a href="https://foosoft.net/projects/anki-connect/">AnkiConnect</a> plugin
offers the best experience, it is also possible to create flashcards through <a href="https://ankiweb.net/">AnkiWeb</a>,
provided you already have an account.
</p>
+ <label for="anki-method">Connection method</label>
+ <select class="form-control" id="anki-method">
+ <option value="disabled">Disabled (no auto flashcard creation)</option>
+ <option value="ankiconnect">AnkiConnect (requires the AnkiConnect plugin)</option>
+ <option value="ankiweb">AnkiWeb (requires an account on AnkiWeb)</option>
+ </select>
</div>
<div id="anki-general">
@@ -217,6 +217,8 @@
<script src="../lib/jquery-2.2.2.min.js"></script>
<script src="../lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
+ <script src="../lib/handlebars.min.js"></script>
+ <script src="js/templates.js"></script>
<script src="js/options.js"></script>
<script src="js/options-form.js"></script>
</body>