enable and disable via toggle switch

ext/bg/js/options-form.js

@@ -20,15 +20,10 @@
 //  General
 //
 
-function yomichan() {
-    return chrome.extension.getBackgroundPage().yomichan;
-}
-
 function getFormData() {
     return optionsLoad().then(optionsOld => {
         const optionsNew = $.extend(true, {}, optionsOld);
 
-        optionsNew.general.enable = $('#enable-search').prop('checked');
         optionsNew.general.audioPlayback = $('#audio-playback-buttons').prop('checked');
         optionsNew.general.groupResults = $('#group-terms-results').prop('checked');
         optionsNew.general.softKatakana = $('#soft-katakana-search').prop('checked');
@@ -87,7 +82,6 @@ $(document).ready(() => {
     Handlebars.partials = Handlebars.templates;
 
     optionsLoad().then(options => {
-        $('#enable-search').prop('checked', options.general.enable);
         $('#audio-playback-buttons').prop('checked', options.general.audioPlayback);
         $('#group-terms-results').prop('checked', options.general.groupResults);
         $('#soft-katakana-search').prop('checked', options.general.softKatakana);
@@ -123,10 +117,6 @@ $(document).ready(() => {
 //  Dictionary
 //
 
-function database() {
-    return yomichan().translator.database;
-}
-
 function showDictionaryError(error) {
     const dialog = $('#dict-error');
     if (error) {
@@ -153,7 +143,7 @@ function populateDictionaries(options) {
     const dictWarning = $('#dict-warning').hide();
 
     let dictCount = 0;
-    return database().getDictionaries().then(rows => {
+    return getDatabase().getDictionaries().then(rows => {
         rows.forEach(row => {
             const dictOptions = options.dictionaries[row.title] || {enableTerms: false, enableKanji: false, priority: 0};
             const html = Handlebars.templates['dictionary.html']({
@@ -188,7 +178,7 @@ function onDictionaryPurge(e) {
     const dictControls = $('#dict-importer, #dict-groups').hide();
     const dictProgress = $('#dict-purge-progress').show();
 
-    return database().purge().catch(showDictionaryError).then(() => {
+    return getDatabase().purge().catch(showDictionaryError).then(() => {
         showDictionarySpinner(false);
         dictControls.show();
         dictProgress.hide();
@@ -197,7 +187,7 @@ function onDictionaryPurge(e) {
         options.dictionaries = {};
         return optionsSave(options).then(() => {
             populateDictionaries(options);
-            yomichan().setOptions(options);
+            getYomichan().setOptions(options);
         });
     });
 }
@@ -214,9 +204,9 @@ function onDictionaryImport() {
     setProgress(0.0);
 
     optionsLoad().then(options => {
-        database().importDictionary(dictUrl.val(), (total, current) => setProgress(current / total * 100.0)).then(summary => {
+        getDatabase().importDictionary(dictUrl.val(), (total, current) => setProgress(current / total * 100.0)).then(summary => {
             options.dictionaries[summary.title] = {enabled: true, priority: 0};
-            return optionsSave(options).then(() => yomichan().setOptions(options));
+            return optionsSave(options).then(() => getYomichan().setOptions(options));
         }).then(() => populateDictionaries(options)).catch(showDictionaryError).then(() => {
             showDictionarySpinner(false);
             dictProgress.hide();
@@ -249,10 +239,6 @@ function onDictionaryUpdateUrl() {
 //  Anki
 //
 
-function anki() {
-    return yomichan().anki;
-}
-
 function showAnkiSpinner(show) {
     const spinner = $('#anki-spinner');
     if (show) {
@@ -286,7 +272,7 @@ function populateAnkiDeckAndModel(options) {
     showAnkiSpinner(true);
 
     const ankiFormat = $('#anki-format').hide();
-    return Promise.all([anki().getDeckNames(), anki().getModelNames()]).then(([deckNames, modelNames]) => {
+    return Promise.all([getAnki().getDeckNames(), getAnki().getModelNames()]).then(([deckNames, modelNames]) => {
         const ankiDeck = $('.anki-deck');
         ankiDeck.find('option').remove();
         deckNames.sort().forEach(name => ankiDeck.append($('<option/>', {value: name, text: name})));
@@ -320,7 +306,7 @@ function populateAnkiFields(element, options) {
         'kanji': ['character', 'dictionary', 'glossary', 'kunyomi', 'onyomi', 'sentence', 'tags', 'url']
     }[tabId] || {};
 
-    return anki().getModelFieldNames(modelName).then(names => {
+    return getAnki().getModelFieldNames(modelName).then(names => {
         names.forEach(name => {
             const value = options.anki[tabId].fields[name] || '';
             const html = Handlebars.templates['model.html']({name, markers, value});
@@ -351,7 +337,7 @@ function onAnkiModelChanged(e) {
 
         optionsNew.anki[tabId].fields = {};
         populateAnkiFields(element, optionsNew).then(() => {
-            optionsSave(optionsNew).then(() => yomichan().setOptions(optionsNew));
+            optionsSave(optionsNew).then(() => getYomichan().setOptions(optionsNew));
         }).catch(showAnkiError).then(() => showAnkiSpinner(false));
     });
 }
@@ -363,7 +349,7 @@ function onOptionsChanged(e) {
 
     getFormData().then(({optionsNew, optionsOld}) => {
         return optionsSave(optionsNew).then(() => {
-            yomichan().setOptions(optionsNew);
+            getYomichan().setOptions(optionsNew);
             updateVisibility(optionsNew);
 
             const ankiUpdated =

ext/bg/js/options.js

@@ -145,3 +145,15 @@ function optionsSave(options) {
         chrome.storage.sync.set(options, resolve);
     });
 }
+
+function optionsEnabledDicts(options) {
+    const dictionaries = {};
+    for (const title in options.dictionaries) {
+        const dictionary = options.dictionaries[title];
+        if (dictionary.enabled) {
+            dictionaries[title] = dictionary;
+        }
+    }
+
+    return dictionaries;
+}

ext/bg/js/popup.js

@@ -20,5 +20,14 @@ $(document).ready(() => {
     $('#open-search').click(() => window.open(chrome.extension.getURL('bg/search.html')));
     $('#open-options').click(() => chrome.runtime.openOptionsPage());
     $('#open-help').click(() => window.open('http://foosoft.net/projects/yomichan'));
-});
 
+    optionsLoad().then(options => {
+        const toggle = $('#enable-search');
+        toggle.prop('checked', options.general.enable).change();
+        toggle.bootstrapToggle();
+        toggle.change(() => {
+            options.general.enable = toggle.prop('checked');
+            optionsSave(options).then(() => getYomichan().setOptions(options));
+        });
+    });
+});

ext/bg/js/util.js

@@ -17,7 +17,12 @@
  */
 
 
-function kanjiLinks(options) {
+function helperKanjiLinks(options) {
+    const isKanji = c => {
+        const code = c.charCodeAt(0);
+        return code >= 0x4e00 && code < 0x9fb0 || code >= 0x3400 && code < 0x4dc0;
+    };
+
     let result = '';
     for (const c of options.fn(this)) {
         if (isKanji(c)) {
@@ -30,27 +35,10 @@ function kanjiLinks(options) {
     return result;
 }
 
-function multiLine(options) {
+function helperMultiLine(options) {
     return options.fn(this).split('\n').join('<br>');
 }
 
-function isKanji(c) {
-    const code = c.charCodeAt(0);
-    return code >= 0x4e00 && code < 0x9fb0 || code >= 0x3400 && code < 0x4dc0;
-}
-
-function enabledDicts(options) {
-    const dictionaries = {};
-    for (const title in options.dictionaries) {
-        const dictionary = options.dictionaries[title];
-        if (dictionary.enabled) {
-            dictionaries[title] = dictionary;
-        }
-    }
-
-    return dictionaries;
-}
-
 function promiseCallback(promise, callback) {
     return promise.then(result => {
        callback({result});
@@ -62,6 +50,18 @@ function promiseCallback(promise, callback) {
     });
 }
 
+function getYomichan() {
+    return chrome.extension.getBackgroundPage().yomichan;
+}
+
+function getDatabase() {
+    return getYomichan().translator.database;
+}
+
+function getAnki() {
+    return getYomichan().anki;
+}
+
 function sortTermDefs(definitions, dictionaries=null) {
     return definitions.sort((v1, v2) => {
         const sl1 = v1.source.length;

ext/bg/js/yomichan.js

@@ -20,8 +20,8 @@
 class Yomichan {
     constructor() {
         Handlebars.partials = Handlebars.templates;
-        Handlebars.registerHelper('kanjiLinks', kanjiLinks);
+        Handlebars.registerHelper('kanjiLinks', helperKanjiLinks);
-        Handlebars.registerHelper('multiLine', multiLine);
+        Handlebars.registerHelper('multiLine', helperMultiLine);
 
         this.translator = new Translator();
         this.anki = new AnkiNull();
@@ -132,7 +132,7 @@ class Yomichan {
 
     api_findKanji({text, callback}) {
         promiseCallback(
-            this.translator.findKanji(text, enabledDicts(this.options)).then(definitions => {
+            this.translator.findKanji(text, optionsEnabledDicts(this.options)).then(definitions => {
                 return definitions.slice(0, this.options.general.maxResults);
             }),
             callback
@@ -141,7 +141,7 @@ class Yomichan {
 
     api_findTerms({text, callback}) {
         promiseCallback(
-            this.translator.findTerms(text, enabledDicts(this.options), this.options.general.softKatakana).then(({definitions, length}) => {
+            this.translator.findTerms(text, optionsEnabledDicts(this.options), this.options.general.softKatakana).then(({definitions, length}) => {
                 return {length, definitions: definitions.slice(0, this.options.general.maxResults)};
             }),
             callback
@@ -150,7 +150,7 @@ class Yomichan {
 
     api_findTermsGrouped({text, callback}) {
         promiseCallback(
-            this.translator.findTermsGrouped(text, enabledDicts(this.options), this.options.general.softKatakana).then(({definitions, length}) => {
+            this.translator.findTermsGrouped(text, optionsEnabledDicts(this.options), this.options.general.softKatakana).then(({definitions, length}) => {
                 return {length, definitions: definitions.slice(0, this.options.general.maxResults)};
             }),
             callback

ext/bg/options.html

@@ -25,10 +25,6 @@
             <div>
                 <h3>General Options</h3>
 
-                <div class="checkbox">
-                    <label><input type="checkbox" id="enable-search"> Enable search</label>
-                </div>
-
                 <div class="checkbox">
                     <label><input type="checkbox" id="audio-playback-buttons"> Audio playback buttons</label>
                 </div>
@@ -242,6 +238,7 @@
         <script src="../lib/handlebars.min.js"></script>
         <script src="js/templates.js"></script>
         <script src="js/gecko.js"></script>
+        <script src="js/util.js"></script>
         <script src="js/options.js"></script>
         <script src="js/options-form.js"></script>
     </body>

ext/bg/popup.html

@@ -18,18 +18,20 @@
     </head>
     <body>
         <p>
-            <input type="checkbox" data-toggle="toggle">
+            <input type="checkbox" id="enable-search">
         </p>
         <p>
             <div class="btn-group" style="white-space: nowrap">
-                <button type="button" id="open-search" class="btn btn-default btn-xs glyphicon glyphicon-search"></button>
+                <button type="button" id="open-search" title="Search" class="btn btn-default btn-xs glyphicon glyphicon-search"></button>
-                <button type="button" id="open-options" class="btn btn-default btn-xs glyphicon glyphicon-cog"></button>
+                <button type="button" id="open-options" title="Options" class="btn btn-default btn-xs glyphicon glyphicon-wrench"></button>
-                <button type="button" id="open-help" class="btn btn-default btn-xs glyphicon glyphicon-question-sign"></button>
+                <button type="button" id="open-help" title="Help" class="btn btn-default btn-xs glyphicon glyphicon-question-sign"></button>
             </div>
         </p>
         <script src="../lib/jquery-3.1.1.min.js"></script>
         <script src="../lib/bootstrap-toggle/bootstrap-toggle.min.js"></script>
         <script src="js/gecko.js"></script>
+        <script src="js/util.js"></script>
+        <script src="js/options.js"></script>
         <script src="js/popup.js"></script>
     </body>
 </html>