diff options
| -rw-r--r-- | ext/bg/js/options.js | 1 | ||||
| -rw-r--r-- | ext/bg/js/settings.js | 2 | ||||
| -rw-r--r-- | ext/bg/settings.html | 8 | ||||
| -rw-r--r-- | ext/fg/css/client.css | 22 | ||||
| -rw-r--r-- | ext/fg/js/popup.js | 4 |
5 files changed, 37 insertions, 0 deletions
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index f5f0bca7..f1e02e18 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -190,6 +190,7 @@ function optionsSetDefaults(options) { debugInfo: false, maxResults: 32, showAdvanced: false, + popupDisplayMode: 'default', popupWidth: 400, popupHeight: 250, popupOffset: 10, diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 9da869c7..4bf7181f 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -31,6 +31,7 @@ async function formRead() { optionsNew.general.debugInfo = $('#show-debug-info').prop('checked'); optionsNew.general.showAdvanced = $('#show-advanced-options').prop('checked'); optionsNew.general.maxResults = parseInt($('#max-displayed-results').val(), 10); + optionsNew.general.popupDisplayMode = $('#popup-display-mode').val(); optionsNew.general.popupWidth = parseInt($('#popup-width').val(), 10); optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10); optionsNew.general.popupOffset = parseInt($('#popup-offset').val(), 10); @@ -162,6 +163,7 @@ async function onReady() { $('#show-debug-info').prop('checked', options.general.debugInfo); $('#show-advanced-options').prop('checked', options.general.showAdvanced); $('#max-displayed-results').val(options.general.maxResults); + $('#popup-display-mode').val(options.general.popupDisplayMode); $('#popup-width').val(options.general.popupWidth); $('#popup-height').val(options.general.popupHeight); $('#popup-offset').val(options.general.popupOffset); diff --git a/ext/bg/settings.html b/ext/bg/settings.html index fe4c32b1..7f18a358 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -74,6 +74,14 @@ </select> </div> + <div class="form-group"> + <label for="popup-display-mode">Popup display mode</label> + <select class="form-control" id="popup-display-mode"> + <option value="default">Default</option> + <option value="full-width">Full width</option> + </select> + </div> + <div class="form-group options-advanced"> <label for="audio-playback-volume">Audio playback volume (percent)</label> <input type="number" min="0" max="100" id="audio-playback-volume" class="form-control"> diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css index b5b1f6bd..a9b8e025 100644 --- a/ext/fg/css/client.css +++ b/ext/fg/css/client.css @@ -27,3 +27,25 @@ iframe#yomichan-float { visibility: hidden; z-index: 2147483647; } + +iframe#yomichan-float.yomichan-float-full-width { + border-left: none; + border-right: none; + left: 0 !important; + right: 0 !important; + width: 100% !important; + box-sizing: border-box; + resize: none; +} + +iframe#yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) { + border-bottom: none; + top: auto !important; + bottom: 0 !important; +} + +iframe#yomichan-float.yomichan-float-full-width.yomichan-float-above { + border-top: none; + top: 0 !important; + bottom: auto !important; +} diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index a17b184a..14276efe 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -62,6 +62,7 @@ class Popup { } } + let above = false; let y = 0; let height = Math.max(containerHeight, options.general.popupHeight); const yBelow = elementRect.bottom + options.general.popupOffset; @@ -75,11 +76,14 @@ class Popup { } else { height = Math.max(height - overflowAbove, 0); y = Math.max(yAbove - height, 0); + above = true; } } else { y = yBelow; } + this.container.classList.toggle('yomichan-float-full-width', options.general.popupDisplayMode === 'full-width'); + this.container.classList.toggle('yomichan-float-above', above); this.container.style.left = `${x}px`; this.container.style.top = `${y}px`; this.container.style.width = `${width}px`; |