Templates

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) => {
+        const indexLoaded = (dictionary, version, entities, hasTerms, hasKanji) => {
-            return this.db.dictionaries.add({dictionary, version}).then(() => {
+            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({

ext/bg/js/options-form.js

@@ -155,25 +155,21 @@ function populateAnkiDeckAndModel(opts) {
 }
 
 function populateDictionaries() {
-    // const dictGroups = $('.dictionaries');
+    const dictGroups = $('.dictionaries');
-    // dictGroups.empty();
+    dictGroups.empty();
 
-    // yomichan().translator.dictionary.getNames().then(rows => {
+    yomichan().translator.dictionary.getInfo().then(rows => {
-    //     for (const row of rows) {
+        for (const row of rows) {
-    //         const dictPanel = $('<div>', {class: 'dictionary panel panel-default'});
+            const html = Handlebars.templates['dictionary.html']({
-    //         const dictRow = $('<div>', {class: 'panel-body row'}).appendTo(dictPanel);
+                name: row.dictionary,
+                version: row.version,
+                hasTerms: row.hasTerms,
+                hasKanji: row.hasKanji
+            });
 
-    //         const title = $('<div>', {class: 'col-xs-8'});
+            dictGroups.append($(html));
-    //         $('<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);
-    //     }
-    // });
 }
 
 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);

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;
 

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

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>

tmpl/dictionary.html

@@ -0,0 +1,21 @@
+<div class="dictionary well well-sm" data-name="{{name}}">
+    <div class="row">
+        <div class="col-xs-8">
+            <h4><span class="text-muted glyphicon glyphicon-book"></span> {{name}} <small>v.{{version}}</small></h4>
+        </div>
+        <div class="col-xs-4 text-right">
+            <button type="button" class="dict-delete btn btn-danger">Delete</button>
+        </div>
+    </div>
+
+    {{#if hasTerms}}
+    <div class="checkbox">
+        <label><input type="checkbox" class="dict-enable-terms"> Enable term search</label>
+    </div>
+    {{/if}}
+    {{#if hasKanji}}
+    <div class="checkbox">
+        <label><input type="checkbox" class="dict-enable-kanji"> Enable Kanji search</label>
+    </div>
+    {{/if}}
+</div>