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/settings.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'ext/bg/settings.html') diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 76955b2c..9dd71490 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -235,6 +235,18 @@
+ + + +
+
+ +
+
+
@@ -603,6 +615,7 @@ + -- 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/settings.html') 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 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/settings.html') 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