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.

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`;