yomichan/ext/bg/js/settings/popup-preview-frame.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
 * Frontend
 * Popup
 * TextSourceRange
 * api
 */

class PopupPreviewFrame {
    constructor(frameId, popupFactory) {
        this._frameId = frameId;
        this._popupFactory = popupFactory;
        this._frontend = null;
        this._frontendGetOptionsContextOld = null;
        this._apiOptionsGetOld = null;
        this._popupSetCustomOuterCssOld = null;
        this._popupShown = false;
        this._themeChangeTimeout = null;
        this._textSource = null;
        this._optionsContext = null;
        this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');

        this._windowMessageHandlers = new Map([
            ['setText',              this._setText.bind(this)],
            ['setCustomCss',         this._setCustomCss.bind(this)],
            ['setCustomOuterCss',    this._setCustomOuterCss.bind(this)],
            ['updateOptionsContext', this._updateOptionsContext.bind(this)]
        ]);
    }

    async prepare() {
        window.addEventListener('message', this._onMessage.bind(this), false);

        // Setup events
        document.querySelector('#theme-dark-checkbox').addEventListener('change', this._onThemeDarkCheckboxChanged.bind(this), false);

        // Overwrite API functions
        this._apiOptionsGetOld = api.optionsGet.bind(api);
        api.optionsGet = this._apiOptionsGet.bind(this);

        // Overwrite frontend
        this._frontend = new Frontend(
            this._frameId,
            this._popupFactory,
            {
                allowRootFramePopupProxy: false
            }
        );
        this._frontendGetOptionsContextOld = this._frontend.getOptionsContext.bind(this._frontend);
        this._frontend.getOptionsContext = this._getOptionsContext.bind(this);
        await this._frontend.prepare();
        this._frontend.setDisabledOverride(true);
        this._frontend.canClearSelection = false;

        const popup = this._frontend.popup;
        popup.setChildrenSupported(false);

        this._popupSetCustomOuterCssOld = popup.setCustomOuterCss.bind(popup);
        popup.setCustomOuterCss = this._popupSetCustomOuterCss.bind(this);

        // Update search
        this._updateSearch();
    }

    // Private

    async _getOptionsContext() {
        let optionsContext = this._optionsContext;
        if (optionsContext === null) {
            optionsContext = this._frontendGetOptionsContextOld();
        }
        return optionsContext;
    }

    async _apiOptionsGet(...args) {
        const options = await this._apiOptionsGetOld(...args);
        options.general.enable = true;
        options.general.debugInfo = false;
        options.general.popupWidth = 400;
        options.general.popupHeight = 250;
        options.general.popupHorizontalOffset = 0;
        options.general.popupVerticalOffset = 10;
        options.general.popupHorizontalOffset2 = 10;
        options.general.popupVerticalOffset2 = 0;
        options.general.popupHorizontalTextPosition = 'below';
        options.general.popupVerticalTextPosition = 'before';
        options.scanning.selectText = false;
        return options;
    }

    async _popupSetCustomOuterCss(...args) {
        // This simulates the stylesheet priorities when injecting using the web extension API.
        const result = await this._popupSetCustomOuterCssOld(...args);

        const node = document.querySelector('#client-css');
        if (node !== null && result !== null) {
            node.parentNode.insertBefore(result, node);
        }

        return result;
    }

    _onMessage(e) {
        if (e.origin !== this._targetOrigin) { return; }

        const {action, params} = e.data;
        const handler = this._windowMessageHandlers.get(action);
        if (typeof handler !== 'function') { return; }

        handler(params);
    }

    _onThemeDarkCheckboxChanged(e) {
        document.documentElement.classList.toggle('dark', e.target.checked);
        if (this._themeChangeTimeout !== null) {
            clearTimeout(this._themeChangeTimeout);
        }
        this._themeChangeTimeout = setTimeout(() => {
            this._themeChangeTimeout = null;
            const popup = this._frontend.popup;
            if (popup === null) { return; }
            popup.updateTheme();
        }, 300);
    }

    _setText({text}) {
        const exampleText = document.querySelector('#example-text');
        if (exampleText === null) { return; }

        exampleText.textContent = text;
        if (this._frontend === null) { return; }
        this._updateSearch();
    }

    _setInfoVisible(visible) {
        const node = document.querySelector('.placeholder-info');
        if (node === null) { return; }

        node.classList.toggle('placeholder-info-visible', visible);
    }

    _setCustomCss({css}) {
        if (this._frontend === null) { return; }
        const popup = this._frontend.popup;
        if (popup === null) { return; }
        popup.setCustomCss(css);
    }

    _setCustomOuterCss({css}) {
        if (this._frontend === null) { return; }
        const popup = this._frontend.popup;
        if (popup === null) { return; }
        popup.setCustomOuterCss(css, false);
    }

    async _updateOptionsContext({optionsContext}) {
        this._optionsContext = optionsContext;
        if (this._frontend === null) { return; }
        await this._frontend.updateOptions();
        await this._updateSearch();
    }

    async _updateSearch() {
        const exampleText = document.querySelector('#example-text');
        if (exampleText === null) { return; }

        const textNode = exampleText.firstChild;
        if (textNode === null) { return; }

        const range = document.createRange();
        range.selectNode(textNode);
        const source = new TextSourceRange(range, range.toString(), null, null);

        try {
            await this._frontend.setTextSource(source);
        } finally {
            source.cleanup();
        }
        this._textSource = source;
        await this._frontend.showContentCompleted();

        const popup = this._frontend.popup;
        if (popup !== null && popup.isVisibleSync()) {
            this._popupShown = true;
        }

        this._setInfoVisible(!this._popupShown);
    }
}