aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-02-14 21:42:59 -0500
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-02-14 21:42:59 -0500
commitba972d8547089d8f2c8e19749ee0a0ab93d36233 (patch)
tree57cb0417e25955abbcd3a41b828aa9a9bc34667c
parent01f611d1898f046de2f367e8fe0ec6692ca7e445 (diff)
Add popup display mode
Allows the popup to be stretched to the full width of the screen, anchored to the top or bottom of the window.
-rw-r--r--ext/bg/js/options.js1
-rw-r--r--ext/bg/js/settings.js2
-rw-r--r--ext/bg/settings.html8
-rw-r--r--ext/fg/css/client.css22
-rw-r--r--ext/fg/js/popup.js4
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`;