add options for setting popup width, height, offset

ext/bg/js/options.js

@@ -30,6 +30,9 @@ function formRead() {
         optionsNew.general.softKatakana = $('#soft-katakana-search').prop('checked');
         optionsNew.general.showAdvanced = $('#show-advanced-options').prop('checked');
         optionsNew.general.maxResults = parseInt($('#max-displayed-results').val(), 10);
+        optionsNew.general.popupWidth = parseInt($('#popup-width').val(), 10);
+        optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10);
+        optionsNew.general.popupOffset = parseInt($('#popup-offset').val(), 10);
 
         optionsNew.scanning.requireShift = $('#hold-shift-to-scan').prop('checked');
         optionsNew.scanning.middleMouse = $('#middle-mouse-button-scan').prop('checked');
@@ -112,6 +115,9 @@ $(document).ready(() => {
         $('#soft-katakana-search').prop('checked', options.general.softKatakana);
         $('#show-advanced-options').prop('checked', options.general.showAdvanced);
         $('#max-displayed-results').val(options.general.maxResults);
+        $('#popup-width').val(options.general.popupWidth);
+        $('#popup-height').val(options.general.popupHeight);
+        $('#popup-offset').val(options.general.popupOffset);
 
         $('#hold-shift-to-scan').prop('checked', options.scanning.requireShift);
         $('#middle-mouse-button-scan').prop('checked', options.scanning.middleMouse);

ext/bg/js/util.js

@@ -79,7 +79,10 @@ function optionsSetDefaults(options) {
             groupResults: true,
             softKatakana: true,
             maxResults: 32,
-            showAdvanced: false
+            showAdvanced: false,
+            popupWidth: 400,
+            popupHeight: 250,
+            popupOffset: 10
         },
 
         scanning: {

ext/bg/options.html

@@ -45,13 +45,26 @@
                     <label for="max-displayed-results">Maximum displayed results</label>
                     <input type="number" min="1" id="max-displayed-results" class="form-control">
                 </div>
+
+                <div class="form-group options-advanced">
+                    <label>Popup size (in pixels)</label>
+                    <div class="row">
+                        <div class="col-xs-6"><input type="number" min="1" id="popup-width" class="form-control"></div>
+                        <div class="col-xs-6"><input type="number" min="1" id="popup-height" class="form-control"></div>
+                    </div>
+                </div>
+
+                <div class="form-group options-advanced">
+                    <label for="popup-offset">Popup offset (in pixels)</label>
+                    <input type="number" min="0" id="popup-offset" class="form-control">
+                </div>
             </div>
 
             <div>
                 <h3>Scanning Options</h3>
 
                 <div class="checkbox">
-                    <label><input type="checkbox" id="middle-mouse-button-scan"> Middle mouse button scanning</label>
+                    <label><input type="checkbox" id="middle-mouse-button-scan"> Middle mouse button scans</label>
                 </div>
 
                 <div class="checkbox">

ext/fg/js/driver.js

@@ -154,7 +154,7 @@ window.driver = new class {
                 const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
                 const url = window.location.href;
 
-                this.popup.showNextTo(textSource.getRect());
+                this.popup.showNextTo(textSource.getRect(), this.options);
                 this.popup.showTermDefs(definitions, this.options, {sentence, url});
 
                 this.lastTextSource = textSource;
@@ -177,7 +177,7 @@ window.driver = new class {
                 const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
                 const url = window.location.href;
 
-                this.popup.showNextTo(textSource.getRect());
+                this.popup.showNextTo(textSource.getRect(), this.options);
                 this.popup.showKanjiDefs(definitions, this.options, {sentence, url});
 
                 this.lastTextSource = textSource;
@@ -204,7 +204,7 @@ window.driver = new class {
     handleError(error, textSource) {
         if (window.orphaned) {
             if (textSource && this.options.scanning.requireShift) {
-                this.popup.showNextTo(textSource.getRect());
+                this.popup.showNextTo(textSource.getRect(), this.options);
                 this.popup.showOrphaned();
             }
         } else {

ext/fg/js/popup.js

@@ -19,18 +19,13 @@
 
 class Popup {
     constructor() {
-        this.offset = 10;
-        this.minWidth = 400;
-        this.minHeight = 250;
-
         this.container = document.createElement('iframe');
         this.container.id = 'yomichan-popup';
         this.container.addEventListener('mousedown', e => e.stopPropagation());
         this.container.addEventListener('scroll', e => e.stopPropagation());
         this.container.setAttribute('src', chrome.extension.getURL('/fg/frame.html'));
-        this.container.style.width=`${this.minWidth}px`;
+        this.container.style.width='0px';
-        this.container.style.height=`${this.minHeight}px`;
+        this.container.style.height='0px';
-
         document.body.appendChild(this.container);
     }
 
@@ -42,7 +37,7 @@ class Popup {
         this.container.style.visibility = 'visible';
     }
 
-    showNextTo(elementRect) {
+    showNextTo(elementRect, options) {
         const containerStyle = window.getComputedStyle(this.container);
         const containerHeight = parseInt(containerStyle.height);
         const containerWidth = parseInt(containerStyle.width);
@@ -51,7 +46,7 @@ class Popup {
         const limitY = window.innerHeight;
 
         let x = elementRect.left;
-        let width = Math.max(containerWidth, this.minWidth);
+        let width = Math.max(containerWidth, options.general.popupWidth);
         const overflowX = Math.max(x + width - limitX, 0);
         if (overflowX > 0) {
             if (x >= overflowX) {
@@ -63,9 +58,9 @@ class Popup {
         }
 
         let y = 0;
-        let height = Math.max(containerHeight, this.minHeight);
+        let height = Math.max(containerHeight, options.general.popupHeight);
-        const yBelow = elementRect.bottom + this.offset;
+        const yBelow = elementRect.bottom + options.general.popupOffset;
-        const yAbove = elementRect.top - this.offset;
+        const yAbove = elementRect.top - options.general.popupOffset;
         const overflowBelow = Math.max(yBelow + height - limitY, 0);
         const overflowAbove = Math.max(height - yAbove, 0);
         if (overflowBelow > 0 || overflowAbove > 0) {