Merge pull request #253 from toasted-nutbread/style-editor

Popup style preview + themes

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');