WIP

ext/bg/js/options-form.js

@@ -35,46 +35,47 @@ function formToOptions() {
     });
 }
 
-function updateVisibility() {
+function updateAnkiFormDataVis(opts) {
-    if ($('#enableAnkiConnect').prop('checked')) {
+    if (opts.enableAnkiConnect) {
+        updateAnkiFormData();
         $('.options-anki').show();
     } else {
         $('.options-anki').hide();
     }
 }
 
-function updateAnkiPage() {
+function updateAnkiFormData() {
     const yomichan = chrome.extension.getBackgroundPage().yomichan;
 
-    $('#ankiDeck').find('option').remove();
+    const ankiDeck = $('#ankiDeck');
-    $('#ankiModel').find('option').remove();
+    ankiDeck.find('option').remove();
-
+    yomichan.api_getDeckNames((names) => {
-    yomichan.getDeckNames((names) => {
+        if (names !== null) {
-        names.forEach((name) => {
+            names.forEach((name) => ankiDeck.append($('<option/>', {value: name, text: name})));
-            $('#ankiDeck').append($('<option/>', {value: name, text: name}));
+        }
-        });
     });
 
-    yomichan.getModelNames((names) => {
+    const ankiModel = $('#ankiModel');
-        names.forEach((name) => {
+    ankiModel.find('option').remove();
-            $('#ankiModel').append($('<option/>', {value: name, text: name}));
+    yomichan.api_getModelNames((names) => {
-        });
+        if (names !== null) {
+            names.forEach((name) => ankiModel.append($('<option/>', {value: name, text: name})));
+        }
     });
 }
 
 function onOptionsChanged() {
-    updateVisibility();
     const opts = formToOptions();
     saveOptions(opts, () => {
         chrome.extension.getBackgroundPage().yomichan.setOptions(opts);
+        updateAnkiFormDataVis(opts);
     });
 }
 
 $(document).ready(() => {
     loadOptions((opts) => {
         optionsToForm(opts);
-        updateVisibility();
+        updateAnkiFormDataVis(opts);
-        updateAnkiPage();
         $('input').on('input paste change', onOptionsChanged);
     });
 });

ext/bg/js/yomichan.js

@@ -50,30 +50,16 @@ class Yomichan {
     }
 
     onMessage(request, sender, callback) {
-        const {action, params} = request, handlers = {
+        const {action, params} = request;
-            addNote:       ({definition, mode}) => this.ankiInvoke('addNote', {definition: definition, mode: mode}, null, callback),
+        const method           = this['api_' + action];
-            canAddNotes:   ({definitions, modes}) => this.ankiInvoke('canAddNotes', {definitions: definitions, modes: modes}, 'notes', callback),
+
-            findKanji:     (text) => callback(this.translator.findKanji(text)),
+        if (typeof(method) === 'function') {
-            findTerm:      (text) => callback(this.translator.findTerm(text)),
+            method.call(this, callback, params);
-            getDeckNames:  () => this.getDeckNames(callback),
+        }
-            getModelNames: () => this.getModelNames(callback),
-            getOptions:    () => callback(this.options),
-            getState:      () => callback(this.state),
-            renderText:    ({data, template}) => callback(Handlebars.templates[template](data))
-        };
 
-        handlers[action].call(this, params);
         return true;
     }
 
-    getDeckNames(callback) {
-        this.ankiInvoke('deckNames', {}, null, callback);
-    }
-
-    getModelNames(callback) {
-        this.ankiInvoke('modelNames', {}, null, callback);
-    }
-
     onBrowserAction(tab) {
         switch (this.state) {
             case 'disabled':
@@ -101,19 +87,16 @@ class Yomichan {
                 break;
             case 'loading':
                 chrome.browserAction.setBadgeText({text: '...'});
-                this.translator.loadData(
+                this.translator.loadData({loadEnamDict: this.options.loadEnamDict}, () => this.setState('enabled'));
-                    {loadEnamDict: this.options.loadEnamDict},
-                    () => this.setState('enabled')
-                );
                 break;
         }
 
-        Yomichan.notifyChange('state', this.state);
+        Yomichan.notifyTabs('state', this.state);
     }
 
     setOptions(options) {
         this.options = options;
-        Yomichan.notifyChange('options', this.options);
+        Yomichan.notifyTabs('options', this.options);
     }
 
     ankiInvoke(action, params, pool, callback) {
@@ -141,13 +124,49 @@ class Yomichan {
         }
     }
 
-    static notifyChange(name, value) {
+    static notifyTabs(name, value) {
         chrome.tabs.query({}, (tabs) => {
             for (const tab of tabs) {
                 chrome.tabs.sendMessage(tab.id, {name: name, value: value}, () => null);
             }
         });
     }
+
+    api_addNote(callback, {definition, mode}) {
+        this.ankiInvoke('addNote', {definition: definition, mode: mode}, null, callback);
+    }
+
+    api_canAddNotes(callback, {definitions, modes}) {
+        this.ankiInvoke('canAddNotes', {definitions: definitions, modes: modes}, 'notes', callback);
+    }
+
+    api_findKanji(callback, text) {
+        callback(this.translator.findKanji(text));
+    }
+
+    api_findTerm(callback, text) {
+        callback(this.translator.findTerm(text));
+    }
+
+    api_getDeckNames(callback) {
+        this.ankiInvoke('deckNames', {}, null, callback);
+    }
+
+    api_getModelNames(callback) {
+        this.ankiInvoke('modelNames', {}, null, callback);
+    }
+
+    api_getOptions(callback) {
+        callback(this.options);
+    }
+
+    api_getState(callback) {
+        callback(this.state);
+    }
+
+    api_renderText(callback, {template, data}) {
+        callback(Handlebars.templates[template](data));
+    }
 }
 
 window.yomichan = new Yomichan();