cleanup of settings page

ext/bg/js/settings.js

@@ -25,7 +25,6 @@ async function formRead() {
     optionsNew.general.compactTags = $('#compact-tags').prop('checked');
     optionsNew.general.compactGlossaries = $('#compact-glossaries').prop('checked');
     optionsNew.general.resultOutputMode = $('#result-output-mode').val();
-    optionsNew.general.mainDictionary = $('#main-dictionary').val();
     optionsNew.general.audioSource = $('#audio-playback-source').val();
     optionsNew.general.audioVolume = parseFloat($('#audio-playback-volume').val());
     optionsNew.general.debugInfo = $('#show-debug-info').prop('checked');
@@ -58,6 +57,7 @@ async function formRead() {
         optionsNew.anki.kanji.fields = ankiFieldsToDict($('#kanji .anki-field-value'));
     }
 
+    optionsNew.general.mainDictionary = $('#dict-main').val();
     $('.dict-group').each((index, element) => {
         const dictionary = $(element);
         const title = dictionary.data('title');
@@ -85,11 +85,11 @@ function formUpdateVisibility(options) {
         advanced.hide();
     }
 
-    const merge = $('.options-merge');
+    const mainGroup = $('#dict-main-group');
     if (options.general.resultOutputMode === 'merge') {
-        merge.show();
+        mainGroup.show();
     } else {
-        merge.hide();
+        mainGroup.hide();
     }
 
     const debug = $('#debug');
@@ -105,40 +105,32 @@ function formUpdateVisibility(options) {
 }
 
 async function formMainDictionaryOptionsPopulate(options) {
-    const select = $('#main-dictionary').empty();
+    const select = $('#dict-main').empty();
+    select.append($('<option class="text-muted" value="">Not selected</option>'));
 
-    let titles = await utilDatabaseGetTitlesWithSequences();
+    let mainDictionary = '';
-    titles = titles.filter(title => options.dictionaries[title].enabled);
+    const formOptions = [$];
-    const formOptionsHtml = [];
+    const titles = await utilDatabaseGetTitlesWithSequences();
-    let mainDictionarySelected = false;
     for (const title of titles) {
-        if (options.general.mainDictionary === title) {
+        select.append($(`<option value="${title}">${title}</option>`));
-            mainDictionarySelected = true;
+        if (title === options.general.mainDictionary) {
+            mainDictionary = title;
         }
-        formOptionsHtml.push(`<option value="${title}"${options.general.mainDictionary === title ? ' selected' : ''}>${title}</option>`);
     }
 
-    if (!mainDictionarySelected) {
+    select.val(mainDictionary);
-        options.general.mainDictionary = '';
-    }
-
-    const notSelectedOptionHtml = `<option class="text-muted" value=""${!mainDictionarySelected ? ' selected' : ''}>Not selected</option>`;
-
-    select.append($([notSelectedOptionHtml].concat(formOptionsHtml).join('')));
 }
 
 async function onFormOptionsChanged(e) {
+    if (!e.originalEvent && !e.isTrigger) {
+        return;
+    }
+
+    const {optionsNew, optionsOld} = await formRead();
+    await optionsSave(optionsNew);
+    formUpdateVisibility(optionsNew);
+
     try {
-        if (!e.originalEvent && !e.isTrigger) {
-            return;
-        }
-
-        const {optionsNew, optionsOld} = await formRead();
-        await formMainDictionaryOptionsPopulate(optionsNew);
-        await optionsSave(optionsNew);
-
-        formUpdateVisibility(optionsNew);
-
         const ankiUpdated =
             optionsNew.anki.enable !== optionsOld.anki.enable ||
             optionsNew.anki.server !== optionsOld.anki.server;
@@ -162,7 +154,6 @@ async function onReady() {
     $('#compact-tags').prop('checked', options.general.compactTags);
     $('#compact-glossaries').prop('checked', options.general.compactGlossaries);
     $('#result-output-mode').val(options.general.resultOutputMode);
-    $('#main-dictionary').val(options.general.mainDictionary);
     $('#audio-playback-source').val(options.general.audioSource);
     $('#audio-playback-volume').val(options.general.audioVolume);
     $('#show-debug-info').prop('checked', options.general.debugInfo);
@@ -194,6 +185,7 @@ async function onReady() {
 
     try {
         await dictionaryGroupsPopulate(options);
+        await formMainDictionaryOptionsPopulate(options);
     } catch (e) {
         dictionaryErrorShow(e);
     }
@@ -204,8 +196,6 @@ async function onReady() {
         ankiErrorShow(e);
     }
 
-    await formMainDictionaryOptionsPopulate(options);
-
     formUpdateVisibility(options);
 }
 
@@ -311,7 +301,7 @@ async function dictionaryGroupsPopulate(options) {
 async function onDictionaryPurge(e) {
     e.preventDefault();
 
-    const dictControls = $('#dict-importer, #dict-groups').hide();
+    const dictControls = $('#dict-importer, #dict-groups, #dict-main-group').hide();
     const dictProgress = $('#dict-purge').show();
 
     try {
@@ -352,7 +342,7 @@ async function onDictionaryImport(e) {
         const options = await optionsLoad();
         const summary = await utilDatabaseImport(e.target.files[0], updateProgress);
         options.dictionaries[summary.title] = {enabled: true, priority: 0, allowSecondarySearches: false};
-        if (summary.hasSequences && !options.general.mainDictionary) {
+        if (summary.hasSequences && options.general.mainDictionary === '') {
             options.general.mainDictionary = summary.title;
         }
         await optionsSave(options);

ext/bg/settings.html

@@ -145,21 +145,20 @@
                     or you can simply <a href="#" id="dict-purge-link">purge the database</a> to delete everything.
                 </p>
                 <p class="help-block">
-                    Please visit the <a href="https://foosoft.net/projects/yomichan" target="_blank">Yomichan</a> homepage to download free
+                    Deleting individual dictionaries is not currently feasible due to limitations of browser database technology.
-                    dictionaries that you can use with this extension.
                 </p>
 
+                <div class="form-group" id="dict-main-group">
+                    <label for="dict-main">Main dictionary for merged mode</label>
+                    <select class="form-control" id="dict-main"></select>
+                </div>
+
                 <div class="text-danger" id="dict-purge">Dictionary data is being purged, please be patient...</div>
                 <div class="alert alert-warning" id="dict-warning">No dictionaries have been installed</div>
                 <div class="alert alert-danger" id="dict-error"></div>
 
                 <div id="dict-groups"></div>
 
-                <div class="form-group options-merge">
-                    <label for="main-dictionary">Main dictionary</label>
-                    <select class="form-control" id="main-dictionary"></select>
-                </div>
-
                 <div id="dict-import-progress">
                     Dictionary data is being imported, please be patient...
                     <div class="progress">
@@ -168,6 +167,10 @@
                 </div>
 
                 <div id="dict-importer">
+                    <p class="help-block">
+                        Select a dictionary to import for use below. Please visit the <a href="https://foosoft.net/projects/yomichan" target="_blank">Yomichan</a>
+                        homepage to download free dictionaries to use with this extension and to learn about importing proprietary EPWING dictionaries.
+                    </p>
                     <input type="file" id="dict-file">
                 </div>
             </div>