alex/yomichan
1
Fork 0
Code Releases Activity

add options for setting popup width, height, offset

Browse Source
This commit is contained in:
Alex Yatskov 2017-03-11 17:48:30 -08:00
parent 2c86e87576
commit 83e2fd4748
5 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ext/bg/js/options.js
View File

@ -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);

5
ext/bg/js/util.js
View File

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

15
ext/bg/options.html
View File

@ -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">

6
ext/fg/js/driver.js
View File

@ -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 {

19
ext/fg/js/popup.js
View File

@ -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) {