diff options
-rw-r--r-- | ext/bg/js/options.js | 6 | ||||
-rw-r--r-- | ext/bg/js/util.js | 5 | ||||
-rw-r--r-- | ext/bg/options.html | 15 | ||||
-rw-r--r-- | ext/fg/js/driver.js | 6 | ||||
-rw-r--r-- | ext/fg/js/popup.js | 19 |
5 files changed, 34 insertions, 17 deletions
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index 3b10b74f..a094f73f 100644 --- a/ext/bg/js/options.js +++ b/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); diff --git a/ext/bg/js/util.js b/ext/bg/js/util.js index 7f031040..f9b221b3 100644 --- a/ext/bg/js/util.js +++ b/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: { diff --git a/ext/bg/options.html b/ext/bg/options.html index b2d4c3c6..2c7256c2 100644 --- a/ext/bg/options.html +++ b/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"> diff --git a/ext/fg/js/driver.js b/ext/fg/js/driver.js index 5de762ca..fddfbc29 100644 --- a/ext/fg/js/driver.js +++ b/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 { diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 5a2747fc..2b2bf5d3 100644 --- a/ext/fg/js/popup.js +++ b/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.height=`${this.minHeight}px`; - + this.container.style.width='0px'; + 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); - const yBelow = elementRect.bottom + this.offset; - const yAbove = elementRect.top - this.offset; + let height = Math.max(containerHeight, options.general.popupHeight); + const yBelow = elementRect.bottom + options.general.popupOffset; + 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) { |