From be7fa57d5ced7f6969c5d66f0a35fafb9de3bcee Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 12 Oct 2019 12:59:51 -0400 Subject: Add support for a popup preview --- ext/bg/js/settings-popup-preview.js | 147 ++++++++++++++++++++++++++++++++++++ ext/bg/js/settings.js | 38 ++++++++++ 2 files changed, 185 insertions(+) create mode 100644 ext/bg/js/settings-popup-preview.js (limited to 'ext/bg/js') diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js new file mode 100644 index 00000000..ec21e7e1 --- /dev/null +++ b/ext/bg/js/settings-popup-preview.js @@ -0,0 +1,147 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * 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 . + */ + + +class SettingsPopupPreview { + constructor() { + this.frontend = null; + this.apiOptionsGetOld = apiOptionsGet; + this.popupShown = false; + } + + 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); + } + + setText(text) { + const exampleText = document.querySelector('#example-text'); + if (exampleText === null) { return; } + + exampleText.textContent = text; + 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); + + 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); + } + + setInfoVisible(visible) { + const node = document.querySelector('.placeholder-info'); + if (node === null) { return; } + + node.classList.toggle('placeholder-info-visible', visible); + } +} + +SettingsPopupPreview.messageHandlers = { + setText: (self, {text}) => self.setText(text) +}; + +SettingsPopupPreview.instance = SettingsPopupPreview.create(); + + + diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index bd15f5d0..5732b8ae 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -248,6 +248,7 @@ async function onReady() { showExtensionInformation(); formSetupEventListeners(); + appearanceInitialize(); await audioSettingsInitialize(); await profileOptionsSetup(); @@ -259,6 +260,43 @@ async function onReady() { $(document).ready(utilAsync(onReady)); +/* + * Appearance + */ + +function appearanceInitialize() { + let previewVisible = false; + $('#settings-popup-preview-button').on('click', () => { + if (previewVisible) { return; } + showAppearancePreview(); + previewVisible = true; + }); +} + +function showAppearancePreview() { + const container = $('#settings-popup-preview-container'); + const buttonContainer = $('#settings-popup-preview-button-container'); + const settings = $('#settings-popup-preview-settings'); + const text = $('#settings-popup-preview-text'); + + const frame = document.createElement('iframe'); + frame.src = '/bg/settings-popup-preview.html'; + frame.id = 'settings-popup-preview-frame'; + + window.wanakana.bind(text[0]); + + text.on('input', () => { + const action = 'setText'; + const params = {text: text.val()}; + frame.contentWindow.postMessage({action, params}, '*'); + }); + + container.append(frame); + buttonContainer.remove(); + settings.css('display', ''); +} + + /* * Audio */ -- cgit v1.2.3 From 696ea80e0681c9dab71e7b253acf4c87155004ba Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 12 Oct 2019 13:48:23 -0400 Subject: Add option for popup theme --- ext/bg/js/options.js | 1 + ext/bg/js/settings.js | 2 ++ ext/bg/settings.html | 8 ++++++++ 3 files changed, 11 insertions(+) (limited to 'ext/bg/js') diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index 1021e18d..088945c0 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -276,6 +276,7 @@ function profileOptionsCreateDefaults() { compactTags: false, compactGlossaries: false, mainDictionary: '', + popupTheme: 'default', customPopupCss: '' }, diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 5732b8ae..f09b35d9 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -39,6 +39,7 @@ async function formRead(options) { options.general.popupVerticalOffset = parseInt($('#popup-vertical-offset').val(), 10); options.general.popupHorizontalOffset2 = parseInt($('#popup-horizontal-offset2').val(), 0); options.general.popupVerticalOffset2 = parseInt($('#popup-vertical-offset2').val(), 10); + options.general.popupTheme = $('#popup-theme').val(); options.general.customPopupCss = $('#custom-popup-css').val(); options.audio.enabled = $('#audio-playback-enabled').prop('checked'); @@ -107,6 +108,7 @@ async function formWrite(options) { $('#popup-vertical-offset').val(options.general.popupVerticalOffset); $('#popup-horizontal-offset2').val(options.general.popupHorizontalOffset2); $('#popup-vertical-offset2').val(options.general.popupVerticalOffset2); + $('#popup-theme').val(options.general.popupTheme); $('#custom-popup-css').val(options.general.customPopupCss); $('#audio-playback-enabled').prop('checked', options.audio.enabled); diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 9dd71490..531c0e86 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -231,6 +231,14 @@ +
+ + +
+
-- cgit v1.2.3 From 883226b0451350a0c01841e6c9a192bbb76dd8b6 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 12 Oct 2019 17:12:34 -0400 Subject: Update how custom CSS is applied --- ext/bg/js/search.js | 4 ++++ ext/fg/js/float.js | 21 +-------------------- ext/fg/js/popup-proxy-host.js | 6 ++++++ ext/fg/js/popup-proxy.js | 5 +++++ ext/fg/js/popup.js | 4 ++++ ext/mixed/js/display.js | 16 ++++++++++++++++ 6 files changed, 36 insertions(+), 20 deletions(-) (limited to 'ext/bg/js') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 1d780d70..68afe47e 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -118,6 +118,10 @@ class DisplaySearch extends Display { return this.optionsContext; } + setCustomCss() { + // No custom CSS + } + setIntroVisible(visible, animate) { if (this.introVisible === visible) { return; diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 5164cd8f..4b3cd848 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -21,7 +21,6 @@ class DisplayFloat extends Display { constructor() { super(document.querySelector('#spinner'), document.querySelector('#definitions')); this.autoPlayAudioTimer = null; - this.styleNode = null; this.optionsContext = { depth: 0, @@ -101,11 +100,6 @@ class DisplayFloat extends Display { async initialize(options, popupInfo, url, childrenSupported) { await super.initialize(options); - const css = options.general.customPopupCss; - if (css) { - this.setStyle(css); - } - const {id, depth, parentFrameId} = popupInfo; this.optionsContext.depth = depth; this.optionsContext.url = url; @@ -114,20 +108,6 @@ class DisplayFloat extends Display { popupNestedInitialize(id, depth, parentFrameId, url); } } - - setStyle(css) { - const parent = document.head; - - if (this.styleNode === null) { - this.styleNode = document.createElement('style'); - } - - this.styleNode.textContent = css; - - if (this.styleNode.parentNode !== parent) { - parent.appendChild(this.styleNode); - } - } } DisplayFloat.onKeyDownHandlers = { @@ -145,6 +125,7 @@ DisplayFloat.messageHandlers = { kanjiShow: (self, {definitions, context}) => self.kanjiShow(definitions, context), clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(), orphaned: (self) => self.onOrphaned(), + setCustomCss: (self, {css}) => self.setCustomCss(css), initialize: (self, {options, popupInfo, url, childrenSupported}) => self.initialize(options, popupInfo, url, childrenSupported) }; diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js index 74a5153a..bb323f64 100644 --- a/ext/fg/js/popup-proxy-host.js +++ b/ext/fg/js/popup-proxy-host.js @@ -45,6 +45,7 @@ class PopupProxyHost { containsPoint: ({id, x, y}) => this.containsPoint(id, x, y), termsShow: ({id, elementRect, writingMode, definitions, context}) => this.termsShow(id, elementRect, writingMode, definitions, context), kanjiShow: ({id, elementRect, writingMode, definitions, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, context), + setCustomCss: ({id, css}) => this.setCustomCss(id, css), clearAutoPlayTimer: ({id}) => this.clearAutoPlayTimer(id) }); } @@ -126,6 +127,11 @@ class PopupProxyHost { return await popup.kanjiShow(elementRect, writingMode, definitions, context); } + async setCustomCss(id, css) { + const popup = this.getPopup(id); + return popup.setCustomCss(css); + } + async clearAutoPlayTimer(id) { const popup = this.getPopup(id); return popup.clearAutoPlayTimer(); diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js index e8d6bc98..6ea94b6a 100644 --- a/ext/fg/js/popup-proxy.js +++ b/ext/fg/js/popup-proxy.js @@ -88,6 +88,11 @@ class PopupProxy { return await this.invokeHostApi('kanjiShow', {id, elementRect, writingMode, definitions, context}); } + async setCustomCss(css) { + const id = await this.getPopupId(); + return await this.invokeHostApi('setCustomCss', {id, css}); + } + async clearAutoPlayTimer() { if (this.id === null) { return; diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 3556a52e..5ca8643f 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -292,6 +292,10 @@ class Popup { this.invokeApi('kanjiShow', {definitions, context}); } + async setCustomCss(css) { + this.invokeApi('setCustomCss', {css}); + } + clearAutoPlayTimer() { if (this.isInjected) { this.invokeApi('clearAutoPlayTimer'); diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 2bf917aa..51a3dc22 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -29,6 +29,7 @@ class Display { this.audioPlaying = null; this.audioFallback = null; this.audioCache = {}; + this.styleNode = null; this.eventListeners = []; this.persistentEventListeners = []; @@ -195,6 +196,7 @@ class Display { async updateOptions(options) { this.options = options ? options : await apiOptionsGet(this.getOptionsContext()); this.updateTheme(this.options.general.popupTheme); + this.setCustomCss(this.options.general.customPopupCss); } updateTheme(themeName) { @@ -207,6 +209,20 @@ class Display { } } + setCustomCss(css) { + if (this.styleNode === null) { + if (css.length === 0) { return; } + this.styleNode = document.createElement('style'); + } + + this.styleNode.textContent = css; + + const parent = document.head; + if (this.styleNode.parentNode !== parent) { + parent.appendChild(this.styleNode); + } + } + setInteractive(interactive) { interactive = !!interactive; if (this.interactive === interactive) { return; } -- cgit v1.2.3 From 1da60aae2dcd08dd139abf14ca145510e136ee53 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 12 Oct 2019 17:21:36 -0400 Subject: Update live preview custom CSS on input event --- ext/bg/js/settings-popup-preview.js | 22 ++++++++++++++-------- ext/bg/js/settings.js | 6 ++++++ 2 files changed, 20 insertions(+), 8 deletions(-) (limited to 'ext/bg/js') diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js index ec21e7e1..6f64c240 100644 --- a/ext/bg/js/settings-popup-preview.js +++ b/ext/bg/js/settings-popup-preview.js @@ -107,6 +107,18 @@ class SettingsPopupPreview { 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; } @@ -128,17 +140,11 @@ class SettingsPopupPreview { this.setInfoVisible(!this.popupShown); } - - setInfoVisible(visible) { - const node = document.querySelector('.placeholder-info'); - if (node === null) { return; } - - node.classList.toggle('placeholder-info-visible', visible); - } } SettingsPopupPreview.messageHandlers = { - setText: (self, {text}) => self.setText(text) + setText: (self, {text}) => self.setText(text), + setCustomCss: (self, {css}) => self.setCustomCss(css) }; SettingsPopupPreview.instance = SettingsPopupPreview.create(); diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index f09b35d9..b98754ab 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -280,6 +280,7 @@ function showAppearancePreview() { const buttonContainer = $('#settings-popup-preview-button-container'); const settings = $('#settings-popup-preview-settings'); const text = $('#settings-popup-preview-text'); + const customCss = $('#custom-popup-css'); const frame = document.createElement('iframe'); frame.src = '/bg/settings-popup-preview.html'; @@ -292,6 +293,11 @@ function showAppearancePreview() { const params = {text: text.val()}; frame.contentWindow.postMessage({action, params}, '*'); }); + customCss.on('input', () => { + const action = 'setCustomCss'; + const params = {css: customCss.val()}; + frame.contentWindow.postMessage({action, params}, '*'); + }); container.append(frame); buttonContainer.remove(); -- cgit v1.2.3 From b086fca69fdbc74a44d31a06203b302493656151 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 12 Oct 2019 17:59:56 -0400 Subject: Add separate theme option for outer popup style --- ext/bg/js/options.js | 1 + ext/bg/js/settings-popup-preview.js | 8 +++++++ ext/bg/js/settings.js | 2 ++ ext/bg/settings.html | 22 ++++++++++++++----- ext/fg/js/popup.js | 43 ++++++++++++++++++++++++++++++++++++- 5 files changed, 70 insertions(+), 6 deletions(-) (limited to 'ext/bg/js') diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index 088945c0..cadc4443 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -277,6 +277,7 @@ function profileOptionsCreateDefaults() { compactGlossaries: false, mainDictionary: '', popupTheme: 'default', + popupOuterTheme: 'default', customPopupCss: '' }, diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js index 6f64c240..53a5f1d0 100644 --- a/ext/bg/js/settings-popup-preview.js +++ b/ext/bg/js/settings-popup-preview.js @@ -22,6 +22,7 @@ class SettingsPopupPreview { this.frontend = null; this.apiOptionsGetOld = apiOptionsGet; this.popupShown = false; + this.themeChangeTimeout = null; } static create() { @@ -97,6 +98,13 @@ class SettingsPopupPreview { 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) { diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index b98754ab..900b89bb 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -40,6 +40,7 @@ async function formRead(options) { options.general.popupHorizontalOffset2 = parseInt($('#popup-horizontal-offset2').val(), 0); options.general.popupVerticalOffset2 = parseInt($('#popup-vertical-offset2').val(), 10); options.general.popupTheme = $('#popup-theme').val(); + options.general.popupOuterTheme = $('#popup-outer-theme').val(); options.general.customPopupCss = $('#custom-popup-css').val(); options.audio.enabled = $('#audio-playback-enabled').prop('checked'); @@ -109,6 +110,7 @@ async function formWrite(options) { $('#popup-horizontal-offset2').val(options.general.popupHorizontalOffset2); $('#popup-vertical-offset2').val(options.general.popupVerticalOffset2); $('#popup-theme').val(options.general.popupTheme); + $('#popup-outer-theme').val(options.general.popupOuterTheme); $('#custom-popup-css').val(options.general.customPopupCss); $('#audio-playback-enabled').prop('checked', options.audio.enabled); diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 531c0e86..08e56a09 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -232,11 +232,23 @@
- - +
+
+ + +
+
+ + +
+
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 5ca8643f..ef4cdb67 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -85,7 +85,7 @@ class Popup { async setOptions(options) { this.options = options; - this.container.dataset.yomichanTheme = options.general.popupTheme; + this.updateTheme(); } async show(elementRect, writingMode) { @@ -270,6 +270,47 @@ class Popup { } } + updateTheme() { + this.container.dataset.yomichanTheme = this.getTheme(this.options.general.popupOuterTheme); + } + + getTheme(themeName) { + if (themeName === 'auto') { + const color = [255, 255, 255]; + Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor)); + Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor)); + const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128); + themeName = dark ? 'dark' : 'default'; + } + + return themeName; + } + + static addColor(target, color) { + if (color === null) { return; } + + const a = color[3]; + if (a <= 0.0) { return; } + + const aInv = 1.0 - a; + for (let i = 0; i < 3; ++i) { + target[i] = target[i] * aInv + color[i] * a; + } + } + + static getColorInfo(cssColor) { + const m = /^\s*rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d\.]+)\s*)?\)\s*$/.exec(cssColor); + if (m === null) { return null; } + + const m4 = m[4]; + return [ + Number.parseInt(m[1], 10), + Number.parseInt(m[2], 10), + Number.parseInt(m[3], 10), + m4 ? Math.max(0.0, Math.min(1.0, Number.parseFloat(m4))) : 1.0 + ]; + } + async containsPoint(x, y) { for (let popup = this; popup !== null && popup.isVisible(); popup = popup.child) { const rect = popup.container.getBoundingClientRect(); -- cgit v1.2.3