This commit is contained in:
Alex Yatskov 2017-03-16 22:13:54 -07:00
parent 8893db14ca
commit 231b471f45
2 changed files with 70 additions and 61 deletions

View File

@ -153,9 +153,12 @@ window.driver = new class {
const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt); const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
const url = window.location.href; const url = window.location.href;
this.popup.showTermDefs(
this.popup.showNextTo(textSource.getRect(), this.options); textSource.getRect(),
this.popup.showTermDefs(definitions, this.options, {sentence, url}); definitions,
this.options,
{sentence, url}
);
this.lastTextSource = textSource; this.lastTextSource = textSource;
if (this.options.scanning.selectText) { if (this.options.scanning.selectText) {
@ -176,9 +179,12 @@ window.driver = new class {
} else { } else {
const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt); const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
const url = window.location.href; const url = window.location.href;
this.popup.showKanjiDefs(
this.popup.showNextTo(textSource.getRect(), this.options); textSource.getRect(),
this.popup.showKanjiDefs(definitions, this.options, {sentence, url}); definitions,
this.options,
{sentence, url}
);
this.lastTextSource = textSource; this.lastTextSource = textSource;
if (this.options.scanning.selectText) { if (this.options.scanning.selectText) {
@ -204,8 +210,7 @@ window.driver = new class {
handleError(error, textSource) { handleError(error, textSource) {
if (window.orphaned) { if (window.orphaned) {
if (textSource && this.options.scanning.requireShift) { if (textSource && this.options.scanning.requireShift) {
this.popup.showNextTo(textSource.getRect(), this.options); this.popup.showOrphaned(textSource.getRect(), this.options);
this.popup.showOrphaned();
} }
} else { } else {
window.alert(`Error: ${error}`); window.alert(`Error: ${error}`);

View File

@ -26,67 +26,65 @@ class Popup {
this.container.setAttribute('src', chrome.extension.getURL('/fg/frame.html')); this.container.setAttribute('src', chrome.extension.getURL('/fg/frame.html'));
this.container.style.width = '0px'; this.container.style.width = '0px';
this.container.style.height = '0px'; this.container.style.height = '0px';
this.injected = false; this.injected = null;
} }
inject() { inject() {
if (!this.injected) { if (!this.injected) {
document.body.appendChild(this.container); this.injected = new Promise((resolve, reject) => {
this.injected = true; this.container.addEventListener('load', resolve);
document.body.appendChild(this.container);
});
} }
return this.injected;
} }
showAt(rect) { show(elementRect, options) {
this.inject(); return this.inject().then(() => {
const containerStyle = window.getComputedStyle(this.container);
const containerHeight = parseInt(containerStyle.height);
const containerWidth = parseInt(containerStyle.width);
this.container.style.left = `${rect.x}px`; const limitX = document.body.clientWidth;
this.container.style.top = `${rect.y}px`; const limitY = window.innerHeight;
this.container.style.height = `${rect.height}px`;
this.container.style.width = `${rect.width}px`;
this.container.style.visibility = 'visible';
}
showNextTo(elementRect, options) { let x = elementRect.left;
this.inject(); let width = Math.max(containerWidth, options.general.popupWidth);
const overflowX = Math.max(x + width - limitX, 0);
const containerStyle = window.getComputedStyle(this.container); if (overflowX > 0) {
const containerHeight = parseInt(containerStyle.height); if (x >= overflowX) {
const containerWidth = parseInt(containerStyle.width); x -= overflowX;
} else {
const limitX = document.body.clientWidth; width = limitX;
const limitY = window.innerHeight; x = 0;
}
let x = elementRect.left;
let width = Math.max(containerWidth, options.general.popupWidth);
const overflowX = Math.max(x + width - limitX, 0);
if (overflowX > 0) {
if (x >= overflowX) {
x -= overflowX;
} else {
width = limitX;
x = 0;
} }
}
let y = 0; let y = 0;
let height = Math.max(containerHeight, options.general.popupHeight); let height = Math.max(containerHeight, options.general.popupHeight);
const yBelow = elementRect.bottom + options.general.popupOffset; const yBelow = elementRect.bottom + options.general.popupOffset;
const yAbove = elementRect.top - options.general.popupOffset; const yAbove = elementRect.top - options.general.popupOffset;
const overflowBelow = Math.max(yBelow + height - limitY, 0); const overflowBelow = Math.max(yBelow + height - limitY, 0);
const overflowAbove = Math.max(height - yAbove, 0); const overflowAbove = Math.max(height - yAbove, 0);
if (overflowBelow > 0 || overflowAbove > 0) { if (overflowBelow > 0 || overflowAbove > 0) {
if (overflowBelow < overflowAbove) { if (overflowBelow < overflowAbove) {
height = Math.max(height - overflowBelow, 0); height = Math.max(height - overflowBelow, 0);
y = yBelow;
} else {
height = Math.max(height - overflowAbove, 0);
y = Math.max(yAbove - height, 0);
}
} else {
y = yBelow; y = yBelow;
} else {
height = Math.max(height - overflowAbove, 0);
y = Math.max(yAbove - height, 0);
} }
} else {
y = yBelow;
}
this.showAt({x, y, width, height}); this.container.style.left = `${x}px`;
this.container.style.top = `${y}px`;
this.container.style.width = `${width}px`;
this.container.style.height = `${height}px`;
this.container.style.visibility = 'visible';
});
} }
hide() { hide() {
@ -97,16 +95,22 @@ class Popup {
return this.injected && this.container.style.visibility !== 'hidden'; return this.injected && this.container.style.visibility !== 'hidden';
} }
showTermDefs(definitions, options, context) { showTermDefs(elementRect, definitions, options, context) {
this.invokeApi('showTermDefs', {definitions, options, context}); this.show(elementRect, options).then(() => {
this.invokeApi('showTermDefs', {definitions, options, context});
});
} }
showKanjiDefs(definitions, options, context) { showKanjiDefs(elementRect, definitions, options, context) {
this.invokeApi('showKanjiDefs', {definitions, options, context}); this.show(elementRect, options).then(() => {
this.invokeApi('showKanjiDefs', {definitions, options, context});
});
} }
showOrphaned() { showOrphaned(elementRect, options) {
this.invokeApi('showOrphaned'); this.show(elementRect, options).then(() => {
this.invokeApi('showOrphaned');
});
} }
invokeApi(action, params={}) { invokeApi(action, params={}) {