diff options
Diffstat (limited to 'ext/bg/js/options-form.js')
| -rw-r--r-- | ext/bg/js/options-form.js | 470 |
1 files changed, 321 insertions, 149 deletions
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js index eb562142..fb81e83a 100644 --- a/ext/bg/js/options-form.js +++ b/ext/bg/js/options-form.js @@ -16,55 +16,14 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. */ +// +// General +// function yomichan() { return chrome.extension.getBackgroundPage().yomichan; } -function anki() { - return yomichan().anki; -} - -function fieldsToDict(selection) { - const result = {}; - selection.each((index, element) => { - result[$(element).data('field')] = $(element).val(); - }); - - return result; -} - -function modelIdToFieldOptKey(id) { - return { - 'anki-term-model': 'ankiTermFields', - 'anki-kanji-model': 'ankiKanjiFields' - }[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' - ], - }[id]; -} - function getFormValues() { return loadOptions().then(optsOld => { const optsNew = $.extend({}, optsOld); @@ -91,6 +50,14 @@ function getFormValues() { optsNew.ankiKanjiModel = $('#anki-kanji-model').val(); optsNew.ankiKanjiFields = fieldsToDict($('#kanji .anki-field-value')); + $('.dict-group').each((index, element) => { + const dictionary = $(element); + const title = dictionary.data('title'); + const enableTerms = dictionary.find('.dict-enable-terms').prop('checked'); + const enableKanji = dictionary.find('.dict-enable-kanji').prop('checked'); + optsNew.dictionaries[title] = {enableTerms, enableKanji}; + }); + return { optsNew: sanitizeOptions(optsNew), optsOld: sanitizeOptions(optsOld) @@ -120,43 +87,294 @@ function updateVisibility(opts) { } } -function populateAnkiDeckAndModel(opts) { - const ankiSpinner = $('#anki-spinner'); - ankiSpinner.show(); +$(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); - const ankiFormat = $('#anki-format'); - ankiFormat.hide(); + populateDictionaries(opts); + populateAnkiDeckAndModel(opts); + updateVisibility(opts); + }); +}); - const ankiDeck = $('.anki-deck'); - ankiDeck.find('option').remove(); +// +// Dictionary +// - const ankiModel = $('.anki-model'); - ankiModel.find('option').remove(); +function database() { + return yomichan().translator.database; +} - 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); +function showDictionaryError(error) { + const dialog = $('#dict-error'); + if (error) { + dialog.show().find('span').text(error); + } else { + dialog.hide(); + } +} + +function showDictionarySpinner(show) { + const spinner = $('#dict-spinner'); + if (show) { + spinner.show(); + } else { + spinner.hide(); + } +} + +function populateDictionaries(opts) { + showDictionaryError(null); + showDictionarySpinner(true); + + const dictGroups = $('#dict-groups').empty(); + const dictWarning = $('#dict-warning').hide(); + + let dictCount = 0; + return database().getDictionaries().then(rows => { + rows.forEach(row => { + const dictOpts = opts.dictionaries[row.title] || {enableTerms: false, 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)); + ++dictCount; + }); + + $('.dict-enable-terms, .dict-enable-kanji').change(onOptionsChanged); + $('.dict-delete').click(onDictionaryDelete); + }).catch(error => { + showDictionaryError(error); }).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); + showDictionarySpinner(false); + if (dictCount === 0) { + dictWarning.show(); + } + }); +} + +function onDictionaryPurge(e) { + e.preventDefault(); + + showDictionaryError(null); + showDictionarySpinner(true); + + const dictControls = $('#dict-importer, #dict-groups').hide(); + const dictProgress = $('#dict-purge-progress').show(); + + return database().purge().catch(error => { + showDictionaryError(error); + }).then(() => { + showDictionarySpinner(false); + dictControls.show(); + dictProgress.hide(); + return loadOptions().then(opts => populateDictionaries(opts)); + }); +} + +function onDictionaryDelete() { + showDictionaryError(null); + showDictionarySpinner(true); + + const dictGroup = $(this).closest('.dict-group'); + const dictProgress = dictGroup.find('.dict-delete-progress').show(); + const dictControls = dictGroup.find('.dict-group-controls').hide(); + const setProgress = percent => { + dictProgress.find('.progress-bar').css('width', `${percent}%`); + }; + + setProgress(0.0); + + database().deleteDictionary(dictGroup.data('title'), (total, current) => setProgress(current / total * 100.0)).catch(error => { + showDictionaryError(error); }).then(() => { - return populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts); + showDictionarySpinner(false); + dictProgress.hide(); + dictControls.show(); + return loadOptions().then(opts => populateDictionaries(opts)); + }); +} + +function onDictionaryImport() { + showDictionaryError(null); + showDictionarySpinner(true); + + const dictUrl = $('#dict-url'); + const dictImporter = $('#dict-importer').hide(); + const dictProgress = $('#dict-import-progress').show(); + const setProgress = percent => { + dictProgress.find('.progress-bar').css('width', `${percent}%`); + }; + + setProgress(0.0); + + loadOptions().then(opts => { + database().importDictionary(dictUrl.val(), (total, current) => setProgress(current / total * 100.0)).then(summary => { + opts.dictionaries[summary.title] = {enableTerms: summary.hasTerms, enableKanji: summary.hasKanji}; + return saveOptions(opts).then(() => yomichan().setOptions(opts)); + }).then(() => { + return populateDictionaries(opts); + }).catch(error => { + showDictionaryError(error); + }).then(() => { + showDictionarySpinner(false); + dictProgress.hide(); + dictImporter.show(); + dictUrl.val(''); + dictUrl.trigger('input'); + }); + }); +} + +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); +} + +// +// Anki +// + +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) => { + result[$(element).data('field')] = $(element).val(); + }); + + return result; +} + +function modelIdToFieldOptKey(id) { + return { + 'anki-term-model': 'ankiTermFields', + 'anki-kanji-model': 'ankiKanjiFields' + }[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' + ], + }[id]; +} + +function populateAnkiDeckAndModel(opts) { + showAnkiError(null); + showAnkiSpinner(true); + + const ankiFormat = $('#anki-format').hide(); + + 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}))); + + $('#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(() => { - $('#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 table = element.closest('.tab-pane').find('.anki-fields'); - table.find('tbody').remove(); + const tab = element.closest('.tab-pane'); + const container = tab.find('tbody').empty(); const modelName = element.val(); if (modelName === null) { @@ -168,41 +386,37 @@ function populateAnkiFields(element, opts) { const markers = modelIdToMarkers(modelId); return anki().getModelFieldNames(modelName).then(names => { - const tbody = $('<tbody>'); names.forEach(name => { - const button = $('<button>', {type: 'button', class: 'btn btn-default dropdown-toggle'}); - button.attr('data-toggle', 'dropdown').dropdown(); - - const markerItems = $('<ul>', {class: 'dropdown-menu dropdown-menu-right'}); - for (const marker of markers) { - const link = $('<a>', {href: '#'}).text(`{${marker}}`); - link.click(e => { - e.preventDefault(); - link.closest('.input-group').find('.anki-field-value').val(link.text()).trigger('change'); - }); - markerItems.append($('<li>').append(link)); - } + const html = Handlebars.templates['model.html']({name, markers, value: opts[optKey][name] || ''}); + container.append($(html)); + }); - const groupBtn = $('<div>', {class: 'input-group-btn'}); - groupBtn.append(button.append($('<span>', {class: 'caret'}))); - groupBtn.append(markerItems); + tab.find('.anki-field-value').change(onOptionsChanged); + tab.find('.marker-link').click(e => { + e.preventDefault(); + const link = e.target; + $(link).closest('.input-group').find('.anki-field-value').val(`{${link.text}}`).trigger('change'); + }); + }); +} - const group = $('<div>', {class: 'input-group'}); - group.append($('<input>', { - type: 'text', - class: 'anki-field-value form-control', - value: opts[optKey][name] || '' - }).data('field', name).change(onOptionsChanged)); - group.append(groupBtn); +function onAnkiModelChanged(e) { + if (!e.originalEvent) { + return; + } - const row = $('<tr>'); - row.append($('<td>', {class: 'col-sm-2'}).text(name)); - row.append($('<td>', {class: 'col-sm-10'}).append(group)); + showAnkiError(null); + showAnkiSpinner(true); - tbody.append(row); + getFormValues().then(({optsNew, optsOld}) => { + optsNew[modelIdToFieldOptKey($(this).id)] = {}; + populateAnkiFields($(this), optsNew).then(() => { + saveOptions(optsNew).then(() => yomichan().setOptions(optsNew)); + }).catch(error => { + showAnkiError(error); + }).then(() => { + showAnkiSpinner(false); }); - - table.append(tbody); }); } @@ -212,7 +426,7 @@ function onOptionsChanged(e) { } getFormValues().then(({optsNew, optsOld}) => { - saveOptions(optsNew).then(() => { + return saveOptions(optsNew).then(() => { yomichan().setOptions(optsNew); updateVisibility(optsNew); @@ -221,60 +435,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); }); } - -function onAnkiModelChanged(e) { - if (!e.originalEvent) { - return; - } - - 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); - }).then(() => { - $('#anki-error').hide(); - ankiSpinner.hide(); - }); - }); -} - -$(document).ready(() => { - 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); - - populateAnkiDeckAndModel(opts); - updateVisibility(opts); - }); -}); |