diff options
Diffstat (limited to 'ext/bg')
| -rw-r--r-- | ext/bg/js/options-form.js | 194 | ||||
| -rw-r--r-- | ext/bg/options.html | 14 |
2 files changed, 115 insertions, 93 deletions
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js index 6f27979a..d8835297 100644 --- a/ext/bg/js/options-form.js +++ b/ext/bg/js/options-form.js @@ -87,6 +87,40 @@ function updateVisibility(opts) { } } +$(document).ready(() => { + Handlebars.partials = Handlebars.templates; + + loadOptions().then(opts => { + $('#activate-on-startup').prop('checked', opts.activateOnStartup); + $('#enable-audio-playback').prop('checked', opts.enableAudioPlayback); + $('#enable-soft-katakana-search').prop('checked', opts.enableSoftKatakanaSearch); + $('#show-advanced-options').prop('checked', opts.showAdvancedOptions); + + $('#hold-shift-to-scan').prop('checked', opts.holdShiftToScan); + $('#select-matched-text').prop('checked', opts.selectMatchedText); + $('#scan-delay').val(opts.scanDelay); + $('#scan-length').val(opts.scanLength); + + $('#anki-method').val(opts.ankiMethod); + $('#anki-username').val(opts.ankiUsername); + $('#anki-password').val(opts.ankiPassword); + $('#anki-card-tags').val(opts.ankiCardTags.join(' ')); + $('#sentence-extent').val(opts.sentenceExtent); + + $('input, select').not('.anki-model').change(onOptionsChanged); + $('.anki-model').change(onAnkiModelChanged); + + $('#dict-purge').click(onDictionaryPurge); + $('#dict-importer a').click(onDictionarySetUrl); + $('#dict-import').click(onDictionaryImport); + $('#dict-url').on('input', onDictionaryUpdateUrl); + + populateDictionaries(opts); + populateAnkiDeckAndModel(opts); + updateVisibility(opts); + }); +}); + // // Dictionary // @@ -211,11 +245,11 @@ function onDictionaryImport() { }).catch(error => { showDictionaryError(error); }).then(() => { - showDictionaryError(false); + showDictionarySpinner(false); + dictProgress.hide(); dictImporter.show(); dictUrl.val(''); dictUrl.trigger('input'); - dictProgress.hide(); }); }); } @@ -225,7 +259,6 @@ function onDictionarySetUrl(e) { const dictUrl = $('#dict-url'); const url = $(this).data('url'); - if (url.includes('/')) { dictUrl.val(url); } else { @@ -247,6 +280,25 @@ function anki() { return yomichan().anki; } +function showAnkiSpinner(show) { + const spinner = $('#anki-spinner'); + if (show) { + spinner.show(); + } else { + spinner.hide(); + } +} + +function showAnkiError(error) { + const dialog = $('#anki-error'); + if (error) { + dialog.show().find('span').text(error); + } + else { + dialog.hide(); + } +} + function fieldsToDict(selection) { const result = {}; selection.each((index, element) => { @@ -265,49 +317,62 @@ function modelIdToFieldOptKey(id) { function modelIdToMarkers(id) { return { - 'anki-term-model': ['audio', 'expression', 'expression-furigana', 'glossary', 'glossary-list', 'reading', 'sentence', 'tags', 'url'], - 'anki-kanji-model': ['character', 'glossary', 'glossary-list', 'kunyomi', 'onyomi', 'url'], + 'anki-term-model': [ + 'audio', + 'expression', + 'expression-furigana', + 'glossary', + 'glossary-list', + 'reading', + 'sentence', + 'tags', + 'url' + ], + 'anki-kanji-model': [ + 'character', + 'glossary', + 'glossary-list', + 'kunyomi', + 'onyomi', + 'url' + ], }[id]; } function populateAnkiDeckAndModel(opts) { - const ankiSpinner = $('#anki-spinner'); - ankiSpinner.show(); - - const ankiFormat = $('#anki-format'); - ankiFormat.hide(); + showAnkiError(null); + showAnkiSpinner(true); - const ankiDeck = $('.anki-deck'); - ankiDeck.find('option').remove(); + const ankiFormat = $('#anki-format').hide(); - const ankiModel = $('.anki-model'); - ankiModel.find('option').remove(); + return Promise.all([anki().getDeckNames(), anki().getModelNames()]).then(([deckNames, modelNames]) => { + const ankiDeck = $('.anki-deck'); + ankiDeck.find('option').remove(); + deckNames.forEach(name => ankiDeck.append($('<option/>', {value: name, text: name}))); - return anki().getDeckNames().then(names => { - names.forEach(name => ankiDeck.append($('<option/>', {value: name, text: name}))); $('#anki-term-deck').val(opts.ankiTermDeck); $('#anki-kanji-deck').val(opts.ankiKanjiDeck); + + const ankiModel = $('.anki-model'); + ankiModel.find('option').remove(); + modelNames.forEach(name => ankiModel.append($('<option/>', {value: name, text: name}))); + + return Promise.all([ + populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts), + populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts) + ]); }).then(() => { - return anki().getModelNames(); - }).then(names => { - names.forEach(name => ankiModel.append($('<option/>', {value: name, text: name}))); - return populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts); - }).then(() => { - return populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts); - }).then(() => { - $('#anki-error').hide(); ankiFormat.show(); }).catch(error => { - $('#anki-error').show().find('span').text(error); + showAnkiError(error); }).then(() => { - ankiSpinner.hide(); + showAnkiSpinner(false); }); } function populateAnkiFields(element, opts) { const tab = element.closest('.tab-pane'); - const container = tab.find('tbody'); - container.empty(); + const container = tab.find('tbody').empty(); const modelName = element.val(); if (modelName === null) { @@ -320,12 +385,7 @@ function populateAnkiFields(element, opts) { return anki().getModelFieldNames(modelName).then(names => { names.forEach(name => { - const html = Handlebars.templates['model.html']({ - name, - markers, - value: opts[optKey][name] || '' - }); - + const html = Handlebars.templates['model.html']({name, markers, value: opts[optKey][name] || ''}); container.append($(html)); }); @@ -343,19 +403,17 @@ function onAnkiModelChanged(e) { return; } + showAnkiError(null); + showAnkiSpinner(true); + getFormValues().then(({optsNew, optsOld}) => { optsNew[modelIdToFieldOptKey($(this).id)] = {}; - - const ankiSpinner = $('#anki-spinner'); - ankiSpinner.show(); - populateAnkiFields($(this), optsNew).then(() => { saveOptions(optsNew).then(() => yomichan().setOptions(optsNew)); }).catch(error => { - $('#anki-error').show().find('span').text(error); + showAnkiError(error); }).then(() => { - $('#anki-error').hide(); - ankiSpinner.hide(); + showAnkiSpinner(false); }); }); } @@ -366,7 +424,7 @@ function onOptionsChanged(e) { } getFormValues().then(({optsNew, optsOld}) => { - saveOptions(optsNew).then(() => { + return saveOptions(optsNew).then(() => { yomichan().setOptions(optsNew); updateVisibility(optsNew); @@ -375,50 +433,18 @@ function onOptionsChanged(e) { optsNew.ankiPassword !== optsOld.ankiPassword; if (loginChanged && optsNew.ankiMethod === 'ankiweb') { - anki().logout().then(() => populateAnkiDeckAndModel(optsNew)).catch(error => { - $('#anki-error').show().find('span').text(error); - }); + showAnkiError(null); + showAnkiSpinner(true); + return anki().logout().then(() => populateAnkiDeckAndModel(optsNew)); } else if (loginChanged || optsNew.ankiMethod !== optsOld.ankiMethod) { - populateAnkiDeckAndModel(optsNew); + showAnkiError(null); + showAnkiSpinner(true); + return populateAnkiDeckAndModel(optsNew); } }); + }).catch(error => { + showAnkiError(error); + }).then(() => { + showAnkiSpinner(false); }); } - -// -// Initialization -// - -$(document).ready(() => { - Handlebars.partials = Handlebars.templates; - - loadOptions().then(opts => { - $('#activate-on-startup').prop('checked', opts.activateOnStartup); - $('#enable-audio-playback').prop('checked', opts.enableAudioPlayback); - $('#enable-soft-katakana-search').prop('checked', opts.enableSoftKatakanaSearch); - $('#show-advanced-options').prop('checked', opts.showAdvancedOptions); - - $('#hold-shift-to-scan').prop('checked', opts.holdShiftToScan); - $('#select-matched-text').prop('checked', opts.selectMatchedText); - $('#scan-delay').val(opts.scanDelay); - $('#scan-length').val(opts.scanLength); - - $('#anki-method').val(opts.ankiMethod); - $('#anki-username').val(opts.ankiUsername); - $('#anki-password').val(opts.ankiPassword); - $('#anki-card-tags').val(opts.ankiCardTags.join(' ')); - $('#sentence-extent').val(opts.sentenceExtent); - - $('input, select').not('.anki-model').change(onOptionsChanged); - $('.anki-model').change(onAnkiModelChanged); - - $('#dict-purge').click(onDictionaryPurge); - $('#dict-importer a').click(onDictionarySetUrl); - $('#dict-import').click(onDictionaryImport); - $('#dict-url').on('input', onDictionaryUpdateUrl); - - populateDictionaries(opts); - populateAnkiDeckAndModel(opts); - updateVisibility(opts); - }); -}); diff --git a/ext/bg/options.html b/ext/bg/options.html index e7a122c8..dd43f097 100644 --- a/ext/bg/options.html +++ b/ext/bg/options.html @@ -73,21 +73,15 @@ <p class="help-block"> Yomichan can import both bundled and custom (see the <a href="https://foosoft.net/projects/yomichan-import">Yomichan Import</a> page for details) dictionaries. Although it is also possible to delete unneeded dictionaries, this operation is <em>extremely slow</em> and it is often - easier to disable them or simply <a id="dict-purge">purge the database</a>. Finally, please make sure to + easier to disable them or simply <a id="dict-purge">purge the database</a>. Please make sure to wait for import and delete operations to complete before closing this page. </p> - <div id="dict-purge-progress"> - Dictionary data is being purged, please be patient... - </div> - - <div id="dict-groups"></div> + <div id="dict-purge-progress" class="text-danger">Dictionary data is being purged, please be patient...</div> <div class="alert alert-warning" id="dict-warning"> <strong>Warning:</strong> - <span> - No dictionaries found, use the importer below to install packaged and external dictionaries - </span> + <span>No dictionaries found, use the importer below to install packaged and external dictionaries</span> </div> <div class="alert alert-danger" id="dict-error"> @@ -95,6 +89,8 @@ <span></span> </div> + <div id="dict-groups"></div> + <div id="dict-import-progress"> Dictionary data is being imported, please be patient... <div class="progress"> |