From ad897713e6acbcbd56962e8514ac866926da3cdd Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Tue, 9 Jul 2019 17:52:44 -0400 Subject: Add support for custom popup CSS --- ext/bg/js/options.js | 3 ++- ext/bg/js/settings.js | 2 ++ ext/bg/settings.html | 14 ++++++++++++++ ext/fg/js/float.js | 22 ++++++++++++++++++++++ ext/fg/js/popup.js | 13 ++++++++++--- 5 files changed, 50 insertions(+), 4 deletions(-) diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index bad56db6..f1fc2cf8 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -198,7 +198,8 @@ function optionsSetDefaults(options) { showGuide: true, compactTags: false, compactGlossaries: false, - mainDictionary: '' + mainDictionary: '', + customPopupCss: '' }, scanning: { diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 60a1886b..953120da 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -36,6 +36,7 @@ async function formRead() { optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10); optionsNew.general.popupHorizontalOffset = parseInt($('#popup-horizontal-offset').val(), 0); optionsNew.general.popupVerticalOffset = parseInt($('#popup-vertical-offset').val(), 10); + optionsNew.general.customPopupCss = $('#custom-popup-css').val(); optionsNew.scanning.middleMouse = $('#middle-mouse-button-scan').prop('checked'); optionsNew.scanning.touchInputEnabled = $('#touch-input-enabled').prop('checked'); @@ -169,6 +170,7 @@ async function onReady() { $('#popup-height').val(options.general.popupHeight); $('#popup-horizontal-offset').val(options.general.popupHorizontalOffset); $('#popup-vertical-offset').val(options.general.popupVerticalOffset); + $('#custom-popup-css').val(options.general.customPopupCss); $('#middle-mouse-button-scan').prop('checked', options.scanning.middleMouse); $('#touch-input-enabled').prop('checked', options.scanning.touchInputEnabled); diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 1b4e5c84..086d67d2 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -30,6 +30,15 @@ padding-bottom: 1em; } + #custom-popup-css { + width: 100%; + min-height: 34px; + height: 96px; + resize: vertical; + font-family: 'Courier New', Courier, monospace; + white-space: pre; + } + [data-show-for-browser] { display: none; } @@ -123,6 +132,11 @@
+ +
+ +
+
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 1f08702d..1deb61a9 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -21,6 +21,7 @@ class DisplayFloat extends Display { constructor() { super($('#spinner'), $('#definitions')); this.autoPlayAudioTimer = null; + this.styleNode = null; $(window).on('message', utilAsync(this.onMessage.bind(this))); } @@ -62,6 +63,13 @@ class DisplayFloat extends Display { orphaned: () => { this.onOrphaned(); + }, + + setOptions: (options) => { + const css = options.general.customPopupCss; + if (css) { + this.setStyle(css); + } } }; @@ -101,6 +109,20 @@ class DisplayFloat extends Display { this.autoPlayAudioTimer = null; } } + + 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); + } + } } window.yomichan_display = new DisplayFloat(); diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index ad81cf03..f5ccaf8b 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -29,10 +29,17 @@ class Popup { this.injected = null; } - inject() { + inject(options) { if (!this.injected) { this.injected = new Promise((resolve, reject) => { - this.container.addEventListener('load', resolve); + this.container.addEventListener('load', () => { + this.invokeApi('setOptions', { + general: { + customPopupCss: options.general.customPopupCss + } + }); + resolve(); + }); this.observeFullscreen(); this.onFullscreenChanged(); }); @@ -42,7 +49,7 @@ class Popup { } async show(elementRect, options) { - await this.inject(); + await this.inject(options); const containerStyle = window.getComputedStyle(this.container); const containerHeight = parseInt(containerStyle.height); -- cgit v1.2.3