WIP

ext/bg/js/database.js

@@ -20,7 +20,7 @@
 class Database {
     constructor() {
         this.db = null;
-        this.dbVer = 7;
+        this.dbVer = 6;
         this.entities = null;
     }
 
@@ -37,6 +37,8 @@ class Database {
             dictionaries: '++, title, version',
             meta: 'name, value',
         });
+
+        return Promise.resolve();
     }
 
     prepare() {

ext/bg/js/options-form.js

@@ -21,6 +21,10 @@ function yomichan() {
     return chrome.extension.getBackgroundPage().yomichan;
 }
 
+function database() {
+    return yomichan().translator.database;
+}
+
 function anki() {
     return yomichan().anki;
 }
@@ -43,25 +47,8 @@ function modelIdToFieldOptKey(id) {
 
 function modelIdToMarkers(id) {
     return {
-        'anki-term-model': [
+        'anki-term-model': ['audio', 'expression', 'expression-furigana', 'glossary', 'glossary-list', 'reading', 'sentence', 'tags', 'url'],
-            'audio',
+        'anki-kanji-model': ['character', 'glossary', 'glossary-list', 'kunyomi', 'onyomi', 'url'],
-            'expression',
-            'expression-furigana',
-            'glossary',
-            'glossary-list',
-            'reading',
-            'sentence',
-            'tags',
-            'url'
-        ],
-        'anki-kanji-model': [
-            'character',
-            'glossary',
-            'glossary-list',
-            'kunyomi',
-            'onyomi',
-            'url'
-        ],
     }[id];
 }
 
@@ -91,7 +78,7 @@ function getFormValues() {
         optsNew.ankiKanjiModel = $('#anki-kanji-model').val();
         optsNew.ankiKanjiFields = fieldsToDict($('#kanji .anki-field-value'));
 
-        $('.dict').each((index, element) => {
+        $('.dict-group').each((index, element) => {
             const dictionary = $(element);
             const title = dictionary.data('title');
             const enableTerms = dictionary.find('.dict-enable-terms').prop('checked');
@@ -128,6 +115,96 @@ function updateVisibility(opts) {
     }
 }
 
+function populateDictionaries(opts) {
+    const dictGroups = $('.dict-groups');
+    dictGroups.empty();
+
+    const dictError = $('#dict-error');
+    dictError.hide();
+
+    const dictLaggy = $('#dict-laggy');
+    dictLaggy.show();
+
+    database().getDictionaries().then(rows => {
+        rows.forEach(row => {
+            const dictOpts = opts.dictionaries[row.title] || {enableTerms: true, enableKanji: false};
+            const html = Handlebars.templates['dictionary.html']({
+                title: row.title,
+                version: row.version,
+                hasTerms: row.hasTerms,
+                hasKanji: row.hasKanji,
+                enableTerms: dictOpts.enableTerms,
+                enableKanji: dictOpts.enableKanji
+            });
+
+            dictGroups.append($(html));
+        });
+
+        $('.dict-enable-terms, .dict-enable.kanji').change(onOptionsChanged);
+        $('.dict-delete').click(onDictionaryDelete);
+    }).catch(error => {
+        dictError.show().find('span').text(error);
+    }).then(() => {
+        dictLaggy.hide();
+    });
+}
+
+function onDictionaryDelete() {
+    const dictDelete = $(this);
+    dictDelete.prop('disabled', true);
+
+    const dictGroup = dictDelete.closest('.dict-group');
+    database().deleteDictionary(dictGroup.data('title')).then(() => {
+        dictGroup.slideUp();
+    }).catch(error => {
+        dictError.show().find('span').text(error);
+        dictDelete.prop('disabled', false);
+    });
+}
+
+function onDictionaryImport() {
+    const dictImport = $(this);
+    dictImport.prop('disabled', true);
+
+    const dictError = $('#dict-error');
+    dictError.hide();
+
+    const progressbar = $('#dict-progress');
+    progressbar.show();
+
+    const callback = (total, current) => {
+        progressbar.find('div').css('width', `${current / total * 100.0}%`);
+    };
+
+    database().importDictionary($('#dict-url').val(), callback).then(() => {
+        return loadOptions().then(opts => populateDictionaries(opts));
+    }).catch(error => {
+        dictError.show().find('span').text(error);
+    }).then(() => {
+        progressbar.hide();
+        dictImport.prop('disabled', false);
+    });
+}
+
+function onDictionarySetUrl(e) {
+    e.preventDefault();
+
+    const dictUrl = $('#dict-url');
+    const url = $(this).data('url');
+
+    if (url.includes('/')) {
+        dictUrl.val(url);
+    } else {
+        dictUrl.val(chrome.extension.getURL(`bg/data/${url}/index.json`));
+    }
+
+    dictUrl.trigger('input');
+}
+
+function onDictionaryUpdateUrl() {
+    $('#dict-import').prop('disabled', $(this).val().length === 0);
+}
+
 function populateAnkiDeckAndModel(opts) {
     const ankiSpinner = $('#anki-spinner');
     ankiSpinner.show();
@@ -162,73 +239,6 @@ function populateAnkiDeckAndModel(opts) {
     });
 }
 
-function populateDictionaries(opts) {
-    const container = $('.dicts');
-    container.empty();
-
-    const dictError = $('#dict-error');
-    dictError.hide();
-
-    yomichan().translator.database.getDictionaries().then(rows => {
-        rows.forEach(row => {
-            const dictOpts = opts.dictionaries[row.title] || {enableTerms: true, enableKanji: false};
-            const html = Handlebars.templates['dictionary.html']({
-                title: row.title,
-                version: row.version,
-                hasTerms: row.hasTerms,
-                hasKanji: row.hasKanji,
-                enableTerms: dictOpts.enableTerms,
-                enableKanji: dictOpts.enableKanji
-            });
-
-            container.append($(html));
-        });
-
-        $('.dict-delete').click(e => {
-            const button = $(e.target);
-            const dict = button.closest('.dict');
-            const title = dict.data('title');
-
-            button.prop('disabled', true);
-            yomichan().translator.database.deleteDictionary(title).then(() => {
-                dict.slideUp();
-            }).catch(error => {
-                dictError.show().find('span').text(error);
-            }).then(() => {
-                button.prop('disabled', false);
-            });
-        });
-
-        container.find('.dict input').change(onOptionsChanged);
-    }).catch(error => {
-        dictError.show().find('span').text(error);
-    });
-}
-
-function onImportDictionary() {
-    const dictInputs = $('#dict-import').find('input');
-    dictInputs.prop('disabled', true);
-
-    const dictError = $('#dict-error');
-    dictError.hide();
-
-    const progressbar = $('#dict-import-progress');
-    const progressValue = progressbar.find('div');
-    progressbar.show();
-
-    const callback = (total, current) => {
-        $('.progress-bar').css('width', `${current / total * 100.0}%`);
-    };
-
-    const dictUrl = $('#dict-import-url').val();
-    yomichan().translator.database.importDictionary(dictUrl, callback).catch(error => {
-        dictError.show().find('span').text(error);
-    }).then(() => {
-        dictInputs.prop('disabled', false);
-        progressbar.hide();
-    });
-}
-
 function populateAnkiFields(element, opts) {
     const tab = element.closest('.tab-pane');
     const container = tab.find('tbody');
@@ -333,25 +343,9 @@ $(document).ready(() => {
         $('input, select').not('.anki-model').change(onOptionsChanged);
         $('.anki-model').change(onAnkiModelChanged);
 
-        $('#dict-import a').click(e => {
+        $('#dict-importer a').click(onDictionarySetUrl);
-            e.preventDefault();
+        $('#dict-import').click(onDictionaryImport);
-            const control = $('#dict-import-url');
+        $('#dict-url').on('input', onDictionaryUpdateUrl);
-            const url = $(e.target).data('url');
-            if (url.includes('/')) {
-                control.val(url);
-            } else {
-                control.val(chrome.extension.getURL(`bg/data/${url}/index.json`));
-            }
-            control.trigger('input');
-        });
-
-        const dictImportUrl = $('#dict-import-url');
-        dictImportUrl.on('input', () => {
-            const disable = dictImportUrl.val().trim().length === 0;
-            $('#dict-import-start').prop('disabled', disable);
-        });
-
-        $('#dict-import-start').click(onImportDictionary);
 
         populateDictionaries(opts);
         populateAnkiDeckAndModel(opts);

ext/bg/js/templates.js

@@ -7,7 +7,7 @@ templates['dictionary.html'] = template({"1":function(container,depth0,helpers,p
 },"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=\"dict well well-sm\" data-title=\""
+  return "<div class=\"dict-group well well-sm\" data-title=\""
     + alias4(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","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.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","hash":{},"data":data}) : helper)))

ext/bg/options.html

@@ -6,7 +6,7 @@
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
         <style>
-            #anki-spinner, #anki-general, #anki-error, #dict-error, #dict-import-progress, #options-advanced {
+            #anki-spinner, #anki-general, #anki-error, #dict-error, #dict-progress, #dict-laggy, #options-advanced {
                 display: none;
             }
 
@@ -65,18 +65,22 @@
             <div>
                 <h3>Dictionaries</h3>
 
-                <div class="dicts"></div>
+                <div class="dict-groups"></div>
 
                 <div class="alert alert-danger" id="dict-error">
                     <strong>Error:</strong>
                     <span></span>
                 </div>
 
-                <div class="progress" id="dict-import-progress">
+                <div class="alert alert-warning" id="dict-laggy">
+                    The dictionary database appears to be busy; please wait for currently executing tasks to complete.
+                </div>
+
+                <div class="progress" id="dict-progress">
                     <div class="progress-bar progress-bar-striped" style="width: 0%"></div>
                 </div>
 
-                <div class="input-group" id="dict-import">
+                <div class="input-group" id="dict-importer">
                     <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">
@@ -87,9 +91,9 @@
                             <li><a href="#" data-url="http://localhost:9876/index.json">Local dictionary</a></li>
                         </ul>
                     </div>
-                    <input type="text" id="dict-import-url" class="form-control" placeholder="Dictionary import URL">
+                    <input type="text" id="dict-url" class="form-control" placeholder="Dictionary import URL">
                     <div class="input-group-btn disabled">
-                        <button type="button" id="dict-import-start" class="btn btn-primary" disabled>Import</button>
+                        <button type="button" id="dict-import" class="btn btn-primary" disabled>Import</button>
                     </div>
                 </div>
             </div>

tmpl/dictionary.html

@@ -1,4 +1,4 @@
-<div class="dict well well-sm" data-title="{{title}}">
+<div class="dict-group well well-sm" data-title="{{title}}">
     <div class="row">
         <div class="col-xs-8">
             <h4><span class="text-muted glyphicon glyphicon-book"></span> {{title}} <small>v.{{version}}</small></h4>