summaryrefslogtreecommitdiff
path: root/ext/fg/js/popup.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/fg/js/popup.js
parent537d2ef532aa7b7498de13ab039bd23f28d32714 (diff)
parent57db18c31b117591982795c930cc9f07efc28641 (diff)
Merge pull request #253 from toasted-nutbread/style-editor
Popup style preview + themes
Diffstat (limited to 'ext/fg/js/popup.js')
-rw-r--r--ext/fg/js/popup.js46
1 files changed, 46 insertions, 0 deletions
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index f36bb436..ef4cdb67 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -85,6 +85,7 @@ class Popup {
async setOptions(options) {
this.options = options;
+ this.updateTheme();
}
async show(elementRect, writingMode) {
@@ -269,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();
@@ -291,6 +333,10 @@ class Popup {
this.invokeApi('kanjiShow', {definitions, context});
}
+ async setCustomCss(css) {
+ this.invokeApi('setCustomCss', {css});
+ }
+
clearAutoPlayTimer() {
if (this.isInjected) {
this.invokeApi('clearAutoPlayTimer');