summaryrefslogtreecommitdiff
path: root/ext/bg/js/settings-popup-preview.js
diff options
context:
space:
mode:
authorAlex Yatskov <FooSoft@users.noreply.github.com>2019-10-13 08:58:40 -0700
committerGitHub <noreply@github.com>2019-10-13 08:58:40 -0700
commit320af99b7676a37157e2d7207756dd502e6be608 (patch)
tree5c28a1abba2693b22b1f3f7932f69cabcbaa453c /ext/bg/js/settings-popup-preview.js
parent537d2ef532aa7b7498de13ab039bd23f28d32714 (diff)
parent57db18c31b117591982795c930cc9f07efc28641 (diff)
Merge pull request #253 from toasted-nutbread/style-editor
Popup style preview + themes
Diffstat (limited to 'ext/bg/js/settings-popup-preview.js')
-rw-r--r--ext/bg/js/settings-popup-preview.js161
1 files changed, 161 insertions, 0 deletions
diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
new file mode 100644
index 00000000..53a5f1d0
--- /dev/null
+++ b/ext/bg/js/settings-popup-preview.js
@@ -0,0 +1,161 @@
+/*
+ * Copyright (C) 2019 Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * 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 <http://www.gnu.org/licenses/>.
+ */
+
+
+class SettingsPopupPreview {
+ constructor() {
+ this.frontend = null;
+ this.apiOptionsGetOld = apiOptionsGet;
+ this.popupShown = false;
+ this.themeChangeTimeout = null;
+ }
+
+ static create() {
+ const instance = new SettingsPopupPreview();
+ instance.prepare();
+ return instance;
+ }
+
+ async prepare() {
+ // Setup events
+ window.addEventListener('resize', (e) => this.onWindowResize(e), false);
+ window.addEventListener('message', (e) => this.onMessage(e), false);
+
+ const themeDarkCheckbox = document.querySelector('#theme-dark-checkbox');
+ if (themeDarkCheckbox !== null) {
+ themeDarkCheckbox.addEventListener('change', () => this.onThemeDarkCheckboxChanged(themeDarkCheckbox), false);
+ }
+
+ // Overwrite API functions
+ window.apiOptionsGet = (...args) => this.apiOptionsGet(...args);
+
+ // Overwrite frontend
+ this.frontend = Frontend.create();
+ window.yomichan_frontend = this.frontend;
+
+ this.frontend.setEnabled = function () {};
+ this.frontend.searchClear = function () {};
+
+ this.frontend.popup.childrenSupported = false;
+ this.frontend.popup.interactive = false;
+
+ await this.frontend.isPrepared();
+
+ // 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;
+ }
+
+ onWindowResize() {
+ if (this.frontend === null) { return; }
+ const textSource = this.frontend.textSourceLast;
+ if (textSource === null) { return; }
+
+ const elementRect = textSource.getRect();
+ const writingMode = textSource.getWritingMode();
+ const options = this.frontend.options;
+ this.frontend.popup.show(elementRect, writingMode, options);
+ }
+
+ onMessage(e) {
+ const {action, params} = e.data;
+ const handlers = SettingsPopupPreview.messageHandlers;
+ if (handlers.hasOwnProperty(action)) {
+ const handler = handlers[action];
+ handler(this, params);
+ }
+ }
+
+ onThemeDarkCheckboxChanged(node) {
+ document.documentElement.classList.toggle('dark', node.checked);
+ if (this.themeChangeTimeout !== null) {
+ clearTimeout(this.themeChangeTimeout);
+ }
+ this.themeChangeTimeout = setTimeout(() => {
+ this.themeChangeTimeout = null;
+ this.frontend.popup.updateTheme();
+ }, 300);
+ }
+
+ 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);
+ }
+
+ 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);
+
+ this.frontend.textSourceLast = null;
+ await this.frontend.searchSource(source, 'script');
+ await this.frontend.lastShowPromise;
+
+ if (this.frontend.popup.isVisible()) {
+ this.popupShown = true;
+ }
+
+ this.setInfoVisible(!this.popupShown);
+ }
+}
+
+SettingsPopupPreview.messageHandlers = {
+ setText: (self, {text}) => self.setText(text),
+ setCustomCss: (self, {css}) => self.setCustomCss(css)
+};
+
+SettingsPopupPreview.instance = SettingsPopupPreview.create();
+
+
+