aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-10-12 17:12:34 -0400
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-10-12 19:00:24 -0400
commit883226b0451350a0c01841e6c9a192bbb76dd8b6 (patch)
treedfd63e4b2464a0d3eee533c3eac9be31c80de55b
parentc90bc75eb89f5a731f6e3366f6388b594a27b2aa (diff)
Update how custom CSS is applied
-rw-r--r--ext/bg/js/search.js4
-rw-r--r--ext/fg/js/float.js21
-rw-r--r--ext/fg/js/popup-proxy-host.js6
-rw-r--r--ext/fg/js/popup-proxy.js5
-rw-r--r--ext/fg/js/popup.js4
-rw-r--r--ext/mixed/js/display.js16
6 files changed, 36 insertions, 20 deletions
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; }