yomichan/ext/bg/js/settings/popup-preview-frame.js

175 lines
5.6 KiB
JavaScript
Raw Normal View History

2019-10-12 16:59:51 +00:00
/*
* Copyright (C) 2019-2020 Yomichan Authors
2019-10-12 16:59:51 +00:00
*
* 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
2020-01-01 17:00:31 +00:00
* along with this program. If not, see <https://www.gnu.org/licenses/>.
2019-10-12 16:59:51 +00:00
*/
2020-03-11 02:30:36 +00:00
/* global
* Frontend
* Popup
* PopupProxyHost
* TextSourceRange
* apiOptionsGet
*/
2019-10-12 16:59:51 +00:00
class SettingsPopupPreview {
constructor() {
this.frontend = null;
this.apiOptionsGetOld = apiOptionsGet;
this.popup = null;
this.popupSetCustomOuterCssOld = null;
2019-10-12 16:59:51 +00:00
this.popupShown = false;
this.themeChangeTimeout = null;
2019-12-12 02:27:42 +00:00
this.textSource = null;
2020-02-17 04:41:17 +00:00
this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
2020-02-27 01:07:14 +00:00
this._windowMessageHandlers = new Map([
['setText', ({text}) => this.setText(text)],
['setCustomCss', ({css}) => this.setCustomCss(css)],
['setCustomOuterCss', ({css}) => this.setCustomOuterCss(css)]
]);
2019-10-12 16:59:51 +00:00
}
async prepare() {
// Setup events
2020-02-27 02:01:40 +00:00
window.addEventListener('message', this.onMessage.bind(this), false);
2019-10-12 16:59:51 +00:00
2020-02-27 02:19:22 +00:00
document.querySelector('#theme-dark-checkbox').addEventListener('change', this.onThemeDarkCheckboxChanged.bind(this), false);
2019-10-12 16:59:51 +00:00
// Overwrite API functions
2020-02-27 02:01:40 +00:00
window.apiOptionsGet = this.apiOptionsGet.bind(this);
2019-10-12 16:59:51 +00:00
// Overwrite frontend
2019-12-21 18:27:32 +00:00
const popupHost = new PopupProxyHost();
await popupHost.prepare();
this.popup = popupHost.getOrCreatePopup();
this.popup.setChildrenSupported(false);
2019-12-21 18:19:31 +00:00
this.popupSetCustomOuterCssOld = this.popup.setCustomOuterCss;
2020-02-27 02:01:40 +00:00
this.popup.setCustomOuterCss = this.popupSetCustomOuterCss.bind(this);
this.frontend = new Frontend(this.popup);
2019-10-12 16:59:51 +00:00
2020-02-16 00:49:56 +00:00
this.frontend.setEnabled = () => {};
this.frontend.searchClear = () => {};
2019-10-12 16:59:51 +00:00
2019-12-21 18:19:31 +00:00
await this.frontend.prepare();
2019-10-12 16:59:51 +00:00
// Update search
this.updateSearch();
}
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.call(this.popup, ...args);
const node = document.querySelector('#client-css');
if (node !== null && result !== null) {
node.parentNode.insertBefore(result, node);
}
return result;
}
2019-10-12 16:59:51 +00:00
onMessage(e) {
2020-02-17 04:41:17 +00:00
if (e.origin !== this._targetOrigin) { return; }
2019-10-12 16:59:51 +00:00
const {action, params} = e.data;
2020-02-27 01:07:14 +00:00
const handler = this._windowMessageHandlers.get(action);
if (typeof handler !== 'function') { return; }
2020-02-27 01:07:14 +00:00
handler(params);
2019-10-12 16:59:51 +00:00
}
2020-02-27 02:19:22 +00:00
onThemeDarkCheckboxChanged(e) {
document.documentElement.classList.toggle('dark', e.target.checked);
if (this.themeChangeTimeout !== null) {
clearTimeout(this.themeChangeTimeout);
}
this.themeChangeTimeout = setTimeout(() => {
this.themeChangeTimeout = null;
this.frontend.popup.updateTheme();
}, 300);
2019-10-12 16:59:51 +00:00
}
setText(text) {
const exampleText = document.querySelector('#example-text');
if (exampleText === null) { return; }
exampleText.textContent = text;
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; }
this.frontend.popup.setCustomCss(css);
}
setCustomOuterCss(css) {
if (this.frontend === null) { return; }
2020-02-16 18:29:55 +00:00
this.frontend.popup.setCustomOuterCss(css, false);
}
2019-10-12 16:59:51 +00:00
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);
2019-10-12 16:59:51 +00:00
try {
2019-12-08 09:10:19 +00:00
await this.frontend.onSearchSource(source, 'script');
2019-12-23 19:09:41 +00:00
this.frontend.setCurrentTextSource(source);
} finally {
source.cleanup();
}
2019-12-12 02:27:42 +00:00
this.textSource = source;
await this.frontend.showContentCompleted();
2019-10-12 16:59:51 +00:00
2019-12-16 02:48:29 +00:00
if (this.frontend.popup.isVisibleSync()) {
2019-10-12 16:59:51 +00:00
this.popupShown = true;
}
this.setInfoVisible(!this.popupShown);
}
}