alex/yomichan
1
Fork 0
Code Releases Activity

Add support for custom popup CSS

Browse Source
This commit is contained in:
toasted-nutbread 2019-07-09 17:52:44 -04:00
parent 8b8482d255
commit ad897713e6
5 changed files with 50 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ext/bg/js/options.js
View File

@ -198,7 +198,8 @@ function optionsSetDefaults(options) {
showGuide: true,
compactTags: false,
compactGlossaries: false,
mainDictionary: ''
mainDictionary: '',
customPopupCss: ''
},
scanning: {

2
ext/bg/js/settings.js
View File

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

14
ext/bg/settings.html
View File

@ -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 @@
<div class="col-xs-6"><input type="number" min="0" id="popup-vertical-offset" class="form-control"></div>
</div>
</div>
<div class="form-group options-advanced">
<label for="custom-popup-css">Custom popup CSS</label>
<div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
</div>
</div>
<div>

22
ext/fg/js/float.js
View File

@ -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();

13
ext/fg/js/popup.js
View File

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