yomichan/ext/bg/js/settings/dictionary-controller.js

/*
 * Copyright (C) 2019-2020  Yomichan Authors
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

/* global
 * api
 * utilBackgroundIsolate
 */

class SettingsDictionaryListUI extends EventDispatcher {
    constructor(container, template, extraContainer, extraTemplate) {
        super();
        this.container = container;
        this.template = template;
        this.extraContainer = extraContainer;
        this.extraTemplate = extraTemplate;
        this.optionsDictionaries = null;
        this.dictionaries = null;
        this.dictionaryEntries = [];
        this.extra = null;

        document.querySelector('#dict-delete-confirm').addEventListener('click', this.onDictionaryConfirmDelete.bind(this), false);
    }

    setOptionsDictionaries(optionsDictionaries) {
        this.optionsDictionaries = optionsDictionaries;
        if (this.dictionaries !== null) {
            this.setDictionaries(this.dictionaries);
        }
    }

    setDictionaries(dictionaries) {
        for (const dictionaryEntry of this.dictionaryEntries) {
            dictionaryEntry.cleanup();
        }

        this.dictionaryEntries = [];
        this.dictionaries = toIterable(dictionaries);

        if (this.optionsDictionaries === null) {
            return;
        }

        let changed = false;
        for (const dictionaryInfo of this.dictionaries) {
            if (this.createEntry(dictionaryInfo)) {
                changed = true;
            }
        }

        this.updateDictionaryOrder();

        const titles = this.dictionaryEntries.map((e) => e.dictionaryInfo.title);
        const removeKeys = Object.keys(this.optionsDictionaries).filter((key) => titles.indexOf(key) < 0);
        if (removeKeys.length > 0) {
            for (const key of toIterable(removeKeys)) {
                delete this.optionsDictionaries[key];
            }
            changed = true;
        }

        if (changed) {
            this.save();
        }
    }

    createEntry(dictionaryInfo) {
        const title = dictionaryInfo.title;
        let changed = false;
        let optionsDictionary;
        const optionsDictionaries = this.optionsDictionaries;
        if (hasOwn(optionsDictionaries, title)) {
            optionsDictionary = optionsDictionaries[title];
        } else {
            optionsDictionary = SettingsDictionaryListUI.createDictionaryOptions();
            optionsDictionaries[title] = optionsDictionary;
            changed = true;
        }

        const content = document.importNode(this.template.content, true).firstChild;

        this.dictionaryEntries.push(new SettingsDictionaryEntryUI(this, dictionaryInfo, content, optionsDictionary));

        return changed;
    }

    static createDictionaryOptions() {
        return utilBackgroundIsolate({
            priority: 0,
            enabled: false,
            allowSecondarySearches: false
        });
    }

    createExtra(totalCounts, remainders, totalRemainder) {
        const content = document.importNode(this.extraTemplate.content, true).firstChild;
        this.extraContainer.appendChild(content);
        return new SettingsDictionaryExtraUI(this, totalCounts, remainders, totalRemainder, content);
    }

    setCounts(dictionaryCounts, totalCounts) {
        const remainders = Object.assign({}, totalCounts);
        const keys = Object.keys(remainders);

        for (let i = 0, ii = Math.min(this.dictionaryEntries.length, dictionaryCounts.length); i < ii; ++i) {
            const counts = dictionaryCounts[i];
            this.dictionaryEntries[i].setCounts(counts);

            for (const key of keys) {
                remainders[key] -= counts[key];
            }
        }

        let totalRemainder = 0;
        for (const key of keys) {
            totalRemainder += remainders[key];
        }

        if (this.extra !== null) {
            this.extra.cleanup();
            this.extra = null;
        }

        if (totalRemainder > 0) {
            this.extra = this.createExtra(totalCounts, remainders, totalRemainder);
        }
    }

    updateDictionaryOrder() {
        const sortInfo = this.dictionaryEntries.map((e, i) => [e, i]);
        sortInfo.sort((a, b) => {
            const i = b[0].optionsDictionary.priority - a[0].optionsDictionary.priority;
            return (i !== 0 ? i : a[1] - b[1]);
        });

        for (const [e] of sortInfo) {
            this.container.appendChild(e.content);
        }
    }

    save() {
        // Overwrite
    }

    preventPageExit() {
        // Overwrite
        return {end: () => {}};
    }

    onDictionaryConfirmDelete(e) {
        e.preventDefault();
        const n = document.querySelector('#dict-delete-modal');
        const title = n.dataset.dict;
        delete n.dataset.dict;
        $(n).modal('hide');

        const index = this.dictionaryEntries.findIndex((entry) => entry.dictionaryInfo.title === title);
        if (index >= 0) {
            this.dictionaryEntries[index].deleteDictionary();
        }
    }
}

class SettingsDictionaryEntryUI {
    constructor(parent, dictionaryInfo, content, optionsDictionary) {
        this.parent = parent;
        this.dictionaryInfo = dictionaryInfo;
        this.optionsDictionary = optionsDictionary;
        this.counts = null;
        this.eventListeners = new EventListenerCollection();
        this.isDeleting = false;

        this.content = content;
        this.enabledCheckbox = this.content.querySelector('.dict-enabled');
        this.allowSecondarySearchesCheckbox = this.content.querySelector('.dict-allow-secondary-searches');
        this.priorityInput = this.content.querySelector('.dict-priority');
        this.deleteButton = this.content.querySelector('.dict-delete-button');
        this.detailsToggleLink = this.content.querySelector('.dict-details-toggle-link');
        this.detailsContainer = this.content.querySelector('.dict-details');
        this.detailsTable = this.content.querySelector('.dict-details-table');

        if (this.dictionaryInfo.version < 3) {
            this.content.querySelector('.dict-outdated').hidden = false;
        }

        this.setupDetails(dictionaryInfo);

        this.content.querySelector('.dict-title').textContent = this.dictionaryInfo.title;
        this.content.querySelector('.dict-revision').textContent = `rev.${this.dictionaryInfo.revision}`;
        this.content.querySelector('.dict-prefix-wildcard-searches-supported').checked = !!this.dictionaryInfo.prefixWildcardsSupported;

        this.applyValues();

        this.eventListeners.addEventListener(this.enabledCheckbox, 'change', this.onEnabledChanged.bind(this), false);
        this.eventListeners.addEventListener(this.allowSecondarySearchesCheckbox, 'change', this.onAllowSecondarySearchesChanged.bind(this), false);
        this.eventListeners.addEventListener(this.priorityInput, 'change', this.onPriorityChanged.bind(this), false);
        this.eventListeners.addEventListener(this.deleteButton, 'click', this.onDeleteButtonClicked.bind(this), false);
        this.eventListeners.addEventListener(this.detailsToggleLink, 'click', this.onDetailsToggleLinkClicked.bind(this), false);
    }

    setupDetails(dictionaryInfo) {
        const targets = [
            ['Author', 'author'],
            ['URL', 'url'],
            ['Description', 'description'],
            ['Attribution', 'attribution']
        ];

        let count = 0;
        for (const [label, key] of targets) {
            const info = dictionaryInfo[key];
            if (typeof info !== 'string') { continue; }

            const n1 = document.createElement('div');
            n1.className = 'dict-details-entry';
            n1.dataset.type = key;

            const n2 = document.createElement('span');
            n2.className = 'dict-details-entry-label';
            n2.textContent = `${label}:`;
            n1.appendChild(n2);

            const n3 = document.createElement('span');
            n3.className = 'dict-details-entry-info';
            n3.textContent = info;
            n1.appendChild(n3);

            this.detailsTable.appendChild(n1);

            ++count;
        }

        if (count === 0) {
            this.detailsContainer.hidden = true;
            this.detailsToggleLink.hidden = true;
        }
    }

    cleanup() {
        if (this.content !== null) {
            if (this.content.parentNode !== null) {
                this.content.parentNode.removeChild(this.content);
            }
            this.content = null;
        }
        this.dictionaryInfo = null;
        this.eventListeners.removeAllEventListeners();
    }

    setCounts(counts) {
        this.counts = counts;
        const node = this.content.querySelector('.dict-counts');
        node.textContent = JSON.stringify({
            info: this.dictionaryInfo,
            counts
        }, null, 4);
        node.removeAttribute('hidden');
    }

    save() {
        this.parent.save();
    }

    applyValues() {
        this.enabledCheckbox.checked = this.optionsDictionary.enabled;
        this.allowSecondarySearchesCheckbox.checked = this.optionsDictionary.allowSecondarySearches;
        this.priorityInput.value = `${this.optionsDictionary.priority}`;
    }

    async deleteDictionary() {
        if (this.isDeleting) {
            return;
        }

        const progress = this.content.querySelector('.progress');
        progress.hidden = false;
        const progressBar = this.content.querySelector('.progress-bar');
        this.isDeleting = true;

        const prevention = this.parent.preventPageExit();
        try {
            const onProgress = ({processed, count, storeCount, storesProcesed}) => {
                let percent = 0.0;
                if (count > 0 && storesProcesed > 0) {
                    percent = (processed / count) * (storesProcesed / storeCount) * 100.0;
                }
                progressBar.style.width = `${percent}%`;
            };

            await api.deleteDictionary(this.dictionaryInfo.title, onProgress);
        } catch (e) {
            this.dictionaryErrorsShow([e]);
        } finally {
            prevention.end();
            this.isDeleting = false;
            progress.hidden = true;

            this.parent.trigger('databaseUpdated');
        }
    }

    onEnabledChanged(e) {
        this.optionsDictionary.enabled = !!e.target.checked;
        this.save();
    }

    onAllowSecondarySearchesChanged(e) {
        this.optionsDictionary.allowSecondarySearches = !!e.target.checked;
        this.save();
    }

    onPriorityChanged(e) {
        let value = Number.parseFloat(e.target.value);
        if (Number.isNaN(value)) {
            value = this.optionsDictionary.priority;
        } else {
            this.optionsDictionary.priority = value;
            this.save();
        }

        e.target.value = `${value}`;

        this.parent.updateDictionaryOrder();
    }

    onDeleteButtonClicked(e) {
        e.preventDefault();

        if (this.isDeleting) {
            return;
        }

        const title = this.dictionaryInfo.title;
        const n = document.querySelector('#dict-delete-modal');
        n.dataset.dict = title;
        document.querySelector('#dict-remove-modal-dict-name').textContent = title;
        $(n).modal('show');
    }

    onDetailsToggleLinkClicked(e) {
        e.preventDefault();

        this.detailsContainer.hidden = !this.detailsContainer.hidden;
    }
}

class SettingsDictionaryExtraUI {
    constructor(parent, totalCounts, remainders, totalRemainder, content) {
        this.parent = parent;
        this.content = content;

        this.content.querySelector('.dict-total-count').textContent = `${totalRemainder} item${totalRemainder !== 1 ? 's' : ''}`;

        const node = this.content.querySelector('.dict-counts');
        node.textContent = JSON.stringify({
            counts: totalCounts,
            remainders: remainders
        }, null, 4);
        node.removeAttribute('hidden');
    }

    cleanup() {
        if (this.content !== null) {
            if (this.content.parentNode !== null) {
                this.content.parentNode.removeChild(this.content);
            }
            this.content = null;
        }
    }
}

class DictionaryController {
    constructor(settingsController) {
        this._settingsController = settingsController;
        this._dictionaryUI = null;
    }

    async prepare() {
        this._dictionaryUI = new SettingsDictionaryListUI(
            document.querySelector('#dict-groups'),
            document.querySelector('#dict-template'),
            document.querySelector('#dict-groups-extra'),
            document.querySelector('#dict-extra-template')
        );
        this._dictionaryUI.save = () => this._settingsController.save();
        this._dictionaryUI.preventPageExit = this._preventPageExit.bind(this);
        this._dictionaryUI.on('databaseUpdated', this._onDatabaseUpdated.bind(this));

        document.querySelector('#dict-main').addEventListener('change', this._onDictionaryMainChanged.bind(this), false);
        document.querySelector('#database-enable-prefix-wildcard-searches').addEventListener('change', this._onDatabaseEnablePrefixWildcardSearchesChanged.bind(this), false);

        this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
        this._settingsController.on('databaseUpdated', this._onDatabaseUpdated.bind(this));

        await this._onOptionsChanged();
        await this._onDatabaseUpdated();
    }

    // Private

    async _onOptionsChanged() {
        const options = await this._settingsController.getOptionsMutable();

        this._dictionaryUI.setOptionsDictionaries(options.dictionaries);

        const optionsFull = await this._settingsController.getOptionsFull();
        document.querySelector('#database-enable-prefix-wildcard-searches').checked = optionsFull.global.database.prefixWildcardsSupported;

        await this._updateMainDictionarySelectValue();
    }

    _updateMainDictionarySelectOptions(dictionaries) {
        const select = document.querySelector('#dict-main');
        select.textContent = ''; // Empty

        let option = document.createElement('option');
        option.className = 'text-muted';
        option.value = '';
        option.textContent = 'Not selected';
        select.appendChild(option);

        for (const {title, sequenced} of toIterable(dictionaries)) {
            if (!sequenced) { continue; }

            option = document.createElement('option');
            option.value = title;
            option.textContent = title;
            select.appendChild(option);
        }
    }

    async _updateMainDictionarySelectValue() {
        const options = await this._settingsController.getOptions();

        const value = options.general.mainDictionary;

        const select = document.querySelector('#dict-main');
        let selectValue = null;
        for (const child of select.children) {
            if (child.nodeName.toUpperCase() === 'OPTION' && child.value === value) {
                selectValue = value;
                break;
            }
        }

        let missingNodeOption = select.querySelector('option[data-not-installed=true]');
        if (selectValue === null) {
            if (missingNodeOption === null) {
                missingNodeOption = document.createElement('option');
                missingNodeOption.className = 'text-muted';
                missingNodeOption.value = value;
                missingNodeOption.textContent = `${value} (Not installed)`;
                missingNodeOption.dataset.notInstalled = 'true';
                select.appendChild(missingNodeOption);
            }
        } else {
            if (missingNodeOption !== null) {
                missingNodeOption.parentNode.removeChild(missingNodeOption);
            }
        }

        select.value = value;
    }

    async _onDatabaseUpdated() {
        try {
            const dictionaries = await api.getDictionaryInfo();
            this._dictionaryUI.setDictionaries(dictionaries);

            document.querySelector('#dict-warning').hidden = (dictionaries.length > 0);

            this._updateMainDictionarySelectOptions(dictionaries);
            await this._updateMainDictionarySelectValue();

            const {counts, total} = await api.getDictionaryCounts(dictionaries.map((v) => v.title), true);
            this._dictionaryUI.setCounts(counts, total);
        } catch (e) {
            yomichan.logError(e);
        }
    }

    async _onDictionaryMainChanged(e) {
        const select = e.target;
        const value = select.value;

        const missingNodeOption = select.querySelector('option[data-not-installed=true]');
        if (missingNodeOption !== null && missingNodeOption.value !== value) {
            missingNodeOption.parentNode.removeChild(missingNodeOption);
        }

        const options = await this._settingsController.getOptionsMutable();
        options.general.mainDictionary = value;
        await this._settingsController.save();
    }

    async _onDatabaseEnablePrefixWildcardSearchesChanged(e) {
        const optionsFull = await this._settingsController.getOptionsFullMutable();
        const v = !!e.target.checked;
        if (optionsFull.global.database.prefixWildcardsSupported === v) { return; }
        optionsFull.global.database.prefixWildcardsSupported = !!e.target.checked;
        await this._settingsController.save();
    }

    _preventPageExit() {
        return this._settingsController.preventPageExit();
    }
}