diff options
| -rw-r--r-- | ext/fg/js/driver.js | 21 | ||||
| -rw-r--r-- | ext/fg/js/popup.js | 112 |
2 files changed, 71 insertions, 62 deletions
diff --git a/ext/fg/js/driver.js b/ext/fg/js/driver.js index fddfbc29..fbe89ab8 100644 --- a/ext/fg/js/driver.js +++ b/ext/fg/js/driver.js @@ -153,9 +153,12 @@ window.driver = new class { const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt); const url = window.location.href; - - this.popup.showNextTo(textSource.getRect(), this.options); - this.popup.showTermDefs(definitions, this.options, {sentence, url}); + this.popup.showTermDefs( + textSource.getRect(), + definitions, + this.options, + {sentence, url} + ); this.lastTextSource = textSource; if (this.options.scanning.selectText) { @@ -176,9 +179,12 @@ window.driver = new class { } else { const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt); const url = window.location.href; - - this.popup.showNextTo(textSource.getRect(), this.options); - this.popup.showKanjiDefs(definitions, this.options, {sentence, url}); + this.popup.showKanjiDefs( + textSource.getRect(), + definitions, + this.options, + {sentence, url} + ); this.lastTextSource = textSource; if (this.options.scanning.selectText) { @@ -204,8 +210,7 @@ window.driver = new class { handleError(error, textSource) { if (window.orphaned) { if (textSource && this.options.scanning.requireShift) { - this.popup.showNextTo(textSource.getRect(), this.options); - this.popup.showOrphaned(); + this.popup.showOrphaned(textSource.getRect(), this.options); } } else { window.alert(`Error: ${error}`); diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 210a3688..cd7e846a 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -26,67 +26,65 @@ class Popup { this.container.setAttribute('src', chrome.extension.getURL('/fg/frame.html')); this.container.style.width = '0px'; this.container.style.height = '0px'; - this.injected = false; + this.injected = null; } inject() { if (!this.injected) { - document.body.appendChild(this.container); - this.injected = true; + this.injected = new Promise((resolve, reject) => { + this.container.addEventListener('load', resolve); + document.body.appendChild(this.container); + }); } - } - - showAt(rect) { - this.inject(); - this.container.style.left = `${rect.x}px`; - this.container.style.top = `${rect.y}px`; - this.container.style.height = `${rect.height}px`; - this.container.style.width = `${rect.width}px`; - this.container.style.visibility = 'visible'; + return this.injected; } - showNextTo(elementRect, options) { - this.inject(); - - const containerStyle = window.getComputedStyle(this.container); - const containerHeight = parseInt(containerStyle.height); - const containerWidth = parseInt(containerStyle.width); - - const limitX = document.body.clientWidth; - const limitY = window.innerHeight; - - 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; + show(elementRect, options) { + return this.inject().then(() => { + const containerStyle = window.getComputedStyle(this.container); + const containerHeight = parseInt(containerStyle.height); + const containerWidth = parseInt(containerStyle.width); + + const limitX = document.body.clientWidth; + const limitY = window.innerHeight; + + 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 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) { - if (overflowBelow < overflowAbove) { - height = Math.max(height - overflowBelow, 0); - y = yBelow; + let y = 0; + 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) { + if (overflowBelow < overflowAbove) { + height = Math.max(height - overflowBelow, 0); + y = yBelow; + } else { + height = Math.max(height - overflowAbove, 0); + y = Math.max(yAbove - height, 0); + } } else { - height = Math.max(height - overflowAbove, 0); - y = Math.max(yAbove - height, 0); + y = yBelow; } - } 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() { @@ -97,16 +95,22 @@ class Popup { return this.injected && this.container.style.visibility !== 'hidden'; } - showTermDefs(definitions, options, context) { - this.invokeApi('showTermDefs', {definitions, options, context}); + showTermDefs(elementRect, definitions, options, context) { + this.show(elementRect, options).then(() => { + this.invokeApi('showTermDefs', {definitions, options, context}); + }); } - showKanjiDefs(definitions, options, context) { - this.invokeApi('showKanjiDefs', {definitions, options, context}); + showKanjiDefs(elementRect, definitions, options, context) { + this.show(elementRect, options).then(() => { + this.invokeApi('showKanjiDefs', {definitions, options, context}); + }); } - showOrphaned() { - this.invokeApi('showOrphaned'); + showOrphaned(elementRect, options) { + this.show(elementRect, options).then(() => { + this.invokeApi('showOrphaned'); + }); } invokeApi(action, params={}) { |